ligo.at
1:root {
2 --color-background: #fff;
3 --color-text: #333;
4 --color-text-secondary: #696969;
5}
6
7@media (prefers-color-scheme: dark) {
8 :root {
9 --color-background: #111;
10 --color-text: #fff;
11 --color-text-secondary: #aaa;
12 }
13}
14
15body {
16 background: var(--color-background);
17 color: var(--color-text);
18 font-size: 18px;
19 font-family: "Inter", system-ui, sans-serif, ui-sans-serif;
20 font-feature-settings:
21 "kern" 1,
22 "liga" 1,
23 "cv05" 1,
24 "tnum" 1;
25 font-optical-sizing: auto;
26 font-variation-settings: normal;
27 font-weight: 400;
28 margin: 1rem;
29 -moz-osx-font-smoothing: grayscale;
30 -webkit-font-smoothing: antialiased;
31}
32
33a {
34 color: inherit;
35}
36
37.wrapper {
38 margin: auto;
39 max-width: 20em;
40}
41
42.wrapper.profile {
43 font-size: 20px;
44}
45
46header {
47 margin: 2.5em 0;
48 text-align: center;
49}
50
51header h1 {
52 margin: 0;
53 font-size: 1.5em;
54 font-weight: inherit;
55}
56
57header .tagline {
58 font-style: italic;
59 display: block;
60 margin-top: 0.5em;
61}
62
63.links-container ul {
64 list-style: none;
65 padding: 0;
66 margin: 2em 0;
67}
68
69.link-item {
70 background: currentColor;
71 display: block;
72 padding: 0.5em;
73 text-align: center;
74 transition: transform 0.1s;
75 box-shadow: -3px 3px 0 rgba(from currentColor r g b / 0.6);
76}
77
78.link-item .link-item-title {
79 color: white;
80}
81
82.link-item .link-item-detail {
83 color: white;
84 display: block;
85 font-size: 0.75em;
86 opacity: 0.6;
87 transition: opacity 0.3s;
88}
89
90.link-item:hover {
91 transform: scale(1.05);
92}
93
94.link-item:hover .link-item-detail {
95 opacity: 1;
96}
97
98.links-container li + li {
99 margin-top: 0.75em;
100}
101
102footer {
103 color: var(--color-text-secondary);
104 font-size: 14px;
105 margin: 5em 0;
106 text-align: center;
107}