Update stylesheet for new layout

1 files changed, 52 insertions, 12 deletions

diff --git a/static/assets/style.css b/static/assets/style.css
index c00da88..ba9a850 100644
--- a/static/assets/style.css
+++ b/static/assets/style.css
@@ -179,6 +179,9 @@ iframe {
   max-width: 100%;

   aspect-ratio: 16/9;

   display: block;

+

+  border: 1px solid black;

+  border-radius: 1.5rem;

 }

 

 .flex {

@@ -186,6 +189,10 @@ iframe {
   gap: 2rem;

 }

 

+.center {

+  align-items: center;

+}

+

 .grid {

   display: grid;

   gap: 2rem;

@@ -196,25 +203,50 @@ iframe {
   height: fit-content;

 }

 

+.title {

+  justify-content: space-between;

+  align-items: center;

+  gap: 0;

+}

+

+#persona {

+  display: visible;

+}

+

+#exploded {

+  padding: 4rem;

+}

+

+.blue {

+  background-color: #6a7883;

+}

+

 @media screen and (max-width: 40rem) {

   .grid {

     grid-template-columns: repeat(2, 1fr);

   }

+  .flex {

+    flex-direction: column;

+  }

+  .reverse {

+    flex-direction: column-reverse;

+  }

+  .title {

+    align-items: normal;

+  }

+  #exploded {

+    padding: 2rem;

+  }

 }

 

-.flex img, .grid img {

-  object-fit: contain;

-}

-

-.title {

-  justify-content: space-between;

-  align-items: center;

+@media screen and (max-width: 50rem) {

+  #persona {

+    display: none;

+  }

 }

 

-.side-vert-img {

-  aspect-ratio: 9/16;

-  object-fit: cover;

-  flex: 60%;

+.flex img, .grid img {

+  object-fit: contain;

 }

 

 .project {

@@ -247,7 +279,7 @@ iframe {
   opacity: 100%;

 }

 

-.grid-column-span-2 {

+.grid-col-span-2 {

   grid-column: span 2;

 }

 

@@ -324,6 +356,10 @@ a {
   transform: scale(1.2);

 }

 

+.slider:focus {

+  outline: none;

+}

+

 .slider-handle {

   transition: transform 0.2s;

 }

@@ -356,6 +392,10 @@ header a, .project-thumbnail {
 }

 */

 

+.return > * {

+  font-weight: bold;

+}

+

 .hide {

   display: none;

 }