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