Responsive adjustments

mickael-lalanne · Mar 17, 2021 · 2915aea · 2915aea
1 parent fe09e87
commit 2915aea
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 8 deletions.
diff --git a/portfolio/src/components/home/Home.vue b/portfolio/src/components/home/Home.vue
@@ -5,8 +5,7 @@
                 <div>
                     Salut, moi c'est
                     <div class="name-container"><h1 class="highlight">Mickaël Lalanne</h1>.</div>
-                    <br />
-                    Je suis développeur web full-stack.
+                    <div>Je suis développeur web full-stack.</div>
                     <CustomButton
                         class="see-work-button"
                         text="Voir mon travail"
@@ -253,15 +252,15 @@ export default {
     .home-content-container {
         font-size: 39px;
     }
+    .name-container {
+        display: block;
+    }
 }
 
 // Small devices (landscape phones, max 576px and less)
 @media (max-width: 576px) {
     .home-content-container {
         font-size: 26px;
     }
-    .name-container {
-        display: block;
-    }
 }
 </style>
diff --git a/portfolio/src/components/presentation/Timeline.vue b/portfolio/src/components/presentation/Timeline.vue
@@ -115,10 +115,9 @@ export default {
 
     &__event {
         background: #fff;
-        margin-bottom: 20px;
         position: relative;
         display: flex;
-        margin: 20px 0;
+        margin: 10px 0;
         border-radius: 8px;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
         z-index: 0;

diff --git a/portfolio/src/components/projects/ProjectPreview.vue b/portfolio/src/components/projects/ProjectPreview.vue
@@ -129,4 +129,10 @@ export default {
         width: 100%;
     }
 }
+// Small devices (landscape phones, max 576px and less)
+@media (max-width: 576px) {
+    .project-img {
+        max-width: 95vw;
+    }
+}
 </style>
diff --git a/portfolio/src/components/projects/Projects.vue b/portfolio/src/components/projects/Projects.vue
@@ -85,6 +85,6 @@ export default {
     background-color: var(--v-primary-base);
     text-align: center;
     margin: auto;
-    margin-bottom: 100px;
+    margin-bottom: 65px;
 }
 </style>