crossplane
/
docs
mirror of https://github.com/crossplane/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style updates 

Signed-off-by: Shane Miller <shanecm.ux@gmail.com>
This commit is contained in:
Shane Miller 2023-08-01 16:14:49 -07:00
parent 5e530319e8
commit d5916b7c1e
6 changed files with 97 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
themes/geekboot/assets/scss/_code-theme-dark.scss
View File

@ -2,7 +2,6 @@
--code-block-background-color: #{$fog-900};
--code-line-number-color: #{$fog-300};
//--code-line-numbers-background-color: #{darken(#19212C, 2)};
/* Theme: Colors customized for Crossplane. Was originally Dracula */

5
themes/geekboot/assets/scss/_content.scss
View File

@ -69,6 +69,11 @@ h1,h2,h3,h4,h5,h6 {
}
}
// Color theme toggle
.form-check-input:checked {
background-color: #{$aqua-700};
border-color: #{$aqua-700};
}
.table {
color: var(--font-body-color);

94
themes/geekboot/assets/scss/_hints.scss
View File

@ -1,12 +1,17 @@
// Style based on Furo https://github.com/pradyunsg/furo
.admonition{
margin: 1rem auto;
padding: 0 0.5rem 0.5rem 0.5rem;
margin-left: 0px !important;
margin-right: 0px !important;
padding-top: 1rem !important;
padding-bottom: 1rem !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
background: $color-admonition-background;
border-radius: 0.2rem;
box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.05), 0 0 0.0625rem rgba(0, 0, 0, 0.1);
border-radius: 0.375rem;
overflow: hidden;
page-break-inside: avoid;
@ -18,18 +23,13 @@
// Last item should have no margin, since we'll control that w/ padding
> :last-child {
margin-bottom: 0;
padding-left: .5rem;
}
}
.admonition-title{
position: relative;
margin: 0 -0.5rem 0.5rem;
padding-left: 1rem;
padding-right: .5rem;
padding-top: .4rem;
padding-bottom: .4rem;
margin-bottom: 0.5rem;
font-weight: 500;
font-weight: 900;
line-height: 1.3;
// Our fancy icon
@ -40,6 +40,11 @@
width: 1rem;
height: 1rem;
}
// Helps vertically align the SVG icon because it's smaller height than the font
img, svg {
margin-bottom: 3px;
margin-right: 3px;
}
}
@ -58,56 +63,29 @@
//
.admonition {
border-left: .3rem solid;
border-radius: 0.375rem;
border: 1px solid #{fog-0};
opacity: 1;
background-color: #{fog-0};
&.warning {
border-left-color: var(--hint-warning);
&.note {
border: 1px solid var(--hint-note);
background-color: var(--hint-note-background);
}
> .admonition-title {
background-color: var(--hint-warning-background);
}
}
&.important {
border: 1px solid var(--hint-important);
background-color: var(--hint-important-background);
}
&.tip {
border-left-color: var(--hint-tip);
&.warning {
border: 1px solid var(--hint-warning);
background-color: var(--hint-warning-background);
}
> .admonition-title {
background-color: var(--hint-tip-background);
}
}
&.tip {
border: 1px solid var(--hint-tip);
background-color: var(--hint-tip-background);
}
&.note {
border-left-color: var(--hint-note);
> .admonition-title {
background-color: var(--hint-note-background);
}
}
&.important {
border-left-color: var(--hint-important);
> .admonition-title {
background-color: var(--hint-important-background);
}
}
}
// &::before {
// background-color: var(--color-admonition-title-warning);
// mask-image: var(--icon-#{nth($type, 2)});
// }
// }
// @each $type in $admonitions {
// &.#{$type} {
// border-left-color: var(--color-admonition-title--#{$type});
// > .admonition-title {
// background-color: var(--color-admonition-title-background--#{$type});
// &::before {
// background-color: var(--color-admonition-title--#{$type});
// mask-image: var(--icon-#{nth($type, 2)});
// }
// }
// }
// }
}

3
themes/geekboot/assets/scss/_variables.scss
View File

@ -51,6 +51,7 @@ $aqua-900: #0F3B34 !default;
$aqua-950: #092824 !default;
// $Grass-500 is the middle-point between $Aqua-500 and $Sun-500.
$grass-50: #F5FAF2 !default;
$grass-100: #EBF5E5 !default;
$grass-200: #D7ECCA !default;
$grass-300: #C2E2B0 !default;
@ -80,6 +81,7 @@ $sun-900: #373A1B !default;
$sun-950: #1E2817 !default;
// $Tangerine-500 is the middle-point between $Sun-500 and $Salmon-500.
$tangerine-50: #FEF6EE !default;
$tangerine-100: #FEEDDE !default;
$tangerine-200: #FDDBBE !default;
$tangerine-300: #FBCA9D !default;
@ -89,6 +91,7 @@ $tangerine-600: #C8894E !default;
$tangerine-700: #976C3F !default;
$tangerine-800: #674F30 !default;
$tangerine-900: #363221 !default;
$tangerine-950: #1D231A !default;
// $Salmon-500 is pulled from the Crossplane popsicle logo.
$salmon-25: #FEF9F8 !default;

26
themes/geekboot/assets/scss/dark-mode.scss
View File

@ -17,14 +17,14 @@
// Sidebar nav
--nav-highlight-color: #{$aqua-950};
--btn-close-color: invert(1) grayscale(100%) brightness(200%);
--btn-close-color: #{$fog-0};
//Version dropdown
--dropdown-highlight: #{$fog-900};
--dropdown-background: var(--body-background);
--latest-pill-background: #{$fog-800};
--latest-pill-color: #{$fog-200};
--dropdown-color: #{$fog-0};
--dropdown-color: var(--body-font-color);
--dropdown-border-color: #{$fog-900};
//Right-side table of contents
@ -33,19 +33,27 @@
--toc-mobile-menu-background: #{$fog-1000};
//hint boxes
--hint-important: #{tangerine-400}; //"exclamation",
--hint-important-background: #{tangerine-950};
--hint-important: #{$tangerine-800}; //"exclamation",
--hint-important-background: #{$tangerine-950};
--hint-warning: #{$salmon-400}; //"fire",
--hint-warning: #{$salmon-800}; //"fire",
--hint-warning-background: #{$salmon-950};
--hint-tip: #{$grass-400}; //"check",
--hint-tip: #{$grass-800}; //"check",
--hint-tip-background: #{$grass-950};
--hint-note: #{$fog-400}; //"info",
--hint-note: #{$fog-800}; //"info",
--hint-note-background: #{$fog-950};
//Search Related
--search-box-background: #{$fog-800};
--result-path: #{$fog-0};
--search-box-background: var(--body-background);
--result-path: var(--body-background);
// Add border to top nav and footer
.docs-navbar {
border-bottom: 1px solid #{$fog-850};
}
.bd-footer {
border-top: 1px solid #{$fog-850};
}
}

64
themes/geekboot/assets/scss/light-mode.scss
View File

@ -1,51 +1,59 @@
@mixin light-mode {
// body and content
--body-background: white;
--body-font-color: rgba(52, 58, 64, 1);
--content-link-color: #0a539a;
--anchor-link-color: #{lighten(rgba(52, 58, 64, 1), 25)};
--body-background: #{$fog-0};
--body-font-color: #{$fog-1000};
--content-link-color: #{$aqua-700};
--anchor-link-color: #{$fog-600};
// Add underline to light mode small font links due to being similar color to main text
p > a, .admonition-content > a, li > a, td > a, .home-link-description > a {
text-decoration: underline;
}
.nav-item > a {
text-decoration: none;
}
// Single code lines inside text. Code blocks are in _code_theme_light.scss
--code-background: #e9ecef;
--code-color: #505a72;
--code-line-number-color: #8bcbe6;
--code-background: #{$fog-75};
--code-color: #{$fog-700};
--code-line-number-color: #{$aqua-800};
//Tabs
--nav-tab-background-color: var(--body-background);
--active-tab-color: #f3807b; // Not an accessable color contrast on white.
--inactive-tab-hover-color: #37ccb7;
--active-tab-color: #{$aqua-700};
--inactive-tab-hover-color: #{$fog-1000};
// Sidebar nav
--nav-highlight-color: rgba(80,90,114, .1);
--btn-close-color: #000000;
--nav-highlight-color: #{$aqua-50};
--btn-close-color: #{$fog-1000};
//Version dropdown
--dropdown-highlight: var(--nav-highlight-color);
--dropdown-highlight: #{$fog-75};
--dropdown-background: var(--body-background);
--latest-pill-background: #f3807b;
--latest-pill-color: #141414;
--latest-pill-background: #{$fog-150};
--latest-pill-color: #{$fog-800};
--dropdown-color: var(--body-font-color);
--dropdown-border-color: #{lighten(rgba(52, 58, 64, 1), 50)};
--dropdown-border-color: #{$fog-100};
//Right-side table of contents
--toc-font-color: #6b7884;
--toc-mobile-menu-outline: #ffcd3c;
--toc-mobile-menu-background: #f8f9fa;
--toc-font-color: #{$fog-600};
--toc-mobile-menu-outline: #{$fog-200};
--toc-mobile-menu-background: #{$fog-0};
//hint boxes
--hint-important: rgba(255, 145, 0, 1); //"exclamation",
--hint-important-background: rgba(255, 145, 0, .1);
--hint-important: #{$tangerine-200}; //"exclamation",
--hint-important-background: #{$tangerine-50};
--hint-warning: rgba(255, 82, 82, 1); //"fire",
--hint-warning-background: rgba(255, 82, 82, .1);
--hint-warning: #{$salmon-200}; //"fire",
--hint-warning-background: #{$salmon-50};
--hint-tip: rgba(0,200,82,1);; //"check",
--hint-tip-background: rgba(0,200,82,.1);
--hint-tip: #{$grass-200}; //"check",
--hint-tip-background: #{$grass-50};
--hint-note: rgba(0,176,255,1); //"info",
--hint-note-background: rgba(0,176,255,.1);
--hint-note: #{$fog-200}; //"info",
--hint-note-background: #{$fog-50};
//Search Results
--result-path: #141414;
--search-box-background: var(--body-background);
}
--result-path: var(--body-background);
}