Migrate to Bootstrap v4.4

This commit is contained in:
Rafael Bardini 2020-03-08 14:28:50 +01:00
parent c86223f7b3
commit e4022aea32
2 changed files with 31 additions and 41 deletions

View File

@ -6,7 +6,7 @@
<meta name="description" content="{{#resume.basics}}{{summary}}{{/resume.basics}}" /> <meta name="description" content="{{#resume.basics}}{{summary}}{{/resume.basics}}" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<style> <style>
{{{css}}} {{{css}}}
</style> </style>
@ -15,7 +15,7 @@
<header id="header"> <header id="header">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-9 col-sm-push-3"> <div class="col-sm-9 offset-sm-3">
{{#resume.basics}} {{#resume.basics}}
{{#name}} {{#name}}
<h1>{{.}}</h1> <h1>{{.}}</h1>
@ -127,7 +127,7 @@
</span> </span>
</h4> </h4>
{{#url}} {{#url}}
<div class="website pull-right"> <div class="website float-right">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}
@ -172,7 +172,7 @@
</span> </span>
</h4> </h4>
{{#url}} {{#url}}
<div class="website pull-right"> <div class="website float-right">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}
@ -217,7 +217,7 @@
</span> </span>
</h4> </h4>
{{#url}} {{#url}}
<div class="website pull-right"> <div class="website float-right">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}
@ -262,7 +262,7 @@
</span> </span>
</h4> </h4>
{{#url}} {{#url}}
<div class="website pull-right"> <div class="website float-right">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}
@ -306,7 +306,7 @@
<span>{{title}}</span> <span>{{title}}</span>
</h4> </h4>
{{#date}} {{#date}}
<div class="date pull-right"> <div class="date float-right">
<em>Awarded</em> <em>Awarded</em>
{{formatDate .}} {{formatDate .}}
</div> </div>
@ -345,7 +345,7 @@
</span> </span>
</h4> </h4>
{{#url}} {{#url}}
<div class="website pull-right"> <div class="website float-right">
<a href="{{.}}">{{.}}</a> <a href="{{.}}">{{.}}</a>
</div> </div>
{{/url}} {{/url}}

View File

@ -4,10 +4,13 @@
font-weight: normal; font-weight: normal;
src: url("data:font/woff;base64,d09GRgABAAAAAAWgAAsAAAAABVQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIMrGNtYXAAAAFoAAAAXAAAAFzxE/EEZ2FzcAAAAcQAAAAIAAAACAAAABBnbHlmAAABzAAAAXwAAAF8tFkZ3GhlYWQAAANIAAAANgAAADYYMkpraGhlYQAAA4AAAAAkAAAAJAfBA8dobXR4AAADpAAAABgAAAAYDAAAAWxvY2EAAAO8AAAADgAAAA4A5gBgbWF4cAAAA8wAAAAgAAAAIAAKAFBuYW1lAAAD7AAAAZIAAAGSxxxndHBvc3QAAAWAAAAAIAAAACAAAwAAAAMCqwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NcDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAEAIPBS8Nf//f//AAAAAAAg8FLw1//9//8AAf/jD7IPLgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAwAIAAsAAGwAAEzQ3PgE3NjMyFx4BFxYVFAcOAQcGIyInLgEnJgAUFEYvLjU1Li9GFBQUFEYvLjU1Li9GFBQBwDUuL0YUFBQURi8uNTUuL0YUFBQURi8uAAMAAQCZA/8DDgAzAEEATQAAAQcFHgEVFAYHBQYiJyUVHgEVFAYHHgEdARQiPQE0NjcuATU0Njc1Jy4BNTQ2NyUyNjMyFgEXIxYyPwEVFAYjIiY1ExQWMzI2NTQmIyIGAgcBAekHCQkH/hcDBwP+xw4SBQQEBYAFBAQFEg5vBwkJBwHpAgMCAQT++vUBBgwF9ZZqapbBJhobJSUbGiYDDQGZAgwHCAwCmAEBYl0IHRIJEAcHEAmlGhqlCRAHBxAJER4IcSQCCwgICwKZAQH+s0wCAkygMDAwMAFADRMTDQ0TEwAAAAEAAAABAADtMnsXXw889QALBAAAAAAA2oqDMAAAAADaioMwAAAAAAP/Aw4AAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA/8AAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAAAgAAAAQAAAEAAAAAAAoAFAAeAEwAvgAAAAEAAAAGAE4AAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNSZWd1bGFyAFIAZQBnAHUAbABhAHJvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") format("woff"); src: url("data:font/woff;base64,d09GRgABAAAAAAWgAAsAAAAABVQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIMrGNtYXAAAAFoAAAAXAAAAFzxE/EEZ2FzcAAAAcQAAAAIAAAACAAAABBnbHlmAAABzAAAAXwAAAF8tFkZ3GhlYWQAAANIAAAANgAAADYYMkpraGhlYQAAA4AAAAAkAAAAJAfBA8dobXR4AAADpAAAABgAAAAYDAAAAWxvY2EAAAO8AAAADgAAAA4A5gBgbWF4cAAAA8wAAAAgAAAAIAAKAFBuYW1lAAAD7AAAAZIAAAGSxxxndHBvc3QAAAWAAAAAIAAAACAAAwAAAAMCqwGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NcDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAEAIPBS8Nf//f//AAAAAAAg8FLw1//9//8AAf/jD7IPLgADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAwAIAAsAAGwAAEzQ3PgE3NjMyFx4BFxYVFAcOAQcGIyInLgEnJgAUFEYvLjU1Li9GFBQUFEYvLjU1Li9GFBQBwDUuL0YUFBQURi8uNTUuL0YUFBQURi8uAAMAAQCZA/8DDgAzAEEATQAAAQcFHgEVFAYHBQYiJyUVHgEVFAYHHgEdARQiPQE0NjcuATU0Njc1Jy4BNTQ2NyUyNjMyFgEXIxYyPwEVFAYjIiY1ExQWMzI2NTQmIyIGAgcBAekHCQkH/hcDBwP+xw4SBQQEBYAFBAQFEg5vBwkJBwHpAgMCAQT++vUBBgwF9ZZqapbBJhobJSUbGiYDDQGZAgwHCAwCmAEBYl0IHRIJEAcHEAmlGhqlCRAHBxAJER4IcSQCCwgICwKZAQH+s0wCAkygMDAwMAFADRMTDQ0TEwAAAAEAAAABAADtMnsXXw889QALBAAAAAAA2oqDMAAAAADaioMwAAAAAAP/Aw4AAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA/8AAQAAAAAAAAAAAAAAAAAAAAYEAAAAAAAAAAAAAAACAAAAAgAAAAQAAAEAAAAAAAoAFAAeAEwAvgAAAAEAAAAGAE4AAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAIAAAAAQAAAAAAAgAHAGkAAQAAAAAAAwAIADkAAQAAAAAABAAIAH4AAQAAAAAABQALABgAAQAAAAAABgAIAFEAAQAAAAAACgAaAJYAAwABBAkAAQAQAAgAAwABBAkAAgAOAHAAAwABBAkAAwAQAEEAAwABBAkABAAQAIYAAwABBAkABQAWACMAAwABBAkABgAQAFkAAwABBAkACgA0ALBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNWZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNSZWd1bGFyAFIAZQBnAHUAbABhAHJvY3RpY29ucwBvAGMAdABpAGMAbwBuAHNGb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA") format("woff");
} }
html {
font-size: 14px;
}
body { body {
background: #fff; background: #fff;
font-family: Lato, sans-serif; font-family: Lato, sans-serif;
margin: 0 0 80px; margin: 0 0 6rem;
} }
a { a {
color: #2ecc71; color: #2ecc71;
@ -17,21 +20,8 @@ a:hover {
color: #f1c40f; color: #f1c40f;
text-decoration: none; text-decoration: none;
} }
p {
line-height: 1.5;
margin: 0;
}
p + p {
margin-top: 10px;
}
h1,
h2,
h3,
h4 {
margin-top: 0
}
section { section {
margin-top: 30px; margin-top: 2rem;
} }
li { li {
line-height: 1.8; line-height: 1.8;
@ -48,7 +38,7 @@ li:before {
} }
blockquote { blockquote {
border-left: 5px solid #e7e9ec; border-left: 5px solid #e7e9ec;
font-size: 14px; font-size: 1rem;
} }
em { em {
color: #95a5a6; color: #95a5a6;
@ -56,21 +46,20 @@ em {
font-style: normal; font-style: normal;
} }
h4 span:first-child { h4 span:first-child {
color: #000;
font-weight: bold; font-weight: bold;
} }
.container { .container {
max-width: 750px; max-width: 750px;
padding: 0 30px; padding: 0 2rem;
} }
.col-sm-6 { .col-sm-6 {
margin-bottom: 10px; margin-bottom: 10px;
} }
.col-sm-12 h4 { .col-sm-12 h4 {
margin-top: 12px; margin-top: 1rem;
} }
.col-sm-12 + .col-sm-12 { .col-sm-12 + .col-sm-12 {
margin-top: 30px; margin-top: 2rem;
} }
.keywords { .keywords {
padding: 0; padding: 0;
@ -86,21 +75,18 @@ h4 span:first-child {
} }
#header { #header {
background: #f4f6f6; background: #f4f6f6;
padding: 50px 0; padding: 4rem 0;
margin-bottom: 30px; margin-bottom: 4rem;
} }
#header h2 { #header h2 {
color: #95a5a6; color: #95a5a6;
font-size: 24px;
} }
#content h3 { #content h3 {
color: #f1c40f; color: #f1c40f;
font-size: 26px;
margin-top: -4px;
} }
#content aside { #content aside {
text-align: right; text-align: right;
padding-right: 30px; padding-right: 2rem;
} }
#work .position, #work .position,
#volunteer .position { #volunteer .position {
@ -127,6 +113,14 @@ h4 span:first-child {
#publications .website a:before { #publications .website a:before {
content: attr(href); content: attr(href);
} }
#interests .row,
#skills .row {
display: block;
}
#interests .col-sm-6,
#skills .col-sm-6 {
float: left;
}
@media (min-width: 480px) { @media (min-width: 480px) {
.strike-through { .strike-through {
@ -146,7 +140,7 @@ h4 span:first-child {
margin-top: -12px; margin-top: -12px;
} }
.strike-through span + span { .strike-through span + span {
font-size: 14px; font-size: 1rem;
margin-top: -10px; margin-top: -10px;
padding-left: 20px; padding-left: 20px;
right: 0; right: 0;
@ -154,7 +148,7 @@ h4 span:first-child {
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.col-sm-6:last-child { .col-sm-6:last-child {
margin-bottom: 0px; margin-bottom: 0;
} }
#content aside { #content aside {
margin-bottom: 20px; margin-bottom: 20px;
@ -166,12 +160,8 @@ h4 span:first-child {
} }
} }
@media (max-width: 480px) { @media (max-width: 480px) {
h1 {
font-size: 26px;
}
.date { .date {
font-size: 14px; font-size: 1rem;
margin-bottom: 5px;
} }
.strike-through span:first-child { .strike-through span:first-child {
margin-bottom: 7px; margin-bottom: 7px;