kcv-theme-uppsala
Version:
Uppsala theme for JSON Resume
386 lines (234 loc) • 6.38 kB
CSS
* {
padding: 0;
margin: 0;
font-family: 'Roboto', sans-serif;
color: #5D5D5D;
}
body, html {
background-color: #FFFFFF;
line-height: 1.65;
}
strong {
font-weight: 500;
}
h1,
h2 {
color: #0177B4;
}
section {
margin: 50px 0;
}
section h1 {
font-weight: 400;
}
@media only screen and ( max-device-width: 640px ) {
.mobile-hide {
display: none;
}
.mobile-break {
display: block;
}
section {
margin: 30px 0;
}
}
.mobile-clearfix:before,
.mobile-clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.mobile-clearfix:after {
clear: both;
}
#header {
background-color: #f8f8f8;
}
#header .inner {
max-width: 720px;
margin: 0 auto;
padding: 50px 0;
}
#header .inner .picture {
width: 110px;
height: 110px;
border-radius: 55px;
float: right;
margin: -9px 0 0 0;
}
#header .inner .name-and-label {
display: inline-block;
}
#header .inner h1 {
font-weight: 200;
font-size: 38px;
color: #0177B4;
}
#header .inner h2 {
font-weight: 300;
color: #0177B4;
margin-top: -10px;
}
@media only screen and ( max-device-width: 640px ) {
#header .inner {
max-width: 100%;
padding: 20px 15px;
}
#header .inner .picture {
width: 60px;
height: 60px;
border-radius: 30px;
margin: 0;
}
#header .inner h1 {
font-size: 24px
}
#header .inner h2 {
font-size: 16px
}
}
#resume {
margin: 0 auto;
max-width: 720px;
padding: 0 5px 0 15px;
}
#basics { }
#basics .contact {
margin-left: 0px;
}
#basics .contact strong,
#location strong {
clear: both;
float: left;
line-height: 1.3;
width: 170px;
}
@media only screen and ( max-device-width: 640px ) {
#basics .contact strong,
#location strong {
display: inline-block;
line-height: 1.65;
width: auto;
float: none;
}
}
#work,
#volunteer,
#education,
#awards,
#publications,
#skill,
#interests {}
#work .item:not(:first-of-type),
#volunteer .item:not(:first-of-type),
#awards .item:not(:first-of-type),
#publications .item:not(:first-of-type) {
margin-top: 50px
}
#work .name,
#volunteer .name,
#education .studyType,
#awards .title,
#publications .name,
#skills .name,
#languages .language,
#references .name,
#interests .name {
font-weight: 500;
display: inline-block;
}
#interests .name:nth-of-type(2n+2) {
text-align: center;
}
#interests .name:nth-of-type(3n+3) {
text-align: right;
}
#work .date,
#volunteer .date,
#education .date,
#awards .date,
#publications .releaseDate {
float: right;
}
#work .highlights,
#volunteer .highlights,
#education .courses,
#skills .keywords {
padding-left: 25px;
margin-top: 5px;
}
#work .highlights li,
#volunteer .highlights li,
#education .courses li,
#skills .keywords li {
margin-top: 1px;
}
#interests .keywords li {
display: inline-block;
}
#interests .item {
max-width: 204px;
text-align: justify;
display: inline-block;
margin-right: 0px;
}
#skills .item,
#interests .item:not(:nth-of-type(3n+3)) {
display: inline-block;
vertical-align: top;
margin-right: 50px;
}
#skills .level {
margin-top: -7px;
}
#education .item,
#languages .item {
margin-bottom: 5px;
}
.date,
#languages .fluency {
font-style: italic;
}
@media only screen and ( max-device-width: 640px ) {
#work .position {
font-size: 15px;
font-style: italic;
}
#work .date {
font-size: 15px;
float: none;
margin-top: -8px;
display: block;
font-style: normal;
margin-bottom: 10px;
}
#work .item:not(:first-of-type),
#volunteer .item:not(:first-of-type),
#awards .item:not(:first-of-type),
#publications .item:not(:first-of-type) {
margin-top: 30px
}
#education .institution {
display: inline-block
}
#education .item:not(:last-of-type) {
margin-bottom: 20px;
}
#interests .item {
max-width: none;
text-align: inherit;
margin-right: 0 ;
}
#interests .item:not(:last-of-type),
#skills .item:not(:last-of-type) {
margin-bottom: 20px;
}
}
#footer {
background: #f8f8f8;
margin: 0;
}
#footer .inner {
width: 720px;
padding: 50px 5px;
margin: 0 auto;
}