Decomposition of scss styles into components

2ead46ba · Jacek Lebioda · d7b9d6ff · 2ead46ba · 2ead46ba · 2ead46ba
Commit 2ead46ba authored Aug 01, 2019 by Jacek Lebioda
8 changed files
--- a/_sass/elixir.scss
+++ b/_sass/elixir.scss
 @import
    "elixir/base",
+    "elixir/cards",
+    "elixir/footer",
+    "elixir/header",
    "elixir/layout"
 ;
--- a/_sass/elixir/_base.scss
+++ b/_sass/elixir/_base.scss
@@ -5,9 +5,9 @@ $COLOR_BACKGROUND_HEADER: #023452;
 $FONT_DEFAULT: 'Lato', Verdana, Helvetica, sans-serif;

 $PADDING_PAGE_LEFT: 13%;
-$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%;
-
 $WIDTH_CONTENT: 67%;
+
+$PADDING_PAGE_LEFT_NO_COLUMN: 22.5%;
 $WIDTH_CONTENT_NO_COLUMN: 58%;

 html {

--- a/_sass/elixir/_cards.scss
+++ b/_sass/elixir/_cards.scss
+.cards {
+  display: flex;
+  flex-wrap: wrap;
+
+  .card-id.smaller {
+    height: 175px;
+  }
+
+  .card-id {
+    width: 185px;
+    height: 350px;
+    border: solid 2px #e6e6e6;
+    border-radius: 7px 7px 0px 0px;
+    padding: 8px;
+    margin: 10px;
+
+    .card-id-smallphoto img {
+      width: auto;
+      padding-left: 4px;
+      padding-bottom: 8px;
+    }
+
+    .card-id-photo img {
+      width: 120px;
+      padding-left: 4px;
+      padding-bottom: 8px;
+    }
+
+    .card-id-name {
+      font-weight: 600;
+      font-size: 18px;
+    }
+
+    .card-id-description {
+      font-size: 14px;
+    }
+  }
+}
--- a/_sass/elixir/_footer.scss
+++ b/_sass/elixir/_footer.scss
+#site-footer-primary {
+  #site-footer-primary-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    background: #3e3e3e;
+    font-size: 0.875rem;
+    @media only screen and (min-width: 600px) {
+      padding-left: 22%;
+    }
+    @media only screen and (max-width: 600px) {
+      padding-left: 2%;
+    }
+
+    div {
+      margin-left: 15px;
+      margin-right: 15px;
+      min-width: 200px;
+
+      .site-footer-primary-logo {
+        padding-top: 10px;
+        padding-bottom: 5px;
+      }
+
+      h3 {
+        border-bottom: 1px solid #848484;
+        font-size: 1.15rem;
+        color: #ebebeb;
+        transition: color 0.15s;
+        margin-bottom: 5px;
+
+        a {
+          color: #ebebeb;
+          text-decoration: none;
+        }
+
+        a:hover {
+          text-decoration: none;
+          color: $COLOR_LINK_ELIXIR;
+        }
+      }
+
+      ul {
+        padding-inline-start: 0;
+        margin-block-start: 0;
+
+        li {
+          list-style: none;
+          width: auto;
+          float: none;
+          min-width: 0;
+
+          a {
+            display: inline-block;
+            zoom: 1;
+            font-size: 14px;
+            line-height: 1.1;
+            color: #ebebeb;
+            padding: 1px 4px 2px 0;
+            border-bottom: none;
+            margin-bottom: 0;
+            text-decoration: none;
+          }
+
+          a:hover {
+            text-decoration: none;
+            transition: color 0.25s;
+            color: $COLOR_LINK_ELIXIR;
+          }
+        }
+      }
+    }
+  }
+}
+
+#site-footer-secondary {
+  #site-footer-secondary-wrapper {
+    background: #023452;
+    border-top: 1px solid #333;
+    color: #ebebeb;
+    font-size: 0.875rem;
+    display: flex;
+    flex-wrap: wrap-reverse;
+    @media only screen and (min-width: 600px) {
+      padding-left: 22%;
+    }
+    @media only screen and (max-width: 600px) {
+      padding-left: 2%;
+    }
+
+    div {
+      margin-left: 15px;
+    }
+
+    ul {
+      list-style: none;
+      padding-inline-start: 0;
+      padding-right: 100px;
+      @media only screen and (min-width: 600px) {
+        li {
+          display: inline-block;
+        }
+      }
+      @media only screen and (max-width: 600px) {
+        li {
+          display: list-item;
+          margin-top: 7px;
+        }
+      }
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+        color: #ffffff;
+        font-weight: 800;
+        padding-left: 15px;
+        padding-right: 15px;
+      }
+
+      a:hover {
+        transition: color 0.25s;
+        color: orange;
+        text-decoration: none;
+      }
+    }
+
+    #address {
+      color: #888;
+      font-size: 14px;
+      padding-top: 14px;
+      @media only screen and (max-width: 600px) {
+        width: 90%;
+      }
+    }
+  }
+}
--- a/_sass/elixir/_header.scss
+++ b/_sass/elixir/_header.scss
+#site-header {
+  background: $COLOR_BACKGROUND_HEADER;
+  height: 93px;
+  margin-top: -15px;
+  margin-bottom: 37px;
+
+  #site-header-wrapper {
+    @media only screen and (min-width: 1025px) {
+      padding-left: $PADDING_PAGE_LEFT;
+    }
+    @media only screen and (max-width: 1025px) {
+      padding-left: 5px;
+
+      ul {
+        padding-inline-start: 5px;
+      }
+    }
+
+    .elixir-image {
+      position: relative;
+      top: 26px;
+      float: left;
+      margin-right: 82px;
+
+      img {
+        width: 150px;
+        padding-left: 10px;
+      }
+    }
+
+    .hamburger {
+      background: none;
+
+      input {
+        display: none;
+      }
+      @media only screen and (max-width: 1025px) {
+        width: 50px;
+        height: 50px;
+        border: solid 2px #e6e6e6;
+        border-radius: 12px;
+        float: right;
+        position: relative;
+        top: 30px;
+        right: 20px;
+        z-index: 1;
+        background-color: #023452;
+        background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg==");
+        background-size: contain;
+
+        input {
+          opacity: 0;
+          display: block;
+          width: 50px;
+          height: 50px;
+          margin: 0;
+          z-index: 10;
+          cursor: pointer;
+          -webkit-touch-callout: none;
+        }
+
+        input ~ ul {
+          display: none;
+          height: 0;
+        }
+
+        input:checked ~ ul {
+          display: block;
+          float: left;
+          background-color: #023452;
+          width: 150px;
+          position: relative;
+          left: -88px;
+          top: -6px;
+          padding-bottom: 9px;
+          height: auto;
+          padding-right: 5px;
+
+          li {
+            display: contents;
+          }
+        }
+      }
+    }
+
+    ul {
+      margin-left: 0;
+      position: relative;
+      top: 66px;
+      left: -16px;
+
+      li {
+        list-style: none;
+        float: left;
+        margin: 0;
+        padding: 0;
+
+        a {
+          display: block;
+          white-space: nowrap;
+          @media only screen and (max-width: 1025px) {
+            padding: 12px 16px;
+          }
+          padding: 5px 16px;
+          margin-left: 0;
+          color: #fefefe;
+          text-transform: uppercase;
+          font-size: 0.875rem;
+          text-decoration: none;
+        }
+
+        a.active {
+          border-radius: 5px 5px 0 0;
+          color: #fefefe;
+          background: $COLOR_LINK_ELIXIR;
+        }
+
+        a.active:hover {
+          color: #222;
+          background: #d46d11;
+          transition: color 0.25s;
+        }
+
+        a:hover {
+          color: $COLOR_LINK_ELIXIR;
+          border-color: $COLOR_LINK_ELIXIR;
+          text-decoration: none;
+          transition: color 0.25s, background 0.25s;
+        }
+      }
+    }
+  }
+}
--- a/_sass/elixir/_layout.scss
+++ b/_sass/elixir/_layout.scss
-#site-header {
-  background: $COLOR_BACKGROUND_HEADER;
-  height: 93px;
-  margin-top: -15px;
-  margin-bottom: 37px;
-
-  #site-header-wrapper {
-    @media only screen and (min-width: 1025px) {
-      padding-left: $PADDING_PAGE_LEFT;
-    }
-    @media only screen and (max-width: 1025px) {
-      padding-left: 5px;
-      ul {
-        padding-inline-start: 5px;
-      }
-    }
-
-    .elixir-image {
-      position: relative;
-      top: 26px;
-      float: left;
-      margin-right: 82px;
-
-      img {
-        width: 150px;
-        padding-left: 10px;
-      }
-    }
-
-    .hamburger {
-      background: none;
-
-      input {
-        display: none;
-      }
-
-      @media only screen and (max-width: 1025px) {
-        width: 50px;
-        height: 50px;
-        border: solid 2px #e6e6e6;
-        border-radius: 12px;
-        float: right;
-        position: relative;
-        top: 30px;
-        right: 20px;
-        z-index: 1;
-        background-color: #023452;
-        background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEQAACxEBf2RfkQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMS40E0BoxAAAAbNJREFUeF7t1rFOw0AQhOHUUBJK8uAI8Q4g3oUU8BTQm7nIlqz1P0qFc6u9kT7JN01uE8XawzRNpWFZCZaVYFkJlpVgWQmWlWBZCZaVYOlkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYelkC80QYemso/NRnuVTvm7sLC9ynK93ic5XYeks0fOdvEtvaXe6n6+5uT/B0lmi5yf5kd7yK6f5mpv7EyydJXpuX0D7sN7SfpRdvoBe/wJv8v9/gRad20uwvXjaC+j7xtod2gv5Yb7eJTpfhaWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWTLTRDhKWzjs6P8irtDUzr6Z5usgp/SG/ZbRU+SY+b4FiFZazC8zU39ydYOuvoPFbh3kMzRFg62UIzRFg62UIzRFg62UIzRFg62UIzRFg66+g8VmHpLWMVlrEKz9fc3J9g6SzR81iFdR6rcO+hGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsnWyhGSIsK8GyEiwrwbISLCvBshIsK8GyEiwrwbISLOuYDn8dSvgjYpq2oAAAAABJRU5ErkJggg==');
-        background-size: contain;
-
-        input {
-          opacity: 0;
-          display: block;
-          width: 50px;
-          height: 50px;
-          margin: 0;
-          z-index: 10;
-          cursor: pointer;
-          -webkit-touch-callout: none;
-        }
-
-        input ~ ul {
-          display: none;
-          height: 0px;
-        }
-
-        input:checked ~ ul {
-          display: block;
-          float: left;
-          background-color: #023452;
-          width: 150px;
-          position: relative;
-          left: -88px;
-          top: -6px;
-          padding-bottom: 9px;
-          height: auto;
-          padding-right: 5px;
-
-          li {
-            display: contents;
-          }
-        }
-      }
-    }
-
-    ul {
-      margin-left: 0;
-      position: relative;
-      top: 66px;
-      left: -16px;
-
-      li {
-        list-style: none;
-        float: left;
-        margin: 0;
-        padding: 0;
-
-        a {
-          display: block;
-          white-space: nowrap;
-          @media only screen and (max-width: 1025px) {
-            padding: 12px 16px;
-          }
-          padding: 5px 16px;
-          margin-left: 0;
-          color: #fefefe;
-          text-transform: uppercase;
-          font-size: 0.875rem;
-          text-decoration: none;
-        }
-
-        a.active {
-          border-radius: 5px 5px 0 0;
-          color: #fefefe;
-          background: $COLOR_LINK_ELIXIR;
-        }
-
-        a.active:hover {
-          color: #222;
-          background: #d46d11;
-          transition: color 0.25s;
-        }
-
-        a:hover {
-          color: $COLOR_LINK_ELIXIR;
-          border-color: $COLOR_LINK_ELIXIR;
-          text-decoration: none;
-          transition: color 0.25s, background 0.25s;
-        }
-      }
-    }
-  }
-}
-
 #site-content {
  h1.title {
    font-size: 37px;
@@ -151,20 +17,17 @@
    hr {
      border-top: solid 1px #f7f7f7;
    }
-
    @media screen and (orientation: landscape) and (max-width: 820px) {
      article {
        font-size: 12px;
      }
    }
-
    @media only screen and (min-width: 1025px) {
      padding-left: $PADDING_PAGE_LEFT;
      width: $WIDTH_CONTENT;
      flex-direction: row;
      min-width: 400px;
    }
-
    @media only screen and (max-width: 1025px) {
      padding-left: 4%;
      padding-right: 4%;
@@ -174,6 +37,7 @@
      #left-column {
        border-bottom: solid 1px #e6e6e6;
        min-width: 92% !important;
+
        ul {
          min-width: 92% !important;
        }
@@ -213,7 +77,7 @@
        }

        .index-photo {
-          border: solid 0px black;
+          border: solid 0 black;
          flex-grow: 1;
          margin-right: 2%;

@@ -303,150 +167,6 @@
  }
 }

-#site-footer-primary {
-  #site-footer-primary-wrapper {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    background: #3e3e3e;
-    font-size: 0.875rem;
-
-    @media only screen and (min-width: 600px) {
-      padding-left: 22%;
-    }
-
-    @media only screen and (max-width: 600px) {
-      padding-left: 2%;
-    }
-
-    div {
-      margin-left: 15px;
-      margin-right: 15px;
-      min-width: 200px;
-
-      .site-footer-primary-logo {
-        padding-top: 10px;
-        padding-bottom: 5px;
-      }
-
-      h3 {
-        border-bottom: 1px solid #848484;
-        font-size: 1.15rem;
-        color: #ebebeb;
-        transition: color 0.15s;
-        margin-bottom: 5px;
-
-        a {
-          color: #ebebeb;
-          text-decoration: none;
-        }
-
-        a:hover {
-          text-decoration: none;
-          color: $COLOR_LINK_ELIXIR;
-        }
-      }
-
-      ul {
-        padding-inline-start: 0px;
-        margin-block-start: 0px;
-
-        li {
-          list-style: none;
-          width: auto;
-          float: none;
-          min-width: 0;
-
-          a {
-            display: inline-block;
-            zoom: 1;
-            font-size: 14px;
-            line-height: 1.1;
-            color: #ebebeb;
-            padding: 1px 4px 2px 0;
-            border-bottom: none;
-            margin-bottom: 0;
-            text-decoration: none;
-          }
-
-          a:hover {
-            text-decoration: none;
-            transition: color 0.25s;
-            color: $COLOR_LINK_ELIXIR;
-          }
-        }
-      }
-    }
-  }
-}
-
-#site-footer-secondary {
-  #site-footer-secondary-wrapper {
-    background: #023452;
-    border-top: 1px solid #333;
-    color: #ebebeb;
-    font-size: 0.875rem;
-    display: flex;
-    flex-wrap: wrap-reverse;
-
-    @media only screen and (min-width: 600px) {
-      padding-left: 22%;
-    }
-
-    @media only screen and (max-width: 600px) {
-      padding-left: 2%;
-    }
-
-    div {
-      margin-left: 15px;
-    }
-
-    ul {
-      list-style: none;
-      padding-inline-start: 0px;
-      padding-right: 100px;
-
-      @media only screen and (min-width: 600px) {
-        li {
-          display: inline-block;
-        }
-      }
-
-      @media only screen and (max-width: 600px) {
-        li {
-          display: list-item;
-          margin-top: 7px;
-        }
-      }
-
-      a {
-        display: inline-block;
-        text-decoration: none;
-        color: #ffffff;
-        font-weight: 800;
-        padding-left: 15px;
-        padding-right: 15px;
-      }
-
-      a:hover {
-        transition: color 0.25s;
-        color: orange;
-        text-decoration: none;
-      }
-    }
-
-    #address {
-      color: #888;
-      font-size: 14px;
-      padding-top: 14px;
-
-      @media only screen and (max-width: 600px) {
-        width: 90%;
-      }
-    }
-  }
-}
-
 table {
  margin-top: 10px;
  border: solid 1px #ffdfdf;
@@ -467,6 +187,7 @@ table {
  tbody tr {
    padding: 9px 2px;