/css/style.css
CSS | 585 lines | 465 code | 74 blank | 46 comment | 0 complexity | d5725dbe089bb794f73a7f4b9779ca26 MD5 | raw file
- /* ==========================================================================
- 0. Includes - Ground zero
- ========================================================================== */
- /* Import purecss-0.3 */
- @import url(pure-min-0.3.css);
- /* Dark Theme: dark.css; Light Theme: light.css; */
- @import url(dark.css);
- /* Import the font file with the icons in it */
- @font-face {
- font-family: 'icons';
- src:url('../fonts/pureBuster.eot');
- src:url('../fonts/pureBuster.eot?#iefix') format('embedded-opentype'),
- url('../fonts/pureBuster.woff') format('woff'),
- url('../fonts/pureBuster.ttf') format('truetype'),
- url('../fonts/pureBuster.svg#icons') format('svg');
- font-weight: normal;
- font-style: normal;
- }
- /* ==========================================================================
- 1. Icons
- ========================================================================== */
- /* Apply these base styles to all icons */
- .icon-ghost,
- .icon-feed,
- .icon-feed-1,
- .icon-feed-inv,
- .icon-twitter,
- .icon-twitter-1,
- .icon-twitter-inv,
- .icon-google-plus,
- .icon-google-plus-1,
- .icon-google-plus-inv,
- .icon-facebook,
- .icon-facebook-1,
- .icon-facebook-inv,
- .icon-leaf,
- .icon-linkedin,
- .icon-linkedin-inv,
- .icon-github,
- .icon-github-1,
- .icon-github-inv,
- .icon-bitbucket,
- .icon-bitbucket-inv,
- .icon-cloud,
- .icon-lamp,
- .icon-youtube,
- .icon-youtube-inv,
- .icon-flickr,
- .icon-dropbox,
- .icon-tumblr,
- .icon-tumblr-inv,
- .icon-skype,
- .icon-apple,
- .icon-windows,
- .icon-android,
- .icon-linux {
- font-family: 'icons';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
- text-decoration: none;
- font-size: 75%;
- }
- /* Each icon is created by inserting the corret character into the
- content of the :before pseudo element. Like a boss. */
- .icon-ghost:before {content: "\e000";}
- .icon-feed:before {content: "\f09e";}
- .icon-feed-1:before {content: "\e001";}
- .icon-feed-inv:before {content: "\e004";}
- .icon-twitter:before {content: "\f099";}
- .icon-twitter-1:before {content: "\e002";}
- .icon-twitter-inv:before {content: "\f081";}
- .icon-google-plus:before {content: "\f0d4";}
- .icon-google-plus-1:before {content: "\e006";}
- .icon-google-plus-inv:before {content: "\f0d5";}
- .icon-facebook:before {content: "\e007";}
- .icon-facebook-1:before {content: "\f082";}
- .icon-facebook-inv:before {content: "\f09a";}
- .icon-leaf:before {content: "\f06c";}
- .icon-linkedin:before {content: "\f08c";}
- .icon-linkedin-inv:before {content: "\f0e1";}
- .icon-github:before {content: "\f092";}
- .icon-github-1:before {content: "\f09b";}
- .icon-github-inv:before {content: "\f113";}
- .icon-bitbucket:before {content: "\f171";}
- .icon-bitbucket-inv:before {content: "\f172";}
- .icon-cloud:before {content: "\f0c2";}
- .icon-lamp:before {content: "\f0eb";}
- .icon-youtube:before {content: "\f167";}
- .icon-youtube-inv:before {content: "\f166";}
- .icon-flickr:before {content: "\f16e";}
- .icon-dropbox:before {content: "\f16b";}
- .icon-tumblr:before {content: "\f173";}
- .icon-tumblr-inv:before {content: "\f174";}
- .icon-skype:before {content: "\f17e";}
- .icon-apple:before {content: "\f179";}
- .icon-windows:before {content: "\f17a";}
- .icon-android:before {content: "\f17b";}
- .icon-linux:before {content: "\f17c";}
- /* ==========================================================================
- 2. General setup
- ========================================================================== */
- * {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
- }
- h1, h2, h3,
- h4, h5, h6 {
- text-rendering: optimizeLegibility;
- line-height: 1;
- margin-top: 0;
- }
- a {
- text-decoration: none;
- }
- a:hover,
- a:focus {
- text-decoration: underline;
- }
- /* Hides shit */
- .hidden {
- text-indent: -9999px;
- visibility: hidden;
- display: none;
- }
- /* ==========================================================================
- 2.1 Colours - All the colors set up is here to provide an easy way
- to change the theme colorscheme
- ========================================================================== */
- /* Moved in the import section at the top of the document */
-
- /* ==========================================================================
- 2.2 Fonts - All the fonts are configured here
- ========================================================================== */
- /*
- When setting the primary font stack, apply it to the Pure grid units along with
- the `body`. Pure Grids use specific font stacks to ensure the greatest
- OS/browser compatibility.
- */
- body,
- .pure-g [class *= "pure-u"],
- .pure-g-r [class *= "pure-u"] {
- /* Set you're content font stack here: */
- font-family: 'Open Sans', Helvetica , sans-serif;
- }
- .post-description,.post-content {
- font-family: 'Droid Serif', Georgia, serif;
- }
- /* ==========================================================================
- 3. Layout CSS
- ========================================================================== */
- #layout {
- padding-left: 25%; /* "left col (nav + list)" width */
- position: relative;
- }
- .sidebar {
- position: fixed;
- top: 0;
- bottom: 0;
- width: 25%;
- margin-left: -25%;
- }
- .header {
- margin: 1.5em 2em 0;
- text-align: right;
- }
- .blog-title,
- .blog-description {
- margin: 0;
- }
- .blog-title {
- text-transform: uppercase;
- }
- .blog-description {
- font-weight: 300;
- }
- .blog-title a:hover {
- text-decoration: none;
- }
- #blog-logo img {
- margin-bottom: 1em;
- }
- .nav-list {
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .nav-item {
- display: inline-block;
- *display: inline;
- zoom: 1;
- }
- .nav-item a {
- margin-top: 1em;
- }
- .nav-item a:hover,
- .nav-item a:focus {
- text-decoration: none;
- }
- .social-list {
- margin: 0;
- margin-top: 1.5em;
- padding: 0;
- list-style: none;
- }
- .social-item {
- display: inline-block;
- *display: inline;
- zoom: 1;
- }
- .social-item a {
- margin-top: 1em;
- }
- .social-item a:hover {
- text-decoration: none;
- }
- .content-subhead {
- text-transform: uppercase;
- padding: 0.4em 0;
- font-size: 80%;
- font-weight: 500;
- letter-spacing: 0.1em;
- }
- .content {
- margin-top: 1.5em;
- padding: 2em 3em 0;
- max-width: 820px;
- }
- .post {
- padding-bottom: 2em;
- }
- .back{
- margin-top: -2%;
- padding-bottom: 2em;
- font-size: 0.8em;
- }
- .post-title {
- font-size: 2em;
- margin-bottom: 0.2em;
- }
- .big {
- font-size: 2.5em;
- }
- .post-avatar {
- border-radius: 50px;
- float: right;
- margin-left: 1em;
- }
- .post-description {
- line-height: 1.2em;
- }
- .post-content {
- font-size: 1.1em;
- line-height: 1.3em;
- }
- .post-content p {
- margin: 1.2em 0;
- }
- .post-meta {
- font-size: 90%;
- margin: 0;
- }
- .post-images {
- margin: 1em 0;
- }
- .post-image-meta {
- margin-top: -3.5em;
- margin-left: 1em;
- }
- .post-comments {
- margin-top: 2em;
- padding-top: 1.2em;
- }
- .post-share-box {
- display: block;
- float: right;
- text-align: center;
- margin: 0;
- margin-left: 1em;
- margin-right: 0.5em;
- margin-bottom: 1em;
- padding: 1em;
- padding-top:0.5em;
- padding-bottom:0.5em;
- border-radius: 3px;
- }
- .share h3 {
- margin: 0;
- margin-bottom: 0.8em;
- font-size: 80%;
- }
- .share {
- /*font-size: 120%;*/
- }
- .share a {
- margin-left: 2px;
- margin-right: 2px;
- }
- .share a:hover {
- text-decoration: none;
- }
- .pagination {
- margin-bottom: 10px;
- font-size: 80%;
- white-space:nowrap;
- }
- .page-number {
- width:40%;
- display: inline-block;
- text-align: center;
- }
- .older-posts {
- display: inline-block;
- width:30%;
- padding-left:5px;
- text-align: right;
- padding-right: 5px;
- }
- .newer-posts {
- display: inline-block;
- width: 30%;
- padding-right: 5px;
- text-align: left;
- }
- .footer {
- text-align: right;
- width: 25%;
- padding: 0 2em 1em 0;
- display: block;
- position: fixed;
- bottom: 0;
- }
- .footer section {
- font-size: 70%;
- }
- /* ==========================================================================
- 3.1 Additional Elements
- ========================================================================== */
- hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid rgba(142, 142, 214, 0.2);
- margin: 3.2em 0;
- padding: 0;
- }
- blockquote {
- margin: 1.6em 0 1.6em 0em;
- padding: 0 2em 0 2em;
- border-left: rgba(142, 142, 214, 0.5) 0.4em solid;
- }
- blockquote p {
- margin: 0.8em 0;
- font-style: italic;
- }
- blockquote small {
- display: inline-block;
- margin: 0.8em 0 0.8em 1.5em;;
- font-size:0.9em;
- color: rgba(142, 142, 214, 0.5);
- }
- blockquote small:before { content: '\2014 \00A0'; }
- blockquote cite {
- font-weight:bold;
- }
- blockquote cite a { font-weight: normal; }
- code {
- padding: 1px 3px;
- font-family: Menlo, Inconsolata, monospace, sans-serif;
- font-size: 0.85em;
- white-space: pre;
- border: 1px solid rgba(142, 142, 214, 0.5);
- background: rgba(142, 142, 214, 0.2);
- border-radius: 2px;
- }
- pre {
- margin: 1.6em 0;
- border: 1px solid rgba(142, 142, 214, 0.5);
- width: 100%;
- padding: 10px;
- font-family: Inconsolata, monospace, sans-serif;
- font-size: 0.9em;
- white-space: pre;
- overflow: auto;
- background: rgba(142, 142, 214, 0.2);
- border-radius: 3px;
- }
- pre code {
- font-size: inherit;
- white-space: -moz-pre-wrap;
- white-space: pre-wrap;
- background: transparent;
- border: none;
- padding: 0;
- }
- /* ==========================================================================
- 3.1 Additional Elements
- ========================================================================== */
- hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid rgba(142, 142, 214, 0.2);
- margin: 3.2em 0;
- padding: 0;
- }
- blockquote {
- margin: 1.6em 0 1.6em 0em;
- padding: 0 2em 0 2em;
- border-left: rgba(142, 142, 214, 0.5) 0.4em solid;
- }
- blockquote p {
- margin: 0.8em 0;
- font-style: italic;
- }
- blockquote small {
- display: inline-block;
- margin: 0.8em 0 0.8em 1.5em;;
- font-size:0.9em;
- color: rgba(142, 142, 214, 0.5);
- }
- blockquote small:before { content: '\2014 \00A0'; }
- blockquote cite {
- font-weight:bold;
- }
- blockquote cite a { font-weight: normal; }
- code {
- padding: 1px 3px;
- font-family: Menlo, Inconsolata, monospace, sans-serif;
- font-size: 0.85em;
- white-space: pre;
- border: 1px solid rgba(142, 142, 214, 0.5);
- background: rgba(142, 142, 214, 0.2);
- border-radius: 2px;
- }
- pre {
- margin: 1.6em 0;
- border: 1px solid rgba(142, 142, 214, 0.5);
- width: 100%;
- padding: 10px;
- font-family: Inconsolata, monospace, sans-serif;
- font-size: 0.9em;
- white-space: pre;
- overflow: auto;
- background: rgba(142, 142, 214, 0.2);
- border-radius: 3px;
- }
- pre code {
- font-size: inherit;
- white-space: -moz-pre-wrap;
- white-space: pre-wrap;
- background: transparent;
- border: none;
- padding: 0;
- }
- /* ==========================================================================
- 4. Tablets
- ========================================================================== */
- @media (max-width: 970px) {
- #layout {
- padding: 0;
- }
- .sidebar {
- width: 100%;
- position: relative;
- margin: 0;
- }
- .header {
- text-align: center;
- top: auto;
- margin: 3em auto;
- position: static;
- }
- .footer {
- position: relative;
- bottom: 0;
- padding: 1em 0;
- width: 100%;
- margin: auto;
- text-align: center;
- }
- .post-share-box {
- width:100%;
- text-align: center;
- margin:0.7em;
- margin-top:-5px;
- padding: 6px 2px 2px;
- }
- .share h3 {
- display: inline;
- vertical-align: top;
- font-size: 90%;
- }
- }
- div.info {
- color: #555;
- font-size: 14px;
- font-style: italic;
- }
- /* ==========================================================================
- 5. Phones
- ========================================================================== */
- @media (max-width: 480px) {
- .content {
- padding: 2em 1em 0;
- }
- }