patch: styling cleanups

src/pages/_includes/parts/header.njk

@@ -6,10 +6,10 @@
     <div id="logo-space">
       <a href="{{ '/' | url }}" id="home-link">
         <picture>
-          <source srcset="{{ '/' | url }}" media="(min-width: 900px)">
-            <img src="{{ '/' | url }}" alt="logo"></picture>
+          <source srcset="{{ '/assets/img/logos/spruce-development-platform.png' | url }}" media="(min-width: 900px)">
+            <img src="{{ '/assets/img/logos/spruce-development-platform.png' | url }}" alt="logo"></picture>
           </a>
-          <a href="{{ '/' | url }}">Developer Portal</a>
+          <!-- <a href="{{ '/' | url }}">Developer Portal</a> -->
         </div>
         {{ headerNavList(navigation.headerNav, page) }}
         {{ hamburgerButton() }}

src/pages/index.njk

@@ -9,8 +9,7 @@ surpressH1InLayout: true
 <div id="page-bg" role="presentation"></div>
 <section id="greeting">
   <div id="greeting-bg"></div>
-  <h1 style="margin: 0 20px"><img style="width: 800px" src="/spruce-documentation/assets/img/logos/spruce-development-platform-white.png"/></h1>
-  <h3 style="margin-top: 0">Build Great Software Fast!</h3>
+  <h1>Build Great Software Fast!</h1>
   <p>Get started in the way that's most familiar to you:</p>
   <div id="buttons">
     <a class="btn" href="{{ '/getting-started/frameworks/ios/' | url }}">From Scratch</a>

src/scss/_header.scss

@@ -1,12 +1,14 @@
-$top-nav-img-height: 24px;
+$top-nav-img-height: 50px;
 $cl-header-bar-primary: black;
 
 header#page-header {
   grid-area: header;
+  display: flex;
 
   #page-header-top {
     -webkit-app-region: drag;
     display: flex;
+    flex: 2;
     justify-content: space-between;
     font-size: 18px;
     padding: 24px $sz-mobile-hor-padding 20px;
@@ -38,7 +40,7 @@ header#page-header {
     #header-nav {
       display: flex;
       justify-content: center;
-      align-items: center;
+      align-items: flex-start;
 
       ul {
         display: flex;

src/scss/_values.scss

@@ -19,18 +19,17 @@ $default-max-content-width: 1200px;
 $mobile-width: 900px;
 // Tablet width? Do we care?
 
-// $sz-full-hor-padding: 70px;
-$sz-full-hor-padding: 0px;
+$sz-full-hor-padding: 20px;
 $sz-mobile-hor-padding: 30px;
 
 /* Explicit heights */
 $footer-large-screen-height: 200px;
 
 
 /* Gradients */
-$header-gradiant: white; 
-$blue-to-light-purple-grad: linear-gradient(180deg,#4720e3,#b748ff 68.44%);
-$blue-to-light-blue-grad: linear-gradient(180deg,#415bed,#13d0d7 44.86%);
+$header-gradiant: white;
+$blue-to-light-purple-grad: linear-gradient(180deg, #4720e3, #b748ff 68.44%);
+$blue-to-light-blue-grad: linear-gradient(180deg, #415bed, #13d0d7 44.86%);
 
 
 @mixin mq-full {

src/scss/_widgets.scss

@@ -1,11 +1,12 @@
 //does not work with colors containing alpha
 @function encodecolor($string) {
-	@if type-of($string) == 'color' {
-        $hex: str-slice(ie-hex-str($string), 4);
-        $string:unquote("#{$hex}");
-    }
-    $string: '%23' + $string;
-	@return $string;
+  @if type-of($string)=='color' {
+    $hex: str-slice(ie-hex-str($string), 4);
+    $string: unquote("#{$hex}");
+  }
+
+  $string: '%23' + $string;
+  @return $string;
 }
 
 /* Code Fence styling */
@@ -41,7 +42,8 @@ pre.hljs-container {
   border-radius: .3em;
 }
 
-pre.hljs-container, code {
+pre.hljs-container,
+code {
   background-color: rgba($cl-gray, 50%);
 }
 
@@ -62,10 +64,11 @@ code.language-shell {
 }
 
 /* Inline input and output */
-code, kbd {
-	padding: .1em .35em;
-	border-radius: .4em;
-	white-space: break-spaces;
+code,
+kbd {
+  padding: .1em .35em;
+  border-radius: .4em;
+  white-space: break-spaces;
   box-sizing: border-box;
   font-size: 90%;
 }
@@ -77,7 +80,8 @@ kbd {
 
 /* Offset the styling of combo keys from their combinator (e.g., the '+' in 'Ctrl+C'). */
 /* Doesn't work on all browsers, but makes for slightly nicer typesetting for the browsers that do support it. */
-kbd:has(kbd), kbd kbd {
+kbd:has(kbd),
+kbd kbd {
   background-color: rgba($cl-main-text, 0.5);
 }
 
@@ -93,6 +97,7 @@ kbd:has(kbd) {
 
 /* Details and Summary */
 details {
+
   /* For historical reasons this block's class name is different from the 'Learn more' text that it displays. */
   &.dig-deeper {
     outline: rgba(black, 0.25) solid 1px;
@@ -109,6 +114,7 @@ details {
         display: none;
         content: '';
       }
+
       &::before {
         font-weight: normal;
         padding-left: 32px;
@@ -120,6 +126,7 @@ details {
         content: "Learn more | ";
         color: rgba(black, 0.5);
       }
+
       @include addExpandIcon;
     }
 
@@ -131,7 +138,7 @@ details {
       summary {
         border-radius: 5px 5px 0 0;
 
-        &::after{
+        &::after {
           transform: scaleY(-1);
           top: 4px;
         }
@@ -146,7 +153,7 @@ details {
   .admonition-title {
     background-color: $admonitionBg;
     padding: 6.4px 9.6px 6.4px 16px;
-    border-bottom: .8px solid rgba(68,138,255,.1);
+    border-bottom: .8px solid rgba(68, 138, 255, .1);
     margin-top: 0;
     font-weight: 700;
     @content;
@@ -163,12 +170,15 @@ details {
   &-content {
     padding: 0 16px;
 
-    > * {
+    >* {
       margin-top: 0;
     }
 
-    > ol, > ul {
-      ol, ul {
+    >ol,
+    >ul {
+
+      ol,
+      ul {
         padding-left: 20px;
       }
     }
@@ -189,7 +199,7 @@ details {
   }
 
   &.info {
-    @include admonitionTitle(rgba($cl-other-green, 0.2)){
+    @include admonitionTitle(rgba($cl-other-green, 0.2)) {
       padding-top: 10px;
       display: flex;
       gap: 12px;
@@ -230,7 +240,7 @@ details {
 
 @mixin cardBase() {
   border-radius: 5px;
-  box-shadow: 4px 4px 50px rgba(#000,.25);
+  box-shadow: 4px 4px 50px rgba(#000, .25);
   color: $cl-main-text;
 
   .content-wrapper {
@@ -247,7 +257,7 @@ details {
 
   .content-wrapper {
     background-color: white;
-    clip-path: polygon(17% 0,100% 55%,100% 100%,0 100%,0 15%);
+    clip-path: polygon(17% 0, 100% 55%, 100% 100%, 0 100%, 0 15%);
     margin-top: $head-space;
 
   }
@@ -322,6 +332,7 @@ a.link-tile {
 
     @include mq-mobile {
       display: flex;
+      align-items: center;
     }
   }
 }
@@ -333,6 +344,7 @@ a.link-tile {
     padding-right: 15px !important;
     display: inline-block;
     position: relative;
+
     &:after {
       transition: .25s;
       position: absolute;
@@ -356,7 +368,7 @@ a.link-tile {
   left: 0;
   right: 0;
   z-index: 1;
-  background-color: rgba(#000,.25);
+  background-color: rgba(#000, .25);
 
   &-close {
     position: absolute;

src/scss/page-specific/_home.scss

@@ -1,12 +1,12 @@
 &.home-page {
   position: relative;
-  grid-template-areas: 
+  grid-template-areas:
     "... header header ..."
     "... header header ..."
     "greeting greeting greeting greeting"
     "... mainArea mainArea ..."
     "... footer footer ...";
-  
+
   #page-bg {
     display: none;
     position: absolute;
@@ -35,7 +35,10 @@
     &-bg {
       background-color: black;
       position: absolute;
-      top: 0; bottom: 0; right: 0; left: 0;
+      top: 0;
+      bottom: 0;
+      right: 0;
+      left: 0;
       z-index: -1;
       overflow: hidden;
     }
@@ -51,7 +54,6 @@
 
     .btn {
       @include btn-base(black);
-      margin-top: 32px;
     }
   }
 
@@ -80,8 +82,9 @@
     justify-content: center;
     flex-wrap: wrap;
     gap: 10px;
+    margin-top: 40px;
   }
-  
+
   .btn {
     text-decoration: none;
     background-color: #007bff;
@@ -106,7 +109,7 @@
     .home-tile {
       text-decoration: none;
       background-color: white;
-      
+
       .content-wrapper {
         padding-left: 40px;
         display: flex;
@@ -150,8 +153,9 @@
       display: flex;
     }
 
-    .side-bar, .sidebar-right-bg {
+    .side-bar,
+    .sidebar-right-bg {
       display: none;
     }
   }
-}
+}