yoyle.city
1@font-face {
2 font-family: "Instrument Sans";
3 src: url(/fonts/InstrumentSans-VariableFont.ttf);
4}
5
6@font-face {
7 font-family: "Instrument Serif";
8 src: url(/fonts/InstrumentSerif-Regular.ttf);
9}
10
11body {
12 font-family: "Instrument Sans", sans-serif;
13 margin: 0 auto;
14 color: black;
15 background-color: white;
16 background-image: url(img/leafimagefromunsplash.jpg);
17 background-size: cover;
18 background-repeat: no-repeat;
19 background-position: center;
20 background-attachment: fixed;
21 cursor: url(img/NB_cursor.png), default;
22}
23
24main {
25 display: flex;
26 flex-direction: row;
27 justify-content: center;
28 align-items: stretch;
29 max-width: 1337px;
30 padding: 16px;
31 gap: 20px;
32}
33
34aside {
35 background-color: rgba(0, 0, 0, 0.33);
36 backdrop-filter: blur(5px);
37 color: white;
38 padding: 8px;
39 border-radius: 15px;
40}
41
42a {
43 color: white;
44 text-decoration: none;
45}
46
47a:hover {
48 text-decoration: underline;
49 cursor: url(img/NB_cursor.png), pointer;
50}
51
52nav a {
53 margin-right: 5px;
54 color: black;
55}
56
57img {
58 image-rendering: pixelated;
59}
60
61ul, ol, li {
62 list-style-position: inside;
63}
64
65header, footer {
66 text-align: center;
67 color: white;
68}
69
70header {
71 padding: 8px;
72 background: #f2f2f2;
73 background: -webkit-linear-gradient(0deg, rgba(242, 242, 242, 0.67) 42%, rgba(255, 255, 255, 0.74) 100%);
74 background: -moz-linear-gradient(0deg, rgba(242, 242, 242, 0.67) 42%, rgba(255, 255, 255, 0.74) 100%);
75 background: linear-gradient(0deg, rgba(242, 242, 242, 0.67) 42%, rgba(255, 255, 255, 0.74) 100%);
76 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F2F2F2", endColorstr="#FFFFFF", GradientType=0);
77}
78
79.sidebar {
80 flex-basis: 350px;
81}
82
83@media only screen and (max-width: 600px) {
84 main {
85 flex-direction: column;
86 }
87}