demsem.dev
My personal website. It is free and liberated from social media.
1:root {
2 --electric-blue: #80f0f0;
3 --tetradic-green: #80f080; /* Green-ish */
4 --tetradic-blue: #8080f0; /* Blue-ish */
5}
6
7body {
8 font-family: sans-serif;
9 max-width: 40em;
10 line-height: 1.5;
11 margin: 0em auto;
12 background-color: white;
13 box-shadow: 0 0 10px 2px black;
14 padding: 0 3em;
15}
16
17:is(header, main) > section:not(:first-child),
18article > section,
19footer,
20h3 {
21 margin: 4em auto 2em;
22}
23
24footer {
25 padding-bottom: 2em;
26}
27
28header {
29 padding-top: 2em;
30}
31
32:not(article) > h2 {
33 border: black 1.5pt solid;
34 width: max-content;
35 padding: 5px 10px;
36 border-radius: 10px;
37}
38
39h1 {
40 margin-top: 0;
41}
42
43html {
44 background-color: lightcoral;
45}
46
47nav {
48 display: flex;
49 flex-direction: column;
50 position: fixed;
51 left: -15px;
52 top: 4px;
53 z-index: 1;
54 & > a {
55 background-color: var(--tetradic-green);
56 color: black;
57 text-decoration: none;
58 font-weight: bold;
59 width: max-content;
60 border: black 1.5pt solid;
61 border-radius: 5px;
62 padding: 5px 15px 5px 20px;
63 margin: 4px;
64 box-shadow: 2px 0px 5px 0.25px black;
65 &.titular-navbar-tab {
66 box-shadow: -2px 0 5px 0.25px inset black;
67 background-color: var(--tetradic-blue);
68 }
69 }
70}
71
72.projects {
73 border-top: solid black;
74 h2 {
75 border: none;
76 }
77
78 & > section {
79 border: black 1.5pt solid;
80 margin-top: 16pt;
81 padding: 5px;
82 border-radius: 10px;
83 }
84 p {
85 padding: 10px;
86 }
87}
88
89.article-header {
90 display: grid;
91 grid-template-columns: 1fr 1fr;
92}
93
94.date-posted {
95 display: grid;
96 justify-content: end;
97 font-weight: bold;
98}
99
100.author {
101 font-style: italic;
102}
103
104article {
105 border: solid black;
106 border-left-style: none;
107 border-right-style: none;
108 padding-bottom: 1em;
109}