style update

jessekorzan · Jan 30, 2019 · ed724df · ed724df
1 parent 7256d8e
commit ed724df
Show file tree

Hide file tree

Showing 4 changed files with 943 additions and 1,098 deletions.
diff --git a/src/App.js b/src/App.js
@@ -105,6 +105,7 @@ class App extends Component {
                     <a href="#2" id="2" onClick={()=>this.handleButtonClick("masonry", 5)}>five-column</a>
                     <a href="#3" id="3" onClick={()=>this.handleButtonClick("two-column", 2)}>two-column</a>
                     <a href="#4" id="4" onClick={()=>this.handleButtonClick("single-column", 1)}>single-column</a>
+                    <a href="#5" id="5" onClick={()=>this.handleButtonClick("flex", 1)}>flex-box</a>
                 </nav>
                 <div className="layout--wrapper">
                     <div className="info">

diff --git a/src/styles.css b/src/styles.css
@@ -57,10 +57,29 @@ nav {
   .layout.flex {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
+    justify-content: center;
     align-items: stretch; }
     .layout.flex .card {
-      width: 20%; }
+      width: 16.666667%;
+      height: 420px;
+      margin-bottom: 0; }
+      .layout.flex .card p {
+        width: 80%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis; }
+      @media screen and (max-width: 1419px) {
+        .layout.flex .card {
+          width: 20%; } }
+      @media screen and (max-width: 1023px) {
+        .layout.flex .card {
+          width: 25%; } }
+      @media screen and (max-width: 727px) {
+        .layout.flex .card {
+          width: 33.33334%; } }
+      @media screen and (max-width: 600px) {
+        .layout.flex .card {
+          width: 50%; } }
   .layout.masonry {
     column-count: 5;
     column-gap: 6.66667px; }
@@ -112,7 +131,7 @@ nav {
     height: 15vh;
     overflow: hidden;
     padding: 0;
-    background: #d2c9c9; }
+    background: transparent; }
     .card .media img {
       filter: grayscale(100%);
       width: 100%; }

diff --git a/src/styles.scss b/src/styles.scss
@@ -78,10 +78,30 @@ nav {
     &.flex {
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-around;
+        justify-content: center;
         align-items: stretch;
         .card {
-            width: 20%;
+            width: 16.666667%;
+            height: 420px;
+            margin-bottom: 0;
+            p {
+                width: 80%;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+             @media screen and (max-width: 1419px) {
+                width: 20%;
+            }
+            @media screen and (max-width: 1023px) {
+                width: 25%;
+            }
+            @media screen and (max-width: 727px) {
+                width: 33.33334%;
+            }
+            @media screen and (max-width: 600px) {
+                width: 50%;
+            }
         }
     }
     &.masonry {
@@ -145,7 +165,7 @@ nav {
         height: 15vh;
         overflow: hidden;
         padding: 0;
-        background: darken($grey, 15%); 
+        background: transparent; 
         img {
             filter: grayscale(100%);
             width: 100%;