style: now projects screen is responsive

Ryrden · Feb 10, 2024 · 84aa320 · 84aa320
1 parent 8b3ba7a
commit 84aa320
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 22 deletions.
diff --git a/_sass/pages/projects.scss b/_sass/pages/projects.scss
@@ -16,35 +16,45 @@
             box-shadow: 0px 10px 20px 5px rgba(0, 0, 0, 0.35);
             transition: transform 0.2s ease-in-out;
         }
-    }
-
-    .project-content {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-evenly;
-        padding-left: 1em;
 
-        .project-title {
-            margin: 0;
-        }
-
-        .project-about {
+        .project-content {
             display: flex;
-
-            .project-languages {
+            flex-direction: column;
+            justify-content: space-evenly;
+            padding-left: 1em;
+
+            .project-title {
+                margin: 0;
+            }
+
+            .project-about {
                 display: flex;
-                align-items: flex-start;
-                .project-languages-title {
-                    font-weight: bold;
-                }
-                .project-languages-content img {
-                    // height="30" width="42"
-                    height: 1.75em;
-                    width:  2.5em;
+
+                .project-languages {
+                    display: flex;
+                    align-items: flex-start;
+                    .project-languages-title {
+                        font-weight: bold;
+                    }
+                    .project-languages-content img {
+                        // height="30" width="42"
+                        height: 1.75em;
+                        width:  2.5em;
+                    }
                 }
             }
         }
     }
+
+
+    hr.solid {
+        border-top: 1px solid gray;
+        margin: 2em 0;
+
+        &:last-child {
+            display: none;
+        }
+    }
 }
 
 .modal-close {
@@ -61,3 +71,29 @@
     }
 }
 
+
+@media (max-width: 768px) {
+    #projects {
+        .project {
+            flex-direction: column;
+            gap: 1em;
+
+            .project-logo {
+                max-width: 100%;
+                aspect-ratio: 16/9;
+            }
+
+            .project-content {
+                padding-left: 0;
+            }
+
+            .project-about {
+                margin-bottom: 1em;
+                .project-languages {
+                    flex-direction: column;
+                    gap: 0.75em;
+                }
+            }
+        }
+    }
+}
diff --git a/projects.pt-br.html b/projects.pt-br.html
@@ -40,6 +40,7 @@ <h2 class="project-title">
 			<button onclick="document.getElementById('modal-{{ project.title }}').showModal()">Detalhes</button>
 		</div>
 	</div>
+	<hr class="solid">
 	{% endfor %}
 </div>