Prettify all the SCSS

NJITICC · Aug 30, 2020 · e7cab4e · e7cab4e
1 parent 9a4f952
commit e7cab4e
Show file tree

Hide file tree

Showing 13 changed files with 159 additions and 88 deletions.
diff --git a/src/mawek/assets/styles/_footer.scss b/src/mawek/assets/styles/_footer.scss
@@ -31,7 +31,8 @@ footer {
       text-decoration-color: var(--color-link-underline);
     }
 
-    svg, svg>use {
+    svg,
+    svg > use {
       color: var(--color-foreground-border);
 
       width: 0.75rem;

diff --git a/src/mawek/assets/styles/_icons.scss b/src/mawek/assets/styles/_icons.scss
@@ -1,15 +1,24 @@
 $icons: (
   // Adapted from tabler-icons
   //    url: https://tablericons.com/
-  "search":   url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>'),
+  "search":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"/><circle cx="10" cy="10" r="7" /><line x1="21" y1="21" x2="15" y2="15" /></svg>'),
   // Factored out from mkdocs-material on 24-Aug-2020.
   //    url: https://squidfunk.github.io/mkdocs-material/reference/admonitions/
-  "pencil":   url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>'),
-  "abstract": url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>'),
-  "info":     url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>'),
-  "flame":    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>'),
-  "question": url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>'),
-  "warning":  url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>'),
-  "failure":  url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>'),
-  "spark":    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>'),
+  "pencil":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>'),
+  "abstract":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4 5h16v2H4V5m0 4h16v2H4V9m0 4h16v2H4v-2m0 4h10v2H4v-2z"/></svg>'),
+  "info":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10A10 10 0 0012 2z"/></svg>'),
+  "flame":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17.55 11.2c-.23-.3-.5-.56-.76-.82-.65-.6-1.4-1.03-2.03-1.66C13.3 7.26 13 4.85 13.91 3c-.91.23-1.75.75-2.45 1.32-2.54 2.08-3.54 5.75-2.34 8.9.04.1.08.2.08.33 0 .22-.15.42-.35.5-.22.1-.46.04-.64-.12a.83.83 0 01-.15-.17c-1.1-1.43-1.28-3.48-.53-5.12C5.89 10 5 12.3 5.14 14.47c.04.5.1 1 .27 1.5.14.6.4 1.2.72 1.73 1.04 1.73 2.87 2.97 4.84 3.22 2.1.27 4.35-.12 5.96-1.6 1.8-1.66 2.45-4.32 1.5-6.6l-.13-.26c-.2-.46-.47-.87-.8-1.25l.05-.01m-3.1 6.3c-.28.24-.73.5-1.08.6-1.1.4-2.2-.16-2.87-.82 1.19-.28 1.89-1.16 2.09-2.05.17-.8-.14-1.46-.27-2.23-.12-.74-.1-1.37.18-2.06.17.38.37.76.6 1.06.76 1 1.95 1.44 2.2 2.8.04.14.06.28.06.43.03.82-.32 1.72-.92 2.27h.01z"/></svg>'),
+  "question":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.07 11.25l-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 00-2-2 2 2 0 00-2 2H8a4 4 0 014-4 4 4 0 014 4 3.2 3.2 0 01-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 002 12a10 10 0 0010 10 10 10 0 0010-10c0-5.53-4.5-10-10-10z"/></svg>'),
+  "warning":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 14h-2v-4h2m0 8h-2v-2h2M1 21h22L12 2 1 21z"/></svg>'),
+  "failure":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.53 0 10 4.47 10 10s-4.47 10-10 10S2 17.53 2 12 6.47 2 12 2m3.59 5L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41 15.59 7z"/></svg>'),
+  "spark":
+    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11.5 20l4.86-9.73H13V4l-5 9.73h3.5V20M12 2c2.75 0 5.1 1 7.05 2.95C21 6.9 22 9.25 22 12s-1 5.1-2.95 7.05C17.1 21 14.75 22 12 22s-5.1-1-7.05-2.95C3 17.1 2 14.75 2 12s1-5.1 2.95-7.05C6.9 3 9.25 2 12 2z"/></svg>')
 );
diff --git a/src/mawek/assets/styles/_layout.scss b/src/mawek/assets/styles/_layout.scss
@@ -3,11 +3,11 @@
 //   This is a mobile-last design based off "max-width" rather than "min-width"
 ////////////////////////////////////////////////////////////////////////////////
 body {
-  overflow-y: scroll;  // always have the scrollbar
+  overflow-y: scroll; // always have the scrollbar
 }
 .page {
   display: flex;
-  min-height: 100vh;  // fill the viewport for pages with little content.
+  min-height: 100vh; // fill the viewport for pages with little content.
 }
 header {
   width: 100vw;
@@ -20,7 +20,8 @@ header {
 
   // Add shadow when scrolled
   &.scrolled {
-    box-shadow: 0 0 .2rem rgba(0,0,0,.1),0 .2rem .4rem rgba(0,0,0,.2)
+    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.1),
+      0 0.2rem 0.4rem rgba(0, 0, 0, 0.2);
   }
 
   // We don't show the header on large screens.
@@ -42,10 +43,12 @@ header {
 }
 
 // Scroll-along sidebars
-.navigation, .toc-drawer {
+.navigation,
+.toc-drawer {
   width: $sidebar-width;
 }
-.sidebar-scroll, .toc-scroll {
+.sidebar-scroll,
+.toc-scroll {
   position: sticky;
   top: 0;
   // Limit the height of sidebars to that of the viewport.
@@ -109,7 +112,7 @@ header {
   transition: width 0ms, height 0ms, opacity 250ms ease-out;
 
   opacity: 0;
-  background-color: rgba(0,0,0,.54);
+  background-color: rgba(0, 0, 0, 0.54);
 }
 
 // Keep things on top and smooth.
@@ -151,7 +154,6 @@ header {
   }
 }
 
-
 ////////////////////////////////////////////////////////////////////////////////
 // Responsive layouting
 ////////////////////////////////////////////////////////////////////////////////
@@ -170,7 +172,9 @@ header {
   }
 
   .sidebar-drawer {
-      width: calc((100% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width});
+    width: calc(
+      (100% - #{$full-width - $sidebar-width}) / 2 + #{$sidebar-width}
+    );
   }
   .toc-drawer {
     position: fixed;
@@ -204,7 +208,8 @@ header {
       justify-content: center;
       align-items: center;
     }
-    .header-left, .header-right {
+    .header-left,
+    .header-right {
       height: var(--header-height);
       width: var(--header-height);
     }

diff --git a/src/mawek/assets/styles/_navigation.scss b/src/mawek/assets/styles/_navigation.scss
@@ -5,12 +5,13 @@
   display: flex;
   flex-direction: column;
 
-  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  padding: var(--sidebar-item-padding-vertical)
+    var(--sidebar-item-padding-horizontal);
   text-decoration: none;
 }
 
 .sidebar-brand-text {
-  padding: var(--sidebar-item-padding-vertical) 0;  // some extra vertical spacing
+  padding: var(--sidebar-item-padding-vertical) 0; // some extra vertical spacing
   font-size: 1.5rem;
 }
 
@@ -39,16 +40,18 @@
   padding-right: var(--sidebar-search-input-padding-horizontal);
   padding-left: calc(
     var(--sidebar-item-padding-horizontal) +
-    var(--sidebar-search-input-padding-horizontal) +
-    var(--sidebar-search-icon-size)
+      var(--sidebar-search-input-padding-horizontal) +
+      var(--sidebar-search-icon-size)
   );
 
   width: 100%;
 
   background: transparent;
   z-index: 1;
 
-  &:focus { outline: none; }
+  &:focus {
+    outline: none;
+  }
 
   &::placeholder {
     font-size: var(--sidebar-search-input-font-size);
@@ -89,7 +92,8 @@
     height: 100%;
     width: 100%;
 
-    padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+    padding: var(--sidebar-item-padding-vertical)
+      var(--sidebar-item-padding-horizontal);
 
     // Add a nice little "external-link" arrow here.
     &.external::after {
@@ -125,7 +129,8 @@
 
     margin: var(--sidebar-caption-margin-top) 0 0 0;
 
-    padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+    padding: var(--sidebar-item-padding-vertical)
+      var(--sidebar-item-padding-horizontal);
   }
   // If it has children, add a bit more padding to wrap the content to avoid
   // overlapping with the <label>

diff --git a/src/mawek/assets/styles/_normalize.scss b/src/mawek/assets/styles/_normalize.scss
@@ -8,7 +8,7 @@
  * 2. Prevent adjustments of font size after orientation changes in iOS.
  */
 
- html {
+html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
@@ -174,7 +174,8 @@ textarea {
  */
 
 button,
-input { /* 1 */
+input {
+  /* 1 */
   overflow: visible;
 }
 
@@ -184,7 +185,8 @@ input { /* 1 */
  */
 
 button,
-select { /* 1 */
+select {
+  /* 1 */
   text-transform: none;
 }
 

diff --git a/src/mawek/assets/styles/_theme.scss b/src/mawek/assets/styles/_theme.scss
@@ -17,7 +17,8 @@ body {
 
 .sidebar-search-container {
   background: var(--color-sidebar-search-background);
-  &:hover, &:focus-within {
+  &:hover,
+  &:focus-within {
     background: var(--color-sidebar-search-background--focus);
   }
   &::before {
@@ -38,7 +39,7 @@ body {
   }
 
   .reference {
-    text-decoration: none;  // No need for underlines here.
+    text-decoration: none; // No need for underlines here.
     color: var(--color-sidebar-link-text);
     &:hover {
       background: var(--color-sidebar-item-background--hover);
@@ -53,7 +54,8 @@ body {
   }
   // Colorize the top-level list items and icon.
   .toctree-l1 {
-    & > .reference, & > label .icon {
+    & > .reference,
+    & > label .icon {
       color: var(--color-sidebar-link-text--top-level);
     }
   }
@@ -86,7 +88,7 @@ body {
 .toc-tree {
   border-left: 1px solid var(--color-background-border);
   .reference {
-    text-decoration: none;  // No need for underlines here.
+    text-decoration: none; // No need for underlines here.
     color: var(--color-toc-item-text);
   }
   .scroll-current > .reference {

diff --git a/src/mawek/assets/styles/_typography.scss b/src/mawek/assets/styles/_typography.scss
@@ -1,7 +1,10 @@
 html {
   font-family: var(--font-stack);
 }
-pre, code, kbd, samp {
+pre,
+code,
+kbd,
+samp {
   font-family: var(--font-stack--monospace);
 }
 
@@ -39,7 +42,12 @@ h6 {
 }
 
 // Only show permalink indicator on hover.
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   .headerlink {
     display: none;
   }
@@ -51,7 +59,8 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 // Main headings
-h1, h2 {
+h1,
+h2 {
   margin-top: 1.5rem;
   margin-bottom: 1rem;
   font-weight: 300;
@@ -64,7 +73,9 @@ h3 {
 }
 
 // You're in-too-deep headings
-h4, h5, h6 {
+h4,
+h5,
+h6 {
   text-transform: uppercase;
   margin-top: 1rem;
   margin-bottom: 0.5rem;