From 4d283d95b4d5951d262a405709559afda9444066 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 14 Jan 2025 14:55:21 -0800 Subject: [PATCH 1/2] Remove usage of bootstrap from the site --- package.json | 3 - pnpm-lock.yaml | 9 -- src/_includes/head.html | 6 +- src/_sass/_dartvm.scss | 2 +- src/_sass/_site.scss | 11 +-- src/_sass/components/_code.scss | 14 +-- src/_sass/components/_header.scss | 6 +- src/_sass/components/_search.scss | 11 ++- src/_sass/components/_sidebar.scss | 12 +-- src/_sass/components/_toc.scss | 2 +- src/_sass/core/_base.scss | 14 +-- src/_sass/core/_bootstrap.scss | 146 ++++++++++++----------------- 12 files changed, 96 insertions(+), 140 deletions(-) diff --git a/package.json b/package.json index fb6f035f7b..69041d2940 100644 --- a/package.json +++ b/package.json @@ -18,9 +18,6 @@ "pnpm": ">=9.12.3" }, "packageManager": "pnpm@9.15.2", - "dependencies": { - "bootstrap-scss": "^4.6.2" - }, "devDependencies": { "@11ty/eleventy": "^3.0.0", "@types/hast": "^3.0.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index aa22209541..8191d7d6cd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,10 +7,6 @@ settings: importers: .: - dependencies: - bootstrap-scss: - specifier: ^4.6.2 - version: 4.6.2 devDependencies: '@11ty/eleventy': specifier: ^3.0.0 @@ -766,9 +762,6 @@ packages: boolbase@1.0.0: resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==} - bootstrap-scss@4.6.2: - resolution: {integrity: sha512-emVpCI/S9aeFV1/qqKrztPZLiyow4XfRWLxOAu2SR/67Vau0y6IHNRukQrTx8+OUQ+aVPDhql40eDHSxGoAceA==} - boxen@5.1.2: resolution: {integrity: sha512-9gYgQKXx+1nP8mP7CzFyaUARhg7D3n1dF/FnErWmu9l6JvGpNUN278h0aSb+QjoiKSWG+iZ3uHrcqk0qrY9RQQ==} engines: {node: '>=10'} @@ -3979,8 +3972,6 @@ snapshots: boolbase@1.0.0: {} - bootstrap-scss@4.6.2: {} - boxen@5.1.2: dependencies: ansi-align: 3.0.1 diff --git a/src/_includes/head.html b/src/_includes/head.html index 04c9cd3737..1158542a49 100644 --- a/src/_includes/head.html +++ b/src/_includes/head.html @@ -78,15 +78,11 @@ integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"> - - + diff --git a/src/_sass/_dartvm.scss b/src/_sass/_dartvm.scss index 5086345930..63ecb061f8 100644 --- a/src/_sass/_dartvm.scss +++ b/src/_sass/_dartvm.scss @@ -5,7 +5,7 @@ #dev { tbody { tr { - @include bootstrap.transition(); + transition: all .25s ease-in-out; &.hidden { display: none; diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss index c9c2b06ba7..763cc329a3 100644 --- a/src/_sass/_site.scss +++ b/src/_sass/_site.scss @@ -22,10 +22,6 @@ @use 'overwrites'; @use 'dash'; -// Extra variables (defined in terms of bootstrap and other defaults) -$font-color: bootstrap.$body-color; -$font-weight-light-bold: (bootstrap.$font-weight-normal + bootstrap.$font-weight-bold) * 0.5; - /* ----------------------------------------- DOM @@ -429,7 +425,7 @@ main .content { } h3 { - font-size: bootstrap.$h2-font-size; + font-size: 1.5rem; } a { @@ -503,7 +499,10 @@ li.card { .table { width: 100%; - @extend .table-striped; + + tbody tr:nth-of-type(odd) { + background-color: rgba(0, 0, 0, 0.05); + } // override .table-striped macro, remove top border td { diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss index edfda7c616..5355864089 100644 --- a/src/_sass/components/_code.scss +++ b/src/_sass/components/_code.scss @@ -7,14 +7,14 @@ pre { margin-bottom: 1rem; font-size: 0.9375rem; - font-weight: bootstrap.$font-weight-normal; + font-weight: 400; padding: 1.25rem; a { font-family: inherit; font-weight: inherit; } - + .highlight { background: $flutter-color-yellow-300; padding: 0.1em; @@ -31,7 +31,7 @@ pre { &:focus { outline: none; } - + span.line { padding-left: 1.25rem; padding-right: 1.25rem; @@ -41,11 +41,11 @@ pre { background: color.change($brand-primary, $alpha: 0.1); } } - + &.show-line-numbers code { span.line { padding-left: 0.5rem; - + &[data-line]::before { display: inline-block; content: attr(data-line) ""; @@ -88,7 +88,7 @@ pre { } .code-block-language { - font-family: $font-family-monospace; + font-family: $site-font-family-monospace; user-select: none; font-size: 0.8125rem; color: $site-color-nav-links; @@ -120,7 +120,7 @@ pre { } .code-block-tag { - font-family: $font-family-monospace; + font-family: $site-font-family-monospace; font-size: 0.8125rem; font-weight: 500; position: absolute; diff --git a/src/_sass/components/_header.scss b/src/_sass/components/_header.scss index f4f87dabab..5fb3d8537d 100644 --- a/src/_sass/components/_header.scss +++ b/src/_sass/components/_header.scss @@ -9,7 +9,7 @@ z-index: $site-z-header; .navbar { - font-size: bootstrap.$font-size-lg; + font-size: 1.25rem; min-height: $site-header-height; @include bootstrap.media-breakpoint-up(md) { @@ -181,11 +181,11 @@ &__searchfield { border: 0; - font-size: bootstrap.$font-size-sm; + font-size: .875rem; padding-left: bootstrap.bs-spacer(8); @include bootstrap.media-breakpoint-down(sm) { - font-size: bootstrap.$font-size-lg; + font-size: 1.25rem; height: 66px; width: 100%; } diff --git a/src/_sass/components/_search.scss b/src/_sass/components/_search.scss index cf80107114..1c996e196a 100644 --- a/src/_sass/components/_search.scss +++ b/src/_sass/components/_search.scss @@ -53,7 +53,7 @@ } #sidenav & { - font-size: bootstrap.$font-size-lg; + font-size: 1.25rem; height: 66px; width: 100%; @@ -67,10 +67,11 @@ } } -input.gsc-search-button { - @extend .btn; - @extend .btn-primary; -} +// TODO(parlough): Improve styling of gsc button. +// input.gsc-search-button { +// @extend .btn; +// @extend .btn-primary; +//} #search-icon { position: absolute; diff --git a/src/_sass/components/_sidebar.scss b/src/_sass/components/_sidebar.scss index 9f37660267..c4201bc0b3 100644 --- a/src/_sass/components/_sidebar.scss +++ b/src/_sass/components/_sidebar.scss @@ -30,7 +30,7 @@ padding: 0; > .nav > .nav-item { - font-size: bootstrap.$font-size-base; + font-size: 1rem; } > .nav > .nav-item, @@ -60,7 +60,7 @@ @mixin nav-link-active-style { &.active { - font-weight: bootstrap.$font-weight-bold; + font-weight: 500; &:not(.collapsible) { color: $site-color-primary; @@ -81,8 +81,8 @@ } .nav-header { - font-weight: bootstrap.$font-weight-bolder; - font-size: bootstrap.$font-size-base; + font-weight: 700; + font-size: 1rem; user-select: none; color: lighten($site-color-body-light, 20%); } @@ -168,7 +168,7 @@ margin-bottom: bootstrap.bs-spacer(1); .nav-header { - font-size: bootstrap.$font-size-sm; + font-size: 0.875rem; &:not(:first-child) { margin-top: bootstrap.bs-spacer(2); @@ -176,7 +176,7 @@ } .nav-item { - font-size: bootstrap.$font-size-sm; + font-size: 0.875rem; > .nav-link { color: $site-color-body-light; diff --git a/src/_sass/components/_toc.scss b/src/_sass/components/_toc.scss index 47e3f62053..aa94959447 100644 --- a/src/_sass/components/_toc.scss +++ b/src/_sass/components/_toc.scss @@ -36,7 +36,7 @@ .toc-entry { padding-bottom: bootstrap.bs-spacer(2); - font-size: bootstrap.$font-size-sm; + font-size: .875rem; // Indent subsequent lines. margin-left: 1rem; diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss index a2d061fc10..46854d0275 100644 --- a/src/_sass/core/_base.scss +++ b/src/_sass/core/_base.scss @@ -21,34 +21,34 @@ h1, h2, h3, h4, h5, h6 { h1, .h1 { font-family: $site-font-family-gsans-display; - font-size: bootstrap.$h1-font-size; + font-size: 3rem; margin-top: 0; margin-bottom: 0; } h2, .h2 { - font-size: bootstrap.$h2-font-size; + font-size: 1.5rem; } h3, .h3 { - font-size: bootstrap.$h3-font-size; + font-size: 21px; } h4, .h4 { - font-size: bootstrap.$h4-font-size; + font-size: 18px; } h5, .h5 { - font-size: bootstrap.$h5-font-size; + font-size: 15px; } h6, .h6 { - font-size: bootstrap.$h6-font-size; + font-size: 15px; } dt { a { - font-weight: bootstrap.$font-weight-bold + font-weight: 500; } } diff --git a/src/_sass/core/_bootstrap.scss b/src/_sass/core/_bootstrap.scss index 03319a5b20..d7e030517b 100644 --- a/src/_sass/core/_bootstrap.scss +++ b/src/_sass/core/_bootstrap.scss @@ -1,99 +1,71 @@ @use '../core/variables' as *; @use '../core/colors'; -// Import from NPM library directly -@forward '../../../node_modules/bootstrap-scss/bootstrap' with ( - // Color config - $primary: $site-color-primary, - $body-color: $site-color-body, - - // Font config - $font-family-sans-serif: $site-font-family-base, - $font-family-monospace: $site-font-family-monospace, - $font-weight-base: $font-size-base-weight, - $font-weight-bold: 500, - $headings-font-family: $site-font-family-alt, - $headings-font-weight: $font-size-base-weight, - $dt-font-weight: $font-size-base-weight, - - $h1-font-size: 48px, - $h2-font-size: 24px, - $h3-font-size: 21px, - $h4-font-size: 18px, - $h5-font-size: 15px, - $h6-font-size: 15px, - - // Layout config - $container-max-widths: ( - sm: 540px, - md: 720px, - lg: 960px, - xl: 1140px, - xxl: 1330px - ), - - $grid-breakpoints: ( - 0: 0, - xxs: 320px, - xs: 480px, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, - xxl: 1440px - ), - - $spacers: ( - 1: ($site-spacer * 0.25), - 2: ($site-spacer * 0.5), - 3: ($site-spacer * 0.75), - 4: $site-spacer, - 5: ($site-spacer * 1.25), - 6: ($site-spacer * 1.5), - 7: ($site-spacer * 1.75), - 8: ($site-spacer * 2), - 9: ($site-spacer * 2.25), - 10: ($site-spacer * 2.5), - 11: ($site-spacer * 2.75), - 12: ($site-spacer * 3), - ), - - // Component config - - $alert-padding-y: $site-spacer * 1.5, - $alert-padding-x: $site-spacer * 1.5, - - $border-radius: 0, - $border-radius-lg: 0, - $border-radius-sm: 0, - - // Card - $card-border-radius: 4px, - $card-border-width: 0, - $card-group-margin: 0.5rem, +$grid-breakpoints: ( + 0: 0, + xxs: 320px, + xs: 480px, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, + xxl: 1440p, +); - $grid-gutter-width: 50px, +$spacers: ( + 1: ($site-spacer * 0.25), + 2: ($site-spacer * 0.5), + 3: ($site-spacer * 0.75), + 4: $site-spacer, + 5: ($site-spacer * 1.25), + 6: ($site-spacer * 1.5), + 7: ($site-spacer * 1.75), + 8: ($site-spacer * 2), + 9: ($site-spacer * 2.25), + 10: ($site-spacer * 2.5), + 11: ($site-spacer * 2.75), + 12: ($site-spacer * 3), +); - $nav-tabs-link-active-color: $site-color-body, - $nav-tabs-link-active-border-color: transparent transparent $site-color-primary, +@function bs-spacer($key: 3) { + @return map-get($spacers, $key); +} - $tooltip-bg: colors.$grey-800, +// TODO(parlough: Remove these utilities from bootstrap. - $enable-shadows: true, +@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) { + $n: index($breakpoint-names, $name); + @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null); +} - // Code - $code-color: #11796d, - $code-font-size: 100%, - $kbd-font-size: 0.75rem, +@function breakpoint-min($name, $breakpoints: $grid-breakpoints) { + $min: map-get($breakpoints, $name); + @return if($min != 0, $min, null); +} - // Dropdown - $dropdown-divider-bg: #bbbbbb, - $dropdown-link-active-color: transparent, - $dropdown-link-active-bg: transparent, -); +@function breakpoint-max($name, $breakpoints: $grid-breakpoints) { + $next: breakpoint-next($name, $breakpoints); + @return if($next, breakpoint-min($next, $breakpoints) - .02, null); +} -@use '../../../node_modules/bootstrap-scss/bootstrap'; +@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) { + $min: breakpoint-min($name, $breakpoints); + @if $min { + @media (min-width: $min) { + @content; + } + } @else { + @content; + } +} -@function bs-spacer($key: 3) { - @return map-get(bootstrap.$spacers, $key); +@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) { + $max: breakpoint-max($name, $breakpoints); + @if $max { + @media (max-width: $max) { + @content; + } + } @else { + @content; + } } From 469931c7c6e04c71563041d4c0583ea6e6b2a7c2 Mon Sep 17 00:00:00 2001 From: Parker Lougheed Date: Tue, 14 Jan 2025 14:58:07 -0800 Subject: [PATCH 2/2] Remove margin from body --- src/_sass/core/_base.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss index 46854d0275..e7c8102f0a 100644 --- a/src/_sass/core/_base.scss +++ b/src/_sass/core/_base.scss @@ -7,6 +7,8 @@ body { font-size: $font-size-base; font-weight: 400; color: $site-color-body; + margin: 0; + padding: 0; } section {