Last active
December 30, 2015 06:59
-
-
Save Nemesisprime/7792551 to your computer and use it in GitHub Desktop.
The Elit.ist blog LESS template... it's beautiful, right?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * The Elit.ist CSS (v1.0) built on Skeleton V1.2 | |
| * Copyright 2013, Dan Griffin (see skeleton.css for Skeleton license) | |
| */ | |
| /* Table of Content | |
| ================================================== | |
| #Color Definitions | |
| #Style Definitions | |
| #Header Styles | |
| #Site Styles | |
| #Homepage Styles | |
| #Page Styles | |
| #Footer Styles | |
| #Media Queries | |
| #Font-Face */ | |
| /* #Color Definitions | |
| ================================================== */ | |
| @home-header-height: 400px; | |
| @logo-font: 'Sacramento', serif; | |
| @headline-font: 'Roboto Slab', serif; | |
| /* Template colors */ | |
| @template-primary: #FF6400; | |
| /* #Style Definitions | |
| ================================================== */ | |
| .covered-background { | |
| background-position: center center; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| } | |
| .category-style { | |
| font-family: @headline-font; | |
| text-transform: uppercase; | |
| font-weight: 800; | |
| } | |
| .section-title(@font-size: 12px) { | |
| font-family: 'Arial'; | |
| font-size: @font-size; | |
| text-transform: uppercase; | |
| font-weight: bold; | |
| border-bottom: 1px solid #ccc; | |
| margin: 10px 10px 20px 10px; | |
| padding: 0px 0px 0px 5px; | |
| line-height: 30px; | |
| color: #6F6F6F; | |
| } | |
| .underlined-hovered-links { | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| .sidebar-submit-style { | |
| background: #fff; | |
| border: 0px; | |
| border-radius: 0px; | |
| padding: 10px 15px; | |
| font-size: 18px; | |
| text-transform: uppercase; | |
| -webkit-appearance: none; | |
| box-shadow: none; | |
| margin: 0px auto; | |
| &:hover { | |
| background-color: #333; | |
| color: #fff; | |
| } | |
| } | |
| .sidebar-input-style { | |
| background-color: #fff; | |
| border: 0px; | |
| border-radius: 0px; | |
| padding: 10px 0px 10px 5px; | |
| font-size: 15px; | |
| &:hover { | |
| background-color: #DFDFDF; | |
| } | |
| } | |
| /* #Header Styles | |
| ================================================== */ | |
| #site-navigation.section-header { | |
| background-color: #333; | |
| border: 1px solid #000; | |
| border-width: 0px 1px 1px 1px; | |
| color: #fff; | |
| /* Menu */ | |
| ul.menu { | |
| padding: 0px; | |
| margin: 0px; | |
| text-align: right; | |
| li:first-child { | |
| font-family: 'Sacramento', serif; | |
| font-size: 26px; | |
| margin: 1px 0px -4px 10px; | |
| padding: 4px 0px 0px 0px; | |
| float: left; | |
| a { | |
| &:hover { | |
| background-color: transparent; | |
| color: #000; | |
| } | |
| } | |
| } | |
| li { | |
| display: inline-block; | |
| padding: 0px; | |
| margin: 0px; | |
| font-family: @headline-font; | |
| a { | |
| display: block; | |
| padding: 10px; | |
| margin: 0px; | |
| text-decoration: none; | |
| &:hover { | |
| color: #A5A5A5 !important; | |
| } | |
| &:link, &:visited, &:active { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* #Site Styles | |
| ================================================== */ | |
| body { | |
| background-color: #fff; | |
| } | |
| #main.site-main { | |
| border: solid #E2E2E2; | |
| border-width: 0px 1px 0px 1px; | |
| padding-bottom: 5px; | |
| } | |
| /* Homepage Styles | |
| ================================================== */ | |
| .elitist-flag-header { | |
| .covered-background; | |
| width: 100%; | |
| height: @home-header-height; | |
| text-align: center; | |
| font-family: @logo-font; | |
| line-height: @home-header-height; | |
| border-bottom: 1px solid #000; | |
| } | |
| #main.site-main section.featured-spot { | |
| padding-top: 10px; | |
| h3.feature-title { | |
| .section-title; | |
| } | |
| .featured-image { | |
| overflow: hidden; | |
| } | |
| h2 { | |
| font-family: @headline-font; | |
| font-size: 40px; | |
| font-weight: 500; | |
| a { | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| p.stats { | |
| font-size: 12px; | |
| .wpp-category { | |
| a { | |
| .category-style; | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| .under-fold { | |
| .latest-posts { | |
| a { | |
| text-decoration: none; | |
| } | |
| .recent-story { | |
| min-height: 500px; | |
| margin-bottom: 10px; | |
| h2 { | |
| font-family: @headline-font; | |
| } | |
| img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| p.information { | |
| span.category { | |
| .category-style; | |
| } | |
| } | |
| /* Make some of them larger! By setting them as two-thirds */ | |
| &:nth-of-type(5n+1) { | |
| width: 620px; | |
| } | |
| } | |
| h3.recent-title { | |
| .section-title; | |
| } | |
| } | |
| #sidebar-posts { | |
| .sidebar-block { | |
| margin-left: 20px; | |
| } | |
| .basic-block, #newsletter-slot, #writers-block { | |
| .sidebar-block; | |
| background-color: @template-primary; | |
| h3 { | |
| color: #fff; | |
| text-align: center; | |
| text-transform: uppercase; | |
| padding: 10px 0px; | |
| } | |
| p { | |
| padding: 3px 10px; | |
| color: #fff; | |
| margin: 0px; | |
| &:last-child { | |
| text-align: center; | |
| font-size: 18px; | |
| margin-bottom: 10px; | |
| a { | |
| color: #333; | |
| font-weight: bold; | |
| text-decoration: none; | |
| &:hover { | |
| color: #fff; | |
| } | |
| } | |
| } | |
| } | |
| .gform_wrapper { | |
| padding: 0px 20px; | |
| .gform_body input[type=text] { | |
| .sidebar-input-style; | |
| } | |
| .gform_footer { | |
| margin: 0px; | |
| padding: 0px; | |
| text-align: center; | |
| input[type=submit] { | |
| .sidebar-submit-style; | |
| } | |
| } | |
| } | |
| } | |
| #search-block { | |
| .sidebar-block; | |
| margin-bottom: 10px; | |
| background-color: #6F6F6F; | |
| color: #fff; | |
| text-align: center; | |
| h3 { | |
| color: #fff; | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-size: 20px; | |
| padding: 10px 0px; | |
| } | |
| input[type=search] { | |
| .sidebar-input-style; | |
| width: 80%; | |
| margin-bottom: 10px; | |
| border-radius: 25px; | |
| } | |
| input[type=submit] { | |
| .sidebar-submit-style; | |
| } | |
| } | |
| #hot-stories { | |
| h3.section-title { | |
| .section-title(16px); | |
| color: #000; | |
| background-color: #ccc; | |
| width: 100%; | |
| padding: 0px; | |
| border-bottom: 0px; | |
| text-align: center; | |
| } | |
| .hot-story { | |
| img { | |
| width: 100%; | |
| height: auto; | |
| } | |
| h2 { | |
| font-family: @headline-font; | |
| margin-bottom: 3px; | |
| font-size: 24px; | |
| a { | |
| text-decoration: none; | |
| } | |
| } | |
| p.stats { | |
| font-size: 12px; | |
| margin-bottom: 5px; | |
| .wpp-category { | |
| a { | |
| .category-style; | |
| text-decoration: none; | |
| &:hover { | |
| text-decoration: underline; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* #Page Styles | |
| ================================================== */ | |
| .featured-photo { | |
| height: 350px; | |
| background-size: cover; | |
| background-position: center center; | |
| margin: -1px auto 0 auto; | |
| width: 962px; | |
| position: relative; | |
| } | |
| .featured-photo:after{ | |
| content:""; | |
| position:absolute; | |
| top:0; bottom:0; left:0; right:0; | |
| border: 1px solid rgba(0, 0, 0, 0.25); | |
| } | |
| /* #Footer Styles | |
| ================================================== */ | |
| footer { | |
| min-height: 150px; | |
| border: #d25500 solid; | |
| border-width: 1px 1px 0px 1px; | |
| background-color: @template-primary; | |
| color: #fff; | |
| a:link, a:visited, a:active { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| ul.menu { | |
| padding: 10px 20px; | |
| li.menu-item { | |
| display: inline-block; | |
| padding-right: 20px; | |
| vertical-align: top; | |
| font-size: 18px; | |
| font-weight: bold; | |
| ul.sub-menu | |
| { | |
| margin: 5px; | |
| padding: 0px; | |
| li { | |
| display: block; | |
| padding: 0px; | |
| margin: 5px 0px; | |
| font-size: 12px; | |
| font-weight: normal; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| /* #Media Queries | |
| ================================================== */ | |
| /* Smaller than standard 960 (devices and browsers) */ | |
| @media only screen and (max-width: 959px) { } | |
| /* Tablet Portrait size to standard 960 (devices and browsers) */ | |
| @media only screen and (min-width: 768px) and (max-width: 959px) { } | |
| /* All Mobile Sizes (devices and browser) */ | |
| @media only screen and (max-width: 767px) { } | |
| /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ | |
| @media only screen and (min-width: 480px) and (max-width: 767px) { } | |
| /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ | |
| @media only screen and (max-width: 479px) { } | |
| /* #Font-Face | |
| ================================================== */ | |
| /* This is the proper syntax for an @font-face file | |
| Just create a "fonts" folder at the root, | |
| copy your FontName into code below and remove | |
| comment brackets */ | |
| /* @font-face { | |
| font-family: 'FontName'; | |
| src: url('../fonts/FontName.eot'); | |
| src: url('../fonts/FontName.eot?iefix') format('eot'), | |
| url('../fonts/FontName.woff') format('woff'), | |
| url('../fonts/FontName.ttf') format('truetype'), | |
| url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; } | |
| */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment