feat: add flexsearch
This commit is contained in:
Henk Verlinde
@ -1,10 +1,23 @@
|
||||
/** Theme variables */
|
||||
|
||||
$body-bg-dark: lighten($black, 10%);
|
||||
$body-color-dark: darken($white, 15%);
|
||||
$link-color-dark: lighten($primary, 20%);
|
||||
$body-overlay-dark: lighten($black, 15%);
|
||||
$border-dark: lighten($black, 20%);
|
||||
// Source: https://material.io/design/color/dark-theme.html
|
||||
|
||||
$body-bg-dark: $gray-900;
|
||||
$body-overlay-dark: darken($body-bg-dark, 2.5%);
|
||||
$border-dark: darken($body-bg-dark, 2.5%);
|
||||
$body-color-dark: $gray-300;
|
||||
$dots-dark: darken($body-color-dark, 50%);
|
||||
|
||||
$link-color-dark: $blue-300;
|
||||
$button-color-dark: $link-color-dark;
|
||||
$focus-color-dark: lighten($link-color-dark, 2.5%);
|
||||
$selection-color-dark: lighten($link-color-dark, 2.5%);
|
||||
|
||||
$navbar-dark-brand-color: $link-color-dark;
|
||||
$navbar-dark-brand-hover-color: $body-color-dark;
|
||||
$navbar-dark-color: $body-color-dark;
|
||||
$navbar-dark-hover-color: $link-color-dark;
|
||||
$navbar-dark-active-color: $link-color-dark;
|
||||
|
||||
/** Theme styles */
|
||||
|
||||
@ -17,8 +30,14 @@ body.dark a {
|
||||
color: $link-color-dark;
|
||||
}
|
||||
|
||||
body.dark a.text-body {
|
||||
color: $body-color-dark !important;
|
||||
}
|
||||
|
||||
body.dark .btn-primary {
|
||||
color: $body-color-dark;
|
||||
@include button-variant($button-color-dark, $button-color-dark);
|
||||
|
||||
color: $body-bg-dark !important;
|
||||
}
|
||||
|
||||
body.dark .navbar {
|
||||
@ -32,12 +51,12 @@ body.dark.home .navbar {
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-brand {
|
||||
color: $navbar-dark-brand-color;
|
||||
color: $navbar-dark-brand-color !important;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-brand:hover,
|
||||
body.dark .navbar-light .navbar-brand:focus {
|
||||
color: $navbar-dark-brand-hover-color;
|
||||
color: $navbar-dark-brand-hover-color !important;
|
||||
}
|
||||
|
||||
body.dark .navbar-light .navbar-nav .nav-link {
|
||||
@ -64,6 +83,15 @@ body.dark .navbar-light .navbar-text {
|
||||
color: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .alert-primary a {
|
||||
color: $body-bg-dark;
|
||||
}
|
||||
|
||||
body.dark .alert-warning {
|
||||
background: $body-overlay-dark;
|
||||
color: $body-color-dark;
|
||||
}
|
||||
|
||||
body.dark .page-links a {
|
||||
color: $body-color-dark;
|
||||
}
|
||||
@ -106,6 +134,14 @@ body.dark .navbar .btn-link:active {
|
||||
|
||||
body.dark .form-control.is-search {
|
||||
background: $body-overlay-dark;
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right calc(0.375em + 0.1875rem) center;
|
||||
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
|
||||
}
|
||||
|
||||
body.dark .form-control:focus {
|
||||
box-shadow: 0 0 0 0.2rem $focus-color-dark;
|
||||
}
|
||||
|
||||
body.dark .border-top {
|
||||
@ -124,7 +160,7 @@ body.dark .docs-navigation {
|
||||
}
|
||||
|
||||
body.dark ::selection {
|
||||
background: lighten($primary, 25%);
|
||||
background: $selection-color-dark;
|
||||
}
|
||||
|
||||
body.dark pre {
|
||||
@ -138,7 +174,7 @@ body.dark code {
|
||||
}
|
||||
|
||||
body.dark blockquote {
|
||||
border-left: 3px solid lighten($black, 30%);
|
||||
border-left: 3px solid $border-dark;
|
||||
}
|
||||
|
||||
body.dark .footer {
|
||||
@ -211,3 +247,28 @@ body.dark .navbar .menu-icon .navicon::before,
|
||||
body.dark .navbar .menu-icon .navicon::after {
|
||||
background: $navbar-dark-color;
|
||||
}
|
||||
|
||||
body.dark .logo-light {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.dark .logo-dark {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
||||
body.dark .bg-light {
|
||||
background: darken($body-bg-dark, 1.5%) !important;
|
||||
}
|
||||
|
||||
body.dark .bg-dots {
|
||||
background-image: radial-gradient($dots-dark 15%, transparent 15%);
|
||||
}
|
||||
|
||||
body.dark .text-muted {
|
||||
color: darken($body-color-dark, 7.5%) !important;
|
||||
}
|
||||
|
||||
body.dark .alert-primary {
|
||||
background: $link-color-dark;
|
||||
color: $body-bg-dark;
|
||||
}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
.authors .content,
|
||||
.contributors .content,
|
||||
.blog .content,
|
||||
.page .content,
|
||||
.error404 .content {
|
||||
.error404 .content,
|
||||
.docs.list .content {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
@ -48,12 +49,24 @@ h6,
|
||||
padding-bottom: 5rem;
|
||||
}
|
||||
|
||||
.section-md {
|
||||
padding-top: 3rem;
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.section-sm {
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
/*
|
||||
.section svg {
|
||||
display: inline-block;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
*/
|
||||
|
||||
body {
|
||||
padding-top: 3.5625rem;
|
||||
@ -128,7 +141,7 @@ body {
|
||||
|
||||
.docs-navigation {
|
||||
border-top: 1px solid $gray-200;
|
||||
margin-top: 3rem;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
padding-top: 2rem;
|
||||
}
|
||||
@ -139,7 +152,7 @@ body {
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.docs-navigation {
|
||||
margin-bottom: 5rem;
|
||||
margin-bottom: -1rem;
|
||||
}
|
||||
|
||||
.docs-navigation a {
|
||||
@ -153,5 +166,33 @@ body {
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: lighten($primary, 45%);
|
||||
background: lighten($primary, 55%);
|
||||
}
|
||||
|
||||
.bg-dots {
|
||||
background-image: radial-gradient($gray-300 15%, transparent 15%);
|
||||
background-position: 0 0;
|
||||
background-size: 1rem 1rem;
|
||||
-webkit-mask: linear-gradient(to top, #fff, transparent);
|
||||
mask: linear-gradient(to top, #fff, transparent);
|
||||
width: 100%;
|
||||
height: 9rem;
|
||||
margin-top: -10rem;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bg-dots-lg {
|
||||
margin-top: -12rem;
|
||||
}
|
||||
|
||||
// https://fossheim.io/writing/posts/css-text-gradient/
|
||||
.gradient-text {
|
||||
background-color: $primary;
|
||||
background-image: linear-gradient(90deg, $primary, $blue-300 50%, $pink-500);
|
||||
background-size: 100%;
|
||||
background-repeat: repeat;
|
||||
-webkit-background-clip: text;
|
||||
-moz-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
-moz-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
/* Background */ .chroma { color: #f8f8f2; background-color: #282a36 }
|
||||
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
|
||||
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
|
||||
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
|
||||
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7f7f7f }
|
||||
/* Keyword */ .chroma .k { color: #ff79c6 }
|
||||
/* KeywordConstant */ .chroma .kc { color: #ff79c6 }
|
||||
/* KeywordDeclaration */ .chroma .kd { color: #8be9fd; font-style: italic }
|
||||
/* KeywordNamespace */ .chroma .kn { color: #ff79c6 }
|
||||
/* KeywordPseudo */ .chroma .kp { color: #ff79c6 }
|
||||
/* KeywordReserved */ .chroma .kr { color: #ff79c6 }
|
||||
/* KeywordType */ .chroma .kt { color: #8be9fd }
|
||||
/* NameAttribute */ .chroma .na { color: #50fa7b }
|
||||
/* NameBuiltin */ .chroma .nb { color: #8be9fd; font-style: italic }
|
||||
/* NameClass */ .chroma .nc { color: #50fa7b }
|
||||
/* NameFunction */ .chroma .nf { color: #50fa7b }
|
||||
/* NameLabel */ .chroma .nl { color: #8be9fd; font-style: italic }
|
||||
/* NameTag */ .chroma .nt { color: #ff79c6 }
|
||||
/* NameVariable */ .chroma .nv { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableClass */ .chroma .vc { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableGlobal */ .chroma .vg { color: #8be9fd; font-style: italic }
|
||||
/* NameVariableInstance */ .chroma .vi { color: #8be9fd; font-style: italic }
|
||||
/* LiteralString */ .chroma .s { color: #f1fa8c }
|
||||
/* LiteralStringAffix */ .chroma .sa { color: #f1fa8c }
|
||||
/* LiteralStringBacktick */ .chroma .sb { color: #f1fa8c }
|
||||
/* LiteralStringChar */ .chroma .sc { color: #f1fa8c }
|
||||
/* LiteralStringDelimiter */ .chroma .dl { color: #f1fa8c }
|
||||
/* LiteralStringDoc */ .chroma .sd { color: #f1fa8c }
|
||||
/* LiteralStringDouble */ .chroma .s2 { color: #f1fa8c }
|
||||
/* LiteralStringEscape */ .chroma .se { color: #f1fa8c }
|
||||
/* LiteralStringHeredoc */ .chroma .sh { color: #f1fa8c }
|
||||
/* LiteralStringInterpol */ .chroma .si { color: #f1fa8c }
|
||||
/* LiteralStringOther */ .chroma .sx { color: #f1fa8c }
|
||||
/* LiteralStringRegex */ .chroma .sr { color: #f1fa8c }
|
||||
/* LiteralStringSingle */ .chroma .s1 { color: #f1fa8c }
|
||||
/* LiteralStringSymbol */ .chroma .ss { color: #f1fa8c }
|
||||
/* LiteralNumber */ .chroma .m { color: #bd93f9 }
|
||||
/* LiteralNumberBin */ .chroma .mb { color: #bd93f9 }
|
||||
/* LiteralNumberFloat */ .chroma .mf { color: #bd93f9 }
|
||||
/* LiteralNumberHex */ .chroma .mh { color: #bd93f9 }
|
||||
/* LiteralNumberInteger */ .chroma .mi { color: #bd93f9 }
|
||||
/* LiteralNumberIntegerLong */ .chroma .il { color: #bd93f9 }
|
||||
/* LiteralNumberOct */ .chroma .mo { color: #bd93f9 }
|
||||
/* Operator */ .chroma .o { color: #ff79c6 }
|
||||
/* OperatorWord */ .chroma .ow { color: #ff79c6 }
|
||||
/* Comment */ .chroma .c { color: #6272a4 }
|
||||
/* CommentHashbang */ .chroma .ch { color: #6272a4 }
|
||||
/* CommentMultiline */ .chroma .cm { color: #6272a4 }
|
||||
/* CommentSingle */ .chroma .c1 { color: #6272a4 }
|
||||
/* CommentSpecial */ .chroma .cs { color: #6272a4 }
|
||||
/* CommentPreproc */ .chroma .cp { color: #ff79c6 }
|
||||
/* CommentPreprocFile */ .chroma .cpf { color: #ff79c6 }
|
||||
/* GenericDeleted */ .chroma .gd { color: #8b080b }
|
||||
/* GenericEmph */ .chroma .ge { text-decoration: underline }
|
||||
/* GenericHeading */ .chroma .gh { font-weight: bold }
|
||||
/* GenericInserted */ .chroma .gi { font-weight: bold }
|
||||
/* GenericOutput */ .chroma .go { color: #44475a }
|
||||
/* GenericSubheading */ .chroma .gu { font-weight: bold }
|
||||
/* GenericUnderline */ .chroma .gl { text-decoration: underline }
|
||||
@ -1,16 +1,4 @@
|
||||
/*
|
||||
$theme-colors: (
|
||||
primary: #3c48d5
|
||||
);
|
||||
*/
|
||||
|
||||
$yellow: #ffe000;
|
||||
$black: #1d2d35;
|
||||
$white: #fff;
|
||||
$beige: #fbf7f0;
|
||||
$red: #e55235;
|
||||
$purple: #5d2f86;
|
||||
$brown: #aa9c84;
|
||||
// Color system
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f8f9fa;
|
||||
@ -24,8 +12,17 @@ $gray-800: #343a40;
|
||||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
|
||||
$primary: lighten($purple, 10%);
|
||||
$secondary: $gray-200;
|
||||
$yellow: #ffe000;
|
||||
$black: #1d2d35;
|
||||
$beige: #fbf7f0;
|
||||
$red: #e55235;
|
||||
$purple: #5d2f86;
|
||||
$brown: #aa9c84;
|
||||
|
||||
$blue-300: #8ed6fb;
|
||||
$pink-500: #d32e9d;
|
||||
|
||||
$primary: $purple;
|
||||
|
||||
/** Bootstrap navbar fix (https://git.io/fADqW) */
|
||||
$navbar-dark-toggler-icon-bg: none;
|
||||
@ -42,7 +39,7 @@ $enable-responsive-font-sizes: true;
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: $white;
|
||||
$body-color: lighten($black, 10%);
|
||||
$body-color: $black;
|
||||
|
||||
// Grid containers
|
||||
//
|
||||
@ -65,6 +62,12 @@ $grid-columns: 16;
|
||||
$grid-gutter-width: 48px;
|
||||
$grid-row-columns: 6;
|
||||
|
||||
// Components
|
||||
//
|
||||
// Define common padding and border radius sizes and more.
|
||||
|
||||
$border-color: $gray-200;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
@ -100,3 +103,26 @@ $navbar-padding-y: $spacer / 2;
|
||||
$navbar-padding-x: 0;
|
||||
|
||||
$navbar-nav-link-padding-x: 0.5rem;
|
||||
|
||||
$navbar-light-color: $black;
|
||||
$navbar-light-hover-color: $primary;
|
||||
$navbar-light-active-color: $primary;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
|
||||
// Alerts
|
||||
//
|
||||
// Define alert colors, border radius, and padding.
|
||||
|
||||
$alert-padding-y: 1rem;
|
||||
$alert-padding-x: 1.5rem;
|
||||
$alert-margin-bottom: 0;
|
||||
$alert-border-radius: 0;
|
||||
$alert-link-font-weight: $headings-font-weight;
|
||||
$alert-border-width: 0;
|
||||
|
||||
$alert-bg-level: 0;
|
||||
$alert-border-level: 0;
|
||||
$alert-color-level: 0;
|
||||
|
||||
Reference in New Issue
Block a user