536 lines
9.6 KiB
SCSS
536 lines
9.6 KiB
SCSS
// ------------------------------
|
|
// BASICS
|
|
// ------------------------------
|
|
|
|
html, body {
|
|
height: 100%;
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: $sans-font;
|
|
font-size: 1em;
|
|
color: $gray-darker;
|
|
}
|
|
|
|
::selection {
|
|
background: lighten($primary-color, 36%);
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: lighten($primary-color, 36%);
|
|
}
|
|
|
|
// ------------------------------
|
|
// TYPOGRAPHY
|
|
// ------------------------------
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: $link-color;
|
|
|
|
&:hover {
|
|
color: $hover-color;
|
|
-o-transition:.5s;
|
|
-ms-transition:.5s;
|
|
-moz-transition:.5s;
|
|
-webkit-transition:.5s;
|
|
}
|
|
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h5 {
|
|
margin-top: .8em;
|
|
margin-bottom: .4em;
|
|
font-family: $serif-font;
|
|
font-weight: lighter;
|
|
color: $gray-darkest;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
font-size: 3.2em;
|
|
line-height: 1.2em;
|
|
letter-spacing: .05em;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 2.2em;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
p {
|
|
margin-bottom: 1.3em;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 1em 0;
|
|
padding: 2em 0;
|
|
background: $gray-lightest;
|
|
border: 1px solid $gray-lighter;
|
|
border-radius: $border-radius;
|
|
font-family: $serif-font;
|
|
font-weight: lighter;
|
|
font-style: italic;
|
|
font-size: 1.3em;
|
|
text-align: center;
|
|
|
|
p {
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ------------------------------
|
|
// BASIC STYLING
|
|
// ------------------------------
|
|
|
|
ol, ul {
|
|
margin: 0 0 1.3em 2.5em;
|
|
|
|
li {
|
|
margin: 0 0 .2em 0;
|
|
line-height: 1.6em;
|
|
}
|
|
|
|
ol, ul {
|
|
margin: .1em 0 .2em 2em;
|
|
}
|
|
|
|
}
|
|
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
code {
|
|
padding: .1em .4em;
|
|
background: lighten($secondary-color, 32%);
|
|
border: 1px solid lighten($secondary-color, 25%);
|
|
border-radius: $border-radius;
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
font-size: .85em;
|
|
}
|
|
|
|
pre {
|
|
margin-bottom: 1.3em;
|
|
padding: 1em 2.5%;
|
|
background: lighten($secondary-color, 32%);
|
|
border: 1px solid lighten($secondary-color, 25%);
|
|
border-radius: $border-radius;
|
|
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
|
|
font-size: .9em;
|
|
font-weight: normal;
|
|
line-height: 1.3em;
|
|
overflow-y: auto;
|
|
|
|
code {
|
|
padding: 0;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
|
|
}
|
|
|
|
.date,
|
|
.time,
|
|
.author,
|
|
.tags {
|
|
font-size: .8em;
|
|
color: darken($gray, 2%);
|
|
|
|
a {
|
|
color: $gray-darker;
|
|
|
|
&:hover {
|
|
color: $hover-color;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.excerpt {
|
|
margin: 0;
|
|
font-size: .9em;
|
|
color: $gray-dark;
|
|
}
|
|
|
|
.intro {
|
|
font-family: $serif-font;
|
|
font-size: 1.2em;
|
|
font-weight: lighter;
|
|
color: $gray-dark;
|
|
}
|
|
|
|
.block-heading {
|
|
@include column(12);
|
|
position: relative;
|
|
bottom: -15px;
|
|
font-size: .8em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.label {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 8px 18px 9px 18px;
|
|
background: $primary-color;
|
|
border-radius: $border-radius;
|
|
text-align: center;
|
|
color: #FFF;
|
|
}
|
|
|
|
// ------------------------------
|
|
// MAIN LAYOUT
|
|
// ------------------------------
|
|
|
|
.container {
|
|
position: relative;
|
|
z-index: 500;
|
|
width: $total-width - $gutter-width;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.content-wrapper {
|
|
z-index: 800;
|
|
width: 60%;
|
|
max-width: 800px;
|
|
margin-left: 40%;
|
|
}
|
|
|
|
.content-wrapper__inner {
|
|
margin: 0 10%;
|
|
padding: 50px 0;
|
|
}
|
|
|
|
.footer {
|
|
display: block;
|
|
padding: 2em 0 0 0;
|
|
border-top: 2px solid $gray-light;
|
|
font-size: .7em;
|
|
color: lighten($gray-dark, 10%);
|
|
}
|
|
|
|
.footer__copyright {
|
|
display: block;
|
|
margin-bottom: .7em;
|
|
|
|
a {
|
|
color: lighten($gray-dark, 5%);
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
color: $hover-color;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
// ------------------------------
|
|
// AVATAR & LOGO
|
|
// ------------------------------
|
|
|
|
.avatar,
|
|
.logo {
|
|
border-radius: 50%;
|
|
border: 3px solid #FFF;
|
|
box-shadow:0 0 1px 1px rgba(000,000,000,.3);
|
|
}
|
|
|
|
// ------------------------------
|
|
// DIVIDERS
|
|
// ------------------------------
|
|
|
|
hr {
|
|
border: none;
|
|
}
|
|
|
|
.section-title__divider {
|
|
width: 30%;
|
|
margin: 2.2em 0 2.1em 0;
|
|
border-top: 1px solid $gray-light;
|
|
}
|
|
|
|
// ------------------------------
|
|
// MISC STYLES / HELPERS
|
|
// ------------------------------
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
// ------------------------------
|
|
// Animations
|
|
// ------------------------------
|
|
|
|
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes flash {
|
|
0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;}
|
|
}
|
|
|
|
@-webkit-keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
|
|
40% {-webkit-transform: translateY(-30px);}
|
|
60% {-webkit-transform: translateY(-15px);}
|
|
}
|
|
|
|
@-moz-keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
|
|
40% {-moz-transform: translateY(-30px);}
|
|
60% {-moz-transform: translateY(-15px);}
|
|
}
|
|
|
|
@-o-keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
|
|
40% {-o-transform: translateY(-30px);}
|
|
60% {-o-transform: translateY(-15px);}
|
|
}
|
|
@keyframes bounce {
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
|
|
40% {transform: translateY(-30px);}
|
|
60% {transform: translateY(-15px);}
|
|
}
|
|
|
|
.bounce {
|
|
-webkit-animation-name: bounce;
|
|
-moz-animation-name: bounce;
|
|
-o-animation-name: bounce;
|
|
animation-name: bounce;
|
|
}
|
|
|
|
@-webkit-keyframes swing {
|
|
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
|
|
20% { -webkit-transform: rotate(15deg); }
|
|
40% { -webkit-transform: rotate(-10deg); }
|
|
60% { -webkit-transform: rotate(5deg); }
|
|
80% { -webkit-transform: rotate(-5deg); }
|
|
100% { -webkit-transform: rotate(0deg); }
|
|
}
|
|
|
|
@-moz-keyframes swing {
|
|
20% { -moz-transform: rotate(15deg); }
|
|
40% { -moz-transform: rotate(-10deg); }
|
|
60% { -moz-transform: rotate(5deg); }
|
|
80% { -moz-transform: rotate(-5deg); }
|
|
100% { -moz-transform: rotate(0deg); }
|
|
}
|
|
|
|
@-o-keyframes swing {
|
|
20% { -o-transform: rotate(15deg); }
|
|
40% { -o-transform: rotate(-10deg); }
|
|
60% { -o-transform: rotate(5deg); }
|
|
80% { -o-transform: rotate(-5deg); }
|
|
100% { -o-transform: rotate(0deg); }
|
|
}
|
|
|
|
@keyframes swing {
|
|
20% { transform: rotate(15deg); }
|
|
40% { transform: rotate(-10deg); }
|
|
60% { transform: rotate(5deg); }
|
|
80% { transform: rotate(-5deg); }
|
|
100% { transform: rotate(0deg); }
|
|
}
|
|
|
|
.swing {
|
|
-webkit-transform-origin: top center;
|
|
-moz-transform-origin: top center;
|
|
-o-transform-origin: top center;
|
|
transform-origin: top center;
|
|
-webkit-animation-name: swing;
|
|
-moz-animation-name: swing;
|
|
-o-animation-name: swing;
|
|
animation-name: swing;
|
|
}
|
|
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
|
|
|
|
@-webkit-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateX(2000px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.slideInRight {
|
|
-webkit-animation-name: slideInRight;
|
|
-moz-animation-name: slideInRight;
|
|
-o-animation-name: slideInRight;
|
|
animation-name: slideInRight;
|
|
}
|
|
|
|
.bounceIn {
|
|
-webkit-animation-name: bounceIn;
|
|
-moz-animation-name: bounceIn;
|
|
-o-animation-name: bounceIn;
|
|
animation-name: bounceIn;
|
|
}
|
|
|
|
@-webkit-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-webkit-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-moz-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-moz-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-moz-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-moz-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@-o-keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
-o-transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
-o-transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
-o-transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
-o-transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes bounceInDown {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-2000px);
|
|
}
|
|
|
|
60% {
|
|
opacity: 1;
|
|
transform: translateY(30px);
|
|
}
|
|
|
|
80% {
|
|
transform: translateY(-10px);
|
|
}
|
|
|
|
100% {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.bounceInDown {
|
|
-webkit-animation-name: bounceInDown;
|
|
-moz-animation-name: bounceInDown;
|
|
-o-animation-name: bounceInDown;
|
|
animation-name: bounceInDown;
|
|
}
|