ladas552.me
My Blog, build with Norgolith
blog.ladas552.me
blog
1@import "code-blocks.css";
2@import "font.css";
3@import "footer.css";
4@import "nav-bar.css";
5@import "toc.css";
6
7html {
8 scroll-behavior: smooth;
9}
10
11body {
12 margin: 0;
13 padding: 0;
14}
15
16@media (prefers-color-scheme: dark) {
17 body {
18 color: #c9d1d9;
19 background: #0d1117;
20 }
21}
22
23/* change color of headings */
24h1 {
25 color: #F5A97F;
26 font-size: calc(1rem * pow(1.1, 4));
27 text-align: center;
28}
29
30h2 {
31 color: #7DC4E4;
32 font-size: calc(1.1rem * pow(1.1, 2));
33}
34
35h3 {
36 color: #F5A97F;
37 font-size: calc(1rem * pow(1.1, 1));
38}
39
40h4 {
41 color: #A6DA95;
42 font-size: calc(1rem * pow(1.0, 1));
43}
44
45h5 {
46 color: #7DC4E4;
47 font-size: calc(1rem * pow(1.1, 0));
48}
49
50h6 {
51 color: #7DC4E4;
52 font-size: calc(1rem * pow(1.1, -1));
53}
54
55/* add your own norg icons here*/
56h2::before {
57 content: '◉ ';
58}
59
60h3::before {
61 content: '◎ ';
62}
63
64h4::before {
65 content: '○ ';
66}
67
68h5::before {
69 content: '✺ ';
70}
71
72h6::before {
73 content: '▶ ';
74}
75
76h7::before {
77 content: '⤷ ';
78}
79
80/* Styling */
81
82.body {
83 color: white;
84 background-color: #24273A;
85 font-family: "JetBrains Mono", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
86 position: relative;
87 padding-bottom: 1em;
88}
89
90/* Main content of the page */
91.content {
92 width: auto;
93 max-width: 750px;
94 margin: 40px auto;
95 padding: 0 0;
96 height: 100%;
97 display: flex;
98 flex-direction: column;
99 box-sizing: border-box;
100 position: relative;
101 line-height: 1.5em;
102 text-align: auto;
103 text-justify: inter-word;
104}
105
106.content a:link {
107 color: #b4befe;
108 text-decoration: none;
109}
110
111.content a:visited {
112 color: #7E7EFF;
113}
114
115/* links colors on interactions */
116.content a:hover {
117 color: #f38ba8;
118}
119
120.content a:active {
121 color: #202030;
122}
123
124/* make bold text red */
125.content b,
126strong {
127 color: #EE99A0;
128}
129
130
131/* Box */
132.flex-container {
133 width: auto;
134 display: flex;
135 grid-auto-flow: column;
136 flex-flow: row wrap;
137 justify-content: space-evenly;
138 align-content: space-evenly;
139 gap: 2em;
140 margin: 0 auto;
141}
142
143.flex-box {
144 display: block;
145 border-radius: 20px;
146 border: 2px solid #8aadf4;
147 background-color: #1e2030;
148 padding: 0em 1em 1em 1em;
149 box-shadow: 0px 0px 0.2em #8aadf4;
150 transition: box-shadow 400ms ease-in-out, bottom ease-in-out 600ms;
151 width: 40%;
152 height: auto;
153 position: relative;
154 bottom: 0px;
155 cursor: pointer;
156}
157
158.flex-box:hover {
159 transition: box-shadow 600ms ease-in-out, bottom ease-in-out 600ms;
160 box-shadow: 0px 0px 1.3em #8aadf4;
161 bottom: 5px;
162}
163
164/* View All Posts Button */
165.view-all-container {
166 text-align: center;
167 margin-top: 3em;
168 margin-bottom: 2em;
169}
170
171.view-all-btn {
172 display: inline-block;
173 padding: 0.8em 2em;
174 font-size: 1.1em;
175 font-weight: bold;
176 color: #cad3f5;
177 text-decoration: none;
178 border: 2px solid #8aadf4;
179 border-radius: 20px;
180 background-color: #1e2030;
181 position: relative;
182 bottom: 0px;
183}
184/* css class for descriptions under "recent posts" */
185.flex-box p {
186 color: #b7bdf8;
187 font-size: 12px;
188}
189
190.flex-box h3::before {
191 content: ' ';
192}
193
194/* classes for images */
195/* center images */
196.center {
197 display: block;
198 margin-left: auto;
199 margin-right: auto;
200 width: auto;
201}
202
203/* Only center containers that have pokemon images */
204.content>div:has(.pokemon) {
205 text-align: center;
206}
207
208.content>div:has(.pokemon)>*:not(.pokemon):not(h1) {
209 text-align: left;
210}
211
212/* Pokemon images spread equally */
213.pokemon {
214 display: inline-block;
215 width: 15%;
216 margin: 0.5em 2%;
217 text-align: center;
218}
219
220/* Customize the scrollbar */
221* {
222 scrollbar-width: thin;
223 /* Width of the scrollbar */
224 scrollbar-color: #64687E #1E1E2E;
225}