logo

blog

My little blog can’t be this cute!

index.css (3313B)


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