add adaptive styles

DanZalov · Mar 10, 2024 · 4b26658 · 4b26658
1 parent 6f857aa
commit 4b26658
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -4,9 +4,8 @@ import Navigation from './components/Navigation.vue'
 </script>
 
 <template>
+  <Navigation />
   <div class="wrapper">
-    <Navigation />
-
     <RouterView />
   </div>
 </template>
@@ -17,15 +16,13 @@ import Navigation from './components/Navigation.vue'
   margin: 0 auto 2rem;
 }
 
-@media (min-width: 1024px) {
+@media (min-width: 425px) {
   .logo {
     margin: 0 2rem 0 0;
   }
 
   .wrapper {
-    display: flex;
-    flex-direction: column;
-    place-items: flex-start;
+    max-width: 600px;
   }
 }
 </style>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -43,8 +43,7 @@ nav a:first-of-type {
     margin-left: -1rem;
     font-size: 1rem;
 
-    padding: 1rem 0;
-    margin-top: 1rem;
+    padding-bottom: 1rem;
   }
 }
 </style>
diff --git a/src/views/TasksView.vue b/src/views/TasksView.vue
@@ -57,6 +57,12 @@ li {
 }
 
 hr {
-  margin: 10px 0px;
+  margin: 20px 0px;
+}
+
+@media (min-width: 768px) {
+  h1 {
+    padding-bottom: 0.5rem;
+  }
 }
 </style>