From 7ce5e76485396f61dcfab4b43f6fd2add49963d1 Mon Sep 17 00:00:00 2001 From: Taylor Romero Date: Sun, 31 Mar 2024 20:09:55 -0600 Subject: [PATCH] patch: styling cleanups --- src/pages/_includes/parts/header.njk | 6 ++-- src/pages/index.njk | 3 +- src/scss/_header.scss | 6 ++-- src/scss/_values.scss | 9 +++-- src/scss/_widgets.scss | 54 +++++++++++++++++----------- src/scss/page-specific/_home.scss | 20 ++++++----- 6 files changed, 57 insertions(+), 41 deletions(-) diff --git a/src/pages/_includes/parts/header.njk b/src/pages/_includes/parts/header.njk index 94e65aaa..2dfc6c68 100644 --- a/src/pages/_includes/parts/header.njk +++ b/src/pages/_includes/parts/header.njk @@ -6,10 +6,10 @@
- - logo + + logo - Developer Portal +
{{ headerNavList(navigation.headerNav, page) }} {{ hamburgerButton() }} diff --git a/src/pages/index.njk b/src/pages/index.njk index 61e2821e..416db677 100644 --- a/src/pages/index.njk +++ b/src/pages/index.njk @@ -9,8 +9,7 @@ surpressH1InLayout: true
-

-

Build Great Software Fast!

+

Build Great Software Fast!

Get started in the way that's most familiar to you:

From Scratch diff --git a/src/scss/_header.scss b/src/scss/_header.scss index dc730afd..b1919abd 100644 --- a/src/scss/_header.scss +++ b/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; diff --git a/src/scss/_values.scss b/src/scss/_values.scss index a8ba6463..c36cb0db 100644 --- a/src/scss/_values.scss +++ b/src/scss/_values.scss @@ -19,8 +19,7 @@ $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 */ @@ -28,9 +27,9 @@ $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 { diff --git a/src/scss/_widgets.scss b/src/scss/_widgets.scss index d66820ea..5eceaf1a 100644 --- a/src/scss/_widgets.scss +++ b/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; diff --git a/src/scss/page-specific/_home.scss b/src/scss/page-specific/_home.scss index b2086292..7cacab4f 100644 --- a/src/scss/page-specific/_home.scss +++ b/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; } } -} +} \ No newline at end of file