Guest User

style.scss

a guest
May 19th, 2014
205
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* __________ VARIABLES __________ */
  2.  $white:      #f1f2e4;
  3.    $red:      #f28972;
  4.  $green:      #2abfb0;
  5. $lgreen:      #688a87;
  6.  $black:      #0e2825;
  7.  
  8. @mixin sans {
  9.   font-family: 'Lato', 'Lucida Grande', 'Lucida Sans', Tahoma, sans-serif;
  10. }
  11.  
  12. body {
  13.   color: $black;
  14.   background: $white;
  15.   @include sans;
  16.   a {
  17.     color: $red;
  18.     text-decoration: none;
  19.     &:hover {
  20.       color: $lgreen;
  21.     }
  22.     &:active {
  23.       outline: none;
  24.     }
  25.     .icon {
  26.       text-decoration: none;
  27.     }
  28.   }
  29.   h1, h2, h3, h4, h5, h6 {
  30.     margin-top: 0.9em;
  31.     margin-bottom: 0.5em;
  32.   }
  33.   blockquote {
  34.     color: $lgreen;
  35.     padding-left: 1em;
  36.     border-left: 1px solid $red;
  37.     text-indent: 0px;
  38.     quotes: none;
  39.     line-height: 1.65em;
  40.     font-style: italic;
  41.     letter-spacing: 0.5px;
  42.     .source {
  43.       text-align: right;
  44.       font-variant: italic;
  45.     }
  46.   }
  47.   ul {
  48.     list-style-type: square;
  49.   }
  50.   ul, ol, dd {
  51.     margin-left: 1.8rem;
  52.   }
  53. }
  54.  
  55. body.page {
  56.   max-width: 100%;
  57.   margin: auto;
  58.   #content_area .page {
  59.     max-width: 500px;
  60.   }
  61. }
  62.  
  63. .full-width {
  64.   max-width: 100%;
  65.   padding-left: 1.6em;
  66.   padding-right: 1.6em;
  67. }
  68.  
  69. .page {
  70.   max-width: 800px;
  71.   margin: 0 auto;
  72. }
  73.  
  74. ::selection {
  75.   background: $red;
  76.   color: $white;
  77. }
  78.  
  79. ::-moz-selection {
  80.   background: $red;
  81.   color: $white;
  82. }
  83.  
  84. .format-text, p, ul, table, ol {
  85.   a {
  86.     text-decoration: underline;
  87.   }
  88. }
  89.  
  90. .brand {
  91.   background: url('assets/images/anamorphic-logo.png') transparent top left no-repeat;
  92.   background-size: contain;
  93.   display: inline-block;
  94.   text-indent: -9999px;
  95.   width: 100%;
  96. }
  97.   #main-logo {
  98.     margin-top: 0;
  99.     margin-bottom: 0;
  100.     .brand {
  101.       background-image: url('assets/images/anamorphic-logo-red.png');
  102.     }
  103.   }
  104.  
  105.  
  106. .entry-title {
  107.   margin-top: 0;
  108.   font-weight: 300;
  109.   a {
  110.     text-decoration: none;
  111.   }
  112. }
  113.  
  114. .subheading {
  115.   font-weight: 400;
  116.   font-size: 1.1em;
  117.   letter-spacing: 1px;
  118. }
  119. .entry-meta {
  120.   font-size: 0.9em;
  121.   color: $lgreen;
  122. }
  123.  
  124. .main-meta {
  125.   .name, .creator {
  126.     font-weight: bold;
  127.   }
  128.   .name {
  129.     font-size: 1.3em;
  130.     display: block;
  131.   }
  132.   .byline {
  133.     font-style: italic;
  134.     font-weight: 300;
  135.   }
  136. }
  137.  
  138. aside.entry-meta {
  139.   p {
  140.     margin-bottom: 5px;
  141.     padding-bottom: 5px;
  142.     border-bottom: 1px dotted $green;
  143.  
  144.     a {
  145.       color: $lgreen;
  146.       text-decoration: none;
  147.       border-bottom: 1px dotted $red;
  148.       &:hover {
  149.         color: $red;
  150.         border-bottom: 1px solid $red;
  151.       }
  152.       &:active {
  153.         color: $black;
  154.       }
  155.     }
  156.   }
  157. }
  158.  
  159. #header_area {
  160.   margin-top: 1.5em;
  161.   nav .nav {
  162.     margin-bottom: 0;
  163.     word-spacing: 0;
  164.     li{
  165.       text-align: center;
  166.       a{
  167.         padding-top: 17px;
  168.         padding-bottom: 18px;
  169.         text-decoration: none;
  170.         &:hover, .active {
  171.           background: $red;
  172.           color: $white;
  173.         }
  174.         .icon {
  175.           font-size: 0.9em;
  176.         }
  177.       }
  178.     }
  179.   }
  180. }
  181.  
  182.  
  183.  
  184. /* __________ HEADER __________ */
  185. #header_area {
  186.   margin-bottom: 0.5em;
  187.   header {
  188.   }
  189. }
  190.  
  191. #main-navigation {
  192.   text-align: right;
  193.   .active {
  194.     background: $red;
  195.     color: $white;
  196.   }
  197. }
  198.  
  199. #content_area {
  200.   padding-top: 2em;
  201. }
  202.  
  203. // List of posts
  204. .post_list {
  205.   .post_item_wrap {
  206.     margin-bottom: 20px;
  207.     a {
  208.       text-decoration: none;
  209.       padding-bottom: 10px;
  210.       max-width: 100%;
  211.       border-bottom: 1px dotted $lgreen;
  212.       display: inline-block;
  213.       color: $lgreen;
  214.       @include transition(0.2s);
  215.       &:hover {
  216.         color: $black;
  217.         border-bottom: 1px solid $red;
  218.         .rating {
  219.           color: $lgreen;
  220.         }
  221.         .entry-meta span{
  222.           color: $black;
  223.         }
  224.         .entry-title {
  225.           color: $black;
  226.         }
  227.       }
  228.       &:active {
  229.         background: adjust-lightness($white, -2%);
  230.       }
  231.       .entry-date {
  232.         font-size: 0.8em;
  233.       }
  234.       .entry-title {
  235.         font-size: 1em;
  236.         line-height: 1.4em;
  237.         margin-bottom: 3px;
  238.         color: $red;
  239.         font-weight: normal;
  240.         @include transition(0.2s);
  241.       }
  242.       .entry-meta {
  243.         span {
  244.           @include transition(0.2s);      
  245.           display: block;
  246.         }
  247.       }
  248.     }
  249.  
  250.     .subheading {
  251.       font-size: 0.9em;
  252.       color: adjust-lightness($lgreen, 10%);
  253.       margin-bottom: 0.2rem;
  254.     }
  255.   }
  256.   .group-title {
  257.     font-size: 1em;
  258.     font-weight: 300;
  259.     text-transform: uppercase;
  260.     color: $lgreen;
  261.   }
  262. }
  263.  
  264.  
  265. .rating {
  266.   color: $green;
  267. }
  268.  
  269. .center {
  270.   text-align: center;
  271. }
  272. .right {
  273.   text-align: right;
  274. }
  275. .left {
  276.   text-align: left;
  277. }
  278.  
  279. .archive-entry-list-item {
  280.   h1, h2, h3, h4, h5, h6, p, ul {
  281.     margin-bottom: 0.35em;
  282.   }
  283. }
  284.  
  285. #footer_area {
  286.   margin-top: 0.5em;
  287.   padding-top: 0.5em;
  288.   footer {
  289.     font-size: 0.9em;
  290.     text-transform: uppercase;
  291.     color: adjust-lightness($black, 10%);
  292.   }
  293. }
  294.  
  295.  
  296. /* _____ ARCHIVES PAGE _____ */
  297. .archive {
  298.   .post {
  299.     border-bottom: 1px dotted $lgreen;
  300.     padding-bottom: 10px;
  301.     margin-bottom:  10px;
  302.   }
  303.   .media {
  304.     margin-bottom: 0px;
  305.   }
  306.   .entry-title {
  307.     line-height: 1.4em;
  308.   }
  309. }
  310.  
  311.  
  312. @include media-query(palm) {
  313.   .palm-hidden {
  314.     display: none!important;
  315.   }
  316. }
  317.  
  318.  
  319. // Affiliate Promo
  320. .affiliate-promo {
  321.   margin-top: 1em;
  322.   border-top: 2px solid $green;
  323.   h4 {
  324.     font-weight: 400;
  325.     text-align: center;
  326.     .icon {
  327.       color: $red;
  328.     }
  329.   }
  330.  
  331.   ul, p {
  332.     margin-bottom: 0.5em;
  333.     font-size: 0.85em;
  334.   }
  335.   .nav--button li a {
  336.     text-decoration: underline;
  337.   }
  338. }
  339. // breadcrumbs
  340. .breadcrumbs {
  341.   font-size: 0.9em;
  342.   font-weight: 300;
  343.   margin-bottom: 0.5rem;
  344.   .icon {
  345.     font-size: 0.5em;
  346.     padding-left: 0.2em;
  347.     padding-right: 0.2em;
  348.   }
  349.   a {
  350.     text-decoration: none;
  351.   }
  352. }
  353.  
  354. // Single Post Content Promo
  355. .related_posts {
  356.   margin-top: 10px;
  357.   border-top: 2px solid $green;
  358.   h4 {
  359.     text-transform: uppercase;
  360.     font-size: 0.9em;
  361.     font-weight: normal;
  362.     color: $lgreen;
  363.   }
  364.   .nav {
  365.     li {
  366.       border-bottom: 1px dotted adjust-lightness($white, -15%);
  367.       margin-bottom: 0.2em;
  368.       a {
  369.         text-decoration: none;
  370.       }
  371.     }
  372.   }
  373.   abbr {
  374.     display: none;
  375.   }
  376. }
  377.  
  378. // Special Nav
  379. .nav--button {
  380.   li {
  381.     a{
  382.       text-decoration: none;
  383.       text-align: center;
  384.       border-radius: 2em;
  385.       padding: 0.4em 1.18em;
  386.     }
  387.   }
  388.   &.nav--stacked {
  389.     li {
  390.       margin-bottom: 0.5em;
  391.     }
  392.   }
  393.   &.nav--block {
  394.     li {
  395.       margin-right: 0.8em;
  396.     }
  397.   }
  398. }
  399.  
  400. @mixin nav--button($color, $background) {
  401.   li {
  402.     a {
  403.       background: $background;
  404.       border: 1px solid $color;
  405.       color: $color;
  406.       &:hover, &:focus, &.active {
  407.         background: $color;
  408.         color: $background;
  409.         border-color: adjust-lightness($color, -10%);
  410.       }
  411.     }
  412.   }
  413. }
  414.  
  415. .nav--button-red {
  416.   @include nav--button($red, $white);
  417. }
  418. .nav--button-green {
  419.   @include nav--button($green, $white);
  420. }
  421.  
  422. .nav--button-white-lgreen {
  423.   @include nav--button($white, $lgreen);
  424. }
  425.  
  426.  
  427.  
  428. #promo_area {
  429. }
  430.   #promo {
  431.     hr {
  432.       border-top: 1px solid $red;
  433.       border-width: 1px 0 0 0;
  434.       margin-bottom: 5px;
  435.     }
  436.     h4{
  437.       font-weight: 300;
  438.     }
  439.     a {
  440.       text-decoration: none;
  441.     }
  442.   }
  443.     #subscribe{
  444.       h4 {
  445.         color: $green;
  446.         font-weight: bold;
  447.       }
  448.       p{
  449.         margin-bottom: 0.5rem;
  450.       }
  451.     }
  452.     #get_reviewed{}
  453.     #elsewhere{}
  454.  
  455.  
  456. // DIRTY
  457. // TODO: Find better way to do pagination
  458. .pagination-nav {
  459.   padding-bottom:  1em;
  460.   padding-top:     1em;
  461.   padding-left:  0.8em;
  462. }
RAW Paste Data