mirror of
https://github.com/olehomelchenko/olehomelchenko.com.git
synced 2026-02-05 02:54:37 +00:00
feat: custom theme
This commit is contained in:
44
scss/_colors.scss
Normal file
44
scss/_colors.scss
Normal file
@@ -0,0 +1,44 @@
|
||||
:root {
|
||||
// Brand Colors
|
||||
--color-primary-blue: #{$primary-blue};
|
||||
--color-primary-yellow: #{$primary-yellow};
|
||||
--color-text: #{$text-color};
|
||||
--color-background: #{$background-color};
|
||||
|
||||
// Semantic colors
|
||||
--text: #2c2a26;
|
||||
--background: #f5f3f0;
|
||||
--primary: #296eb3;
|
||||
--secondary: #fdba35;
|
||||
--accent: #188afb;
|
||||
|
||||
// UI Elements
|
||||
--link-color: #{$primary-blue};
|
||||
--link-hover-color: #{darken($primary-blue, 10%)};
|
||||
|
||||
// Data Visualization Colors
|
||||
--dataviz-cat-1: #{$dataviz-cat-1};
|
||||
--dataviz-cat-2: #{$dataviz-cat-2};
|
||||
--dataviz-cat-3: #{$dataviz-cat-3};
|
||||
--dataviz-cat-4: #{$dataviz-cat-4};
|
||||
--dataviz-cat-5: #{$dataviz-cat-5};
|
||||
--dataviz-cat-6: #{$dataviz-cat-6};
|
||||
--dataviz-cat-7: #{$dataviz-cat-7};
|
||||
--dataviz-cat-8: #{$dataviz-cat-8};
|
||||
}
|
||||
|
||||
// Apply colors
|
||||
body {
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
100
scss/_components.scss
Normal file
100
scss/_components.scss
Normal file
@@ -0,0 +1,100 @@
|
||||
// Navbar styling
|
||||
.navbar {
|
||||
background-color: var(--color-background) !important;
|
||||
border-bottom: 2px solid var(--color-text);
|
||||
|
||||
.navbar-brand {
|
||||
color: var(--color-text) !important;
|
||||
font-family: $headings-font-family;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.navbar-nav .nav-link {
|
||||
color: var(--color-text) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-blue) !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: var(--color-primary-blue) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.nav-footer {
|
||||
background-color: var(--color-background);
|
||||
border-top: 2px solid var(--color-text);
|
||||
color: var(--color-text);
|
||||
|
||||
a {
|
||||
color: var(--color-primary-blue);
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn-primary {
|
||||
background-color: var(--color-primary-blue);
|
||||
border-color: var(--color-primary-blue);
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: #{darken($primary-blue, 10%)};
|
||||
border-color: #{darken($primary-blue, 10%)};
|
||||
}
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--color-primary-yellow);
|
||||
border-color: var(--color-primary-yellow);
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
background-color: #{darken($primary-yellow, 10%)};
|
||||
border-color: #{darken($primary-yellow, 10%)};
|
||||
}
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
pre.sourceCode {
|
||||
background-color: rgba(45, 42, 38, 0.05);
|
||||
border: 1px solid rgba(45, 42, 38, 0.1);
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
code.sourceCode {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
// Quarto title block
|
||||
.quarto-title-block {
|
||||
border-bottom: 2px solid var(--color-text);
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.quarto-title .title {
|
||||
font-family: $headings-font-family;
|
||||
color: var(--color-text);
|
||||
}
|
||||
}
|
||||
|
||||
// Listing pages
|
||||
.quarto-listing-default {
|
||||
.listing-item {
|
||||
border: 1px solid rgba(45, 42, 38, 0.2);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--color-primary-blue);
|
||||
}
|
||||
}
|
||||
|
||||
.listing-title a {
|
||||
color: var(--color-text);
|
||||
|
||||
&:hover {
|
||||
color: var(--color-primary-blue);
|
||||
}
|
||||
}
|
||||
}
|
||||
53
scss/_dataviz.scss
Normal file
53
scss/_dataviz.scss
Normal file
@@ -0,0 +1,53 @@
|
||||
// Sequential color ramps
|
||||
// Blue sequential (5 steps from light to dark)
|
||||
:root {
|
||||
--dataviz-blue-seq-1: #e6f2ff;
|
||||
--dataviz-blue-seq-2: #9bccfd;
|
||||
--dataviz-blue-seq-3: #3699fc;
|
||||
--dataviz-blue-seq-4: #047ffb;
|
||||
--dataviz-blue-seq-5: #024c97;
|
||||
|
||||
// Yellow sequential (5 steps)
|
||||
--dataviz-yellow-seq-1: #fff6e6;
|
||||
--dataviz-yellow-seq-2: #fedd9a;
|
||||
--dataviz-yellow-seq-3: #fdba35;
|
||||
--dataviz-yellow-seq-4: #ca8702;
|
||||
--dataviz-yellow-seq-5: #654401;
|
||||
|
||||
// Diverging scale (blue ↔ neutral ↔ yellow)
|
||||
--dataviz-diverging-1: #296EB4;
|
||||
--dataviz-diverging-2: #9FDFDC;
|
||||
--dataviz-diverging-3: #f5f3f0;
|
||||
--dataviz-diverging-4: #FDB833;
|
||||
--dataviz-diverging-5: #fca903;
|
||||
}
|
||||
|
||||
// Categorical color utility classes (for future use)
|
||||
.dataviz-cat-1 { color: $dataviz-cat-1; }
|
||||
.dataviz-cat-2 { color: $dataviz-cat-2; }
|
||||
.dataviz-cat-3 { color: $dataviz-cat-3; }
|
||||
.dataviz-cat-4 { color: $dataviz-cat-4; }
|
||||
.dataviz-cat-5 { color: $dataviz-cat-5; }
|
||||
.dataviz-cat-6 { color: $dataviz-cat-6; }
|
||||
.dataviz-cat-7 { color: $dataviz-cat-7; }
|
||||
.dataviz-cat-8 { color: $dataviz-cat-8; }
|
||||
|
||||
.dataviz-cat-bg-1 { background-color: $dataviz-cat-1; }
|
||||
.dataviz-cat-bg-2 { background-color: $dataviz-cat-2; }
|
||||
.dataviz-cat-bg-3 { background-color: $dataviz-cat-3; }
|
||||
.dataviz-cat-bg-4 { background-color: $dataviz-cat-4; }
|
||||
.dataviz-cat-bg-5 { background-color: $dataviz-cat-5; }
|
||||
.dataviz-cat-bg-6 { background-color: $dataviz-cat-6; }
|
||||
.dataviz-cat-bg-7 { background-color: $dataviz-cat-7; }
|
||||
.dataviz-cat-bg-8 { background-color: $dataviz-cat-8; }
|
||||
|
||||
/*
|
||||
* Data Visualization Color System
|
||||
*
|
||||
* Categorical (8 colors): Use .dataviz-cat-1 through .dataviz-cat-8
|
||||
* Sequential Blue: var(--dataviz-blue-seq-1) through var(--dataviz-blue-seq-5)
|
||||
* Sequential Yellow: var(--dataviz-yellow-seq-1) through var(--dataviz-yellow-seq-5)
|
||||
* Diverging: var(--dataviz-diverging-1) through var(--dataviz-diverging-5)
|
||||
*
|
||||
* All colors are colorblind-safe as per brand guidelines.
|
||||
*/
|
||||
2
scss/_layout.scss
Normal file
2
scss/_layout.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
// Layout-specific styles
|
||||
// Initially empty - for future layout customizations
|
||||
31
scss/_typography.scss
Normal file
31
scss/_typography.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// Body text
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
|
||||
// Headings
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
font-family: $headings-font-family;
|
||||
font-optical-sizing: auto;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
code, pre, kbd, samp {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Quarto-specific code blocks
|
||||
.sourceCode {
|
||||
font-family: $font-family-monospace;
|
||||
}
|
||||
|
||||
// Inline code
|
||||
p code, li code {
|
||||
font-family: $font-family-monospace;
|
||||
background-color: rgba(45, 42, 38, 0.05);
|
||||
padding: 0.2em 0.4em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
36
scss/_utilities.scss
Normal file
36
scss/_utilities.scss
Normal file
@@ -0,0 +1,36 @@
|
||||
// Global border-radius override (sharp corners principle)
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Remove any gradients from buttons
|
||||
.btn {
|
||||
background-image: none !important;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Navbar - sharp corners, solid colors
|
||||
.navbar {
|
||||
border-radius: 0 !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
|
||||
// Cards and panels
|
||||
.card {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Code blocks
|
||||
pre, code {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Quarto-specific elements
|
||||
.quarto-title-block {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
// Input elements
|
||||
input, select, textarea, button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
33
scss/_variables.scss
Normal file
33
scss/_variables.scss
Normal file
@@ -0,0 +1,33 @@
|
||||
// Brand Colors
|
||||
$primary-blue: #1789fc;
|
||||
$primary-yellow: #fdb833;
|
||||
$text-color: #2d2a26;
|
||||
$background-color: #f5f3f0;
|
||||
|
||||
// Bootstrap/Quarto Variable Overrides
|
||||
$primary: $primary-blue;
|
||||
$secondary: $primary-yellow;
|
||||
$body-bg: $background-color;
|
||||
$body-color: $text-color;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
$font-family-monospace: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
|
||||
$headings-font-family: "Finlandica", "IBM Plex Sans", sans-serif;
|
||||
|
||||
// Design Principles
|
||||
$border-radius: 0;
|
||||
$border-radius-sm: 0;
|
||||
$border-radius-lg: 0;
|
||||
$enable-rounded: false;
|
||||
$enable-gradients: false;
|
||||
|
||||
// Data Viz Categorical Colors
|
||||
$dataviz-cat-1: #296EB4;
|
||||
$dataviz-cat-2: #FDB833;
|
||||
$dataviz-cat-3: #CCE160;
|
||||
$dataviz-cat-4: #9FDFDC;
|
||||
$dataviz-cat-5: #8A983E;
|
||||
$dataviz-cat-6: #C7C7FA;
|
||||
$dataviz-cat-7: #D02F2F;
|
||||
$dataviz-cat-8: #A62191;
|
||||
Reference in New Issue
Block a user