blob: 00d7dd56ac3d448a353428338f287ca1b3c3947f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
// Page stylesheet for the individual pages
// The license is included in the file LICENSE.txt
// If you did not receive a copy of the license with this file, you may download it under https://mit-license.org/
// Copyright © 2024 Milan Mišić (eMail: fridolin.411@web.de)
.list {
/*border: 3px solid transparent;
border-radius: 5px;
backdrop-filter: blur(1px) brightness(80%);
padding: 5px;
//width: max-content;*/
display: flex;
justify-content: center;
div {
border: 3px solid transparent;
border-radius: 5px;
backdrop-filter: blur(1px) brightness(90%);
// Apple WebShit compatibility
-webkit-backdrop-filter: blur(1px) brightness(80%);
padding: 5px;
.TOOD {
text-align: center;
backdrop-filter: none;
// Apple WebShit compatibility
-webkit-backdrop-filter: none;
}
}
}
.grid {
// Displays the selection grid
letter-spacing: 0px;
display: flex;
justify-content: center;
display: grid;
grid-template-columns: 300px 300px 300px;
gap: 20px;
// Make the titles be good
.title {
border: transparent solid 10px;
border-radius: 5px;
text-align: center;
//backdrop-filter: blur(1px) brightness(100%);
padding: 3px;
max-width: auto;
height: auto;
display: flex;
flex-direction: column;
justify-content: center;
// Add animations woo yeah
transition: 0.2s ease-in-out;
&:hover {
backdrop-filter: blur(5px) brightness(80%);
// Apple WebShit compatibility
-webkit-backdrop-filter: blur(5px) brightness(80%);
transition: 0.2s ease-in-out;
}
}
.image {
// Gives the grid images a nice round edge
border-radius: 5px;
overflow: hidden;
height: 180px;
width: auto;
}
img {
// Sets the images for the individual boxes properly
width: 100%;
height: 100%;
object-fit: cover;
display: flex;
justify-content: center;
}
}
.center_img {
overflow: hidden;
width: 400px;
padding: 5px;
display: block;
margin-left: auto;
margin-right: auto;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 5px;
}
}
.license {
// Small information text about the licenses used
//font: 14px 'Varela';
display: flex;
justify-content: center;
width: auto;
div {
// Secondary div to *really* center this div
border: 3px solid transparent;
border-radius: 5px;
padding: 5px;
max-width: max-content;
text-align: center;
backdrop-filter: blur(1px) brightness(80%);
// Apple WebShit compatibility
-webkit-backdrop-filter: blur(1px) brightness(80%);
transition: 0.2s ease-in-out;
&:hover {
backdrop-filter: blur(5px) brightness(60%);
// Apple WebShit compabilitity
-webkit-backdrop-filter: blur(5px) brightness(60%);
transition: 0.2s ease-in-out;
}
a {
// Colours the link white for readability
color: white;
}
}
}
.text {
border: transparent solid 10px;
border-radius: 5px;
padding: 3px;
backdrop-filter: blur(5px) brightness(80%);
// Apple WebShit compatibility
-webkit-backdrop-filter: blur(5px) brightness(80%);
color: white;
}
// Font settings
.title {
font-size: 18px;
}
|
