Merge pull request #308 from ByteInternet/feature/improve_responsive_styling

Modularize styling, and improve breakpoint responsiveness to page layout

Author: tdgroot

docs/_static/scss/components/_article-meta.scss

@@ -0,0 +1,23 @@
+@use "../breakpoints" as *;
+
+.article-meta {
+    display: inline-block;
+    position: relative;
+    top: 30px;
+    font-size: 11px;
+    font-weight: 600;
+    opacity: 0.35;
+
+    &--updated {
+        opacity: 0.5;
+
+        &::after {
+            content: "•";
+            padding-left: 5px;
+        }
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+        font-size: 12px;
+    }
+}

docs/_static/scss/components/_breadcrumbs.scss

@@ -0,0 +1,58 @@
+@use "../breakpoints" as *;
+
+/* breadcrumbs*/
+.wy-breadcrumbs {
+    max-width: 1500px;
+    padding: 0 21px;
+    margin: auto;
+
+    & li {
+        padding-top: initial;
+    }
+
+    @media (max-width: $breakpoint-landscape) {
+        padding: 0 20px 0 60px;
+        overflow: auto;
+        white-space: nowrap;
+    }
+
+    @media (max-width: $breakpoint-mobile) {
+        padding: 0 20px 0 65px;
+    }
+}
+
+.wy-breadcrumbs,
+.wy-breadcrumbs li a,
+.wy-breadcrumbs-aside a {
+    font-size: 11px;
+}
+.wy-breadcrumbs li.wy-breadcrumbs-aside {
+    @media (max-width: $breakpoint-portrait) {
+        display: none;
+    }
+}
+
+.wy-breadcrumbs li a:visited {
+    color: var(--light-orange);
+}
+
+li.wy-breadcrumbs-aside a {
+    padding: 10px;
+}
+
+.header {
+    height: 50px;
+    line-height: 50px;
+    width: 100%;
+    position: fixed;
+    top: 60px;
+    border-bottom: 1px solid var(--grey-border);
+    z-index:20;
+    background-color: white;
+
+    @media (max-width: $breakpoint-mobile) {
+       top: 90px;
+    }
+}
+
+/* header end */