responsive header

the-collab-lab · May 26, 2023 · 97213fa · 97213fa
1 parent 23754d6
commit 97213fa
Showing 1 changed file with 25 additions and 3 deletions.
diff --git a/src/views/Layout.css b/src/views/Layout.css
@@ -22,19 +22,41 @@
 .Layout-header {
  background-color: var(--color-accent-primary);
  position: sticky;
- text-align: center;
  top: 0;
+ min-height: 7rem;
+ display: flex;
+ align-items: center;
+ text-align: left;
 }
 .Layout-header h1 {
  color: var(--color-text);
- margin: 1rem 0;
+ margin: 1rem;
+
+ font-size: 2rem;
 }
+
 #dark-mode-switcher {
  position: absolute;
- right: 20px;
+ right: 10px;
  top: 8px;
 }
 
+@media (min-width: 400px) {
+ .Layout-header h1 {
+ font-size: 2.5rem;
+ margin: 1rem 1.5rem;
+ }
+}
+@media (min-width: 768px) {
+ .Layout-header {
+ display: block;
+ }
+ .Layout-header h1 {
+ text-align: center;
+ font-size: 3rem;
+ }
+}
+
 .Layout-main {
  margin: 0 auto;
  max-width: 100vw;