content/static/css/extra.css

   1 html {
   2   text-rendering: optimizeLegibility;
   3   font-kerning: normal;
   4 }
   5
   6 /* Links */
   7 a {
   8   color: blue;
   9 }
  10 a:visited {
  11   color: purple;
  12 }
  13
  14 /* Table of Content */
  15 .toc a {
  16   color: inherit;
  17 }
  18 .toc details > summary::marker {
  19   color: white;
  20 }
  21 .toc-section-number {
  22   color: rgba(194, 65, 12);
  23   font-weight: bold;
  24 }
  25 .toc ul > li {
  26   line-height: 1.3;
  27   text-align: left;
  28 }
  29 .toc ul > li > ul {
  30   margin-left: 1em;
  31   padding-bottom: 1ex;
  32   padding-top: 1ex;
  33 }
  34 .section-nav > a:visited { color:rgba(194, 65, 12, var(--tw-text-opacity)); }
  35 .section-nav > a:visited:hover { color:purple; }
  36
  37 /* Tag */
  38 a.tag:visited { color:inherit; }
  39 a.tag:visited:hover { color:purple; }
  40
  41 /* Summary */
  42 .summary p:first-child {
  43   display: inline;
  44 }
  45
  46 /* Titles */
  47 section h2, section h3, section h4, section h5, section h6 {
  48   margin-bottom: 1ex;
  49 }
  50
  51 /* Page */
  52 .page p,
  53 .page ul,
  54 .page ol {
  55   margin-bottom: 2ex;
  56 }
  57 .page p:last-child,
  58 .page ul:last-child,
  59 .page ol:last-child {
  60   margin-bottom:0;
  61 }
  62
  63 /* Article */
  64 .article ul > li {
  65   display: flex;
  66   flex-direction: row;
  67   margin-bottom: 2ex;
  68 }
  69 .article ol {
  70   list-style-position: outside;
  71   list-style-type: decimal;
  72   padding-left: 3em;
  73 }
  74 .article ol > li {
  75   margin-bottom: 2ex;
  76 }
  77 .article a::after {
  78   background: #007bff;
  79   content: "";
  80   display: block;
  81   height: 0.15em;
  82   margin-top: -0.15em;
  83   text-decoration: none;
  84   transition: width 0.35s;
  85   width: 0;
  86 }
  87
  88 /* Pictures */
  89 div.pictures {
  90   clear:right;
  91 }
  92 .pictures > ul {
  93   display: grid;
  94   grid-auto-flow: dense;
  95   grid-gap: 1em;
  96   /*grid-auto-rows: 300px;*/
  97   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  98 }
  99 @media (min-width: 640px) {
 100   .pictures > ul { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
 101 }
 102 .pictures > ul > li {
 103   list-style-type: none;
 104   position: relative;
 105 }
 106 .pictures > ul > li.highlight-box {
 107   grid-row: span 2;
 108   grid-column: span 2;
 109 }
 110 .pictures > ul > li.highlight-tall {
 111   grid-row: span 2;
 112 }
 113 .pictures > ul > li.highlight-wide {
 114   grid-column: span 2;
 115 }
 116 .pictures > ul > li img {
 117   border: 1px solid black;
 118   box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.5);
 119   display: block;
 120   /*height: 100%;*/
 121   width: 100%;
 122   margin: auto;
 123   object-fit: contain;
 124 }
 125 .pictures > ul > li span {
 126   font-size: 1rem;
 127   font-weight: bold;
 128   color: #fff;
 129   position: absolute;
 130   right: 10px;
 131   text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
 132   top: 10px;
 133 }
 134
 135 /*
 136
 137 html {
 138   font-family: helvetica, sans-serif;
 139   font-size: 18px; }
 140
 141 h1 {
 142   font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;
 143   font-size: 2rem;
 144   color: #fff;
 145   margin: 0;
 146   padding: 0.75em 0.25em;
 147   background: #2c2c2c;
 148   line-height: 1.1em; }
 149
 150 ul {
 151   padding: 0; }
 152
 153 li {
 154 }
 155
 156 li:focus {
 157   border: 10px solid blue; }
 158
 159 */
 160
 161 /*
 162 html {
 163   font-family: 'AdobeGaramondW01-Regula', georgia, serif;
 164   font-size: 18px;
 165   margin-bottom: 200px; }
 166
 167 main {
 168   width: 80%;
 169   margin: 2em auto; }
 170
 171 article {
 172   margin: 100px 0; }
 173
 174 footer {
 175   text-align: center;
 176   margin: 3em 0 3em 0;
 177   clear: both; }
 178
 179 h1 {
 180   font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;
 181   font-size: 3rem;
 182   color: #64664A;
 183   margin: 0 0 1em;
 184   line-height: 1.1em;
 185   -webkit-column-span: all;
 186           column-span: all; }
 187
 188 h2 {
 189   font-family: 'BauerBodoniW01-BoldDisp', georgia, serif;
 190   font-size: 1.5rem;
 191   color: #64664A;
 192   font-weight: 400; }
 193
 194 p {
 195   line-height: 1.5em; }
 196
 197 article {
 198   -webkit-column-width: 200px;
 199           column-width: 200px;
 200   -webkit-column-gap: 2em;
 201           column-gap: 2em;
 202   -webkit-column-rule: 1px solid #444;
 203           column-rule: 1px solid #444; }
 204   article img {
 205     width: 100%;
 206     margin: 1em 0;
 207     display: block; }
 208   article figure {
 209     -webkit-column-span: all;
 210             column-span: all;
 211     margin: 1em 0;
 212     font-style: italic;
 213     color: #999; }
 214
 215 ul {
 216   -webkit-columns: 250px;
 217           columns: 250px;
 218   -webkit-column-break-inside: avoid;
 219           break-inside: avoid;
 220   margin: 0;
 221   padding: 0;
 222   list-style: none; }
 223   ul img {
 224     width: 100%;
 225     display: block;
 226     -o-object-fit: cover;
 227        object-fit: cover;
 228     margin-top: 0px;
 229     margin-bottom: 20px;
 230     border: 1px solid black; }
 231
 232 section {
 233   -webkit-column-width: 300px;
 234           column-width: 250px; }
 235   section div {
 236     border: 1px solid black;
 237     margin: 0 10px 20px;
 238     padding-bottom: 1rem;
 239     -webkit-column-break-inside: avoid;
 240             break-inside: avoid; }
 241   section h2, section p {
 242     margin: 0 1rem;
 243     margin-right: 1rem; }
 244 */