da157.id
this repo has no description
rizz up nav
+54
-11
+47
-7
sass/style.scss
+47
-7
sass/style.scss
···
52
52
body {
53
53
margin: 0;
54
54
padding: 0.5rem;
55
+
padding-top: 1rem;
55
56
min-height: calc(100vh - 1rem);
56
57
min-height: calc(100dvh - 1rem);
57
58
display: grid;
58
59
grid-template-columns: 1fr min(46rem,90%) 1fr;
59
-
grid-template-rows: auto 1fr auto;
60
-
& > * {
61
-
grid-column: 2;
62
-
}
63
-
grid-row-gap: .625rem;
60
+
grid-template-rows: 1fr auto;
61
+
grid-template-areas:
62
+
"nav main ."
63
+
"nav footer .";
64
+
gap: 1rem;
64
65
65
66
.footnotes-list {
66
67
border-top: 1px solid var(--secondary);
···
77
78
}
78
79
79
80
nav {
81
+
position: sticky;
82
+
top: 0.5rem;
83
+
grid-area: nav;
84
+
justify-self: end;
85
+
height: fit-content;
80
86
display: flex;
81
-
margin-top: 1rem;
87
+
flex-direction: column;
82
88
gap: 1rem;
83
89
justify-content: space-between;
84
90
flex-wrap: wrap;
85
91
.nav-section {
86
92
display: flex;
93
+
flex-direction: column;
87
94
gap: 1rem;
88
95
flex-wrap: wrap;
89
96
}
···
97
104
}
98
105
99
106
main {
107
+
grid-area: main;
100
108
padding-inline: 0.5rem;
101
109
height: min-content;
102
110
}
103
111
104
112
footer {
105
-
#footer-webrings {
113
+
grid-area: footer;
114
+
display: flex;
115
+
flex-direction: column;
116
+
gap: 0.5rem;
117
+
118
+
#footer-webrings {
106
119
display: flex;
107
120
gap: 0.5rem;
108
121
}
109
122
}
110
123
124
+
@media (max-width: 60rem) {
125
+
body {
126
+
margin-inline: auto;
127
+
grid-template-areas: "nav" "main" "footer";
128
+
grid-template-columns: 1fr;
129
+
grid-template-rows: auto 1fr auto;
130
+
}
131
+
132
+
nav {
133
+
position: relative;
134
+
justify-self: stretch;
135
+
height: auto;
136
+
justify-content: space-between;
137
+
flex-direction: row;
138
+
align-items: center;
139
+
140
+
flex-wrap: wrap;
141
+
.nav-section {
142
+
flex-direction: row;
143
+
}
144
+
}
145
+
}
146
+
111
147
a {
112
148
color: var(--accent);
113
149
&:visited {
···
128
164
&:hover {
129
165
color: var(--accent);
130
166
}
167
+
}
168
+
169
+
#site-title {
170
+
font-size: 1.2rem;
131
171
}
132
172
133
173
.dollcode {