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: 0.5rem;
  51         left: 1rem;
  52         z-index: 100;
  53         a {
  54                 margin-right: 1rem;
  55         }
  56 }
  57
  58 main, footer {
  59         margin: 0 4em;
  60         padding: 1em;
  61         max-width: 70em;
  62 }
  63
  64 main {
  65         background: #fafaff;
  66         min-height: 70vh;
  67         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
  68 }
  69
  70 .home {
  71         nav a {
  72                 text-transform: uppercase;
  73                 display: inline-block;
  74                 text-decoration: none;
  75                 font-size: 500%;
  76                 font-weight: bold;
  77                 padding-top: 0.5em;
  78                 line-height: 50%;
  79                 width: 100%;
  80                 span {
  81                         font-size: 30%;
  82                 }
  83                 margin-bottom: 1rem;
  84                 &.divers {
  85                         width: 49%;
  86                 }
  87                 &.vrac {
  88                         width: 49%;
  89                         text-align: right;
  90                         float: right;
  91                 }
  92         }
  93         .latest {
  94                 margin-top: 2em;
  95                 h2 {
  96                         margin: 0;
  97                         font-size: 400%;
  98                         font-weight: bold;
  99                         text-transform: uppercase;
 100                 }
 101                 .meta {
 102                         padding-top: 0.5rem;
 103                         padding-left: 0.5rem;
 104                         color: lighten($text-color, 40%);
 105                 }
 106         }
 107 }
 108
 109 .post {
 110         max-width: 50em;
 111         div.figure {
 112                 text-align: center;
 113                 margin: 1em 0;
 114                 img {
 115                         border: 1px solid gray;
 116                         padding: 3px;
 117                 }
 118                 .caption {
 119                         margin-top: 0;
 120                         font-style: italic;
 121                 }
 122         }
 123         p {
 124                 line-height: 160%;
 125         }
 126         code,
 127         pre.screen {
 128                 background: #111;
 129                 color: white;
 130                 padding: 2px;
 131         }
 132         div.meta {
 133                 margin-top: 3em;
 134                 color: lighten($text-color, 40%);
 135         }
 136 }
 137
 138 .post-list {
 139         ul, li {
 140                 margin: 0;
 141                 padding: 0;
 142                 list-style: none;
 143                 display: inline-block;
 144         }
 145         li.unpublished {
 146                 opacity: 0.5;
 147         }
 148         a {
 149                 text-transform: uppercase;
 150                 display: inline-block;
 151                 text-decoration: none;
 152                 font-size: 200%;
 153                 font-weight: bold;
 154                 padding-top: 0.5em;
 155                 margin-right: 1em;
 156                 span {
 157                         font-size: 60%;
 158                 }
 159         }
 160 }
 161
 162 .older.post-list {
 163         margin: 5em 0 2em 0;
 164         padding: 1em 0;
 165         border-top: 0.1em dotted $link-color;
 166         border-bottom: 0.1em dotted $link-color;
 167         line-height: 200%;
 168         li {
 169                 display: inline;
 170                 a {
 171                         padding-top: 0;
 172                         display: inline;
 173                         font-size: 120%;
 174                 }
 175         }
 176 }
 177
 178 footer {
 179         p {
 180                 text-align: right;
 181                 font-size: 100%;
 182         }
 183 }