This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import "../../bower_components/normalize.css/normalize.css"; | |
@import "../../node_modules/normalize-opentype/normalize-opentype.scss"; | |
@import "partials/_Transitions"; | |
@import "partials/_Photo"; | |
$lemonde: 'lemonde-courrier'; | |
$effra: 'Effra W01'; | |
$amasistext: 'Amasis eText W01'; | |
$silica: 'Silica W00'; | |
$headline: $silica; | |
$sans: $effra; | |
$serif: $amasistext; | |
$s0: 0.719rem; | |
$s1: 1.017rem; | |
$s2: 1.414rem; | |
$s3: 1.999rem; | |
$s4: 2.827rem; | |
$s5: 3.998rem; | |
$black: #231F20; | |
$white: #FFFFFA; | |
$light: #BBBDC0; | |
$grey: #666; | |
$accent: #F05A28; | |
$text: $black; | |
*, *:before, *:after { box-sizing: border-box; } | |
html, body { | |
width: 100%; | |
height: 100%; | |
} | |
html { | |
background-color: $white; | |
} | |
body { | |
font-size: 16px; | |
font-family: $sans; | |
color: $text; | |
} | |
#entry { | |
position: relative; | |
z-index: 1; | |
} | |
.fullscreen { | |
position: fixed; | |
width: 100%; | |
height: 100%; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
// opacity: 0.2; | |
} | |
.hr { | |
border-bottom: 1px solid rgba(#000,0.1); | |
margin: 40px -100px; | |
} | |
h1, h2, h3, h4, h5, h6, p, ul, li { | |
padding: 0; | |
margin: 0; | |
} | |
ul { | |
list-style-type: none; | |
} | |
header { | |
h1 { | |
color: $accent; | |
font-size: (76/16)+rem; | |
font-weight: 900; | |
font-style: normal; | |
font-family: $headline; | |
line-height: 1.125; | |
white-space: nowrap; | |
letter-spacing: -1px; | |
display: block; | |
margin-left: -3px; | |
} | |
em { | |
white-space: nowrap; | |
font-size: (33/16)+rem; | |
font-family: $sans; | |
font-weight: 100; | |
font-style: normal; | |
display: block; | |
// margin-top: -$s3; | |
} | |
} | |
h2 { | |
font-weight: 400; | |
font-size: $s1; | |
} | |
h3 { | |
font-family: $serif; | |
// font-style: italic; | |
font-weight: 100; | |
font-size: $s1*1.25; | |
color: $accent; | |
margin-bottom: .5rem; | |
} | |
h4 { | |
@extend .job-date; | |
} | |
.container { | |
// margin: 0 auto; | |
max-width: (600/16)+rem; | |
padding: $s3; | |
} | |
.Page { | |
@extend .container; | |
} | |
#App { | |
@extend .Page; | |
padding: $s5*1.25; | |
transform: scale(1.1) translateY(5.5%); | |
transition: transform .5s ease-in-out; | |
position: relative; | |
} | |
header { | |
position: relative; | |
margin-bottom: $s2; | |
#contact { | |
position: absolute; | |
top: 0; | |
left: -180px; | |
text-align: right; | |
} | |
a, li { font-family: $serif } | |
a { | |
color: $grey; | |
text-decoration: none; | |
&:hover { text-decoration: underline } | |
} | |
} | |
.Experience { | |
margin: $s4 0; | |
&:first-of-type { | |
margin-top: 0; | |
} | |
} | |
.job-summary { | |
margin-bottom: $s1; | |
p { | |
line-height: 1.5; | |
font-size: (18/16)+rem; | |
font-weight: 200; | |
font-family: $serif; | |
} | |
} | |
#contact { | |
display: none; | |
} | |
.job-titles { | |
font-weight: 300; | |
font-size: (24/16)+rem; | |
padding: 0.25rem 0; | |
font-family: $serif; | |
} | |
.job-title { | |
&:after { | |
content: ' & ' | |
} | |
& + .job-title { | |
&:after { | |
content: '' | |
} | |
} | |
} | |
.job-with { | |
font-family: $serif; | |
font-style: italic; | |
font-weight: normal; | |
font-size: $s0; | |
} | |
.job-company { | |
font-size: $s1; | |
font-weight: 500; | |
} | |
.job-date { | |
margin-bottom: 0.5rem; | |
text-transform: uppercase; | |
font-weight: 500; | |
font-size: (14/16)+rem; | |
letter-spacing: 2px; | |
color: $light; | |
font-family: $sans; | |
} | |
.job-skills { | |
ul { column-count: 3 } | |
} | |
.job-skill { | |
font-family: $sans; | |
font-weight: 400; | |
font-size: (12/16)+rem; | |
line-height: (21/16)+rem; | |
} | |
#Skills { | |
column-count: 3; | |
} | |
.education-date { | |
@extend h4; | |
} | |
.education-school { | |
@extend h2; | |
margin-bottom: 0.5rem; | |
} | |
// /* Medium screens (640px) */ | |
// @media (min-width: 640px) { | |
// #App { | |
// transform: scale(1.2) translateY(10%); | |
// } | |
// } | |
// /* Large screens (1024px) */ | |
// @media (min-width: 1024px) { | |
// #App { | |
// transform: scale(1.3) translateY(17%); | |
// } | |
// } | |
// /* XL */ | |
// @media (min-width: 1280px) { | |
// #App { | |
// transform: scale(1.4) translateY(19%); | |
// } | |
// } | |
#top, #bottom, #left, #right { | |
position: fixed; | |
z-index: 1000; | |
background: white; | |
border-color: rgba(#000,0.2) !important; | |
} | |
#top { | |
border-bottom: 1px solid $accent; | |
padding-top: (5/16)+rem; | |
top: 0; left: 0; right: 0; | |
} | |
#right { | |
border-left: 1px solid $accent; | |
padding-right: (5/16)+rem; | |
top: 0; bottom: 0; right: 0; | |
} | |
#bottom { | |
border-top: 1px solid $accent; | |
padding-bottom: (5/16)+rem; | |
bottom: 0; right: 0; left: 0; | |
} | |
#left { | |
border-right: 1px solid $accent; | |
padding-left: (5/16)+rem; | |
left: 0; top: 0; bottom: 0; | |
} | |
.hide { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment