Prevent overflow into dates (#245)

Previously "MAI in Mechanical Engineering" would overflow
into "2014 - 2019" at certain resolutions (iPads) as the
'time' <div> is not separated from <h3> or 'degree'.
Now they are in separate containers using the 'flex'
css attribute to in the parent <div> and in both elements
to keep them in two columns
This commit is contained in:
Rowan Molony 2023-02-07 12:39:42 +00:00 committed by GitHub
parent 78bb1e6580
commit 0d8fce9100
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -186,6 +186,7 @@ p {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
margin-bottom: 2px; margin-bottom: 2px;
display: flex;
} }
.job-title, .job-title,
.degree { .degree {
@ -194,12 +195,14 @@ p {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-weight: 500; font-weight: 500;
flex: 75%;
} }
.time { .time {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
color: $text-grey; color: $text-grey;
flex: 25%;
} }
.company, .company,
.university { .university {