diff --git a/build.sh b/build.sh
index c64172a..3de01a7 100755
--- a/build.sh
+++ b/build.sh
@@ -22,7 +22,7 @@
write_section_header(){
- echo "
" >> $3
+ echo "" >> $3
echo "$2" | tr a-z A-Z >> $3
echo "
" >> $3
}
diff --git a/layout.css b/layout.css
index a7138a7..2101293 100644
--- a/layout.css
+++ b/layout.css
@@ -1,8 +1,7 @@
main {
display: flex;
flex-direction: column;
- padding-left: 1rem;
- padding-right: 1rem;
+ padding: 0 1rem;
flex-grow: 1;
}
@@ -10,45 +9,37 @@ footer {
position: sticky;
bottom: 0;
margin-top: 2rem;
- flex-shrink: 0;
-
display: flex;
flex-direction: row;
justify-content: end;
- align-content: centers;
}
@container (min-width: 640px) {
main {
- padding-left: 4rem;
- padding-right: 4rem;
+ padding: 0 4rem;
}
}
@container (min-width: 768px) {
main {
- padding-left: 8rem;
- padding-right: 8rem;
+ padding: 0 8rem;
}
}
@container (min-width: 1024px) {
main {
- padding-left: 12rem;
- padding-right: 12rem;
+ padding: 0 12rem;
}
}
@container (min-width: 1280px) {
main {
- padding-left: 14rem;
- padding-right: 14rem;
+ padding: 0 14rem;
}
}
@container (min-width: 1536px) {
main {
- padding-left: 18rem;
- padding-right: 18rem;
+ padding: 0 18rem;
}
}
diff --git a/style.css b/style.css
index a9c02ba..3a4b6cf 100644
--- a/style.css
+++ b/style.css
@@ -36,8 +36,6 @@ body {
font-family: "Curier New", monospace;
margin: 0;
min-height: 100svh;
-
- /* display: flex; */
flex-direction: column;
justify-content: space-evenly;
}
@@ -56,76 +54,19 @@ h2 {
text-decoration: none;
}
-.showmore {
- text-align: center;
- background-color: var(--bg-color-reverse);
- color: var(--fg-color-reverse);
-}
-
-h2 {
- cursor: pointer;
-}
-
-.s {
+.s1, .s2, .s3, .s4, .s5, .s6, .s7 {
transition: background 0.7s ease-in-out;
margin-bottom: 0;
+ &:hover { background-color: var(--dim-color); }
}
-.s1 {
- background-color: var(--orange);
-
- &:hover {
- background-color: var(--orange-dim);
- }
-}
-
-.s2 {
- background-color: var(--red);
-
- &:hover {
- background-color: var(--red-dim);
- }
-}
-
-.s3 {
- background-color: var(--green);
-
- &:hover {
- background-color: var(--green-dim);
- }
-}
-
-.s4 {
- background-color: var(--yellow);
-
- &:hover {
- background-color: var(--yellow-dim);
- }
-}
-
-.s5 {
- background-color: var(--blue);
-
- &:hover {
- background-color: var(--blue-dim);
- }
-}
-
-.s6 {
- background-color: var(--purple);
-
- &:hover {
- background-color: var(--purple-dim);
- }
-}
-
-.s7 {
- background-color: var(--aqua);
-
- &:hover {
- background-color: var(--aqua-dim);
- }
-}
+.s1 { background-color: var(--orange); --dim-color: var(--orange-dim); }
+.s2 { background-color: var(--red); --dim-color: var(--red-dim); }
+.s3 { background-color: var(--green); --dim-color: var(--green-dim); }
+.s4 { background-color: var(--yellow); --dim-color: var(--yellow-dim); }
+.s5 { background-color: var(--blue); --dim-color: var(--blue-dim); }
+.s6 { background-color: var(--purple); --dim-color: var(--purple-dim); }
+.s7 { background-color: var(--aqua); --dim-color: var(--aqua-dim); }
.c {
padding: 1em;
@@ -157,8 +98,6 @@ img:hover {
cursor: pointer;
background-color: var(--bg-color-reverse);
color: var(--fg-color-reverse);
-
- /* Horizontal and vertical center content */
display: inline-flex;
flex-direction: column;
justify-content: center;