Show sourcecode
The following files exists in this folder. Click to view.
style.css
272 lines UTF-8 Unix (LF)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
::selection {
background-color: var(--hover);
color: var(--bg);
}
:root {
--bg: black;
--fg: #00ff00;
--link: green;
--hover: white;
/* Tunn scrollbar som matchar temat */
scrollbar-color: var(--link) var(--bg);
scrollbar-width: thin;
}
/* Teman, samma som i Framtidens teknik. Väljs med [tema] uppe till höger (js/terminal.js) */
[data-theme="matrix"] {
--bg: black;
--fg: #00ff00;
--link: green;
--hover: white;
}
[data-theme="amber"] {
--bg: #1a0e00;
--fg: #ffb000;
--link: #ff8c00;
--hover: #fff3d0;
}
[data-theme="paper"] {
--bg: #f4f1e8;
--fg: #1a1a1a;
--link: #2c5aa0;
--hover: #c0392b;
}
[data-theme="dracula"] {
--bg: #282a36;
--fg: #f8f8f2;
--link: #bd93f9;
--hover: #ff79c6;
}
[data-theme="nord"] {
--bg: #2e3440;
--fg: #d8dee9;
--link: #88c0d0;
--hover: #a3be8c;
}
[data-theme="gruvbox"] {
--bg: #282828;
--fg: #ebdbb2;
--link: #b8bb26;
--hover: #fe8019;
}
[data-theme="ocean"] {
--bg: #011627;
--fg: #d6deeb;
--link: #82aaff;
--hover: #7fdbca;
}
[data-theme="sunset"] {
--bg: #2d1b3e;
--fg: #ffb6c1;
--link: #ff6b9d;
--hover: #ffe66d;
}
[data-theme="cobalt"] {
--bg: #002240;
--fg: #ffffff;
--link: #ff9d00;
--hover: #ffee80;
}
body {
background-color: var(--bg);
color: var(--fg);
font-family: monospace;
font-size: 14px;
transition: background-color 0.3s ease, color 0.3s ease;
}
pre {
line-height: 1;
}
.heading {
font-size: clamp(3px, 1.1vw, 14px);
text-align: center;
margin-top: 40px;
margin-bottom: 40px;
}
.links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 20px;
}
.link {
display: flex;
flex-direction: column;
align-items: center;
height: clamp(100px, 30vw, 800px);
width: clamp(100px, 30vw, 800px);
border: 1px solid var(--fg);
}
a {
text-decoration: none;
color: var(--fg);
transition: color 0.3s ease, background-color 0.3s ease;
}
/* focus-visible så att det även syns när man tabbar med tangentbordet */
a:hover,
a:focus-visible {
color: var(--hover);
}
/* Blinkande markör, används av .cursor på alla terminalsidor */
@keyframes blink {
50% { opacity: 0; }
}
/* ===== Knappraden upptill, byggs av js/terminal.js =====
[cd ..] och [cat source] till vänster, [tema] till höger */
/* Ligger fast upptill så knapparna alltid syns.
Raden själv släpper igenom klick, bara knapparna tar emot dem */
.knapprad {
position: fixed;
top: 12px;
left: 12px;
right: 12px;
z-index: 10;
display: flex;
flex-wrap: wrap;
gap: 8px;
pointer-events: none;
}
.knapprad > div {
display: flex;
gap: 8px;
pointer-events: auto;
}
/* Högra gruppen hålls till höger, även när den hamnar på en egen rad */
.knapprad > div:last-child {
margin-left: auto;
}
/* På smala skärmar får inte alla knappar plats bredvid varandra. Då ligger raden
överst på sidan istället, så att den kan bryta rad utan att täcka innehållet */
@media (max-width: 600px) {
.knapprad {
position: relative;
inset: auto;
margin-bottom: 20px;
}
}
/* Utan JS finns ingen knapprad, då ligger [cd ..] fast i hörnet på egen hand */
body > .tillbaka {
position: fixed;
top: 12px;
left: 12px;
z-index: 10;
}
/* Samma ram och färger på alla knappar */
.tillbaka,
.knapp,
.tema-bytare summary {
display: block;
padding: 4px 10px;
border: 1px solid var(--fg);
background-color: var(--bg); /* så text under inte syns igenom vid scroll */
color: var(--fg);
font: inherit;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
}
/* Inverterade färger vid hover, som markerad text i en terminal.
Likadant medan temalistan eller källkoden är öppen */
.tillbaka:hover,
.tillbaka:focus-visible,
.knapp:hover,
.knapp:focus-visible,
.knapp[aria-expanded="true"],
.tema-bytare summary:hover,
.tema-bytare summary:focus-visible,
.tema-bytare[open] summary {
background-color: var(--fg);
color: var(--bg);
}
/* Temalistan placeras under [tema] */
.tema-bytare {
position: relative;
}
/* Ta bort webbläsarens triangel på <summary> */
.tema-bytare summary {
list-style: none;
}
.tema-bytare summary::-webkit-details-marker {
display: none;
}
/* Temalistan som fälls ut under [tema], i samma stil som ls-listningen */
.tema-lista {
position: absolute;
top: calc(100% + 8px);
right: 0;
margin: 0;
padding: 0;
list-style: none;
border: 1px solid var(--fg);
background-color: var(--bg);
}
/* Varje knapp har data-theme, så variablerna gäller bara den knappen
och den visas i sitt eget temas färger */
.tema-lista button {
display: block;
width: 100%;
padding: 3px 12px;
border: none;
background-color: var(--bg);
color: var(--fg);
font: inherit;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition: color 0.3s ease;
}
.tema-lista button:hover,
.tema-lista button:focus-visible {
color: var(--hover);
}
/* "> " vid hover, som i listningen, och "* " framför temat som är valt */
.tema-lista button::before {
content: "> ";
opacity: 0;
}
.tema-lista button:hover::before,
.tema-lista button:focus-visible::before {
opacity: 1;
}
.tema-lista button[aria-pressed="true"]::before {
content: "* ";
opacity: 1;
color: var(--link);
}