DX-3022 Optimize Sass (#864)

* DX-3022 Optimize Sass * fix instances of px instead of rem * fixes to nesting * fix more nesting * update font weight in tab switchers * update fonts to use variables * overpass light variable * revert size and layout css * update sizing and layouts to use px * use variable for item grid item size
Bandwidth · Jan 5, 2023 · 47a5179 · 47a5179
1 parent b58093f
commit 47a5179
Show file tree

Hide file tree

Showing 20 changed files with 440 additions and 434 deletions.
diff --git a/site/src/components/Carousel.js b/site/src/components/Carousel.js
@@ -118,14 +118,14 @@ export default function Carousel({itemList, title}) {
 
         return (
             <div className="slide" style={slideStyle}>
-                <div className="item" style={itemStyle} data-cy="item">
-                    <div className="image" style={imageStyle} data-cy="image"></div>
-                    <div className="categories" style={categoriesStyle} data-cy="categories">
+                <div className="slide-item" style={itemStyle} data-cy="item">
+                    <div className="slide-image" style={imageStyle} data-cy="image"></div>
+                    <div className="slide-categories" style={categoriesStyle} data-cy="categories">
                         {categories.map((category, idx) => (
                             <a href={categoryLinks[idx]} key={idx}>{category}</a>
                         ))}
                     </div>
-                    <div className="post" style={postStyle} data-cy="post">
+                    <div className="slide-post" style={postStyle} data-cy="post">
                         <a href={postLink}>{postTitle}</a>
                     </div>
                 </div>

diff --git a/site/src/components/FeaturePanels.js b/site/src/components/FeaturePanels.js
@@ -3,11 +3,11 @@ import React from 'react';
 function FeaturePanel({Svg, title, text, link}) {
     return (
         <a className="panel" href={link}>
-            <div className="header">
-                <Svg className="icon"/>
-                <div className="title">{title}</div>
+            <div className="panel-header">
+                <Svg className="panel-icon"/>
+                <div className="panel-title">{title}</div>
             </div>
-            <div className="content">
+            <div className="panel-content">
                 <div className="panel-text">{text}</div>
             </div>
         </a>

diff --git a/site/src/components/ItemGrid.js b/site/src/components/ItemGrid.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 function Item({Svg, title, link}) {
     return (
-        <div className="item">
+        <div className="item-grid-item">
             <a href={link} className="item-image">
                 <Svg className="item-svg" alt={title}/>
             </a>

diff --git a/site/src/components/LandingPage.js b/site/src/components/LandingPage.js
@@ -4,15 +4,15 @@ import ItemGrid from '@site/src/components/ItemGrid.js';
 export default function LandingPage({itemList, Svg, h1Text, h2Text}) {
     return (
         <div className="landing-page">
-            <div className="left">
-                <div className="title">
+            <div className="landing-page-left">
+                <div className="landing-page-title">
                     <h1>{h1Text}</h1>
                     <h2>{h2Text}</h2>
                 </div>
                 <ItemGrid itemList={itemList}/>
             </div>
-            <div className="right">
-                <Svg className="right-image" />
+            <div className="landing-page-right">
+                <Svg className="landing-page-right-image" />
             </div>
         </div>
     );

diff --git a/site/src/components/SplashPage.js b/site/src/components/SplashPage.js
@@ -46,9 +46,9 @@ function SplashPageImage({Svg}) {
 function SplashPageTextBlock({title, text, linkText, link}) {
     return (
         <div className="text-block">
-            <div className="title" data-cy="title">{title}</div>
-            <div className="text" data-cy="text">{text}</div>
-            <div className="link" data-cy="link"><a href={link}>{linkText}</a></div>
+            <div className="text-block-title" data-cy="title">{title}</div>
+            <div className="text-block-text" data-cy="text">{text}</div>
+            <div className="text-block-link" data-cy="link"><a href={link}>{linkText}</a></div>
         </div>
     )
 }

diff --git a/site/src/css/base/_root.scss b/site/src/css/base/_root.scss
@@ -17,8 +17,8 @@
     --ifm-color-primary-lightest: #{$blue25};
 
     /* Infima Font Overrides */
-    --ifm-font-family-base: 'Overpass';
-    --ifm-font-family-monospace: 'Overpass Mono';
+    --ifm-font-family-base: #{$overpass};
+    --ifm-font-family-monospace: #{$overpass-mono};
     --ifm-font-color-base: var(--ifm-color-content);
     --ifm-font-color-secondary: var(--ifm-color-content-secondary);
     --ifm-font-size-base: 95%;

diff --git a/site/src/css/components/_Carousel.scss b/site/src/css/components/_Carousel.scss
@@ -7,7 +7,7 @@
     height: 550px;
     display: flex;
     flex-direction: column;
-    margin: 2em 0;
+    margin: 30px 0;
 
     @include mobile-view {
         height: 300px;
@@ -17,10 +17,6 @@
         height: 240px;
     }
 
-    .decoration {
-
-    }
-
     .top-amoeba {
         @extend %carousel-decoration;
         margin-bottom: -1px;
@@ -55,100 +51,100 @@
         @include mobile-view {
             height: 100%;
         }
+    }
 
-        .carousel-header {
-            width: auto;
-            height: 50px;
-            color: var(--ifm-font-color-base);
-            font-family: 'Overpass Bold';
-            font-size: 2.2rem;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-
-            @include mobile-view {
-                height: 30px;
-                font-size: 1.8rem;
-            }
-            @include slim-mobile-view {
-                height: 22px;
-                font-size: 1.5rem;
-            }
-            @include ultra-slim-mobile-view {
-                height: 20px;
-                font-size: 1.2rem;
-            }
-        }
-
-        .carousel-content {
-            height: auto;
-            margin: 0 auto;
-            position: relative;
-            display: flex;
-            justify-content: center;
-        }
-
-        .carousel {
-            width: 100%;
-            height: 100%;
-            overflow: visible;
-            position: relative;
-        }
-
-        .carousel-slides {
-            display: flex;
-            overflow: visible;
-            position: relative;
-            width: 100%;
-            height: 100%;
+    .carousel-header {
+        width: auto;
+        height: 50px;
+        color: var(--ifm-font-color-base);
+        font-family: $overpass-bold;
+        font-size: 2.2rem;
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-            @include slide;
+        @include mobile-view {
+            height: 30px;
+            font-size: 1.8rem;
         }
-
-        .transition {
-            transition: all .25s ease-out;
+        @include slim-mobile-view {
+            height: 22px;
+            font-size: 1.5rem;
         }
-
-        .disabled {
-            pointer-events: none;
+        @include ultra-slim-mobile-view {
+            height: 20px;
+            font-size: 1.2rem;
         }
+    }
 
-        .nav-buttons {
-            position: absolute;
-            width: 100vw;
-            height: auto;
-            display: flex;
-            padding: 0 3em;
-            justify-content: space-between;
-
-            @include mobile-view {
-                padding: 0 2em;
-            }
+    .carousel-content {
+        height: auto;
+        margin: 0 auto;
+        position: relative;
+        display: flex;
+        justify-content: center;
+    }
 
-            button {
-                border-radius: 50%;
-                border: none;
-                background-color: $white;
-                font-family: 'Material Icons';
-                color: $blue50;
-                font-size: 2.4rem;
-                line-height: 2.2rem;
-                padding: 0;
+    .carousel {
+        width: 100%;
+        height: 100%;
+        overflow: visible;
+        position: relative;
+    }
 
-                &:hover {
-                    cursor: pointer;
-                }
-            }
+    .carousel-slides {
+        display: flex;
+        overflow: visible;
+        position: relative;
+        width: 100%;
+        height: 100%;
+
+        @include slide;
+    }
 
-            .left-button::before {
-                content: 'chevron_left';
-                margin-left: -2px;
-            }
-
-            .right-button::before {
-                content: 'chevron_right';
-                margin-left: 2px;
+    .transition {
+        transition: all .25s ease-out;
+    }
+
+    .disabled {
+        pointer-events: none;
+    }
+
+    .nav-buttons {
+        position: absolute;
+        width: 100vw;
+        height: auto;
+        display: flex;
+        padding: 0 3em;
+        justify-content: space-between;
+
+        @include mobile-view {
+            padding: 0 2em;
+        }
+
+        button {
+            border-radius: 50%;
+            border: none;
+            background-color: $white;
+            font-family: 'Material Icons';
+            color: $blue50;
+            font-size: 2.4rem;
+            line-height: 2.2rem;
+            padding: 0;
+
+            &:hover {
+                cursor: pointer;
             }
         }
+
+        .left-button::before {
+            content: 'chevron_left';
+            margin-left: -2px;
+        }
+
+        .right-button::before {
+            content: 'chevron_right';
+            margin-left: 2px;
+        }
     }
 }
diff --git a/site/src/css/components/_FeaturePanel.scss b/site/src/css/components/_FeaturePanel.scss
@@ -9,7 +9,7 @@
     .panel {
         width: 300px;
         height: 250px;
-        margin: 0 .6em 1.2em;
+        margin: 0 9px 18px;
         display: flex;
         flex-direction: column;
         background-color: var(--ifm-background-color);
@@ -19,51 +19,51 @@
         text-decoration: none;
 
         @include slim-mobile-view {
-            margin: 0 0 1.2rem;
+            margin: 0 0 18px;
             height: auto;
         }
 
         &:hover {
             text-decoration: none;
         }
+    }
 
-        .header {
-            width: auto;
-            height: 50px;
-            margin: 20px 15px;
-            display: flex;
+    .panel-header {
+        width: auto;
+        height: 50px;
+        margin: 20px 15px;
+        display: flex;
+    }
 
-            .icon {
-                width: 50px;
-                height: auto;
-            }
-            
-            .title {
-                width: calc(100% - 50px);
-                height: auto;
-                padding-left: 5px;
-                padding-top: 2px;
-                color: var(--ifm-font-color-base);
-                font-family: 'Overpass Bold';
-                font-size: 1.1rem;
-                line-height: 1.1rem;
-                display: flex;
-                align-items: center;
-            }
-        }
-        
-        .content {
-            width: 100%;
-            flex-grow: 1;
-            padding: 5px 25px 10px;
-            display: flex;
-            flex-direction: column;
+    .panel-icon {
+        width: 50px;
+        height: auto;
+    }
+
+    .panel-title {
+        width: calc(100% - 50px);
+        height: auto;
+        padding-left: 5px;
+        padding-top: 2px;
+        color: var(--ifm-font-color-base);
+        font-family: $overpass-bold;
+        font-size: 1.1rem;
+        line-height: 1.1rem;
+        display: flex;
+        align-items: center;
+    }
+
+    .panel-content {
+        width: 100%;
+        flex-grow: 1;
+        padding: 5px 25px 10px;
+        display: flex;
+        flex-direction: column;
+    }
 
-            .panel-text {
-                width: 100%;
-                flex-grow: 1;
-                color: var(--ifm-font-color-base);
-            }
-        }
+    .panel-text {
+        width: 100%;
+        flex-grow: 1;
+        color: var(--ifm-font-color-base);
     }
 }