website

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

style.css (2285B)

      1 /* general */
      2 :root {
      3     --dark-grey-color: #a8a8a8;
      4     --light-grey-color: #eff1f5;
      5     --green-color: #26bd60;
      6     --red-color: #ff0000;
      7 	--airy-grey-color: #fafafa;
      8 }
      9 
     10 html,
     11 body {
     12     margin: 0;
     13     font-family: sans-serif;
     14     font-size: 14px;
     15     line-height: 1.4;
     16 }
     17 
     18 a {
     19     text-decoration: none;
     20 }
     21 
     22 a:hover {
     23     text-decoration: underline;
     24 }
     25 
     26 p {
     27     max-width: 500px;
     28 }
     29 
     30 img {
     31     width: 100%;
     32 }
     33 
     34 h2,
     35 h3 {
     36     font-weight: 500;
     37 }
     38 
     39 main {
     40     max-width: 500px;
     41     margin-bottom: 16px;
     42     margin-left: auto;
     43     margin-right: auto;
     44 }
     45 @media (max-width: 500px) {
     46     main {
     47         padding-left: 8px;
     48         padding-right: 8px;
     49     }
     50 }
     51 
     52 aside {
     53     max-width: 500px;
     54     padding: 2px 6px;
     55     margin-top: 8px;
     56     margin-left: auto;
     57     margin-right: auto;
     58     box-sizing: border-box;
     59 }
     60 @media (max-width: 500px) {
     61     aside {
     62         margin-left: 8px;
     63         margin-right: 8px;
     64     }
     65 }
     66 
     67 nav {
     68     max-width: 500px;
     69     margin-top: 16px;
     70     margin-left: auto;
     71     margin-right: auto;
     72 }
     73 @media (max-width: 500px) {
     74     nav {
     75         padding-left: 8px;
     76         padding-right: 8px;
     77     }
     78 }
     79 
     80 blockquote {
     81     max-width: 500px;
     82 }
     83 
     84 /* index */
     85 .byline {
     86     color: var(--dark-grey-color);
     87     margin-top: 24px;
     88     margin-bottom: 24px;
     89 }
     90 
     91 .byline::before {
     92     content: "» ";
     93 }
     94 
     95 .posts {
     96     list-style: none;
     97     padding-left: 0;
     98 }
     99 
    100 .posts li {
    101     font-size: 16px;
    102     margin-bottom: 24px;
    103 }
    104 
    105 .posts small {
    106     white-space: nowrap;
    107     color: var(--dark-grey-color);
    108 }
    109 
    110 .posts time {
    111     white-space: nowrap;
    112 }
    113 
    114 /* post detail */
    115 .posts-item-title {
    116     margin-bottom: 8px;
    117 }
    118 
    119 .posts-item-byline {
    120     color: var(--dark-grey-color);
    121     margin-bottom: 8px;
    122 }
    123 
    124 .posts-item-brand {
    125     display: block;
    126     margin-top: 16px;
    127     margin-bottom: 16px;
    128     color: var(--dark-grey-color);
    129 }
    130 
    131 .posts-item-brand:hover {
    132     text-decoration: none;
    133 }
    134 
    135 .posts-item-brand::before {
    136     content: "« ";
    137 }
    138 
    139 /* footer */
    140 footer {
    141     margin-left: auto;
    142     margin-right: auto;
    143     margin-top: 64px;
    144     margin-bottom: 16px;
    145     max-width: 500px;
    146 }
    147 @media (max-width: 500px) {
    148     footer {
    149         padding-left: 8px;
    150         padding-right: 8px;
    151     }
    152 }
    153 
    154 pre {
    155 	background: var(--airy-grey-color);
    156 	overflow-x: auto;
    157 }
    158 
    159 code {
    160 	background: var(--airy-grey-color);
    161 	word-wrap: break-word;
    162 }