logo

blog

My little blog can’t be this cute!

index.css (2992B)


      1 @import url('colorscheme.css');
      2 
      3 /* elements */
      4 a { color: var(--dark-ansi05); }
      5 body, html {
      6 	background-color: var(--dark-ansi00-hard);
      7 	color: var(--dark-ansi15);
      8 	margin: 0;
      9 	padding: 0;
     10 	font-family: sans;
     11 }
     12 blockquote {
     13 	border-left: 0.1em solid;
     14 	padding-left: 0.5em;
     15 }
     16 code {
     17 	display: inline-table;
     18 	padding: 0 0.25em;
     19 	background-color: var(--dark-ansi00);
     20 	color: var(--dark-ansi15);
     21 	font-family: monospace;
     22 }
     23 h1, h2, h3, h4, h5, h6 { font-family: serif; }
     24 pre {
     25 	/* pre-wrap is there for legacy reasons as break-spaces is recent */
     26 	white-space: pre-wrap;
     27 	white-space: break-spaces;
     28 	word-break: break-all;
     29 }
     30 section h1, section h2 { text-align: center; }
     31 article, section {
     32 	display: inline-table;
     33 	vertical-align: top;
     34 }
     35 article, section, main {
     36 	margin: 1.5rem;
     37 	padding: 0.5rem;
     38 	background-color: var(--dark-ansi00-soft);
     39 }
     40 table {
     41 	border: 0.1em solid;
     42 	border-collapse: collapse;
     43 }
     44 td, th {
     45 	border: 0.1em solid;
     46 	padding: 0.25em;
     47 }
     48 quote[lang=fr]::before, *[lang=fr] > quote::before { content: "« "; }
     49 quote[lang=fr]::after, *[lang=fr] > quote::after { content: " »"; }
     50 quote + cite::before { content: " — "; }
     51 
     52 /* classes */
     53 .select-all {
     54 	-webkit-user-select: all;
     55 	-moz-user-select: all;
     56 	-ms-user-select: all;
     57 	user-select: all;
     58 }
     59 .warn { border-bottom: 1pt solid var(--dark-ansi01); }
     60 dl.list dt {
     61 	display: list-item;
     62 	list-style-type: disc;
     63 	list-style-position: inside;
     64 }
     65 .left { float: left; }
     66 .right { float: right; }
     67 
     68 img.thumb_inline {
     69 	max-height: 12.5ch;
     70 	max-width: 40em;
     71 	object-fit: contain;
     72 }
     73 
     74 /* ids */
     75 #bio { clear: both; }
     76 #avatar {
     77 	float: left;
     78 	margin: 1em;
     79 	margin-right: 2em;
     80 }
     81 
     82 /* Images/Figures */
     83 figure { text-align: center; }
     84 #art {
     85 	border: none;
     86 	text-align: center;
     87 }
     88 #art img, figure img {
     89 	max-width: 95vw;
     90 	max-height: 95vh;
     91 	object-fit: scale-down;
     92 	width: auto;
     93 	height: auto;
     94 }
     95 
     96 nav, footer {
     97 	background-color: var(--dark-ansi00);
     98 	color: var(--dark-ansi07);
     99 }
    100 
    101 /* navbar */
    102 nav {
    103 	font-size: larger;
    104 	font-weight: bold;
    105 	margin-bottom: 1rem;
    106 }
    107 nav * {
    108 	margin: 0;
    109 	padding: 0;
    110 }
    111 nav a, nav .menu span {
    112 	color: inherit;
    113 	display: inline-block;
    114 	padding: 0.5em;
    115 }
    116 nav .menu span::after { content: "↯"; }
    117 nav ul {
    118 	display: inline-block;
    119 	list-style: none;
    120 }
    121 nav ul li {
    122 	display: inline-table;
    123 	transition: 0.5s;
    124 }
    125 nav li:focus-within,
    126 nav li:hover {
    127 	background-color: var(--dark-ansi05);
    128 	color: var(--dark-ansi00-soft);
    129 }
    130 nav ul li:focus-within > ul,
    131 nav ul li:hover > ul {
    132 	display: block;
    133 }
    134 nav ul ul {
    135 	background: var(--dark-ansi05);
    136 	color: var(--dark-ansi00-soft);
    137 	display: none;
    138 	position: absolute;
    139 }
    140 nav ul ul li { display: block; }
    141 
    142 nav ul ul li:focus-within,
    143 nav ul ul li:hover {
    144 	background: var(--dark-ansi13);
    145 }
    146 nav ul ul li:hover:active,
    147 nav ul ul li:focus-within:active {
    148 	font-weight: normal;
    149 }
    150 nav ul ul ul {
    151 	left: 100%;
    152 	position: absolute;
    153 	top: 0;
    154 }
    155 nav ul.right { float: right; }
    156 
    157 /* footer */
    158 footer {
    159 	margin-top: 1rem;
    160 	padding: 0.5em 0;
    161 	text-align: center;
    162 }
    163 footer a { color: inherit; }