logo

blog

My cute blog can’t be this disorganised!

index.css (2409B)


      1 #bio { clear: both; }
      2 #avatar {
      3 	float: left;
      4 	margin: 1em;
      5 }
      6 #art, header {text-align: center; }
      7 #art img, figure img { width: 100%; max-width: 95vw; max-height: 95vh; object-fit: contain;}
      8 .warn {
      9 	background-color: rgba(255, 60, 0, 0.2);
     10 	border-bottom: 0.125em solid #dc322f;
     11 }
     12 figure {
     13 	text-align: center;
     14 }
     15 html, body {
     16 	background-color: #002b36;
     17 	color: #839496;
     18 	margin: 0;
     19 	padding: 0;
     20 	font-family: sans;
     21 }
     22 a {
     23 	color: #268bd2;
     24 }
     25 h1, h2, h3, h4, h5, h6 { font-family: serif; }
     26 pre { white-space: pre-wrap; }
     27 section h1, section h2 { text-align: center; }
     28 article, section {
     29 	display: inline-table;
     30 	vertical-align: top;
     31 }
     32 article, section, main {
     33 	margin: 1.5rem;
     34 	padding: 0.5rem;
     35 	background-color: #073642;
     36 	border: 2pt solid #657b83;
     37 }
     38 #art { border: none;} 
     39 code {
     40 	display: inline-table;
     41 	padding: 0 0.25em;
     42 	background-color: #222;
     43 	color: #C4C4C4;
     44 	font-family: monospace;
     45 }
     46 table {
     47 	border: 0.1em solid;
     48 	border-collapse: collapse;
     49 }
     50 td, th {
     51 	border: 0.1em solid;
     52 	padding: 0.25em;
     53 }
     54 blockquote {
     55 	border-left: 0.1em solid;
     56 	padding-left: 0.5em;
     57 }
     58 quote[lang=fr]::before, *[lang=fr] > quote::before {
     59 	content: "« ";
     60 }
     61 quote[lang=fr]::after, *[lang=fr] > quote::after {
     62 	content: " »";
     63 }
     64 quote + cite::before {
     65 	content: " — ";
     66 }
     67 nav, footer {
     68 	background-color: #073642;
     69 //	background-image: linear-gradient(0deg, #db3038, #dc3025);
     70 	color: #586e75;
     71 }
     72 /* navbar */
     73 nav {
     74 	font-size: larger;
     75 	font-weight: bold;
     76 	margin-bottom: 1rem;
     77 }
     78 nav * {
     79 	margin: 0;
     80 	padding: 0;
     81 }
     82 nav a, nav .menu span {
     83 	color: inherit;
     84 	display: inline-block;
     85 	padding: 0.5em;
     86 }
     87 nav .menu span::after { content: "↯"; }
     88 nav ul {
     89 	display: inline-block;
     90 	list-style: none;
     91 }
     92 nav ul li {
     93 	display: inline-table;
     94 	transition: 0.5s;
     95 }
     96 nav li:hover {
     97 	background-color: #dc322f;
     98 	background-image: linear-gradient(0deg, #db3038, #dc3025);
     99 }
    100 nav ul li:hover > ul {display: block;}
    101 nav ul ul {
    102 	background: #900;
    103 	display: none;
    104 	position: absolute;
    105 }
    106 nav ul ul li {display: block;}
    107 nav ul ul li:hover {background: #B00;}
    108 nav ul ul li:hover:active {background: #E00;}
    109 nav ul ul ul {
    110 	left: 100%;
    111 	position: absolute;
    112 	top: 0;
    113 }
    114 nav ul.right { float: right; }
    115 /* footer */
    116 footer {
    117 	margin-top: 1rem;
    118 	padding: 0.5em 0;
    119 	text-align: center;
    120 }
    121 footer a { color: inherit; }
    122 .l-ok      { color: #859900; }
    123 .l-wip     { color: #cb4b16; }
    124 .l-stalled { color: #002b36; color: #839496;}
    125 .l-bad     { color: #dc322f; }