chloro/phyll/static/css/style.scss

   1 @charset "UTF-8";
   2
   3 $text-color: #222;
   4 $link-color: #0000ee;
   5 $visited-link-color: #551a8b;
   6
   7 @import "opensans";
   8
   9 body {
  10         font-family: "Open Sans", sans-serif;
  11         background: white;
  12         color: $text-color;
  13         font-size: 100%;
  14 }
  15
  16 a {
  17         color: $link-color;
  18         text-decoration: none;
  19         border-bottom: 0.1em dotted $link-color;
  20         &:visited {
  21                 color: $visited-link-color;
  22                 border-color: $visited-link-color;
  23         }
  24         &:hover {
  25                 border-bottom-style: solid;
  26         }
  27 }
  28
  29 header {
  30         display: inline-block;
  31         h1 {
  32                 font-weight: normal;
  33                 text-transform: uppercase;
  34                 margin: 1em 0 0 1em;
  35                 padding: 0 0.5em;
  36                 color: lighten($text-color, 20%);
  37                 background: #fafaff;
  38                 display: inline-block;
  39                 a {
  40                         border: none;
  41                 }
  42         }
  43         transform: rotate(-2deg);
  44         position: relative;
  45         z-index: 2;
  46 }
  47
  48 div.actions {
  49         position: absolute;
  50         top: 1rem;
  51         right: 1rem;
  52         a {
  53                 margin-left: 1rem;
  54         }
  55 }
  56
  57 main {
  58         margin: 0 4em;
  59         padding: 1em;
  60         background: #fafaff;
  61         max-width: 70em;
  62         min-height: 70vh;
  63         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
  64 }
  65
  66 .home {
  67         a {
  68                 text-transform: uppercase;
  69                 display: block;
  70                 text-decoration: none;
  71                 font-size: 500%;
  72                 font-weight: bold;
  73                 padding-top: 0.5em;
  74                 line-height: 50%;
  75                 span {
  76                         font-size: 30%;
  77                 }
  78                 margin-bottom: 2rem;
  79         }
  80 }
  81
  82 .post {
  83         max-width: 50em;
  84         div.figure {
  85                 text-align: center;
  86                 margin: 1em 0;
  87                 img {
  88                         border: 1px solid gray;
  89                         padding: 3px;
  90                 }
  91         }
  92 }
  93
  94 .post-list {
  95         ul, li {
  96                 margin: 0;
  97                 padding: 0;
  98                 list-style: none;
  99                 display: inline-block;
 100         }
 101         a {
 102                 text-transform: uppercase;
 103                 display: inline-block;
 104                 text-decoration: none;
 105                 font-size: 200%;
 106                 font-weight: bold;
 107                 padding-top: 0.5em;
 108                 margin-right: 1em;
 109                 span {
 110                         font-size: 60%;
 111                 }
 112         }
 113
 114 }