+
+
+
+
+
+
diff --git a/src/styles/components.scss b/src/styles/components.scss
index b233293..5e6e5b5 100644
--- a/src/styles/components.scss
+++ b/src/styles/components.scss
@@ -618,6 +618,14 @@
width: 100%;
gap: 1rem;
+
+ @media screen and (max-width: $screen-desktop-min) {
+ grid-template-columns: 1fr;
+
+ & > .search {
+ grid-row: 1;
+ }
+ }
}
/* .filter-select {
@@ -716,5 +724,11 @@
}
}
}
+
+ @media screen and (max-width: $screen-desktop-min) {
+ .dropdown {
+ top: calc(100% + 1rem);
+ }
+ }
}
}
diff --git a/src/styles/controls.scss b/src/styles/controls.scss
index 8db151e..ca59531 100644
--- a/src/styles/controls.scss
+++ b/src/styles/controls.scss
@@ -53,6 +53,18 @@
margin-right: 0.25rem;
margin-bottom: 0.25rem;
}
+
+ &.flat {
+ background: #0002;
+ color: #222;
+
+ border: none;
+ box-shadow: none;
+
+ &:hover {
+ background: #0004;
+ }
+ }
}
input[type='text'],
diff --git a/src/styles/main.scss b/src/styles/main.scss
index f218a65..25bdc47 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -116,11 +116,62 @@ body {
letter-spacing: 1px;
color: #333;
}
+
+ @media screen and (max-width: $screen-desktop-min) {
+ flex-direction: column;
+ }
+ }
+
+ .side-menu {
+ position: fixed;
+
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 3rem;
+
+ background: #f0f0f0;
+
+ border-left: $border-large;
+
+ display: grid;
+ grid-template-rows: auto 1fr;
+
+ gap: 1.5rem;
+
+ padding: 1.5rem;
+
+ & > :first-child {
+ justify-self: end;
+ }
+
+ .links {
+ display: grid;
+ grid-template-columns: 1fr;
+
+ align-content: start;
+
+ gap: 1.5rem;
+
+ padding: 0;
+ }
+ }
+
+ #header-menu-toggle {
+ display: none;
+
+ &:not(:checked) ~ .side-menu {
+ display: none;
+ }
}
}
main {
width: 100%;
+
+ @media screen and (max-width: $screen-desktop-min) {
+ padding: 0.5rem;
+ }
}
footer {
@@ -185,6 +236,26 @@ body {
background: #0002;
}
+//
+// Utility Classes
+//
+
+.hide {
+ display: none !important;
+}
+
.invisible {
opacity: 0 !important;
}
+
+@media screen and (min-width: $screen-desktop-min) {
+ .mobile-only {
+ display: none !important;
+ }
+}
+
+@media screen and (max-width: $screen-desktop-min) {
+ .desktop-only {
+ display: none !important;
+ }
+}