site

style.css (5096B)

---

 /** Variables **/
 
 :root
 {
   --Canvas-bg: #201b1b;
   --Canvas-color: #fff;
   --Pre-bg: #151515;
   --Pre-color: #fff;
   --Pre-border: #222;
   --Main-color: #f2f2f2;
   --Code-color: #2adba4;
   --Accent1-color: #2adba4; /* green */
   --Accent2-color: #368aeb; /* blue */
   --Highlight-num: #43a60d;
   --Highlight-esc: #dfad06;
   --Highlight-str: #f77f1d;
   --Highlight-pps: #458759;
   --Highlight-slc: #a0a0a0;
   --Highlight-com: #a0a0a0;
   --Highlight-ppc: #94e39;
   --Highlight-opt: #ffffff;
   --Highlight-ipl: #4dc987;
   --Highlight-lin: #555555;
   --Highlight-kwa: #d9396a;
   --Highlight-kwb: #8655e7;
   --Highlight-kwc: #ffffff;
   --Highlight-kwd: #00a48f;
 }
 
 img {
     display: inline-block;
     max-width: 100%;
 }
 
 pre, code, sample {
     white-space: pre-wrap;
     hyphens: none;
 }
 
 table {
     max-width: 100%;
 }
 
 html {
     font-size: 70.5%;
 }
 
 body {
     line-height: 1.5;
     font-size: 1.6rem;
     max-width: 38em;
     margin: auto;
     padding: 13px;
 }
 
 /* Structural blocks */
 
 #page-wrapper
 {
     max-width: 88rem;
 
     padding: 1rem 2rem 2rem;
 
     margin-left:  auto; 
     margin-right: auto;
 }
 
 
 /* Visual styles */
 
 html
 {
     background: var(--Canvas-bg);
     color: var(--Canvas-color);
 }
 
 header
 {
     text-align: center;
 }
 
 ::selection 
 {
     background: var(--Selection-bg);
     color: var(--Selection-color);
 }
 
 /* shared gradient border */
 nav, footer 
 {
     border-width: 0;
     border-style: solid;
     border-color: var(--Accent1-color);
     border-image: linear-gradient(to right, var(--Accent1-color), var(--Accent2-color)) 2;
 }
 
 nav
 {
     font-size: 1.8rem;
     border-bottom-width: 2px;
     padding-top: 0.5rem;
     padding-bottom: 0.5rem;
     word-spacing: 5px;
     text-align: center;
 }
 
 main
 {
     color: var(--Main-color);
     text-rendering: optimizeLegibility;
 }
 
 footer
 {
     text-align: center;
     padding-top: 1rem;
     margin-top: 1rem;
     border-top-width: 2px;
 }
 
 div#banner-text
 {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
 }
 
 .banner
 {
     display: flex;
     flex-direction: row;
     gap: 1rem;
     justify-content: center;
     align-items: center;
     line-height: 1;
 }
 
 .banner-title
 {
     margin: 0;
     font-size: 3.6rem;
     font-weight: 200;
     letter-spacing: 0.425em;
     /* letter-spacing is applied even to the last letter,
        so for proper centering, we have to remove it ourselves, sadly */
     margin-right: -0.425em;
 }
 
 .banner-title a 
 {
     text-decoration:none;
     color: var(--Main-color);
 }
 
 .banner-title a:hover
 {
     text-decoration:none;
     color: var(--Accent1-color);
 }
 
 a { 
     color: var(--Accent2-color);
 }
 
 a:hover, a:focus
 {
     text-decoration: underline;
     color: var(--Accent1-color);
 }
 
 a.nav-active { 
     color: var(--Accent1-color);
     font-weight: 200;
 }
 
 nav a { text-decoration: none; }
 
 a.here { text-decoration: none; }
 
 hr
 {
     border: 0 none;
     color: var(--Accent2-color);
     background-color: currentColor;
     height: 2px;
 }
 
 hr.footnotes { width: 40%; }
 
 a.footnote
 {
     text-decoration: none;
     margin-right: 0.4rem;
 }
 
 ul.toc { list-style: none; }
 
 h5 { font-size: 1.6rem; }
 h6 { font-size: 1.4rem; }
 
 code, kbd, samp
 {
     color: var(--Code-color);
 }
 
 
 /** Typography */
 
 @supports (hyphens: auto)
 {
     main
     {
         text-align: justify;
         hyphens: auto;
     }
 }
 
 body
 {
     font-family: system-ui, sans-serif;
     font-weight: 200;
 }
 
 table, th, td
 {
     border: 1px solid var(--Accent1-color);
     border-collapse: collapse;
 }
 
 th, td
 {
     padding: 0.5em;
     hyphens: none;
     text-align: left;
 } 
 
 .centered { text-align: center; }
 
 /* Style definition file generated by highlight 3.52, http://www.andre-simon.de/ */
 /* highlight theme: Kwrite Editor */
 body.hl	{ background-color: #e0eaee; }
 pre.hl	{ color: #000000; background-color:#e0eaee; font-size: 10pt; font-family: monospace; }
 .hl.num { color: var(--Highlight-num); }
 .hl.esc { color: var(--Highlight-esc); }
 .hl.str { color: var(--Highlight-str); }
 .hl.pps { color: var(--Highlight-pps); }
 .hl.slc { color: var(--Highlight-slc); font-style: italic; }
 .hl.com { color: var(--Highlight-com); font-style: italic; }
 .hl.ppc { color: var(--Highlight-ppc); }
 .hl.opt { color: var(--Highlight-opt); }
 .hl.ipl { color: var(--Highlight-ipl); }
 .hl.lin { color: var(--Highlight-lin); }
 .hl.kwa { color: var(--Highlight-kwa); font-weight: bold; }
 .hl.kwb { color: var(--Highlight-kwb); }
 .hl.kwc { color: var(--Highlight-kwc); font-weight: bold; }
 .hl.kwd { color: var(--Highlight-kwd); }
 
 pre
 {
     box-sizing: border-box;
     overflow: auto;
     padding: 2rem;
     margin-left: -2rem;
     margin-right: -2rem;
     border: 1px solid var(--Pre-border);
     background: var(--Pre-bg);
     color: var(--Pre-color);
 }
 
 pre code
 {
     color: inherit;
 }
 
 @media screen and (max-width: 34em)
 {
     .banner, .banner-title
     {
         display: block;
         text-align: center;
         margin: auto;
     }
     .banner
     {
         margin-bottom: 2rem;
     }
 }
 
 @media screen and (max-width: 28em)
 {
     .banner-title
     {
         font-size: 3.2rem;
     }
 }