forb

Forb is static blog generator inspired by jekyll
git clone https://noulin.net/git/forb.git
Log | Files | Refs | README | LICENSE

main.css (8518B)


      1 /**
      2  * Reset some basic elements
      3  */
      4 body, h1, h2, h3, h4, h5, h6,
      5 p, blockquote, pre, hr,
      6 dl, dd, ol, ul, figure {
      7   margin: 0;
      8   padding: 0; }
      9 
     10 /**
     11  * Basic styling
     12  */
     13 body {
     14   font-family: Helvetica, Arial, sans-serif;
     15   font-size: 16px;
     16   line-height: 1.5;
     17   font-weight: 300;
     18   color: #111;
     19   background-color: #fdfdfd;
     20   -webkit-text-size-adjust: 100%; }
     21 
     22 strong {
     23   font-weight: bold;
     24 }
     25 
     26 /**
     27  * Set `margin-bottom` to maintain vertical rhythm
     28  */
     29 h1, h2, h3, h4, h5, h6,
     30 p, blockquote, pre,
     31 ul, ol, dl, figure,
     32 .highlight {
     33   margin-bottom: 15px; }
     34 
     35 /**
     36  * Images
     37  */
     38 img {
     39   max-width: 100%;
     40   vertical-align: middle; }
     41 
     42 /**
     43  * Figures
     44  */
     45 figure > img {
     46   display: block; }
     47 
     48 figcaption {
     49   font-size: 14px; }
     50 
     51 /**
     52  * Lists
     53  */
     54 ul, ol {
     55   margin-left: 30px; }
     56 
     57 li > ul,
     58 li > ol {
     59   margin-bottom: 0; }
     60 
     61 /**
     62  * Headings
     63  */
     64 h1, h2, h3, h4, h5, h6 {
     65   font-weight: 300; }
     66 
     67 /**
     68  * Links
     69  */
     70 a {
     71   color: #2a7ae2;
     72   text-decoration: none; }
     73   a:visited {
     74     color: #1756a9; }
     75   a:hover {
     76     color: #111;
     77     text-decoration: underline; }
     78 
     79 /**
     80  * Blockquotes
     81  */
     82 blockquote {
     83   color: #828282;
     84   border-left: 4px solid #e8e8e8;
     85   padding-left: 15px;
     86   font-size: 18px;
     87   letter-spacing: -1px;
     88   font-style: italic; }
     89   blockquote > :last-child {
     90     margin-bottom: 0; }
     91 
     92 /**
     93  * Code formatting
     94  */
     95 pre,
     96 code {
     97   font-size: 15px;
     98   border: 1px solid #e8e8e8;
     99   border-radius: 3px;
    100   background-color: #eef; }
    101 
    102 code {
    103   padding: 1px 5px; }
    104 
    105 pre {
    106   padding: 8px 12px;
    107   overflow-x: scroll; }
    108   pre > code {
    109     border: 0;
    110     padding-right: 0;
    111     padding-left: 0; }
    112 
    113 /**
    114  * Wrapper
    115  */
    116 .wrapper {
    117   max-width: -webkit-calc(800px - (30px * 2));
    118   max-width: calc(800px - (30px * 2));
    119   margin-right: auto;
    120   margin-left: auto;
    121   padding-right: 30px;
    122   padding-left: 30px; }
    123   @media screen and (max-width: 800px) {
    124     .wrapper {
    125       max-width: -webkit-calc(800px - (30px));
    126       max-width: calc(800px - (30px));
    127       padding-right: 15px;
    128       padding-left: 15px; } }
    129 
    130 /**
    131  * Clearfix
    132  */
    133 .wrapper:after, .footer-col-wrapper:after {
    134   content: "";
    135   display: table;
    136   clear: both; }
    137 
    138 /**
    139  * Icons
    140  */
    141 .icon > svg {
    142   display: inline-block;
    143   width: 16px;
    144   height: 16px;
    145   vertical-align: middle; }
    146   .icon > svg path {
    147     fill: #828282; }
    148 
    149 /**
    150  * Site header
    151  */
    152 .site-header {
    153   border-top: 5px solid #424242;
    154   border-bottom: 1px solid #e8e8e8;
    155   min-height: 56px;
    156   position: relative; }
    157 
    158 .site-title {
    159   font-size: 26px;
    160   line-height: 56px;
    161   letter-spacing: -1px;
    162   margin-bottom: 0;
    163   float: left; }
    164   .site-title, .site-title:visited {
    165     color: #424242; }
    166 
    167 .site-nav {
    168   float: right;
    169   line-height: 56px; }
    170   .site-nav .menu-icon {
    171     display: none; }
    172   .site-nav .page-link {
    173     color: #111;
    174     line-height: 1.5; }
    175     .site-nav .page-link:not(:first-child) {
    176       margin-left: 20px; }
    177   @media screen and (max-width: 600px) {
    178     .site-nav {
    179       position: absolute;
    180       top: 9px;
    181       right: 30px;
    182       background-color: #fdfdfd;
    183       border: 1px solid #e8e8e8;
    184       border-radius: 5px;
    185       text-align: right; }
    186       .site-nav .menu-icon {
    187         display: block;
    188         float: right;
    189         width: 36px;
    190         height: 26px;
    191         line-height: 0;
    192         padding-top: 10px;
    193         text-align: center; }
    194         .site-nav .menu-icon > svg {
    195           width: 18px;
    196           height: 15px; }
    197           .site-nav .menu-icon > svg path {
    198             fill: #424242; }
    199       .site-nav .trigger {
    200         clear: both;
    201         display: none; }
    202       .site-nav:hover .trigger {
    203         display: block;
    204         padding-bottom: 5px; }
    205       .site-nav .page-link {
    206         display: block;
    207         padding: 5px 10px; } }
    208 
    209 /**
    210  * Site footer
    211  */
    212 .site-footer {
    213   border-top: 1px solid #e8e8e8;
    214   padding: 30px 0; }
    215 
    216 .footer-heading {
    217   font-size: 18px;
    218   margin-bottom: 15px; }
    219 
    220 .contact-list,
    221 .social-media-list {
    222   list-style: none;
    223   margin-left: 0; }
    224 
    225 .footer-col-wrapper {
    226   font-size: 15px;
    227   color: #828282;
    228   margin-left: -15px; }
    229 
    230 .footer-col {
    231   float: left;
    232   margin-bottom: 15px;
    233   padding-left: 15px; }
    234 
    235 .footer-col-1 {
    236   width: -webkit-calc(35% - (30px / 2));
    237   width: calc(35% - (30px / 2)); }
    238 
    239 .footer-col-2 {
    240   width: -webkit-calc(20% - (30px / 2));
    241   width: calc(20% - (30px / 2)); }
    242 
    243 .footer-col-3 {
    244   width: -webkit-calc(45% - (30px / 2));
    245   width: calc(45% - (30px / 2)); }
    246 
    247 @media screen and (max-width: 800px) {
    248   .footer-col-1,
    249   .footer-col-2 {
    250     width: -webkit-calc(50% - (30px / 2));
    251     width: calc(50% - (30px / 2)); }
    252 
    253   .footer-col-3 {
    254     width: -webkit-calc(100% - (30px / 2));
    255     width: calc(100% - (30px / 2)); } }
    256 @media screen and (max-width: 600px) {
    257   .footer-col {
    258     float: none;
    259     width: -webkit-calc(100% - (30px / 2));
    260     width: calc(100% - (30px / 2)); } }
    261 /**
    262  * Page content
    263  */
    264 .page-content {
    265   padding: 30px 0; }
    266 
    267 .page-heading {
    268   font-size: 20px; }
    269 
    270 .post-list {
    271   margin-left: 0;
    272   list-style: none; }
    273   .post-list > li {
    274     margin-bottom: 30px; }
    275 
    276 .post-meta {
    277   font-size: 14px;
    278   color: #828282; }
    279 
    280 .post-link {
    281   display: block;
    282   font-size: 24px; }
    283 
    284 /**
    285  * Posts
    286  */
    287 .post-header {
    288   margin-bottom: 30px; }
    289 
    290 .post-title {
    291   font-size: 42px;
    292   letter-spacing: -1px;
    293   line-height: 1; }
    294   @media screen and (max-width: 800px) {
    295     .post-title {
    296       font-size: 36px; } }
    297 
    298 .post-content {
    299   margin-bottom: 30px; }
    300   .post-content h2 {
    301     font-size: 32px; }
    302     @media screen and (max-width: 800px) {
    303       .post-content h2 {
    304         font-size: 28px; } }
    305   .post-content h3 {
    306     font-size: 26px; }
    307     @media screen and (max-width: 800px) {
    308       .post-content h3 {
    309         font-size: 22px; } }
    310   .post-content h4 {
    311     font-size: 20px; }
    312     @media screen and (max-width: 800px) {
    313       .post-content h4 {
    314         font-size: 18px; } }
    315 
    316 /**
    317  * Syntax highlighting styles
    318  */
    319 .highlight {
    320   background: #fff; }
    321   .highlight .c {
    322     color: #998;
    323     font-style: italic; }
    324   .highlight .err {
    325     color: #a61717;
    326     background-color: #e3d2d2; }
    327   .highlight .k {
    328     font-weight: bold; }
    329   .highlight .o {
    330     font-weight: bold; }
    331   .highlight .cm {
    332     color: #998;
    333     font-style: italic; }
    334   .highlight .cp {
    335     color: #999;
    336     font-weight: bold; }
    337   .highlight .c1 {
    338     color: #998;
    339     font-style: italic; }
    340   .highlight .cs {
    341     color: #999;
    342     font-weight: bold;
    343     font-style: italic; }
    344   .highlight .gd {
    345     color: #000;
    346     background-color: #fdd; }
    347   .highlight .gd .x {
    348     color: #000;
    349     background-color: #faa; }
    350   .highlight .ge {
    351     font-style: italic; }
    352   .highlight .gr {
    353     color: #a00; }
    354   .highlight .gh {
    355     color: #999; }
    356   .highlight .gi {
    357     color: #000;
    358     background-color: #dfd; }
    359   .highlight .gi .x {
    360     color: #000;
    361     background-color: #afa; }
    362   .highlight .go {
    363     color: #888; }
    364   .highlight .gp {
    365     color: #555; }
    366   .highlight .gs {
    367     font-weight: bold; }
    368   .highlight .gu {
    369     color: #aaa; }
    370   .highlight .gt {
    371     color: #a00; }
    372   .highlight .kc {
    373     font-weight: bold; }
    374   .highlight .kd {
    375     font-weight: bold; }
    376   .highlight .kp {
    377     font-weight: bold; }
    378   .highlight .kr {
    379     font-weight: bold; }
    380   .highlight .kt {
    381     color: #458;
    382     font-weight: bold; }
    383   .highlight .m {
    384     color: #099; }
    385   .highlight .s {
    386     color: #d14; }
    387   .highlight .na {
    388     color: #008080; }
    389   .highlight .nb {
    390     color: #0086B3; }
    391   .highlight .nc {
    392     color: #458;
    393     font-weight: bold; }
    394   .highlight .no {
    395     color: #008080; }
    396   .highlight .ni {
    397     color: #800080; }
    398   .highlight .ne {
    399     color: #900;
    400     font-weight: bold; }
    401   .highlight .nf {
    402     color: #900;
    403     font-weight: bold; }
    404   .highlight .nn {
    405     color: #555; }
    406   .highlight .nt {
    407     color: #000080; }
    408   .highlight .nv {
    409     color: #008080; }
    410   .highlight .ow {
    411     font-weight: bold; }
    412   .highlight .w {
    413     color: #bbb; }
    414   .highlight .mf {
    415     color: #099; }
    416   .highlight .mh {
    417     color: #099; }
    418   .highlight .mi {
    419     color: #099; }
    420   .highlight .mo {
    421     color: #099; }
    422   .highlight .sb {
    423     color: #d14; }
    424   .highlight .sc {
    425     color: #d14; }
    426   .highlight .sd {
    427     color: #d14; }
    428   .highlight .s2 {
    429     color: #d14; }
    430   .highlight .se {
    431     color: #d14; }
    432   .highlight .sh {
    433     color: #d14; }
    434   .highlight .si {
    435     color: #d14; }
    436   .highlight .sx {
    437     color: #d14; }
    438   .highlight .sr {
    439     color: #009926; }
    440   .highlight .s1 {
    441     color: #d14; }
    442   .highlight .ss {
    443     color: #990073; }
    444   .highlight .bp {
    445     color: #999; }
    446   .highlight .vc {
    447     color: #008080; }
    448   .highlight .vg {
    449     color: #008080; }
    450   .highlight .vi {
    451     color: #008080; }
    452   .highlight .il {
    453     color: #099; }