Permalink
Fetching contributors…
Cannot retrieve contributors at this time
736 lines (706 sloc) 18.2 KB
@import "normalize";
@import "foundation-settings";
@import "theme-settings";
// Make sure the charset is set appropriately
@charset "UTF-8";
// Behold, here are all the Foundation components.
// You can choose only needed ones
// grid is mandatory
@import "foundation/components/grid";
@import "foundation/components/accordion";
@import "foundation/components/alert-boxes";
@import "foundation/components/block-grid";
@import "foundation/components/breadcrumbs";
@import "foundation/components/button-groups";
@import "foundation/components/buttons";
@import "foundation/components/clearing";
@import "foundation/components/dropdown";
@import "foundation/components/dropdown-buttons";
@import "foundation/components/flex-video";
@import "foundation/components/forms";
@import "foundation/components/icon-bar";
@import "foundation/components/inline-lists";
@import "foundation/components/joyride";
@import "foundation/components/keystrokes";
@import "foundation/components/labels";
@import "foundation/components/magellan";
@import "foundation/components/orbit";
@import "foundation/components/pagination";
@import "foundation/components/panels";
@import "foundation/components/pricing-tables";
@import "foundation/components/progress-bars";
@import "foundation/components/range-slider";
@import "foundation/components/reveal";
@import "foundation/components/side-nav";
@import "foundation/components/split-buttons";
@import "foundation/components/sub-nav";
@import "foundation/components/switches";
@import "foundation/components/tables";
@import "foundation/components/tabs";
@import "foundation/components/thumbs";
@import "foundation/components/tooltips";
@import "foundation/components/top-bar";
@import "foundation/components/type";
@import "foundation/components/offcanvas";
@import "foundation/components/visibility";
//
// Your styles here
//
html {
height: auto;
}
body {
position: relative;
padding: rem-calc(15);
}
::selection {
background: $color-main-contrast;
color: $color-main-light;
}
::-moz-selection {
background: $color-main-contrast;
color: $color-main-light;
}
::-webkit-scrollbar {
width: rem-calc(5);
background-color: darken($color-main-light, 5%);
}
::-webkit-scrollbar-track {
background-color: darken($color-main-light, 5%);
}
::-webkit-scrollbar-thumb {
background-color: darken($color-main-light, 70%);
}
// header styles
.header-back-btn {
color: $color-main-dark;
border: rem-calc(3) solid $color-main-dark;
padding: rem-calc(5) rem-calc(20);
text-align: center;
text-decoration: none;
border-radius: rem-calc(3);
font-size: rem-calc(16);
font-family: $headers-font;
font-weight: 700;
text-transform: uppercase;
margin-left: rem-calc(30);
margin-top: rem-calc(30);
.fa {
font-size: rem-calc(14);
-webkit-transition: all .3s;
transition: all .3s;
}
&:hover, &:focus, &:active {
color: $color-main-dark;
.fa {
-webkit-transform: translateX(rem-calc(-5));
transform: translateX(rem-calc(-5));
}
}
&.element-dark {
color: $color-main-dark;
border: rem-calc(3) solid $color-main-dark;
&:hover, &:focus, &:active {
color: $color-main-dark;
}
}
&.element-light {
color: $color-main-light;
border: rem-calc(3) solid $color-main-light;
&:hover, &:focus, &:active {
color: $color-main-light;
}
}
}
.main-header,
.post-view-header {
text-align: center;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
.element-light {
color: $color-main-light;
}
.element-dark,
&.no-cover {
color: $color-main-dark;
}
h1, h2, h3, h4, h5, h6 {
color: inherit;
margin: 0;
}
h2 {
font-size: rem-calc(22);
}
.post-logo-container,
.author-logo-container {
padding: rem-calc(15) rem-calc(40);
img {
max-width: rem-calc(180);
max-height: rem-calc(180);
}
}
.author-logo-container {
img {
border-radius: 100%;
}
}
a, a:active, a:focus, a:hover {
color: inherit;
}
}
.main-header {
padding: rem-calc(120) rem-calc(30);
h1 {
font-size: rem-calc(60);
line-height: 1.2;
@media screen and (min-width: 48em) {
font-size: rem-calc(90);
}
}
.author-stats {
font-size: rem-calc(20);
font-family: $headers-font;
font-weight: 700;
}
@media screen and (min-width: 48em) {
padding: 12% rem-calc(30);
&.no-cover {
padding: 10% rem-calc(30);
}
}
}
// index page
.home-template,
.tag-template,
.author-template {
.post {
padding: rem-calc(40) rem-calc(30);
text-align: center;
-webkit-transition: background-color .2s;
transition: background-color .2s;
&:first-of-type {
border-top: solid rem-calc(1) darken($color-main-light, 3%);
}
border-bottom: solid rem-calc(1) darken($color-main-light, 3%);
&:hover {
background-color: darken($color-main-light, 3%);
}
@media screen and (min-width: 48em) {
padding: rem-calc(40) rem-calc(30);
}
}
.author-thumb {
width: rem-calc(30);
height: rem-calc(30);
border-radius: 100%;
}
.post-title {
color: $color-main-dark;
margin: 0;
font-size: rem-calc(28);
line-height: 1.1;
a, a:hover, a:focus, a:active {
color: inherit;
text-decoration: none;
}
@media screen and (min-width: 48em) {
font-size: rem-calc(42);
line-height: 1.3;
}
}
.post-meta {
color: lighten($color-main-dark, 20%);
a, a:hover, a:focus, a:active {
color: inherit;
}
}
}
// post view page
.post-template {
.post-view-header {
padding: rem-calc(160) rem-calc(30) rem-calc(120);
&.no-cover {
padding: rem-calc(160) rem-calc(30) rem-calc(80);
}
.post-header-content {
max-width: $row-width + 12.5;
margin-left: auto;
margin-right: auto;
h1 {
font-size: rem-calc(55);
line-height: 1.2;
@media screen and (min-width: 48em) {
font-size: rem-calc(68);
}
}
}
@media screen and (min-width: 48em) {
padding: 15% rem-calc(30);
&.no-cover {
padding: 15% rem-calc(30) 5%;
}
}
}
.post-view-content {
margin-top: rem-calc(60);
overflow-x: hidden;
.kg-image {
max-width: 100%;
}
.kg-width-wide .kg-image {
max-width: 1040px;
}
.kg-width-full .kg-image {
max-width: 100vw;
}
figure {
margin: 1.5em 0 3em;
}
figure img {
margin: 0;
}
figcaption {
margin: 1.0em 0 0;
font-size: 80%;
line-height: 1.6em;
text-align: center;
}
}
.post-meta {
font-family: $headers-font;
font-weight: 700;
font-size: rem-calc(18);
margin-top: rem-calc(30);
a, a:active, a:focus, a:hover {
display: inline-block;
padding: 0 rem-calc(10);
border: rem-calc(3) solid $color-main-dark;
text-decoration: none;
}
&.element-light {
a, a:active, a:focus, a:hover {
border: rem-calc(3) solid $color-main-light
}
}
&.element-dark {
a, a:active, a:focus, a:hover {
border: rem-calc(3) solid $color-main-dark
}
}
}
.post-title {
position: relative;
margin-bottom: rem-calc(10);
&:before {
position: absolute;
content: " ";
display: block;
min-width: rem-calc(180);
width: 45%;
height: rem-calc(1);
bottom: rem-calc(-15);
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: $color-main-dark;
}
&:after {
position: absolute;
content: " ";
display: block;
width: rem-calc(7);
height: rem-calc(7);
bottom: rem-calc(-18);
left: 50%;
right: auto;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: $color-main-dark;
border-radius: 100%;
}
&.element-light {
&:before,
&:after {
background-color: $color-main-light;
}
}
&.element-dark {
&:before,
&:after {
background-color: $color-main-dark;
}
}
}
.post-footer {
.post-tags {
font-family: $headers-font;
font-weight: 700;
a {
font-weight: normal;
}
}
.share {
border-top: rem-calc(1) solid darken($color-main-light, 10%);
padding-top: rem-calc(30);
padding-bottom: rem-calc(30);
margin-top: rem-calc(30);
margin-bottom: rem-calc(30);
a {
color: $color-main-contrast;
text-decoration: none;
font-size: rem-calc(28);
&:hover {
color: darken($color-main-contrast, 10%);
}
}
}
}
.post-prev-next-pagination {
padding-bottom: rem-calc(35);
a {
color: lighten($color-main-dark, 10%);
text-decoration: none;
}
.prev-next-label {
text-transform: uppercase;
font-weight: 600;
}
}
}
// author info box in post view page
.author-info {
padding: 0;
position: relative;
padding-top: rem-calc(60);
padding-bottom: rem-calc(60);
margin-bottom: rem-calc(40);
background: darken($color-main-light, 5%);
.post-author {
padding-left: rem-calc(30);
padding-right: rem-calc(30);
text-align: center;
.author-label {
display: block;
font-size: rem-calc(16);
color: lighten($color-main-dark, 50%);
font-style: italic;
}
.author-link-name {
color: $color-main-dark;
-webkit-transition: color .3s;
transition: color .3s;
&:active, &:hover, &:focus {
color: $color-main-contrast;
}
}
.author-website {
font-size: rem-calc(16);
}
h1 {
margin: 0;
padding: 0;
font-family: $headers-font;
font-weight: 700;
text-transform: uppercase;
font-size: rem-calc(36);
}
> p {
font-size: rem-calc(18);
a {
color: $color-main-contrast;
}
}
.post-author-avatar {
width: rem-calc(200);
height: rem-calc(200);
border-radius: 50%;
float: none;
margin-right: 0;
margin-bottom: rem-calc(20);
@media only screen and (min-width: 40.063em) {
margin-right: rem-calc(50);
margin-bottom: 0;
float: left;
}
}
a {
text-decoration: none;
}
@media only screen and (min-width: 40.063em) {
text-align: left;
}
}
}
// tag view post loop styles
.tag-view-info {
font-size: rem-calc(26);
text-align: center;
font-family: $headers-font;
font-weight: 700;
background: darken($color-main-light, 10%);
padding: rem-calc(40) rem-calc(30);
color: $color-main-dark;
}
// footer
.site-footer {
background-color: $color-main-dark;
padding: rem-calc(15) rem-calc(30) 0;
color: $color-main-light;
font-size: rem-calc(14);
margin-top: rem-calc(60);
a, a:active, a:focus, a:hover {
color: inherit;
}
@extend %clearfix;
.subscribe-button {
.fa {
vertical-align: middle;
margin-left: rem-calc(5);
}
}
.px-themes,
.ghost {
float: none;
text-align: center;
}
@media screen and (min-width: 48em) {
.px-themes {
float: left;
}
.ghost {
float: right;
}
.px-themes,
.ghost {
text-align: left;
}
}
}
// pagination
.pagination {
padding: rem-calc(60) rem-calc(30) 0;
text-align: center;
color: $color-main-dark;
font-weight: bold;
font-family: $headers-font;
a, a:active, a:focus, a:hover {
color: inherit;
display: inline-block;
padding: rem-calc(5) rem-calc(30);
border: rem-calc(3) solid $color-main-dark;
border-radius: rem-calc(3);
text-decoration: none;
.fa {
font-size: rem-calc(12);
}
}
a:hover {
&.older-posts {
.fa {
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transform: translateX(rem-calc(5));
transform: translateX(rem-calc(5));
}
}
&.newer-posts {
.fa {
-webkit-transition: all .3s;
transition: all .3s;
-webkit-transform: translateX(rem-calc(-5));
transform: translateX(rem-calc(-5));
}
}
}
}
// document borders
.rborder, .lborder, .tborder, .bborder {
background: $color-main-dark;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.rborder, .lborder {
position: fixed;
top: 0;
bottom: 0;
width: $body-border-width;
}
.rborder {
right: 0;
}
.lborder {
left: 0;
}
.tborder, .bborder {
position: fixed;
left: 0;
right: 0;
height: $body-border-width;
}
.tborder {
top: 0;
}
.bborder {
bottom: 0;
}
.main-nav {
.fa-bars {
cursor: pointer;
margin-right: rem-calc(30);
margin-top: rem-calc(30);
font-size: rem-calc(40);
&.element-dark {
color: $color-main-dark;
}
&.element-light {
color: $color-main-light;
}
}
}
// menu based on : http://tympanus.net/Development/FullscreenOverlayStyles/index.html
/* main-menu-ovrl style */
.main-menu-ovrl {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba($color-main-dark, .9);
-webkit-user-select: none;
user-select: none;
/* main-menu-ovrl closing cross */
.main-menu-ovrl-close {
font-size: rem-calc(60);
text-align: center;
position: absolute;
right: rem-calc(35);
top: rem-calc(35);
overflow: hidden;
border: none;
color: $color-main-light;
outline: none;
z-index: 100;
cursor: pointer;
-webkit-user-select: none;
user-select: none;
}
/* Menu style */
nav {
text-align: center;
position: relative;
top: 50%;
height: 60%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
height: 100%;
position: relative;
-webkit-user-select: none;
user-select: none;
li {
display: block;
height: 20%;
height: calc(100% / 5);
min-height: rem-calc(54);
a {
font-weight: 300;
display: block;
color: $color-main-light;
font-size: rem-calc(54);
-webkit-transition: color 0.2s;
transition: color 0.2s;
font-family: $headers-font;
text-decoration: none;
&:hover, &:focus {
color: darken($color-main-light, 50%);
}
}
}
}
}
/* Effects */
.main-menu-ovrl-hugeinc {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
nav {
-webkit-perspective: rem-calc(1200);
perspective: rem-calc(1200);
ul {
opacity: 0.4;
-webkit-transform: translateY(-25%) rotateX(35deg);
transform: translateY(-25%) rotateX(35deg);
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
transition: transform 0.5s, opacity 0.5s;
}
}
&.open {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
nav {
ul {
opacity: 1;
-webkit-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
}
&.close {
nav {
ul {
-webkit-transform: translateY(25%) rotateX(-35deg);
transform: translateY(25%) rotateX(-35deg);
}
}
}
}
@media screen and (max-height: 30.5em) {
.main-menu-ovrl nav {
height: 70%;
li a {
font-size: rem-calc(34);
}
}
.main-menu-ovrl ul li {
min-height: rem-calc(34);
}
}
.kg-width-full figcaption {
padding: 0 1.5em;
}
.kg-embed-card {
display: flex;
flex-direction: column;
align-items: center;
min-width: 100%;
}
.kg-embed-card .fluid-width-video-wrapper {
margin: 0;
}
.kg-gallery-container {
display: flex;
flex-direction: column;
max-width: 1040px;
width: 100vw;
}
.kg-gallery-row {
display: flex;
flex-direction: row;
justify-content: center;
}
.kg-gallery-image img {
display: block;
margin: 0;
width: 100%;
height: 100%;
}