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         position: relative;
  66         background: #fafaff;
  67         min-height: 70vh;
  68         clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px);
  69 }
  70
  71 .home {
  72         nav a {
  73                 text-transform: uppercase;
  74                 display: inline-block;
  75                 text-decoration: none;
  76                 font-size: 500%;
  77                 font-weight: bold;
  78                 padding-top: 0.5em;
  79                 line-height: 50%;
  80                 width: 100%;
  81                 span {
  82                         font-size: 30%;
  83                 }
  84                 margin-bottom: 1rem;
  85                 &.divers {
  86                         width: 49%;
  87                 }
  88                 &.vrac {
  89                         width: 49%;
  90                         text-align: right;
  91                         float: right;
  92                 }
  93         }
  94         .latest {
  95                 margin-top: 2em;
  96                 h2 {
  97                         margin: 0;
  98                         font-size: 400%;
  99                         font-weight: bold;
 100                         text-transform: uppercase;
 101                 }
 102                 .meta {
 103                         padding-top: 0.5rem;
 104                         padding-left: 0.5rem;
 105                         color: lighten($text-color, 40%);
 106                 }
 107         }
 108 }
 109
 110 .post {
 111         max-width: 50em;
 112         div.figure {
 113                 text-align: center;
 114                 margin: 1em 0;
 115                 img {
 116                         border: 1px solid gray;
 117                         padding: 3px;
 118                 }
 119                 .caption {
 120                         margin-top: 0;
 121                         font-style: italic;
 122                 }
 123         }
 124         p {
 125                 line-height: 160%;
 126         }
 127         code,
 128         pre.screen {
 129                 background: #111;
 130                 color: white;
 131                 padding: 2px;
 132         }
 133         div.meta {
 134                 margin-top: 3em;
 135                 color: lighten($text-color, 40%);
 136         }
 137         div.note {
 138                 background: #fbf7c1;;
 139                 padding: 0.2em 0.5em 0.2em 2em;
 140                 p {
 141                         margin: 0.5em 0;
 142                 }
 143         }
 144         blockquote {
 145                 background: #eeeefd;
 146                 padding: 0.1em 1em;
 147                 clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
 148         }
 149 }
 150
 151 .post-list {
 152         ul, li {
 153                 margin: 0;
 154                 padding: 0;
 155                 list-style: none;
 156                 display: inline-block;
 157         }
 158         li.unpublished {
 159                 opacity: 0.5;
 160         }
 161         a {
 162                 text-transform: uppercase;
 163                 display: inline-block;
 164                 text-decoration: none;
 165                 font-size: 200%;
 166                 font-weight: bold;
 167                 padding-top: 0.5em;
 168                 margin-right: 1em;
 169                 span {
 170                         font-size: 60%;
 171                 }
 172         }
 173 }
 174
 175 .older.post-list {
 176         margin: 5em 0 2em 0;
 177         padding: 1em 0;
 178         border-top: 0.1em dotted $link-color;
 179         border-bottom: 0.1em dotted $link-color;
 180         line-height: 200%;
 181         li {
 182                 display: inline;
 183                 a {
 184                         padding-top: 0;
 185                         display: inline;
 186                         font-size: 120%;
 187                 }
 188         }
 189 }
 190
 191 footer {
 192         p {
 193                 text-align: right;
 194                 font-size: 100%;
 195         }
 196 }
 197
 198 div[contenteditable=true]:focus-within {
 199         outline: 1px solid gray;
 200         outline-offset: 3px;
 201 }
 202
 203 .inline-style-popup,
 204 .block-style-popup {
 205         background: white;
 206         box-shadow: 0 0 5px #666;
 207         input {
 208                 display: none;
 209                 padding: 3px;
 210                 border: 1px inset #ccc;
 211                 background: white;
 212                 width: 0px;
 213                 transition: width ease 2s;
 214                 &.shown {
 215                         display: inline-block;
 216                         width: 400px;
 217                 }
 218         }
 219         button {
 220                 padding: 0 0.5em;
 221                 height: 2em;
 222                 text-align: center;
 223                 background: #eee;
 224                 border: 0px;
 225                 &:hover {
 226                         background: #ccc;
 227                 }
 228                 &[data-action=createLink] {
 229                         color: blue;
 230                         text-decoration: underline;
 231                 }
 232                 &.on {
 233                         background: #444;
 234                         color: white;
 235                 }
 236         }
 237         &.inline-style-popup button {
 238                 width: 2em;
 239                 padding: 0;
 240         }
 241         &.block-style-popup {
 242                 &.selected button {
 243                         display: none;
 244                         &.on {
 245                                 display: block;
 246                         }
 247                 }
 248         }
 249 }
 250
 251 button#save {
 252         position: sticky;
 253         bottom: 10px;
 254 }
 255
 256 main.post {
 257         [contenteditable=true] div.figure {
 258                 cursor: pointer;
 259         }
 260         div.figure {
 261                 text-align: center;
 262                 line-height: initial;
 263                 img {
 264                         max-width: 90%;
 265                         max-height: 70vh;
 266                 }
 267                 span.empty::before {
 268                         min-height: 50px;
 269                         margin: 0 auto;
 270                         display: block;
 271                         width: 90%;
 272                         background: #eee;
 273                         padding: 1rem;
 274                         font-size: 200px;
 275                         content: "(image)";
 276                         color: #aaa;
 277                 }
 278         }
 279 }