hugo-theme-readable

Fork of https://github.com/cjtheham/hugo-theme-readable
git clone https://git.eamoncaddigan.net/hugo-theme-readable.git
Log | Files | Refs | README | LICENSE

readable.css (5916B)

      1 /* readable.css 1.1.0, licensed 0BSD */
      2 
      3 /* Font family support */
      4 html, html[data-font-family="serif"] {
      5   --font-family: serif;
      6 }
      7 html[data-font-family="sans-serif"] {
      8   --font-family: sans-serif;
      9 }
     10 html[data-font-family="monospace"] {
     11   --font-family: monospace;
     12 }
     13 
     14 /* Color scheme support */
     15 html, html[data-theme="light"] {
     16   --background-color: snow;
     17   --color: #000;
     18 }
     19 html[data-high-contrast="on"], html[data-theme="light"][data-high-contrast="on"] {
     20 	--background-color: #fff;
     21 }
     22 
     23 html[data-theme="dark"] {
     24   --background-color: #1f272d;
     25   --color: #fff;
     26 }
     27 html[data-theme="dark"][data-high-contrast="on"] {
     28 	--background-color: #000;
     29 }
     30 
     31 @media (prefers-color-scheme: dark) {
     32   html {
     33     --background-color: #222830;
     34     --color: #fff;
     35   }
     36 	html[data-high-contrast="on"] {
     37 		--background-color: #000;
     38 	}
     39 }
     40 
     41 @media (prefers-contrast: more) {
     42 	:is(html, html[data-theme="light"]):not([data-high-contrast="off"]) {
     43 		--background-color: #fff;
     44 	}
     45 
     46 	html[data-theme="dark"]:not([data-high-contrast="off"]) {
     47 		--background-color: #000;
     48 	}
     49 }
     50 
     51 /* Generic styles */
     52 :root {
     53   --column-width: 67ch;
     54   --form-width: 50ch;
     55   --line-width: 0.125rem;
     56   --line-height: 1.5;
     57 
     58   --one-line: calc(var(--line-height) * 1rem);
     59   --half-line: calc(var(--one-line) * 0.5);
     60 
     61   font-family: var(--font-family);
     62 
     63   background-color: var(--background-color);
     64   color: var(--color);
     65 }
     66 
     67 a {
     68   color: inherit;
     69 }
     70 
     71 a:active {
     72   color: red;
     73 }
     74 
     75 header, footer, h1, h2 {
     76   text-align: center;
     77 }
     78 
     79 footer:not(.exclude) {
     80   border-top: var(--line-width) solid;
     81 }
     82 
     83 summary {
     84   cursor: pointer;
     85 }
     86 
     87 blockquote:not(.exclude) {
     88   padding-left: var(--one-line);
     89   border-left: var(--line-width) solid;
     90 }
     91 
     92 ul, ol {
     93   padding-left: calc(var(--line-height) * 2rem);
     94 }
     95 
     96 :is(body, article, main, figure) > :is(img, video):not(.exclude) {
     97   max-width: 100%;
     98 }
     99 
    100 figure:not(.exclude) {
    101   text-align: center;
    102 }
    103 
    104 figure:not(.exclude) > * + figcaption {
    105   margin-top: 0;
    106   font-style: italic;
    107 }
    108 
    109 article aside:not(.exclude) {
    110   border: var(--line-width) solid;
    111   padding: 0 var(--one-line);
    112   border-radius: var(--half-line);
    113 }
    114 
    115 pre {
    116   max-width: 100%;
    117   overflow: auto;
    118 }
    119 
    120 hr {
    121   color: inherit;
    122   border: 0;
    123   border-top: var(--line-width) solid;
    124 }
    125 
    126 /* Vertical Rhythm */
    127 p, ul, ol, figcaption, nav, td, th, label {
    128   line-height: var(--line-height);
    129 }
    130 
    131 h1, h2, h3, h4, h5, h6, p, blockquote, hr, footer, header, nav, figure, figcaption, :is(ul, ol):not(li > *), :is(body, article, main) > :is(img, video, details):not(.exclude), table, article > aside, article > aside {
    132   margin: var(--one-line) 0;
    133 }
    134 
    135 /* Headings */
    136 
    137 header h1 {
    138   font-weight: normal;
    139 }
    140 
    141 h1, h2 {
    142   line-height: calc(var(--line-height) * 2rem);
    143 }
    144 
    145 h1 {
    146   font-size: 2.5rem;
    147 }
    148 
    149 h2 {
    150   font-size: 1.75rem;
    151 }
    152 
    153 h3, h4, h5, h6 {
    154   line-height: var(--one-line);
    155   padding-top: calc(var(--line-height) * 0.75rem);
    156   margin-bottom: calc(var(--line-height) * 0.25rem);
    157 }
    158 
    159 :is(h3, h4, h5, h6) + * {
    160   margin-top: 0;
    161 }
    162 
    163 /* Navbar */
    164 nav:not(.exclude:not([data-style]), [data-style="none"]) { /* This styling only affects the first nav element that is the direct child of the body */
    165   text-align: center;
    166   border-width: var(--line-width) 0;
    167   border-style: solid;
    168   line-height: var(--line-height);
    169   display: flex;
    170   flex-flow: row wrap;
    171 }
    172 
    173 nav:not(.exclude:not([data-style]), [data-style="none"]) > * {
    174   flex-grow: 1;
    175   margin: calc((var(--line-height) * 0.5rem) - var(--line-width)) var(--half-line); /* Put half a line's height on both top and bottom, then remove the width of the border */
    176   text-transform: uppercase;
    177 }
    178 
    179 nav[data-style="blockout"],
    180 nav:is([data-style="boxes"], [data-style="roundesque"]) a:is(:hover, :focus) {
    181 	background-color: var(--color);
    182 	color: var(--background-color);
    183 }
    184 
    185 nav[data-style="blockout"] a {
    186 	text-decoration: none;
    187 }
    188 
    189 nav[data-style="blockout"] a:is(:hover, :focus) {
    190 	background-color: var(--background-color);
    191 	color: var(--color);
    192 }
    193 
    194 nav[data-style]:is([data-style="boxes"], [data-style="roundesque"]) {
    195 	border: 0;
    196 }
    197 
    198 nav:is([data-style="boxes"], [data-style="roundesque"]) a {
    199 	text-decoration: none;
    200 	border: var(--line-width) solid;
    201 }
    202 
    203 nav[data-style="roundesque"] a {
    204 	border-radius: calc(0.25 * var(--one-line));
    205 }
    206 
    207 @media (prefers-reduced-motion: no-preference) {
    208   nav[data-style="classy"] span > a {
    209     text-decoration: none;
    210     display: inline-block;
    211   }
    212 
    213   nav[data-style="classy"] span > a::after {
    214     content: '';
    215     width: 0;
    216     height: var(--line-width);
    217     display: block;
    218     background: var(--color);
    219     transition: 150ms;
    220   }
    221 
    222   nav[data-style="classy"] span > a:is(:hover, :focus)::after {
    223     width: 100%;
    224   }
    225 }
    226 
    227 /* Column */
    228 body {
    229   margin: 0 auto;
    230   width: min(95%, var(--column-width));
    231 }
    232 
    233 /* Justification (default off; use data-justify="on" on <html> to enable) */
    234 /* 67ch (var(--column-width) / 95% (column max-width) === 70.526315789ch */
    235 @media (min-width: 70.5ch) {
    236   [data-justify="on"] body {
    237     text-align: justify;
    238     text-justify: inter-character;
    239   }
    240 }
    241 
    242 /* Tables */
    243 table:not(.exclude) {
    244   display: block;
    245   width: 100%;
    246   overflow: auto;
    247   border-collapse: collapse;
    248 }
    249 
    250 table:not(.exclude) :is(td, th) {
    251   padding: calc(var(--line-height) * 0.25rem);
    252   border: var(--line-width) solid;
    253 }
    254 
    255 table:not(.exclude) td {
    256   word-wrap: break-word;
    257 }
    258 
    259 /* Forms */
    260 form {
    261   max-width: var(--form-width)
    262 }
    263 
    264 form:not(.exclude) :is(label:not(input:is([type="checkbox"], [type="radio"]) + label), input:not([type="checkbox"], [type="radio"]), textarea, select) {
    265   display: block;
    266   margin: var(--half-line) 0;
    267 }
    268 
    269 form:not(.exclude) :is(input:not([type="checkbox"], [type="radio"]), textarea, select), button {
    270   box-sizing: border-box;
    271   padding: var(--half-line);
    272   background: transparent;
    273   border: var(--line-width) solid;
    274   color: inherit;
    275   font: inherit;
    276   width: 100%;
    277 }
    278 
    279 button {
    280 	width: initial;
    281 }
    282 
    283 form:not(.exclude) label:not(input:is([type="checkbox"], [type="radio"]) + label) {
    284   font-weight: bold;
    285 }