Something went wrong. Try again.
theme website blog showcase
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183@import url("style.css");@import url("code.css");@import url("illustration.css");@import url("comments.css");
article { flex: 1;
position: relative;
nav#lang-selector { position: absolute;
top: 0; right: 0;
label { font-size: 0;
line-height: 44px; text-align: center;
display: block; width: 44px; height: 44px; box-sizing: border-box;
cursor: pointer;
border: solid 1px var(--foreground-color);
&::before { content: "T";
font-size: 24px; } }
ul { position: absolute; right: 0; top: 43px;
display: none;
margin: 0; padding: 0;
border: solid 1px var(--foreground-color); background: var(--background-color);
li { list-style: none;
a { display: block; text-align: center;
padding: 8px 16px; } } }
&:focus-within ul { display: block; } }}
main { display: grid; grid-template-columns: auto 1fr;
& > nav#toc { menu { position: sticky;
top: 72px;
margin: 0; padding: 0;
li { list-style: none; border-left: solid 1px var(--foreground-color); padding-left: 8px; position: relative;
&.visible, &:hover { &::before { content: ""; position: absolute; inset: 0;
display: block; background-color: var(--foreground-color);
margin-left: -2px; width: 3px; } }
a:hover { text-decoration: none; } } }
width: 240px; }
& > article { ul#metadata { margin: 0; padding: 0;
li { list-style: none;
&#tags { .label { display: none; }
ul { padding: 0;
display: flex;
margin: 1ch 0; gap: 1ch;
li { padding: 0.5ch; background-color: var(--foreground-color); color: var(--background-color); border-radius: 4px; } } } } }
main { display: block; margin: 0; }
footer { text-align: right; position: relative; /*padding-top: 16px;*/
&::before { content: ""; position: absolute;
display: block;
border-top: solid 1px var(--foreground-color);
width: 340px; top: -8px; right: 0; } }
/* Offsetting an anchor, stack overflow #10732690 */ [id].article-heading::before { content: ""; display: block; height: 80px; margin-top: -80px; visibility: hidden; } }
& > section#comments { grid-column: 2; }}