chloro/rdio/static/css/style.scss

   1 @charset "UTF-8";
   2
   3 $text-color: #222;
   4 $link-color: #386ede;
   5 $visited-link-color: #551a8b;
   6
   7 @import "../../../phyll/static/css/_opensans.scss";
   8
   9 body {
  10         font-family: "Open Sans", sans-serif;
  11         background: url(6138240034_68f81350a2_o-x.jpg) top center no-repeat fixed;
  12         background-size: cover;
  13         color: $text-color;
  14         font-size: 100%;
  15 }
  16
  17 a {
  18         color: $link-color;
  19         text-decoration: none;
  20         border-bottom: 1px dotted $link-color;
  21         &:visited {
  22                 color: $visited-link-color;
  23                 border-color: $visited-link-color;
  24         }
  25         &:hover {
  26                 border-bottom-style: solid;
  27         }
  28 }
  29
  30 header {
  31         display: block;
  32         margin: 0 auto;
  33         padding: 0 0 0em 0;
  34         max-width: 45em;
  35         position: relative;
  36         z-index: 10;
  37         span {
  38                 font-weight: normal;
  39                 font-size: 2em;
  40                 text-transform: uppercase;
  41                 margin: 0 0 0 1em;
  42                 padding: 0 0.5em;
  43                 color: lighten($text-color, 20%);
  44                 background: #eaeaff;
  45                 display: inline-block;
  46                 box-shadow: 0 0 3px 1px #b2987f;
  47                 a {
  48                         border: none;
  49                 }
  50         }
  51         transform: rotate(-1deg);
  52 }
  53
  54 main, footer {
  55         position: relative;
  56         z-index: 0;
  57         margin: 0 auto;
  58         padding: 1em;
  59         max-width: 45em;
  60         @media screen and (max-width: 50em) {
  61                 margin: 0;
  62         }
  63 }
  64
  65 main {
  66         position: relative;
  67         background: #fafaff;
  68         min-height: 80vh;
  69         border: 1px solid #555;
  70 }
  71
  72 footer {
  73         border: 1px solid #555;
  74         margin-top: 1em;
  75         background: #fafaff;
  76         display: flex;
  77         justify-content: space-between;
  78         p {
  79                 margin: 0;
  80         }
  81 }
  82
  83 article {
  84         h1 {
  85                 font-size: 1.5em;
  86         }
  87         h2 {
  88                 font-size: 1.2em;
  89                 margin-left: -0.9em;
  90                 border-left: 0.3em solid #555;
  91                 padding-left: 0.5em;
  92         }
  93         a {
  94                 box-shadow: inset 0 -8px 0 0 rgba(34, 27, 242, 0.1);
  95                 transition: box-shadow ease 0.2s;;
  96                 &:hover {
  97                         box-shadow: inset 0 -21px 0 0 rgba(34, 27, 242, 0.3);
  98                 }
  99         }
 100
 101         [contenteditable=true] div.figure {
 102                 cursor: pointer;
 103         }
 104         div.figure {
 105                 text-align: center;
 106                 line-height: initial;
 107                 span.empty::before {
 108                         min-height: 50px;
 109                         margin: 0 auto;
 110                         display: block;
 111                         width: 90%;
 112                         background: #eee;
 113                         padding: 1rem;
 114                         font-size: 150px;
 115                         content: "(image)";
 116                         color: #aaa;
 117                 }
 118                 img {
 119                         max-width: 90%;
 120                 }
 121         }
 122         p {
 123                 line-height: 160%;
 124         }
 125         code,
 126         pre.screen {
 127                 background: #111;
 128                 color: white;
 129                 padding: 2px;
 130                 overflow: scroll;
 131         }
 132         div.meta {
 133                 margin-top: 3em;
 134                 color: lighten($text-color, 30%);
 135         }
 136         div.note {
 137                 background: #fbf7c1 url(yelp-note.png) 5px 10px no-repeat;
 138                 padding: 0.2em 0.5em 0.2em 2em;
 139                 p {
 140                         margin: 0.5em 0;
 141                 }
 142         }
 143         blockquote {
 144                 background: #eeeefd;
 145                 padding: 0.1em 1em;
 146                 clip-path: polygon(0px 0px, 94.27% 2px, 99.63% 2.65%, 98.39% 97.48%, 10% 100%, 0% 100%, 0px 0px);
 147         }
 148 }
 149
 150 .latest-changes {
 151         border-top: 1px solid #555;
 152         padding-top: 0;
 153         h3 {
 154                 font-weight: normal;
 155         }
 156         &--date {
 157                 font-size: 80%;
 158                 color: lighten($link-color, 10%);
 159         }
 160 }
 161
 162 .inline-style-popup,
 163 .block-style-popup {
 164         background: white;
 165         box-shadow: 0 0 5px #666;
 166         input {
 167                 display: none;
 168                 padding: 3px;
 169                 border: 1px inset #ccc;
 170                 background: white;
 171                 width: 0px;
 172                 transition: width ease 2s;
 173                 &.shown {
 174                         display: inline-block;
 175                         width: 400px;
 176                 }
 177         }
 178         button {
 179                 padding: 0 0.5em;
 180                 height: 2em;
 181                 text-align: center;
 182                 background: #eee;
 183                 border: 0px;
 184                 &:hover {
 185                         background: #ccc;
 186                 }
 187                 &[data-action=createLink] {
 188                         color: blue;
 189                         text-decoration: underline;
 190                 }
 191                 &.on {
 192                         background: #444;
 193                         color: white;
 194                 }
 195         }
 196         &.inline-style-popup button {
 197                 width: 2em;
 198                 padding: 0;
 199         }
 200         &.block-style-popup {
 201                 &.selected button {
 202                         display: none;
 203                         &.on {
 204                                 display: block;
 205                         }
 206                 }
 207         }
 208 }
 209
 210 input#image-upload, input#document-upload {
 211         display: none;
 212 }
 213
 214 #quickedit {
 215         position: sticky;
 216         bottom: 10px;
 217         display: flex;
 218         justify-content: flex-end;
 219         label {
 220                 display: inline-block;
 221                 margin-left: 6px;
 222                 cursor: pointer;
 223         }
 224         input {
 225                 display: none;
 226         }
 227
 228         button,
 229         span {
 230                 display: inline-block;
 231                 font-weight: normal;
 232                 background: white;
 233                 border: 1px solid #386ede;
 234                 box-shadow: 0 0 0 5px white;
 235                 padding: 1ex;
 236                 border-radius: 3px;
 237                 color: #386ede;
 238                 font-size: inherit;
 239                 letter-spacing: inherit;
 240                 line-height: inherit;
 241         }
 242         button {
 243                 &:hover {
 244                         color: white;
 245                         background: #386ede;
 246                 }
 247         }
 248         button.error {
 249                 background: red;
 250                 color: white;
 251                 &:hover {
 252                         background: darken(red, 10%);
 253                 }
 254         }
 255
 256         input:checked + span {
 257                 background: #386ede;
 258                 color: white;
 259         }
 260 }