refactor: portfolio in mobile first, scss, bem

lxndrblz · Feb 9, 2022 · 89239c3 · 89239c3
1 parent 0fd810d
commit 89239c3
Show file tree

Hide file tree

Showing 3 changed files with 144 additions and 119 deletions.
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -759,7 +759,7 @@ Language Switch
 */
 
 /* Buttons */
-a.btn {
+/* a.btn {
   color: #868686;
   font-weight: 400;
 }
@@ -798,7 +798,7 @@ a.btn {
   font-style: normal;
   border-radius: 999em;
 }
-
+ */
 [role='back'] {
   padding: 0.5em 1.25em;
   line-height: 1.666em;

diff --git a/assets/scss/partials/components/_portfolio.scss b/assets/scss/partials/components/_portfolio.scss
@@ -1,127 +1,150 @@
+.portfolio {
+  position: relative;
+  z-index: 0;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  padding-top: 48px;
 
-
-  .box-wrapper {
+  @media screen and (min-width: 961px), print {
     padding: 48px;
-    position: relative;
-    z-index: 0;
-  }
-
-  .box-image {
-    display: block;
-    background-color: #fff;
-    position: relative;
-    z-index: 1;
-    overflow: hidden;
-    &--right,
-    &--left {
-      margin-right: auto;
-      margin-left: auto;
-      width: calc(100% - 64px);
-      background-color: $accent;
-      max-width: 400px;
-      z-index: -1;
-    }
-    img {
-        min-width: 100%;
-        box-shadow: #000;
-        overflow: hidden;
-        transition: box-shadow 0.3s ease;
-        object-fit: cover;
-        border-bottom: 0px;
-        display: block;
-      }
-  }
-
-  .box {
-    background-color: $accent;
-    padding: 32px;
-    &--left, &--right {
-        margin-top: -24px;
-    }
   }
-
-  .cta {
-    padding-bottom: 1em;
+
+  &::before {
+    border: $border;
+    content: '';
+    z-index: -1;
+    position: absolute;
+    top: 10%;
+    left: 10%;
+    bottom: 10%;
+    right: 10%;
+    background: transparent;
+    border-radius: 0.5em;
   }
 
-@media screen and (min-width: 961px), print {
-    .box {
-        padding: 48px;
-        box-shadow: $shadow;
+  &__image {
+    min-width: 100%;
+    box-shadow: #000;
+    overflow: hidden;
+    transition: box-shadow 0.3s ease;
+    object-fit: cover;
+    border-bottom: 0px;
+    display: block;
+
+    &-wrapper {
+      display: block;
+      background-color: #fff;
+      position: relative;
+      z-index: 1;
+      overflow: hidden;
+
+      &--right,
+      &--left {
+        margin-right: auto;
+        margin-left: auto;
+        width: calc(100% - 64px);
         background-color: $accent;
-        border-radius: 0.5em;
+        z-index: -1;
+        padding: 32px 32px 0px 32px;
+        max-width: inherit;
 
-        &--left,
-        &--right {
+        @media screen and (min-width: 961px), print {
+          max-width: 400px;
           width: 60%;
-          margin-top: -48px;
-          z-index: 3;
-          background: $primary-lighter;
+          object-fit: contain;
+          max-width: none;
+          border-top-right-radius: 0.5em;
+          border-top-left-radius: 0.5em;
+          padding: 0;
         }
-
-        &--right {
-          margin-left: auto;
       }
+
+      &--left {
+        @media screen and (min-width: 961px), print {
+          margin-right: auto;
+          margin-left: 0;
+          border-bottom-left-radius: 0.5em;
+        }
       }
-
-      .box-wrapper::before {
-        border: $border;
-        content: '';
-        z-index: -1;
-        position: absolute;
-        top: 10%;
-        left: 10%;
-        bottom: 10%;
-        right: 10%;
-        background: transparent;
-        border-radius: 0.5em;
-      }
-
-      .box-image{
-        &--right, &--left {
-            width: 60%;
-            object-fit: contain;
-            max-width: none;
-            border-top-right-radius: 0.5em;
-            border-top-left-radius: 0.5em;
-          }
 
-          &--right {
-            margin-right: 0;
-            margin-left: auto;
-            border-bottom-right-radius: 0.5em;
-          }
-
-          &--left {
-            margin-right: auto;
-            margin-left: 0;
-            border-bottom-left-radius: 0.5em;
-          }
-
+      &--right {
+        @media screen and (min-width: 961px), print {
+          margin-right: 0;
+          margin-left: auto;
+          border-bottom-right-radius: 0.5em;
+        }
       }
-}
+    }
+  }
 
-@media screen and (max-width: 960px) {
+  &__description {
+    background-color: $accent;
+    padding: 32px;
+    @media screen and (min-width: 961px), print {
+      padding: 48px;
+      box-shadow: $shadow;
+      background-color: $accent;
+      border-radius: 0.5em;
+    }
 
-.box {
-    &--right, &--left {
-      border-bottom:$border;
+    &--left,
+    &--right {
+      margin-top: -24px;
+      border-bottom: $border;
+
+      @media screen and (min-width: 961px), print {
+        border-bottom: 0px;
+        width: 60%;
+        margin-top: -48px;
+        z-index: 3;
+        background: $primary-lighter;
+      }
     }
-}
 
+    &--right {
+      @media screen and (min-width: 961px), print {
+        margin-left: auto;
+      }
+    }
+  }
 
-
-    .box-image{
-        &--left, &--right {
-        padding: 32px 32px 0px 32px;
-        max-width: inherit;
-        }
+  &__button {
+    font-weight: 400;
+    display: inline-block;
+    position: relative;
+    outline: 0;
+    color: $info;
+    background: transparent;
+    font-size: 1.4rem;
+    text-align: center;
+    text-decoration: none;
+    cursor: pointer;
+    border: 1px solid $primary-light;
+    white-space: nowrap;
+    font-weight: 400;
+    font-style: normal;
+    border-radius: 999em;
+    padding: 10px;
+
+    &:hover {
+      display: inline-block;
+      position: relative;
+      outline: 0px;
+      background: transparent;
+      font-size: 1.4rem;
+      text-align: center;
+      text-decoration: none;
+      cursor: pointer;
+      border: 1px solid $primary;
+      white-space: nowrap;
+      font-weight: 400;
+      font-style: normal;
+      border-radius: 999em;
     }
-
-    .box-wrapper {
-      padding-left: 0px;
-      padding-right: 0px;
-      padding-bottom: 0px;
-      padding-top: 48px;
+
+    &-wrapper {
+      padding-bottom: 1em;
     }
-}
+  }
+}
diff --git a/layouts/portfolio/list.html b/layouts/portfolio/list.html
@@ -16,29 +16,29 @@ <h2>{{ .title }}</h2>
         </div>
 
         {{ range $i, $p := .portfolioitem }}
-          <div class="box-wrapper">
+          <div class="portfolio">
             {{ if .image }}
               <div
-                class="box-image {{ if (modBool $i 2) }}
-                  box-image--right
+                class="portfolio__image-wrapper {{ if (modBool $i 2) }}
+                  portfolio__image-wrapper--right
 
                 {{ else }}
-                  box-image--left
+                  portfolio__image-wrapper--left
 
                 {{ end }}"
               >
                 <a href="{{ .link | safeURL }}" target="_blank" rel="noopener">
-                  <img src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
+                  <img class="portfolio__image" src="{{ .image | relURL }}" alt="{{ .name | markdownify }}" />
                 </a>
               </div>
 
             {{ end }}
             <div
-              class="box {{ if (modBool $i 2) }}
-                box--left
+              class="portfolio__description {{ if (modBool $i 2) }}
+                portfolio__description--left
 
               {{ else }}
-                box--right
+                portfolio__description--right
 
               {{ end }}"
             >
@@ -76,8 +76,10 @@ <h2>{{ .name | markdownify }}</h2>
               {{ end }}
               <p>{{ .description | markdownify }}</p>
               {{ if .link }}
-                <div class="cta">
-                  <a class="btn" href="{{ .link | safeURL }}" target="_blank" rel="noopener">Visit Site</a>
+                <div class="portfolio__button-wrapper">
+                  <a class="portfolio__button" href="{{ .link | safeURL }}" target="_blank" rel="noopener"
+                    >Visit Site</a
+                  >
                 </div>
 
               {{ end }}