diff --git a/assets/css/_bs-colors.scss b/assets/css/_bs-colors.scss new file mode 100644 index 0000000..61bff40 --- /dev/null +++ b/assets/css/_bs-colors.scss @@ -0,0 +1,49 @@ +// Colors +$primary: #e48663; +$secondary: #00b0b0; +$success: #99c24d; +$info: #b489c7; +$warning: #f4d35e; + +$white: #fff; +$gray-100: #e8e8e8; +$gray-200: #cfcfcf; +$gray-300: #b5b5b5; +$gray-400: #9c9c9c; +$gray-500: #828282; +$gray-600: #696969; +$gray-700: #4f4f4f; +$gray-800: #363636; +$gray-900: #242424; +$black: #000; + +$light: $gray-200; +$dark: $gray-800; + +// Create your own map +$custom-colors: ( + "primary": $primary, + "secondary": $secondary, + "success": $success, + "info": $info, + "warning": $warning, + "danger": $danger, + "light": $light, + "dark": $dark, + "gray": $gray-600, + "gray-dark": $gray-800, +); + +// $custom-colors: ( +// "custom-color": #900 +// ); + +// Merge the maps +$theme-colors: map-merge($theme-colors, $custom-colors); + +// misc +$navbar-dark-color: rgba($white, 0.75); +$navbar-dark-hover-color: rgba($white, 0.9); +$navbar-dark-active-color: $white; +$navbar-dark-disabled-color: rgba($white, 0.45); +$navbar-dark-toggler-border-color: rgba($white, 0.3); diff --git a/assets/css/_bs-custom.scss b/assets/css/_bs-custom.scss new file mode 100644 index 0000000..a950ad1 --- /dev/null +++ b/assets/css/_bs-custom.scss @@ -0,0 +1,21 @@ +/* Bootstrap custom variable overrides */ + +// Typography +$font-size-base: 1.125rem; + +$font-family-serif: "Source Serif Pro", "Iowan Old Style", "Apple Garamond", + Baskerville, "Times New Roman", "Droid Serif", Times, serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important; + +$font-family-brand: Righteous, system-ui, -apple-system, "Segoe UI", Roboto, + "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important; + +$font-family-monospace: "JetBrains Mono", "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas, + "Liberation Mono", "Courier New", monospace !important; + +$font-family-base: $font-family-serif; + +// Features +$enable-shadows: true; +$enable-negative-margins: true; diff --git a/assets/css/_bs-load.scss b/assets/css/_bs-load.scss index 78984f6..6ac6199 100644 --- a/assets/css/_bs-load.scss +++ b/assets/css/_bs-load.scss @@ -2,49 +2,49 @@ @import "bs-custom"; // Required || Configuration -@import "../node_modules/bootstrap/scss/functions"; -@import "../node_modules/bootstrap/scss/variables"; +@import "../../node_modules/bootstrap/scss/functions"; +@import "../../node_modules/bootstrap/scss/variables"; /* Bootstrap custom variable overrides */ @import "bs-colors"; // Required || Configuration -- CONTINUED -@import "../node_modules/bootstrap/scss/mixins"; -@import "../node_modules/bootstrap/scss/utilities"; +@import "../../node_modules/bootstrap/scss/mixins"; +@import "../../node_modules/bootstrap/scss/utilities"; // Optional || Layout & components -@import "../node_modules/bootstrap/scss/root"; -@import "../node_modules/bootstrap/scss/reboot"; -@import "../node_modules/bootstrap/scss/type"; -@import "../node_modules/bootstrap/scss/images"; -@import "../node_modules/bootstrap/scss/containers"; -@import "../node_modules/bootstrap/scss/grid"; -// @import "../node_modules/bootstrap/scss/tables"; -@import "../node_modules/bootstrap/scss/forms"; -@import "../node_modules/bootstrap/scss/buttons"; -@import "../node_modules/bootstrap/scss/transitions"; -// @import "../node_modules/bootstrap/scss/dropdown"; -// @import "../node_modules/bootstrap/scss/button-group"; -@import "../node_modules/bootstrap/scss/nav"; -@import "../node_modules/bootstrap/scss/navbar"; -// @import "../node_modules/bootstrap/scss/card"; -// @import "../node_modules/bootstrap/scss/accordion"; -// @import "../node_modules/bootstrap/scss/breadcrumb"; -// @import "../node_modules/bootstrap/scss/pagination"; -// @import "../node_modules/bootstrap/scss/badge"; -// @import "../node_modules/bootstrap/scss/alert"; -// @import "../node_modules/bootstrap/scss/progress"; -// @import "../node_modules/bootstrap/scss/list-group"; -// @import "../node_modules/bootstrap/scss/close"; -// @import "../node_modules/bootstrap/scss/toasts"; -// @import "../node_modules/bootstrap/scss/modal"; -// @import "../node_modules/bootstrap/scss/tooltip"; -// @import "../node_modules/bootstrap/scss/popover"; -// @import "../node_modules/bootstrap/scss/carousel"; -// @import "../node_modules/bootstrap/scss/spinners"; +@import "../../node_modules/bootstrap/scss/root"; +@import "../../node_modules/bootstrap/scss/reboot"; +@import "../../node_modules/bootstrap/scss/type"; +@import "../../node_modules/bootstrap/scss/images"; +@import "../../node_modules/bootstrap/scss/containers"; +@import "../../node_modules/bootstrap/scss/grid"; +// @import "../../node_modules/bootstrap/scss/tables"; +@import "../../node_modules/bootstrap/scss/forms"; +@import "../../node_modules/bootstrap/scss/buttons"; +@import "../../node_modules/bootstrap/scss/transitions"; +// @import "../../node_modules/bootstrap/scss/dropdown"; +// @import "../../node_modules/bootstrap/scss/button-group"; +@import "../../node_modules/bootstrap/scss/nav"; +@import "../../node_modules/bootstrap/scss/navbar"; +// @import "../../node_modules/bootstrap/scss/card"; +// @import "../../node_modules/bootstrap/scss/accordion"; +// @import "../../node_modules/bootstrap/scss/breadcrumb"; +// @import "../../node_modules/bootstrap/scss/pagination"; +// @import "../../node_modules/bootstrap/scss/badge"; +// @import "../../node_modules/bootstrap/scss/alert"; +// @import "../../node_modules/bootstrap/scss/progress"; +// @import "../../node_modules/bootstrap/scss/list-group"; +// @import "../../node_modules/bootstrap/scss/close"; +// @import "../../node_modules/bootstrap/scss/toasts"; +// @import "../../node_modules/bootstrap/scss/modal"; +// @import "../../node_modules/bootstrap/scss/tooltip"; +// @import "../../node_modules/bootstrap/scss/popover"; +// @import "../../node_modules/bootstrap/scss/carousel"; +// @import "../../node_modules/bootstrap/scss/spinners"; // Helpers -@import "../node_modules/bootstrap/scss/helpers"; +@import "../../node_modules/bootstrap/scss/helpers"; // Utilities -@import "../node_modules/bootstrap/scss/utilities/api"; +@import "../../node_modules/bootstrap/scss/utilities/api"; diff --git a/assets/css/_fonts.scss b/assets/css/_fonts.scss new file mode 100644 index 0000000..9f277d1 --- /dev/null +++ b/assets/css/_fonts.scss @@ -0,0 +1,27 @@ +/* brand : Fontsource Righteous */ +@import "../../node_modules/@fontsource/righteous/400.css"; /* normal | normal */ + +/* monospace : Fontsource JetBrains Mono */ +@import "../../node_modules/@fontsource/jetbrains-mono/100.css"; /* light | normal */ +@import "../../node_modules/@fontsource/jetbrains-mono/200.css"; /* light | normal */ +@import "../../node_modules/@fontsource/jetbrains-mono/300.css"; /* light | normal */ +@import "../../node_modules/@fontsource/jetbrains-mono/400.css"; /* normal | normal */ +@import "../../node_modules/@fontsource/jetbrains-mono/500.css"; /* heavier normal? */ +@import "../../node_modules/@fontsource/jetbrains-mono/600.css"; /* heavier normal? */ +@import "../../node_modules/@fontsource/jetbrains-mono/700.css"; /* bold | normal */ +@import "../../node_modules/@fontsource/jetbrains-mono/800.css"; /* bolder | normal */ + + +/* Fontsource Source Code Pro */ +@import "../../node_modules/@fontsource/source-serif-pro/200.css"; /* light | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/200-italic.css"; /* light | italic */ +@import "../../node_modules/@fontsource/source-serif-pro/300.css"; /* light | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/300-italic.css"; /* light | italic */ +@import "../../node_modules/@fontsource/source-serif-pro/400.css"; /* normal | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/400-italic.css"; /* normal | italic */ +@import "../../node_modules/@fontsource/source-serif-pro/600.css"; /* heavier? | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/600-italic.css"; /* heavier | italic */ +@import "../../node_modules/@fontsource/source-serif-pro/700.css"; /* bold | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/700-italic.css"; /* bold | italic */ +@import "../../node_modules/@fontsource/source-serif-pro/900.css"; /* bolder? | normal */ +@import "../../node_modules/@fontsource/source-serif-pro/900-italic.css"; /* bolder? | italic */ diff --git a/assets/css/app.scss b/assets/css/app.scss index ec913c0..d4fcadc 100644 --- a/assets/css/app.scss +++ b/assets/css/app.scss @@ -1 +1,81 @@ -@import "../../node_modules/bootstrap/scss/bootstrap.scss" \ No newline at end of file +/* Fonts */ +@import "fonts"; + +/* Load Bootstrap v5 and customizations */ +@import "bs-load"; + + + +/* main */ +html, +body { + color: $gray-100; + background-color: $gray-800; + height: 100%; +} +a { + color: rgba($white, 0.75); + border-bottom: $gray-600 2px solid; + text-decoration: none; + &.navbar-brand, + &.nav-link { + border-bottom: none; + } + &:visited { + color: $info; + .post-title & { + color: $gray-100; + } + } + &:hover { + color: $primary; + text-decoration: none; + border-bottom: $secondary 3px solid; + &.navbar-brand { + border-bottom: none; + } + } +} +.border-gray-900 { + border-color: $gray-900 !important; +} +.text-gray-200 { + color: $gray-200; +} +.text-gray-300 { + color: $gray-300; +} +.text-gray-400 { + color: $gray-400; +} +.text-gray-500 { + color: $gray-500; +} +.border-10 { + border-width: 10px !important; +} +.border-20 { + border-width: 20px !important; +} +.fw-500 { + font-weight: 500; +} +.fw-600 { + font-weight: 600; +} +.font-brand { + font-family: $font-family-brand; +} +.fs-larger { + font-size: larger; +} +.fs-smaller { + font-size: smaller; +} +.footer73k { + position: fixed !important; + font-size: 10px !important; + border-top-left-radius: 0.3rem !important; + padding-top: 2px; + padding-bottom: 2px; +} diff --git a/header.php b/header.php index 76f385b..d9d520e 100644 --- a/header.php +++ b/header.php @@ -24,17 +24,44 @@ namespace WP_73k;
itemscope itemtype="https://schema.org/WebPage"> + + '