www

My personal website(s)
Log | Files | Refs

site.css (7202B)


      1 @font-face {
      2     font-family: "Merriweather";
      3     src: url("/css/fonts/Merriweather-Regular.otf") format("opentype");
      4 }
      5 @font-face {
      6     font-family: "Merriweather";
      7     font-weight: bold;
      8     src: url("/css/fonts/Merriweather-Bold.otf") format("opentype");
      9 }
     10 @font-face {
     11     font-family: "Merriweather";
     12     font-weight: bold;
     13     font-style: italic;
     14     src: url("/css/fonts/Merriweather-BoldItalic.otf") format("opentype");
     15 }
     16 @font-face {
     17     font-family: "Merriweather";
     18     font-style: italic;
     19     src: url("/css/fonts/Merriweather-Italic.otf") format("opentype");
     20 }
     21 @font-face {
     22     font-family: "Merriweather";
     23     font-weight: lighter;
     24     font-style: italic;
     25     src: url("/css/fonts/Merriweather-LightItalic.otf") format("opentype");
     26 }
     27 @font-face {
     28     font-family: "Merriweather";
     29     font-weight: lighter;
     30     src: url("/css/fonts/Merriweather-Light.otf") format("opentype");
     31 }
     32 
     33 html{
     34     margin: 1rem 2rem;
     35     font-size: 106.25%;
     36     --body-vertical-margin: 1rem;
     37     --body-horizontal-margin: 1rem;
     38     --content-box-padding: 0.5rem;
     39     --font-main: Georgia, sans-serif;
     40     --font-mono: 'Ubuntu Mono','Fira Code','Deja Vu Sans Mono','Bitstream Vera Sans Mono','Source Code Pro','Courier New',monospace;
     41     --font-quote: "Fresco", Georgia, serif;
     42     --font-sans: Avenir Next, Avenir, system-ui, sans-serif;
     43     --font-header: 'Merriweather','Linux Libertine','Georgia','Times',serif;
     44     --figure-offset: 0;
     45     --figcaption-padding: 0;
     46     --aside-width: 12.5rem;
     47     --column-gap: 2rem;
     48     --padding: 1rem;
     49 }
     50 
     51 body {
     52     font-family: var(--font-main);
     53     max-width: 70rem;
     54     min-width: 30rem;
     55     line-height: 1.4rem;
     56     margin: 0 auto;
     57 }
     58 
     59 p {
     60     word-wrap: break-word;
     61 }
     62 body > header{
     63     margin-bottom: 4em;
     64 }
     65 
     66 body > header nav {
     67     float:right;
     68 }
     69 
     70 body > header nav ul li {
     71     display: inline-block;
     72     list-style: none;
     73     padding: 0 0.5rem;
     74 }
     75 
     76 main {
     77     font-size: 1.1rem;
     78     font-family: var(--font-sans);
     79 }
     80 
     81 div.index h1 {
     82     font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif;
     83     font-size: 2rem;
     84     line-height: 2rem;
     85     font-weight: bolder;
     86 }
     87 
     88 div.index h2 {
     89     font-family: "Merriweather", "Linux Libertine", "Georgia", "Times", serif;
     90     font-size: 1.5rem;
     91     line-height: 2rem;
     92 }
     93 
     94 nav#table-of-contents {
     95     background: #f2f2f2;
     96     padding: 0.2rem 1rem;
     97     font-size: 90%;
     98 }
     99 
    100 nav#table-of-contents h2 {
    101     font-family: var(--font-sans);
    102     font-weight: bold;
    103     font-style: italic;
    104 }
    105 
    106 nav#table-of-contents li {
    107     list-style-type: square;
    108 }
    109 
    110 nav#table-of-contents li a {
    111     color: black;
    112 }
    113 nav#table-of-contents li a:hover {
    114     color: #33f;
    115     background-color: inherit;
    116 }
    117 
    118 code {
    119     background-color: #f3f4f4;
    120     font-family: var(--font-mono);
    121     padding: 0.1rem 0.3rem;
    122     border: 1px solid #e1e1e1;
    123     border-radius: 4px;
    124 }
    125 
    126 blockquote code {
    127     background-color: #999;
    128     border-color: #666;
    129     color: white;
    130 }
    131 
    132 pre {
    133     background-color: #f3f4f4;
    134     font-family: var(--font-mono);
    135     white-space: pre-wrap;
    136     overflow: auto;
    137     overflow-x: auto;
    138     margin: 1.25rem calc(-1 * var(--content-box-padding));
    139     padding: var(--content-box-padding);
    140     border: 1px solid #999;
    141 }
    142 
    143 pre.src {
    144   position: relative;
    145 }
    146 
    147 pre.src:before {
    148   /*display: none;*/
    149   position: absolute;
    150   background-color: #999;
    151   color: #f3f4f4;
    152   top: 0;
    153   right: 0;
    154   padding: 0.2rem 0.5rem;
    155 }
    156 
    157 aside {
    158     --aside-offset: 1rem;
    159     --aside-offset-lineheight: 1.5rem;
    160     background-color: #f8f8f8;
    161     padding: calc(var(--content-box-padding) * 0.5) calc(var(--content-box-padding) * 2);
    162     float: right;
    163     width: var(--aside-width);
    164     font-size: 0.9rem;
    165     line-height: 1.25rem;
    166     border: 1px solid #ccc;
    167 }
    168 
    169 a { text-decoration: none; color: #339; }
    170 a:hover { color: #33f; background-color: #f6f6f6; }
    171 
    172 blockquote {
    173     font-family: var(--font-quote);
    174     text-rendering: optimizeLegibility;
    175     line-height: 1.4;
    176     font-style: italic;
    177     background-color: #e0e0e0;
    178     border-radius: 0.5em;
    179     width: 90%;
    180     margin: 1em auto;
    181     padding: 0.2rem 1.2rem;
    182 }
    183 
    184 h1, h2, h3, h4 {
    185     font-family: var(--font-header);
    186 }
    187 main header h1 {
    188     font-size: 300%;
    189     line-height: 3.8rem;
    190 }
    191 
    192 figure figcaption {
    193     text-align: center;
    194     color: #666;
    195     font-style: italic;
    196     margin: 0 2rem;
    197 }
    198 
    199 footer {
    200     text-align: center;
    201     color: #999;
    202 }
    203 
    204 footer a {
    205     color: #666;
    206 }
    207 
    208 section img {
    209     display: block;
    210     margin-left: auto;
    211     margin-right: auto;
    212 }
    213 
    214 
    215 section img.shadow {
    216     box-shadow: 0 28px 50px rgba(0,0,0,0.16);
    217 }
    218 
    219 table {
    220     margin:1em auto;
    221     border-top:2px solid;
    222     border-collapse:collapse
    223 }
    224 table,thead {
    225     border-bottom:2px solid
    226 }
    227 table td+td,table th+th {
    228     border-left:1px solid gray
    229 }
    230 table tr {
    231     border-top:1px solid #d3d3d3
    232 }
    233 td,th {
    234     padding:.3em .6em;
    235     vertical-align:middle
    236 }
    237 
    238 .title  { text-align: center;
    239            margin-bottom: 1.5rem; }
    240 .subtitle {
    241     text-align: center;
    242     font-size: medium;
    243     font-weight: bold;
    244     margin-top:0;
    245     color: #999;
    246 }
    247 
    248 div.drawer:before {
    249     content: "";
    250     position: absolute;
    251     top: 0;
    252     bottom: 0;
    253     left: 6.4rem;
    254     width: 1px;
    255     background-color: #555;
    256 }
    257 
    258 div.drawer {
    259     display: flex;
    260     padding: 0;
    261     margin: 1rem;
    262     margin-left: -7rem;
    263     position: relative;
    264     color: #555;
    265 }
    266 
    267 div.drawer h6 {
    268     box-sizing: border-box;
    269     font-style: italic;
    270     flex: 0 0 7rem;
    271     margin:0;
    272     padding:0;
    273     align-self: center;
    274     text-align: right;
    275     padding-right: 1.2rem;
    276 }
    277 
    278 div.drawer.info:before {
    279     background-color: #00529B;
    280 }
    281 div.drawer.info {
    282     color: #00529B;
    283 }
    284 
    285 div.drawer.note:before {
    286     background-color: #9F6000;
    287 }
    288 div.drawer.note {
    289     color: #9F6000;
    290 }
    291 div.drawer.tip:before {
    292     background-color: #4F8A10;
    293 }
    294 div.drawer.tip {
    295     color: #4F8A10;
    296 }
    297 div.drawer.warning:before {
    298     background-color: #D8000C;
    299 }
    300 div.drawer.warning {
    301     color: #D8000C;
    302 }
    303 div.drawer.results:before {
    304     background-color: black;
    305 }
    306 div.drawer.results {
    307     font-family:monospace,monospace;
    308     font-family: var(--font-mono);
    309     color: black;
    310     width: 100% !important;
    311 }
    312 div.drawer.results p {
    313     display: block;
    314     unicode-bidi: embed;
    315     white-space: pre;
    316     margin-top: 0;
    317 }
    318 div.drawer.results pre {
    319     background-color: inherit;
    320     border: 0;
    321 }
    322 div.drawer.results pre.src:before {
    323   background-color: #eee;
    324   color: #555;
    325 }
    326 
    327 .tag {
    328     font-family:var(--font-mono);
    329     font-size: 1rem;
    330 }
    331 .tag span {
    332     padding:.3em;
    333     float:right;
    334     margin-right:.5em;
    335     border:1px solid #bbb;
    336     border-radius:3px;
    337     background-clip:padding-box;
    338     color:#333;
    339     background-color:#eee;
    340     line-height:1rem;
    341 }
    342 
    343 .todo   { font-family: monospace; color: red; }
    344 .done   { font-family: monospace; color: green; }
    345 .priority { font-family: monospace; color: orange; }
    346 .timestamp { color: #bebebe; }
    347 .timestamp-kwd { color: #5f9ea0; }
    348 .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
    349 .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
    350 .org-center { margin-left: auto; margin-right: auto; text-align: center; }
    351 .underline { text-decoration: underline; }
    352 #postamble p, #preamble p { font-size: 90%; margin: .2em; }
    353 p.verse { margin-left: 3%; }