|
|
|
|
|
|
|
|
|
|
|
|
|
body.landing { |
|
header { |
|
max-width: 800px; |
|
margin: auto; |
|
margin-top: 30px; |
|
margin-bottom: 20px; |
|
text-align: center; |
|
img.logo { |
|
width: 178px; |
|
} |
|
.title { |
|
color: #222; |
|
font-weight: 600; |
|
font-size: 50px; |
|
margin-bottom: 10px; |
|
} |
|
.tagline { |
|
color: #9F9F9F; |
|
font-weight: 600; |
|
font-size: 26px; |
|
margin-bottom: 10px; |
|
} |
|
} |
|
|
|
.container { |
|
margin-left: auto; |
|
margin-right: auto; |
|
max-width: 560px; |
|
} |
|
|
|
div.section-models { |
|
margin-bottom: 50px; |
|
.description { |
|
a { |
|
color: inherit; |
|
} |
|
} |
|
.github-repo { |
|
text-align: center; |
|
margin-top: 20px; |
|
margin-bottom: 40px; |
|
} |
|
div.title-section { |
|
color: #222; |
|
font-weight: 600; |
|
font-size: 34px; |
|
margin-bottom: 10px; |
|
text-align: center; |
|
} |
|
.quote { |
|
color: #9F9F9F; |
|
font-weight: 600; |
|
font-size: 24px; |
|
margin-bottom: 10px; |
|
border-left: 4px solid #ec8cff; |
|
padding: 2px 14px; |
|
max-width: 380px; |
|
margin: auto; |
|
margin-top: 48px; |
|
} |
|
} |
|
|
|
div.section-footer { |
|
.clearfix(); |
|
background-color: #f7fbfb; |
|
padding-top: 80px; |
|
padding-bottom: 90px; |
|
.title { |
|
font-size: 14px; |
|
letter-spacing: 0.3px; |
|
text-transform: uppercase; |
|
text-align: center; |
|
} |
|
ul.documents { |
|
list-style-type: none; |
|
padding: 0; |
|
a { |
|
color: #696969; |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
div.model { |
|
border-radius: 5px; |
|
box-shadow: 0 10px 25px 0 rgba(50,94,128,.2); |
|
padding: 18px 26px; |
|
border: 1px solid #e6e6e6; |
|
background-image: linear-gradient(136deg, #F8F8F8 29%, #ffffff 74%, #fafafa 100%); |
|
margin-top: 20px; |
|
margin-bottom: 72px; |
|
a { |
|
color: inherit; |
|
} |
|
.model-title { |
|
font-size: 20px; |
|
font-weight: 600; |
|
&::first-letter { |
|
font-size: 30px; |
|
vertical-align: middle; |
|
} |
|
} |
|
.model-details { |
|
color: #666; |
|
font-size: 15px; |
|
} |
|
.model-bottom { |
|
.clearfix(); |
|
} |
|
a.btn { |
|
float: right; |
|
margin-left: 10px; |
|
border-radius: 6px; |
|
padding: 5px 10px; |
|
color: white; |
|
background-color: grey; |
|
&.btn-primary { |
|
background-color: #40bf0e; |
|
} |
|
&.btn-details { |
|
background-color: #c388ef; |
|
} |
|
position: relative; |
|
&:active { |
|
top: 1px; |
|
} |
|
&:hover { |
|
opacity: 0.7; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
body.model { |
|
header { |
|
padding-top: 80px; |
|
text-align: center; |
|
img.logo-collab { |
|
height: 100px; |
|
&.logo-uber { |
|
height: 50px; |
|
vertical-align: 20px; |
|
} |
|
} |
|
img.cross { |
|
height: 50px; |
|
margin: 0 32px; |
|
vertical-align: 20px; |
|
} |
|
} |
|
.container { |
|
margin-left: auto; |
|
margin-right: auto; |
|
max-width: 560px; |
|
padding-top: 100px; |
|
padding-bottom: 200px; |
|
} |
|
a.back { |
|
font-size: 15px; |
|
img { |
|
margin-right: 1px; |
|
width: 12px; |
|
} |
|
} |
|
.model-title { |
|
color: #222; |
|
font-weight: 600; |
|
font-size: 36px; |
|
&::first-letter { |
|
font-size: 42px; |
|
vertical-align: middle; |
|
} |
|
} |
|
.github-repo { |
|
margin-top: 6px; |
|
margin-bottom: 20px; |
|
transform: scale(0.7) translateX(-85px); |
|
} |
|
.model-bottom { |
|
.clearfix(); |
|
margin-top: 52px; |
|
text-align: center; |
|
} |
|
a.btn { |
|
border-radius: 8px; |
|
padding: 10px 32px; |
|
font-size: 20px; |
|
color: white; |
|
background-color: grey; |
|
&.btn-primary { |
|
background-color: #40bf0e; |
|
} |
|
&.btn-details { |
|
background-color: #c388ef; |
|
} |
|
position: relative; |
|
&:active { |
|
top: 1px; |
|
} |
|
&:hover { |
|
opacity: 0.7; |
|
} |
|
} |
|
} |
|
|