@import url('fonts.googleapis.com/css?family=Overpass+Mono:600|Raleway:400,700');
@import “foundation.min.css”; @import “normalize”; @import “highlight”;
$green: #3DD4B5;
html {
ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; -webkit-box-sizing: border-box; box-sizing: border-box; overflow-x: hidden;
}
body {
margin: 0px; font: 16px/1.8 "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #FFF; font-weight: normal; background: #14242A;
}
h1, h2, h3, h4, h5, h6 {
margin: 2rem 0 1rem; font-weight: bold;
}
h1, h2 {
margin-top: 5rem; text-align: center;
}
p, ul, ol, table, pre, dl {
margin:0 0 20px;
}
h1 {
font-size:28px;
}
h2 {
font-size: 24px;
}
h3 {
font-size: 20px;
}
a {
color: $green; text-decoration: none; transition: color ease .2s; &:hover { text-decoration: underline; }
}
p strong {
color: #FFE566
}
code {
font-family: 'Overpass Mono', monospace; color:#efefef; font-size: 16px; margin: 0 4px; padding: 4px 6px; border-radius: 2px;
}
pre {
padding: 18px 25px; background: #1A2D34; border-radius: 4px; // border: 2px solid #3BD4B5; overflow: auto; overflow-y: hidden; code { color: #efefef; margin: 0; padding: 0; }
}
table {
width:100%; border-collapse:collapse;
}
th {
text-align:left; padding:5px 10px; border-bottom:1px solid #434343; font-weight: normal;
}
td {
text-align:left; padding:5px 10px; border-bottom:1px solid #434343;
}
hr {
border: 0; outline: none; height: 3px; margin: 0 0 20px; border-bottom: 1px solid #fff;
}
dt {
color:#F0E7D5; font-family: 'OpenSansSemibold', "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: normal;
}
.content {
margin-top: 4rem;
}
header {
margin-top: 4rem; .menu { display: flex; justify-content: space-between; .icon { margin-left: 1rem; } }
}
.menu {
margin: 0; padding: 0; list-style: none; a { color: white; &:hover { color: $green; text-decoration: none; } }
}
.intro {
font-size: 31px; margin-top: 8rem; margin-bottom: 4rem; text-align: center; line-height: 1.4; strong { color: $green; }
}
.blinking-cursor {
fill: $green; animation: 1s blink step-end infinite;
}
@keyframes blink {
from, to { fill: transparent; } 50% { fill: $green; }
}
footer {
margin-top: 5rem; background-color: #0E1B20; padding: 3rem 0; font-size: 15px;
}
.text-right {
text-align: right;
}