sana137.in

Sana's gatsbyjs-based blog
git clone http://git.hanabi.in/repos/sana137.in.git
Log | Files | Refs | README | LICENSE

hanabi.global.css (6722B)

      1 /* Variables
      2 /* ---------------------------------------------------------- */
      3 
      4 :root {
      5   /* Colours */
      6   --blue: #3eb0ef;
      7   --green: #a4d037;
      8   --purple: #ad26b4;
      9   --yellow: #fecd35;
     10   --red: #f05230;
     11   --darkgrey: #15171a;
     12   --midgrey: #738a94;
     13   --lightgrey: #c5d2d9;
     14   --whitegrey: #e5eff5;
     15   --pink: #fa3a57;
     16   --brown: #a3821a;
     17 }
     18 
     19 /* Reset
     20 /* ---------------------------------------------------------- */
     21 
     22 html,
     23 body,
     24 div,
     25 span,
     26 applet,
     27 object,
     28 iframe,
     29 h1,
     30 h2,
     31 h3,
     32 h4,
     33 h5,
     34 h6,
     35 p,
     36 blockquote,
     37 pre,
     38 a,
     39 abbr,
     40 acronym,
     41 address,
     42 big,
     43 cite,
     44 code,
     45 del,
     46 dfn,
     47 em,
     48 img,
     49 ins,
     50 kbd,
     51 q,
     52 s,
     53 samp,
     54 small,
     55 strike,
     56 strong,
     57 sub,
     58 sup,
     59 tt,
     60 var,
     61 dl,
     62 dt,
     63 dd,
     64 ol,
     65 ul,
     66 li,
     67 fieldset,
     68 form,
     69 label,
     70 legend,
     71 table,
     72 caption,
     73 tbody,
     74 tfoot,
     75 thead,
     76 tr,
     77 th,
     78 td,
     79 article,
     80 aside,
     81 canvas,
     82 details,
     83 embed,
     84 figure,
     85 figcaption,
     86 footer,
     87 header,
     88 hgroup,
     89 menu,
     90 nav,
     91 output,
     92 ruby,
     93 section,
     94 summary,
     95 time,
     96 mark,
     97 audio,
     98 video {
     99   margin: 0;
    100   padding: 0;
    101   border: 0;
    102   font: inherit;
    103   font-size: 100%;
    104   vertical-align: baseline;
    105 }
    106 body {
    107   line-height: 1;
    108 }
    109 ol,
    110 ul {
    111   list-style: none;
    112 }
    113 blockquote,
    114 q {
    115   quotes: none;
    116 }
    117 blockquote:before,
    118 blockquote:after,
    119 q:before,
    120 q:after {
    121   content: '';
    122   content: none;
    123 }
    124 table {
    125   border-spacing: 0;
    126   border-collapse: collapse;
    127 }
    128 img {
    129   max-width: 100%;
    130 }
    131 html {
    132   box-sizing: border-box;
    133   font-family: sans-serif;
    134 
    135   -ms-text-size-adjust: 100%;
    136   -webkit-text-size-adjust: 100%;
    137 }
    138 *,
    139 *:before,
    140 *:after {
    141   box-sizing: inherit;
    142 }
    143 a {
    144   background-color: transparent;
    145 }
    146 a:active,
    147 a:hover {
    148   outline: 0;
    149 }
    150 b,
    151 strong {
    152   font-weight: bold;
    153 }
    154 i,
    155 em,
    156 dfn {
    157   font-style: italic;
    158 }
    159 h1 {
    160   margin: 0.67em 0;
    161   font-size: 2em;
    162 }
    163 small {
    164   font-size: 80%;
    165 }
    166 sub,
    167 sup {
    168   position: relative;
    169   font-size: 75%;
    170   line-height: 0;
    171   vertical-align: baseline;
    172 }
    173 sup {
    174   top: -0.5em;
    175 }
    176 sub {
    177   bottom: -0.25em;
    178 }
    179 img {
    180   border: 0;
    181 }
    182 svg:not(:root) {
    183   overflow: hidden;
    184 }
    185 mark {
    186   background-color: #fdffb6;
    187 }
    188 code,
    189 kbd,
    190 pre,
    191 samp {
    192   font-family: monospace, monospace;
    193   font-size: 1em;
    194 }
    195 button,
    196 input,
    197 optgroup,
    198 select,
    199 textarea {
    200   margin: 0; /* 3 */
    201   color: inherit; /* 1 */
    202   font: inherit; /* 2 */
    203 }
    204 button {
    205   overflow: visible;
    206   border: none;
    207 }
    208 button,
    209 select {
    210   text-transform: none;
    211 }
    212 button,
    213 html input[type="button"],
    214 /* 1 */
    215 input[type="reset"],
    216 input[type="submit"] {
    217   cursor: pointer; /* 3 */
    218 
    219   -webkit-appearance: button; /* 2 */
    220 }
    221 button[disabled],
    222 html input[disabled] {
    223   cursor: default;
    224 }
    225 button::-moz-focus-inner,
    226 input::-moz-focus-inner {
    227   padding: 0;
    228   border: 0;
    229 }
    230 input {
    231   line-height: normal;
    232 }
    233 input:focus {
    234   outline: none;
    235 }
    236 input[type='checkbox'],
    237 input[type='radio'] {
    238   box-sizing: border-box; /* 1 */
    239   padding: 0; /* 2 */
    240 }
    241 input[type='number']::-webkit-inner-spin-button,
    242 input[type='number']::-webkit-outer-spin-button {
    243   height: auto;
    244 }
    245 input[type='search'] {
    246   box-sizing: content-box; /* 2 */
    247 
    248   -webkit-appearance: textfield; /* 1 */
    249 }
    250 input[type='search']::-webkit-search-cancel-button,
    251 input[type='search']::-webkit-search-decoration {
    252   -webkit-appearance: none;
    253 }
    254 legend {
    255   padding: 0; /* 2 */
    256   border: 0; /* 1 */
    257 }
    258 textarea {
    259   overflow: auto;
    260 }
    261 table {
    262   border-spacing: 0;
    263   border-collapse: collapse;
    264 }
    265 td,
    266 th {
    267   padding: 0;
    268 }
    269 
    270 /* ==========================================================================
    271    Base styles: opinionated defaults
    272    ========================================================================== */
    273 
    274 html {
    275   overflow-x: hidden;
    276   overflow-y: scroll;
    277   font-size: 62.5%;
    278 
    279   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    280 }
    281 body {
    282   overflow-x: hidden;
    283   /* color: color(var(--midgrey) l(-25%)); */
    284   color: #454545;
    285   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    286     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    287   font-size: 1.5rem;
    288   line-height: 1.6em;
    289   font-weight: 400;
    290   font-style: normal;
    291   letter-spacing: 0;
    292   text-rendering: optimizeLegibility;
    293   background: #fff;
    294 
    295   -webkit-font-smoothing: antialiased;
    296   -moz-osx-font-smoothing: grayscale;
    297   -moz-font-feature-settings: 'liga' on;
    298 }
    299 
    300 ::selection {
    301   background: rgba(228, 175, 10, 0.5);
    302 }
    303 
    304 ::-moz-selection {
    305   background: rgba(228, 175, 10, 0.5);
    306 }
    307 
    308 hr {
    309   /* position: relative; */
    310   overflow: visible; /* For IE */
    311   text-align: center;
    312   display: block;
    313   width: 100%;
    314   margin: 2.5em 0 3.5em;
    315   padding: 0;
    316   height: 1px;
    317   border: 0;
    318   /* border-top: 1px solid color(var(--lightgrey) l(+10%)); */
    319   background-image: linear-gradient(
    320     to right,
    321     rgba(0, 0, 0, 0),
    322     rgba(0, 0, 0, 0.75),
    323     rgba(0, 0, 0, 0)
    324   );
    325 }
    326 
    327 hr:last-child::after {
    328   content: 'Fin';
    329   font-style: oblique;
    330   display: inline-block;
    331   position: relative;
    332   top: -0.7em;
    333   font-size: 1.5em;
    334   padding: 0 0.25em;
    335   background: #f5f5f5;
    336 }
    337 
    338 audio,
    339 canvas,
    340 iframe,
    341 img,
    342 svg,
    343 video {
    344   vertical-align: middle;
    345 }
    346 
    347 fieldset {
    348   margin: 0;
    349   padding: 0;
    350   border: 0;
    351 }
    352 
    353 textarea {
    354   resize: vertical;
    355 }
    356 
    357 p,
    358 ul,
    359 ol,
    360 dl,
    361 blockquote {
    362   margin: 0 0 1.5em 0;
    363 }
    364 
    365 ol,
    366 ul {
    367   padding-left: 1.3em;
    368   padding-right: 1.5em;
    369 }
    370 
    371 ol ol,
    372 ul ul,
    373 ul ol,
    374 ol ul {
    375   margin: 0.5em 0 1em;
    376 }
    377 
    378 ul {
    379   list-style: disc;
    380 }
    381 
    382 ol {
    383   list-style: decimal;
    384 }
    385 
    386 ul,
    387 ol {
    388   max-width: 100%;
    389 }
    390 
    391 li {
    392   margin: 0.5em 0;
    393   padding-left: 0.3em;
    394   line-height: 1.6em;
    395 }
    396 
    397 dt {
    398   float: left;
    399   margin: 0 20px 0 0;
    400   width: 120px;
    401   color: var(--darkgrey);
    402   font-weight: 500;
    403   text-align: right;
    404 }
    405 
    406 dd {
    407   margin: 0 0 5px 0;
    408   text-align: left;
    409 }
    410 
    411 blockquote {
    412   margin: 1.5em 0;
    413   padding: 0 1.6em 0 1.6em;
    414   border-left: var(--whitegrey) 0.5em solid;
    415 }
    416 
    417 blockquote p {
    418   margin: 0.8em 0;
    419   font-size: 1.2em;
    420   font-weight: 300;
    421 }
    422 
    423 blockquote small {
    424   display: inline-block;
    425   margin: 0.8em 0 0.8em 1.5em;
    426   font-size: 0.9em;
    427   opacity: 0.8;
    428 }
    429 /* Quotation marks */
    430 blockquote small:before {
    431   content: '\2014 \00A0';
    432 }
    433 
    434 blockquote cite {
    435   font-weight: bold;
    436 }
    437 blockquote cite a {
    438   font-weight: normal;
    439 }
    440 
    441 a {
    442   /* color: color(var(--blue) l(-5%)); */
    443   color: #e4af0a;
    444   text-decoration: none;
    445 }
    446 
    447 a:hover {
    448   text-decoration: underline;
    449 }
    450 
    451 h1,
    452 h2,
    453 h3,
    454 h4,
    455 h5,
    456 h6 {
    457   margin-top: 0;
    458   line-height: 1.15;
    459   font-weight: 700;
    460   text-rendering: optimizeLegibility;
    461 }
    462 
    463 h1 {
    464   margin: 0 0 0.5em 0;
    465   font-size: 5rem;
    466   font-weight: 700;
    467 }
    468 @media (max-width: 500px) {
    469   h1 {
    470     font-size: 2.2rem;
    471   }
    472 }
    473 
    474 h2 {
    475   margin: 1.5em 0 0.5em 0;
    476   font-size: 2rem;
    477 }
    478 @media (max-width: 500px) {
    479   h2 {
    480     font-size: 1.8rem;
    481   }
    482 }
    483 
    484 h3 {
    485   margin: 1.5em 0 0.5em 0;
    486   font-size: 1.8rem;
    487   font-weight: 500;
    488 }
    489 @media (max-width: 500px) {
    490   h3 {
    491     font-size: 1.7rem;
    492   }
    493 }
    494 
    495 h4 {
    496   margin: 1.5em 0 0.5em 0;
    497   font-size: 1.6rem;
    498   font-weight: 500;
    499 }
    500 
    501 h5 {
    502   margin: 1.5em 0 0.5em 0;
    503   font-size: 1.4rem;
    504   font-weight: 500;
    505 }
    506 
    507 h6 {
    508   margin: 1.5em 0 0.5em 0;
    509   font-size: 1.4rem;
    510   font-weight: 500;
    511 }