style: improve mobile

loks0n · Jun 21, 2023 · f2b57c9 · f2b57c9
1 parent 20a2891
commit f2b57c9
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -19,12 +19,18 @@
  }
 
  h1 {
- font-size: 2rem;
+ font-size: 1.5rem;
  text-align: center;
- margin: 0.15em 0;
+ margin: 0.3em 0;
  white-space: nowrap;
  }
 
+ @media (min-width: 350px) {
+ h1 {
+ font-size: 2rem;
+ }
+ }
+
  @media (min-width: 450px) {
  h1 {
  font-size: 3rem;

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
@@ -27,7 +27,7 @@
 
  div {
  max-width: 40em;
- padding: 0.5em 2em;
+ padding: 0.5em 1em;
  display: flex;
  flex: 1;
 
@@ -38,18 +38,34 @@
  ul {
  list-style: none;
  display: flex;
- justify-content: center;
+ width: 100%;
+ flex-direction: column;
+ justify-content: stretch;
  align-items: center;
  padding: 0;
  gap: 0.5em;
  }
 
+ li {
+ width: 100%;
+ }
+
+ @media (min-width: 450px) {
+ div {
+ padding: 0.5em 2em;
+ }
+ ul {
+ flex-direction: row;
+ }
+ }
+
  a {
  display: block;
+
  background-color: rgb(227, 222, 213);
  border: 0.25em solid rgb(216, 216, 216);
  padding: 0.25em 0.5em;
- min-width: 10ch;
+ min-width: 12ch;
  text-decoration: none;
  font-weight: 600;
  text-align: center;

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -40,9 +40,15 @@
 
  div {
  width: min(100%, 40em);
- padding: 2em;
+ padding: 1em;
  margin-top: 1em;
  margin-bottom: 2em;
  flex: 1;
  }
+
+ @media (min-width: 450px) {
+ div {
+ padding: 2em;
+ }
+ }
 </style>