@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; } .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); } }