Use generated css, common to the project
This commit is contained in:
parent
bad7e8e689
commit
af2b407c52
14 changed files with 1242 additions and 132 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
public/
|
||||
resources/
|
||||
resources/
|
||||
node_modules/
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
#
|
||||
# All available Hugo versions are listed under https://gitlab.com/pages/hugo/container_registry.
|
||||
#
|
||||
image: hugomods/hugo:base
|
||||
image: hugomods/hugo:node-non-root
|
||||
|
||||
stages:
|
||||
- build
|
||||
|
|
@ -9,6 +9,7 @@ stages:
|
|||
pages:
|
||||
stage: build
|
||||
script:
|
||||
- npm ci
|
||||
- hugo
|
||||
artifacts:
|
||||
paths:
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@ when:
|
|||
|
||||
steps:
|
||||
- name: build
|
||||
image: hugomods/hugo:base
|
||||
image: hugomods/hugo:exts-node
|
||||
commands:
|
||||
- npm ci
|
||||
- hugo
|
||||
environment:
|
||||
HUGO_ENVIRONMENT: production
|
||||
|
|
|
|||
970
assets/scss/bootstrap.scss
vendored
Normal file
970
assets/scss/bootstrap.scss
vendored
Normal file
|
|
@ -0,0 +1,970 @@
|
|||
// ============================================================================
|
||||
// happyDomain × Bootstrap 5 — SCSS Customization
|
||||
// ----------------------------------------------------------------------------
|
||||
// Drop-in override for a Bootstrap 5 (>=5.3) build.
|
||||
//
|
||||
// Usage:
|
||||
// 1. Have Bootstrap's SCSS source available (`bootstrap/scss/...`)
|
||||
// 2. Compile this file as your single entry point:
|
||||
// sass happydomain-bootstrap.scss happydomain-bootstrap.css
|
||||
// 3. Include the compiled CSS.
|
||||
//
|
||||
// Targets Bootstrap 5.3+ (uses the `$theme-colors`, `$utilities`,
|
||||
// `data-bs-theme` and color-mode CSS-var system).
|
||||
// ============================================================================
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 1. FONTS — Brand display + UI + Mono
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 2. BRAND TOKENS (mirror of colors_and_type.css — kept as Sass scalars so
|
||||
// they can drive Bootstrap maps before `@import "bootstrap"`.)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
// — Brand plum ramp ──────────────────────────────────────────────────────────
|
||||
$hd-plum-50: #f7f1fa;
|
||||
$hd-plum-100: #ecdcf2;
|
||||
$hd-plum-200: #d6b1e3;
|
||||
$hd-plum-300: #b985ce;
|
||||
$hd-plum-400: #985bb3;
|
||||
$hd-plum-500: #743b91;
|
||||
$hd-plum-600: #54206c;
|
||||
$hd-plum-700: #360b48; // BRAND DARK ANCHOR
|
||||
$hd-plum-800: #240630;
|
||||
$hd-plum-900: #14031c;
|
||||
|
||||
// — Brand dark semantic roles (plum surface system) ───────────────────────────
|
||||
$hd-brand-dark: $hd-plum-700; // canonical plum surface
|
||||
$hd-brand-dark-hover: $hd-plum-800; // deepen on hover/active
|
||||
$hd-brand-dark-fg: $hd-plum-50; // primary text on plum surface
|
||||
$hd-brand-dark-muted: $hd-plum-200; // secondary text / eyebrows on plum surface
|
||||
$hd-brand-dark-border: $hd-plum-600; // dividers within plum surfaces
|
||||
$hd-brand-dark-subtle: $hd-plum-50; // subtle plum tint on light backgrounds
|
||||
|
||||
// — Dark mode canvas (plum-tinted, replaces green-tinted #0c0f0e) ─────────────
|
||||
$hd-bg-canvas-dark: #0f0a11;
|
||||
|
||||
// — Brand green ramp ──────────────────────────────────────────────────────────
|
||||
$hd-green-50: #edfaf5;
|
||||
$hd-green-100: #d0f2e6;
|
||||
$hd-green-200: #9de4ca;
|
||||
$hd-green-300: #56c8a4;
|
||||
$hd-green-400: #2dba93;
|
||||
$hd-green-500: #1cb487; // PRIMARY
|
||||
$hd-green-600: #17a377;
|
||||
$hd-green-700: #128f67;
|
||||
$hd-green-800: #0d7254;
|
||||
$hd-green-900: #084d38;
|
||||
|
||||
// — Neutrals (light) ─────────────────────────────────────────────────────────
|
||||
$hd-bg-canvas: #ffffff;
|
||||
$hd-bg-default: #fafafa;
|
||||
$hd-bg-subtle: #f4f4f5;
|
||||
$hd-bg-inset: #eeeeef;
|
||||
|
||||
$hd-fg-1: #0a0a0b;
|
||||
$hd-fg-2: #3f3f46;
|
||||
$hd-fg-3: #71717a;
|
||||
$hd-fg-4: #a1a1aa;
|
||||
|
||||
$hd-border-1: #e4e4e7;
|
||||
$hd-border-2: #d1d1d6;
|
||||
$hd-border-3: #a1a1aa;
|
||||
|
||||
// — Semantic ─────────────────────────────────────────────────────────────────
|
||||
$hd-success: $hd-green-500;
|
||||
$hd-success-bg: $hd-green-50;
|
||||
$hd-danger: #e5484d;
|
||||
$hd-danger-bg: #fff1f2;
|
||||
$hd-warning: #f59e0b;
|
||||
$hd-warning-bg: #fffbeb;
|
||||
$hd-info: #0ea5e9;
|
||||
$hd-info-bg: #f0f9ff;
|
||||
|
||||
// — Focus ring ───────────────────────────────────────────────────────────────
|
||||
$hd-focus-ring: rgba(28, 180, 135, 0.22);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 3. BOOTSTRAP VARIABLE OVERRIDES
|
||||
// (declared BEFORE importing bootstrap/scss/variables)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
// ── Color system ────────────────────────────────────────────────────────────
|
||||
// Re-point Bootstrap's $green to our brand ramp so the generated utilities
|
||||
// (`text-success`, `bg-success`, etc) match exactly.
|
||||
$primary: $hd-green-500;
|
||||
$secondary: $hd-fg-3;
|
||||
$success: $hd-green-500;
|
||||
$info: $hd-info;
|
||||
$warning: $hd-warning;
|
||||
$danger: $hd-danger;
|
||||
$light: $hd-bg-subtle;
|
||||
$dark: $hd-fg-1;
|
||||
|
||||
// Bootstrap 5.3 builds its grayscale from $gray-* — align it to Zinc-ish.
|
||||
$white: #ffffff;
|
||||
$gray-100: $hd-bg-subtle;
|
||||
$gray-200: $hd-bg-inset;
|
||||
$gray-300: $hd-border-1;
|
||||
$gray-400: $hd-border-2;
|
||||
$gray-500: $hd-border-3;
|
||||
$gray-600: $hd-fg-3;
|
||||
$gray-700: $hd-fg-2;
|
||||
$gray-800: #27272a;
|
||||
$gray-900: $hd-fg-1;
|
||||
$black: #000000;
|
||||
|
||||
// Custom theme color: "accent" — same green but available as a separate slot
|
||||
// so designers can use `.btn-accent`, `.text-accent`, etc.
|
||||
$custom-theme-colors: (
|
||||
"accent": $hd-green-500,
|
||||
"brand": $hd-green-500,
|
||||
"plum": $hd-plum-500,
|
||||
);
|
||||
|
||||
// ── Body / surfaces ─────────────────────────────────────────────────────────
|
||||
$body-bg: $hd-bg-default;
|
||||
$body-color: $hd-fg-2;
|
||||
$body-secondary-color: $hd-fg-3;
|
||||
$body-secondary-bg: $hd-bg-subtle;
|
||||
$body-tertiary-color: $hd-fg-4;
|
||||
$body-tertiary-bg: $hd-bg-inset;
|
||||
$body-emphasis-color: $hd-fg-1;
|
||||
|
||||
// ── Borders ─────────────────────────────────────────────────────────────────
|
||||
$border-color: $hd-border-1;
|
||||
$border-color-translucent: $hd-border-1;
|
||||
|
||||
$border-radius: 6px; // --hd-radius
|
||||
$border-radius-sm: 4px; // --hd-radius-sm
|
||||
$border-radius-lg: 8px; // --hd-radius-md
|
||||
$border-radius-xl: 12px; // --hd-radius-lg
|
||||
$border-radius-xxl: 12px;
|
||||
$border-radius-pill: 9999px;
|
||||
|
||||
// ── Links ───────────────────────────────────────────────────────────────────
|
||||
$link-color: $hd-green-500;
|
||||
$link-hover-color: $hd-green-700;
|
||||
$link-decoration: none;
|
||||
$link-hover-decoration: underline;
|
||||
|
||||
// ── Typography ──────────────────────────────────────────────────────────────
|
||||
$font-family-sans-serif:
|
||||
"Hanken Grotesk Variable",
|
||||
"Hanken Grotesk",
|
||||
system-ui,
|
||||
-apple-system,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
sans-serif;
|
||||
$font-family-monospace:
|
||||
"JetBrains Mono Variable", JetBrainsMono, "Fantasque Sans Mono", "SFMono-Regular", Menlo,
|
||||
Consolas, monospace;
|
||||
$font-family-base: $font-family-sans-serif;
|
||||
|
||||
$font-size-root: null; // honour browser default
|
||||
$font-size-base: 0.9375rem; // 15px — --hd-text-base
|
||||
$font-size-sm: 0.8125rem; // --hd-text-sm
|
||||
$font-size-lg: 1.0625rem; // --hd-text-md
|
||||
|
||||
$font-weight-lighter: 300;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-base: $font-weight-normal;
|
||||
|
||||
$line-height-base: 1.5; // --hd-leading-normal
|
||||
$line-height-sm: 1.375; // --hd-leading-snug
|
||||
$line-height-lg: 1.625; // --hd-leading-relaxed
|
||||
|
||||
// Heading scale (matches --hd-text-*xl)
|
||||
$h1-font-size: 2.25rem; // --hd-text-3xl
|
||||
$h2-font-size: 1.875rem; // --hd-text-2xl
|
||||
$h3-font-size: 1.5rem; // --hd-text-xl
|
||||
$h4-font-size: 1.25rem; // --hd-text-lg
|
||||
$h5-font-size: 1.0625rem; // --hd-text-md
|
||||
$h6-font-size: 0.9375rem; // --hd-text-base
|
||||
|
||||
$headings-font-family: $font-family-sans-serif;
|
||||
$headings-font-weight: 600;
|
||||
$headings-line-height: 1.2;
|
||||
$headings-color: $hd-fg-1;
|
||||
|
||||
$display-font-family: "Quicksand Variable", "Quicksand", sans-serif;
|
||||
$display-font-weight: 700;
|
||||
$display-line-height: 1.2;
|
||||
|
||||
$small-font-size: 0.8125rem;
|
||||
$text-muted: $hd-fg-3;
|
||||
|
||||
// ── Spacing (Bootstrap's spacer scale — kept default, but explicit) ─────────
|
||||
$spacer: 1rem;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacer * 0.25,
|
||||
// 4px
|
||||
2: $spacer * 0.5,
|
||||
// 8px
|
||||
3: $spacer * 0.75,
|
||||
// 12px
|
||||
4: $spacer,
|
||||
// 16px
|
||||
5: $spacer * 1.25,
|
||||
// 20px
|
||||
6: $spacer * 1.5,
|
||||
// 24px
|
||||
7: $spacer * 2,
|
||||
// 32px
|
||||
8: $spacer * 2.5,
|
||||
// 40px
|
||||
9: $spacer * 3,
|
||||
// 48px
|
||||
10: $spacer * 4,
|
||||
// 64px
|
||||
11: $spacer * 5, // 80px
|
||||
);
|
||||
|
||||
// ── Shadows — flat system, separation by border ─────────────────────────────
|
||||
$enable-shadows: false;
|
||||
$enable-gradients: false;
|
||||
$enable-rounded: true;
|
||||
$enable-transitions: true;
|
||||
$enable-reduced-motion: true;
|
||||
$enable-smooth-scroll: true;
|
||||
|
||||
$box-shadow: none;
|
||||
$box-shadow-sm: none;
|
||||
$box-shadow-lg: none;
|
||||
$box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
|
||||
// ── Focus ring ──────────────────────────────────────────────────────────────
|
||||
$focus-ring-width: 3px;
|
||||
$focus-ring-opacity: 1;
|
||||
$focus-ring-color: $hd-focus-ring;
|
||||
$focus-ring-blur: 0;
|
||||
$focus-ring-box-shadow: 0 0 0 $focus-ring-width $focus-ring-color;
|
||||
|
||||
// ── Components ──────────────────────────────────────────────────────────────
|
||||
|
||||
// Buttons
|
||||
$btn-font-weight: 500;
|
||||
$btn-border-radius: $border-radius;
|
||||
$btn-border-radius-sm: $border-radius-sm;
|
||||
$btn-border-radius-lg: $border-radius-lg;
|
||||
$btn-padding-y: 0.5rem;
|
||||
$btn-padding-x: 0.875rem;
|
||||
$btn-focus-width: 3px;
|
||||
$btn-focus-box-shadow: $focus-ring-box-shadow;
|
||||
$btn-disabled-opacity: 0.5;
|
||||
$btn-transition:
|
||||
color 0.12s ease-in-out,
|
||||
background-color 0.12s ease-in-out,
|
||||
border-color 0.12s ease-in-out;
|
||||
|
||||
// Forms
|
||||
$input-bg: $hd-bg-canvas;
|
||||
$input-color: $hd-fg-1;
|
||||
$input-border-color: $hd-border-1;
|
||||
$input-border-radius: $border-radius;
|
||||
$input-border-radius-sm: $border-radius-sm;
|
||||
$input-border-radius-lg: $border-radius-lg;
|
||||
$input-padding-y: 0.5rem;
|
||||
$input-padding-x: 0.75rem;
|
||||
$input-placeholder-color: $hd-fg-4;
|
||||
$input-focus-border-color: $hd-green-400;
|
||||
$input-focus-box-shadow: $focus-ring-box-shadow;
|
||||
$input-box-shadow: $box-shadow-inset;
|
||||
|
||||
$form-label-color: $hd-fg-2;
|
||||
$form-label-font-weight: 500;
|
||||
$form-label-font-size: $font-size-sm;
|
||||
|
||||
$form-check-input-border: 1px solid $hd-border-2;
|
||||
$form-check-input-checked-bg-color: $hd-green-500;
|
||||
$form-check-input-focus-box-shadow: $focus-ring-box-shadow;
|
||||
|
||||
// Cards
|
||||
$card-border-color: $hd-border-1;
|
||||
$card-border-radius: $border-radius-lg;
|
||||
$card-inner-border-radius: subtract($card-border-radius, 1px);
|
||||
$card-cap-bg: $hd-bg-subtle;
|
||||
$card-cap-color: $hd-fg-1;
|
||||
$card-bg: $hd-bg-canvas;
|
||||
$card-box-shadow: none;
|
||||
$card-spacer-y: 1rem;
|
||||
$card-spacer-x: 1.25rem;
|
||||
|
||||
// Navbar
|
||||
$navbar-padding-y: 0.75rem;
|
||||
$navbar-light-color: $hd-fg-2;
|
||||
$navbar-light-hover-color: $hd-fg-1;
|
||||
$navbar-light-active-color: $hd-green-700;
|
||||
$navbar-light-brand-color: $hd-fg-1;
|
||||
$navbar-light-brand-hover-color: $hd-fg-1;
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-bg: $hd-bg-canvas;
|
||||
$dropdown-border-color: $hd-border-1;
|
||||
$dropdown-border-radius: $border-radius-lg;
|
||||
$dropdown-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
$dropdown-link-hover-bg: $hd-bg-subtle;
|
||||
$dropdown-link-active-bg: $hd-green-50;
|
||||
$dropdown-link-active-color: $hd-green-700;
|
||||
|
||||
// Modals
|
||||
$modal-content-bg: $hd-bg-canvas;
|
||||
$modal-content-border-color: $hd-border-1;
|
||||
$modal-content-border-radius: $border-radius-xl;
|
||||
$modal-content-box-shadow-xs: 0 8px 24px rgba(0, 0, 0, 0.08);
|
||||
$modal-content-box-shadow-sm-up: 0 16px 48px rgba(0, 0, 0, 0.12);
|
||||
$modal-backdrop-bg: #0a0a0b;
|
||||
$modal-backdrop-opacity: 0.4;
|
||||
|
||||
// Alerts
|
||||
$alert-border-radius: $border-radius;
|
||||
$alert-border-width: 1px;
|
||||
$alert-padding-y: 0.75rem;
|
||||
$alert-padding-x: 1rem;
|
||||
|
||||
// Badges
|
||||
$badge-font-size: 0.75em;
|
||||
$badge-font-weight: 600;
|
||||
$badge-padding-y: 0.25em;
|
||||
$badge-padding-x: 0.5em;
|
||||
$badge-border-radius: $border-radius-sm;
|
||||
|
||||
// Tables
|
||||
$table-border-color: $hd-border-1;
|
||||
$table-striped-bg: $hd-bg-subtle;
|
||||
$table-hover-bg: $hd-bg-subtle;
|
||||
$table-color: $hd-fg-2;
|
||||
|
||||
// Code
|
||||
$code-color: $hd-green-700;
|
||||
$code-font-size: 0.9em;
|
||||
$kbd-bg: $hd-fg-1;
|
||||
$pre-color: $hd-fg-2;
|
||||
|
||||
// Tooltip / popover
|
||||
$tooltip-bg: $hd-fg-1;
|
||||
$tooltip-color: $hd-bg-canvas;
|
||||
$tooltip-border-radius: $border-radius-sm;
|
||||
$tooltip-font-size: $font-size-sm;
|
||||
$popover-bg: $hd-bg-canvas;
|
||||
$popover-border-color: $hd-border-1;
|
||||
$popover-border-radius: $border-radius-lg;
|
||||
$popover-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 4. BOOTSTRAP IMPORT
|
||||
// Adjust this path to your `bootstrap/scss/` location.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
// Extend $theme-colors with our custom slots
|
||||
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
|
||||
|
||||
// Now pull the rest of Bootstrap in
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/accordion";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/badge";
|
||||
@import "bootstrap/scss/alert";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/close";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
@import "bootstrap/scss/helpers";
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 5. happyDomain CSS CUSTOM PROPERTIES
|
||||
// Exposed alongside Bootstrap's so existing `--hd-*` references keep working.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
// Plum ramp
|
||||
--hd-plum-50: #{$hd-plum-50};
|
||||
--hd-plum-100: #{$hd-plum-100};
|
||||
--hd-plum-200: #{$hd-plum-200};
|
||||
--hd-plum-300: #{$hd-plum-300};
|
||||
--hd-plum-400: #{$hd-plum-400};
|
||||
--hd-plum-500: #{$hd-plum-500};
|
||||
--hd-plum-600: #{$hd-plum-600};
|
||||
--hd-plum-700: #{$hd-plum-700};
|
||||
--hd-plum-800: #{$hd-plum-800};
|
||||
--hd-plum-900: #{$hd-plum-900};
|
||||
|
||||
// Brand dark roles
|
||||
--hd-brand-dark: #{$hd-brand-dark};
|
||||
--hd-brand-dark-hover: #{$hd-brand-dark-hover};
|
||||
--hd-brand-dark-fg: #{$hd-brand-dark-fg};
|
||||
--hd-brand-dark-muted: #{$hd-brand-dark-muted};
|
||||
--hd-brand-dark-border: #{$hd-brand-dark-border};
|
||||
--hd-brand-dark-subtle: #{$hd-brand-dark-subtle};
|
||||
|
||||
// Brand ramp
|
||||
--hd-green-50: #{$hd-green-50};
|
||||
--hd-green-100: #{$hd-green-100};
|
||||
--hd-green-200: #{$hd-green-200};
|
||||
--hd-green-300: #{$hd-green-300};
|
||||
--hd-green-400: #{$hd-green-400};
|
||||
--hd-green-500: #{$hd-green-500};
|
||||
--hd-green-600: #{$hd-green-600};
|
||||
--hd-green-700: #{$hd-green-700};
|
||||
--hd-green-800: #{$hd-green-800};
|
||||
--hd-green-900: #{$hd-green-900};
|
||||
|
||||
// Surfaces
|
||||
--hd-bg-canvas: #{$hd-bg-canvas};
|
||||
--hd-bg-default: #{$hd-bg-default};
|
||||
--hd-bg-subtle: #{$hd-bg-subtle};
|
||||
--hd-bg-inset: #{$hd-bg-inset};
|
||||
--hd-bg-overlay: rgba(0, 0, 0, 0.04);
|
||||
|
||||
// Foreground
|
||||
--hd-fg-1: #{$hd-fg-1};
|
||||
--hd-fg-2: #{$hd-fg-2};
|
||||
--hd-fg-3: #{$hd-fg-3};
|
||||
--hd-fg-4: #{$hd-fg-4};
|
||||
--hd-fg-inverse: #ffffff;
|
||||
|
||||
// Borders
|
||||
--hd-border-1: #{$hd-border-1};
|
||||
--hd-border-2: #{$hd-border-2};
|
||||
--hd-border-3: #{$hd-border-3};
|
||||
|
||||
// Accent
|
||||
--hd-accent: #{$hd-green-500};
|
||||
--hd-accent-hover: #{$hd-green-600};
|
||||
--hd-accent-fg: #ffffff;
|
||||
--hd-accent-subtle: #{$hd-green-50};
|
||||
--hd-accent-muted: #{$hd-green-100};
|
||||
--hd-accent-border: #{$hd-green-200};
|
||||
--hd-focus-ring: #{$hd-focus-ring};
|
||||
|
||||
// Semantic
|
||||
--hd-success: #{$hd-success};
|
||||
--hd-success-bg: #{$hd-success-bg};
|
||||
--hd-danger: #{$hd-danger};
|
||||
--hd-danger-bg: #{$hd-danger-bg};
|
||||
--hd-warning: #{$hd-warning};
|
||||
--hd-warning-bg: #{$hd-warning-bg};
|
||||
--hd-info: #{$hd-info};
|
||||
--hd-info-bg: #{$hd-info-bg};
|
||||
|
||||
// DNS diff
|
||||
--hd-diff-add: #{$hd-green-500};
|
||||
--hd-diff-add-bg: #{$hd-green-50};
|
||||
--hd-diff-add-line: #{$hd-green-100};
|
||||
--hd-diff-del: #{$hd-danger};
|
||||
--hd-diff-del-bg: #{$hd-danger-bg};
|
||||
--hd-diff-del-line: #ffd6d8;
|
||||
--hd-diff-mod: #{$hd-warning};
|
||||
--hd-diff-mod-bg: #{$hd-warning-bg};
|
||||
|
||||
// Fonts
|
||||
--hd-font-brand: "Quicksand Variable", "Quicksand", sans-serif;
|
||||
--hd-font-ui: "DM Sans", system-ui, -apple-system, sans-serif;
|
||||
--hd-font-mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
|
||||
|
||||
// Radii
|
||||
--hd-radius-none: 0;
|
||||
--hd-radius-xs: 2px;
|
||||
--hd-radius-sm: 4px;
|
||||
--hd-radius: 6px;
|
||||
--hd-radius-md: 8px;
|
||||
--hd-radius-lg: 12px;
|
||||
--hd-radius-full: 9999px;
|
||||
|
||||
// Shadows
|
||||
--hd-shadow-none: none;
|
||||
--hd-shadow-focus: 0 0 0 3px var(--hd-focus-ring);
|
||||
--hd-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 6. DARK MODE (Bootstrap 5.3 `data-bs-theme="dark"`)
|
||||
// Mirrors the dark-mode block in colors_and_type.css.
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
// Bootstrap CSS vars
|
||||
--bs-body-bg: #111514; // content default (green-tinted surfaces unchanged)
|
||||
--bs-body-bg-rgb: 17, 21, 20;
|
||||
--bs-body-color: #b8c4bf;
|
||||
--bs-body-color-rgb: 184, 196, 191;
|
||||
--bs-emphasis-color: #f4f7f6;
|
||||
--bs-secondary-color: #7a9189;
|
||||
--bs-secondary-bg: #181d1b;
|
||||
--bs-tertiary-color: #4a5e58;
|
||||
--bs-tertiary-bg: #1e2422;
|
||||
--bs-dark: #f4f7f6;
|
||||
--bs-dark-rgb: 244, 247, 246;
|
||||
--bs-light: #1e2422;
|
||||
--bs-light-rgb: 30, 36, 34;
|
||||
|
||||
--bs-border-color: #1f2c27;
|
||||
--bs-border-color-translucent: rgba(255, 255, 255, 0.1);
|
||||
--bs-link-color: #22d3a3;
|
||||
--bs-link-color-rgb: 34, 211, 163;
|
||||
--bs-link-hover-color: #56c8a4;
|
||||
--bs-code-color: #56c8a4;
|
||||
--bs-primary: #22d3a3;
|
||||
--bs-primary-rgb: 34, 211, 163;
|
||||
--bs-primary-bg-subtle: #0d2a22;
|
||||
--bs-primary-border-subtle: #1a5c47;
|
||||
--bs-primary-text-emphasis: #56c8a4;
|
||||
--bs-success: #22d3a3;
|
||||
--bs-success-rgb: 34, 211, 163;
|
||||
--bs-success-bg-subtle: #0d2a22;
|
||||
--bs-danger: #f87171;
|
||||
--bs-danger-rgb: 248, 113, 113;
|
||||
--bs-danger-bg-subtle: #2a1010;
|
||||
--bs-warning: #fbbf24;
|
||||
--bs-warning-rgb: 251, 191, 36;
|
||||
--bs-warning-bg-subtle: #2a1f00;
|
||||
--bs-info: #38bdf8;
|
||||
--bs-info-rgb: 56, 189, 248;
|
||||
--bs-info-bg-subtle: #0c1e2a;
|
||||
|
||||
// happyDomain CSS vars
|
||||
--hd-bg-canvas: #{$hd-bg-canvas-dark}; // plum-tinted, replaces green #0c0f0e
|
||||
--hd-bg-default: #111514;
|
||||
--hd-bg-subtle: #181d1b;
|
||||
--hd-bg-inset: #1e2422;
|
||||
--hd-bg-overlay: rgba(255, 255, 255, 0.04);
|
||||
|
||||
--hd-fg-1: #f4f7f6;
|
||||
--hd-fg-2: #b8c4bf;
|
||||
--hd-fg-3: #7a9189;
|
||||
--hd-fg-4: #4a5e58;
|
||||
--hd-fg-inverse: #0c0f0e;
|
||||
|
||||
--hd-border-1: #1f2c27;
|
||||
--hd-border-2: #293c36;
|
||||
--hd-border-3: #3a5249;
|
||||
|
||||
--hd-accent: #22d3a3;
|
||||
--hd-accent-hover: #1cb487;
|
||||
--hd-accent-fg: #0c0f0e;
|
||||
--hd-accent-subtle: #0d2a22;
|
||||
--hd-accent-muted: #0f3329;
|
||||
--hd-accent-border: #1a5c47;
|
||||
--hd-focus-ring: rgba(34, 211, 163, 0.25);
|
||||
|
||||
--hd-success: #22d3a3;
|
||||
--hd-success-bg: #0d2a22;
|
||||
--hd-danger: #f87171;
|
||||
--hd-danger-bg: #2a1010;
|
||||
--hd-warning: #fbbf24;
|
||||
--hd-warning-bg: #2a1f00;
|
||||
--hd-info: #38bdf8;
|
||||
--hd-info-bg: #0c1e2a;
|
||||
|
||||
--hd-diff-add: #22d3a3;
|
||||
--hd-diff-add-bg: #0d2a22;
|
||||
--hd-diff-add-line: #0f3329;
|
||||
--hd-diff-del: #f87171;
|
||||
--hd-diff-del-bg: #2a1010;
|
||||
--hd-diff-del-line: #3a1515;
|
||||
--hd-diff-mod: #fbbf24;
|
||||
--hd-diff-mod-bg: #2a1f00;
|
||||
|
||||
--hd-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) {
|
||||
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255%2C255%2C255%2C.25%29'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .modal-content {
|
||||
--bs-modal-bg: var(--hd-bg-canvas);
|
||||
--bs-modal-color: var(--hd-fg-2);
|
||||
--bs-modal-border-color: var(--hd-border-1);
|
||||
--bs-modal-header-border-color: var(--hd-border-1);
|
||||
--bs-modal-footer-border-color: var(--hd-border-1);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .table {
|
||||
--bs-table-color: var(--hd-fg-2);
|
||||
--bs-table-bg: transparent;
|
||||
--bs-table-border-color: var(--hd-border-1);
|
||||
--bs-table-striped-color: var(--hd-fg-2);
|
||||
--bs-table-striped-bg: rgba(255, 255, 255, 0.03);
|
||||
--bs-table-hover-color: var(--hd-fg-1);
|
||||
--bs-table-hover-bg: rgba(255, 255, 255, 0.04);
|
||||
--bs-table-active-bg: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 7. COMPONENT REFINEMENTS — small tweaks to align Bootstrap with the system
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
// Use brand font for `.display-*` headings
|
||||
.display-1,
|
||||
.display-2,
|
||||
.display-3,
|
||||
.display-4,
|
||||
.display-5,
|
||||
.display-6 {
|
||||
font-family: var(--hd-font-brand);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
// Tighten button hover — flat system, no shadow lift
|
||||
.btn-primary,
|
||||
.btn-success {
|
||||
--bs-btn-bg: var(--hd-accent);
|
||||
--bs-btn-border-color: var(--hd-accent);
|
||||
--bs-btn-hover-bg: var(--hd-accent-hover);
|
||||
--bs-btn-hover-border-color: var(--hd-accent-hover);
|
||||
--bs-btn-active-bg: var(--hd-accent-hover);
|
||||
--bs-btn-active-border-color: var(--hd-accent-hover);
|
||||
--bs-btn-color: var(--hd-accent-fg);
|
||||
--bs-btn-hover-color: var(--hd-accent-fg);
|
||||
--bs-btn-active-color: var(--hd-accent-fg);
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
--bs-btn-color: var(--hd-accent);
|
||||
--bs-btn-border-color: var(--hd-accent-border);
|
||||
--bs-btn-hover-bg: var(--hd-accent-subtle);
|
||||
--bs-btn-hover-border-color: var(--hd-accent);
|
||||
--bs-btn-hover-color: var(--hd-accent-hover);
|
||||
--bs-btn-active-bg: var(--hd-accent);
|
||||
--bs-btn-active-border-color: var(--hd-accent);
|
||||
--bs-btn-active-color: var(--hd-accent-fg);
|
||||
}
|
||||
|
||||
// Inputs: subtle inset, focus ring uses brand
|
||||
.form-control,
|
||||
.form-select {
|
||||
background-color: var(--hd-bg-canvas);
|
||||
border-color: var(--hd-border-1);
|
||||
color: var(--hd-fg-1);
|
||||
&:focus {
|
||||
background-color: var(--hd-bg-canvas);
|
||||
border-color: var(--hd-accent);
|
||||
color: var(--hd-fg-1);
|
||||
box-shadow: 0 0 0 3px var(--hd-focus-ring);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: var(--hd-bg-subtle);
|
||||
border-color: var(--hd-border-1);
|
||||
color: var(--hd-fg-2);
|
||||
}
|
||||
|
||||
// Card: flat, 1px border separation
|
||||
.card {
|
||||
--bs-card-bg: var(--hd-bg-canvas);
|
||||
--bs-card-border-color: var(--hd-border-1);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .offcanvas,
|
||||
[data-bs-theme="dark"] .offcanvas-sm,
|
||||
[data-bs-theme="dark"] .offcanvas-md,
|
||||
[data-bs-theme="dark"] .offcanvas-lg,
|
||||
[data-bs-theme="dark"] .offcanvas-xl,
|
||||
[data-bs-theme="dark"] .offcanvas-xxl {
|
||||
--bs-offcanvas-bg: var(--hd-bg-subtle);
|
||||
--bs-offcanvas-border-color: var(--hd-border-1);
|
||||
--bs-offcanvas-color: var(--hd-fg-2);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .dropdown-menu {
|
||||
--bs-dropdown-bg: var(--hd-bg-subtle);
|
||||
--bs-dropdown-border-color: var(--hd-border-1);
|
||||
--bs-dropdown-color: var(--hd-fg-2);
|
||||
--bs-dropdown-link-color: var(--hd-fg-2);
|
||||
--bs-dropdown-link-hover-bg: var(--hd-bg-inset);
|
||||
--bs-dropdown-link-hover-color: var(--hd-fg-1);
|
||||
--bs-dropdown-link-active-bg: var(--hd-accent-subtle);
|
||||
--bs-dropdown-link-active-color: var(--hd-accent);
|
||||
--bs-dropdown-divider-bg: var(--hd-border-1);
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] .card {
|
||||
--bs-card-bg: var(--hd-bg-canvas);
|
||||
--bs-card-cap-bg: var(--hd-bg-default);
|
||||
--bs-card-cap-color: var(--hd-fg-1);
|
||||
--bs-card-color: var(--hd-fg-2);
|
||||
--bs-card-border-color: var(--hd-border-1);
|
||||
}
|
||||
|
||||
// Alerts: tint background + colored border to match diff/semantic system
|
||||
.alert-success {
|
||||
background-color: var(--hd-success-bg);
|
||||
border-color: var(--hd-accent-border);
|
||||
color: #0d6651;
|
||||
}
|
||||
.alert-danger {
|
||||
background-color: var(--hd-danger-bg);
|
||||
border-color: var(--hd-diff-del-line);
|
||||
color: #9b2c2f;
|
||||
}
|
||||
.alert-warning {
|
||||
background-color: var(--hd-warning-bg);
|
||||
border-color: #fcd34d;
|
||||
color: #92400e;
|
||||
}
|
||||
.alert-info {
|
||||
background-color: var(--hd-info-bg);
|
||||
border-color: #bae6fd;
|
||||
color: #075985;
|
||||
}
|
||||
|
||||
[data-bs-theme="dark"] {
|
||||
.btn-light {
|
||||
--bs-btn-bg: var(--hd-bg-inset);
|
||||
--bs-btn-border-color: var(--hd-border-2);
|
||||
--bs-btn-color: var(--hd-fg-1);
|
||||
--bs-btn-hover-bg: var(--hd-bg-subtle);
|
||||
--bs-btn-hover-border-color: var(--hd-border-1);
|
||||
--bs-btn-hover-color: var(--hd-fg-1);
|
||||
--bs-btn-active-bg: var(--hd-bg-default);
|
||||
--bs-btn-active-border-color: var(--hd-border-1);
|
||||
--bs-btn-active-color: var(--hd-fg-1);
|
||||
}
|
||||
|
||||
.btn-dark {
|
||||
--bs-btn-bg: var(--hd-fg-1);
|
||||
--bs-btn-border-color: var(--hd-fg-1);
|
||||
--bs-btn-color: var(--hd-fg-inverse);
|
||||
--bs-btn-hover-bg: var(--hd-fg-2);
|
||||
--bs-btn-hover-border-color: var(--hd-fg-2);
|
||||
--bs-btn-hover-color: var(--hd-fg-inverse);
|
||||
--bs-btn-active-bg: var(--hd-fg-2);
|
||||
--bs-btn-active-border-color: var(--hd-fg-2);
|
||||
--bs-btn-active-color: var(--hd-fg-inverse);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
color: var(--hd-success);
|
||||
border-color: var(--hd-accent-border);
|
||||
}
|
||||
.alert-danger {
|
||||
color: var(--hd-danger);
|
||||
border-color: var(--hd-diff-del-line);
|
||||
}
|
||||
.alert-warning {
|
||||
color: var(--hd-warning);
|
||||
border-color: rgba(251, 191, 36, 0.4);
|
||||
}
|
||||
.alert-info {
|
||||
color: var(--hd-info);
|
||||
border-color: rgba(56, 189, 248, 0.35);
|
||||
}
|
||||
}
|
||||
|
||||
// Code styling
|
||||
code,
|
||||
.hd-code {
|
||||
font-family: var(--hd-font-mono);
|
||||
background: var(--hd-bg-subtle);
|
||||
border: 1px solid var(--hd-border-1);
|
||||
border-radius: var(--hd-radius-xs);
|
||||
padding: 0.1em 0.35em;
|
||||
color: var(--hd-fg-1);
|
||||
}
|
||||
|
||||
// Focus visibility — system-wide
|
||||
:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--hd-shadow-focus);
|
||||
}
|
||||
|
||||
// Brand-dark surface — hero blocks, inverse cards, marketing slabs, quote panels
|
||||
.hd-brand-dark-surface {
|
||||
background-color: var(--hd-brand-dark);
|
||||
color: var(--hd-brand-dark-fg);
|
||||
|
||||
// Eyebrows, labels, secondary copy inside a plum surface
|
||||
.hd-muted,
|
||||
.text-muted,
|
||||
small {
|
||||
color: var(--hd-brand-dark-muted) !important;
|
||||
}
|
||||
|
||||
// Dividers within the surface
|
||||
hr,
|
||||
.hd-divider {
|
||||
border-color: var(--hd-brand-dark-border);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Green CTA on plum background — the accent sings here
|
||||
.btn-primary,
|
||||
.btn-success,
|
||||
.btn-accent {
|
||||
--bs-btn-bg: var(--hd-accent);
|
||||
--bs-btn-border-color: var(--hd-accent);
|
||||
--bs-btn-hover-bg: var(--hd-accent-hover);
|
||||
--bs-btn-hover-border-color: var(--hd-accent-hover);
|
||||
--bs-btn-color: var(--hd-accent-fg);
|
||||
--bs-btn-hover-color: var(--hd-accent-fg);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--hd-brand-dark-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Subtle plum callout — quote blocks, testimonials, light-page accents
|
||||
.hd-brand-subtle-surface {
|
||||
background-color: var(--hd-brand-dark-subtle);
|
||||
border: 1px solid #{$hd-plum-100};
|
||||
border-radius: var(--hd-radius-md);
|
||||
|
||||
.hd-eyebrow,
|
||||
.hd-label {
|
||||
color: #{$hd-plum-500};
|
||||
}
|
||||
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #{$hd-plum-800};
|
||||
}
|
||||
|
||||
p,
|
||||
.hd-body {
|
||||
color: #{$hd-plum-600};
|
||||
}
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 8. BRAND TYPOGRAPHY UTILITIES (parity with colors_and_type.css)
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
.hd-display {
|
||||
font-family: var(--hd-font-brand);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.hd-h1 {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
color: var(--hd-fg-1);
|
||||
}
|
||||
.hd-h2 {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 1.875rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
color: var(--hd-fg-1);
|
||||
}
|
||||
.hd-h3 {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.375;
|
||||
color: var(--hd-fg-1);
|
||||
}
|
||||
.hd-body {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.625;
|
||||
color: var(--hd-fg-2);
|
||||
}
|
||||
.hd-small {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.5;
|
||||
color: var(--hd-fg-3);
|
||||
}
|
||||
.hd-label {
|
||||
font-family: var(--hd-font-ui);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--hd-fg-3);
|
||||
}
|
||||
.hd-mono {
|
||||
font-family: var(--hd-font-mono);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.625;
|
||||
color: var(--hd-fg-2);
|
||||
}
|
||||
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
// 9. DNS DIFF UTILITIES — happyDomain-specific
|
||||
// ─────────────────────────────────────────────────────────────────────────────
|
||||
|
||||
.hd-diff-add {
|
||||
background: var(--hd-diff-add-bg);
|
||||
border-left: 3px solid var(--hd-diff-add);
|
||||
color: var(--hd-diff-add);
|
||||
}
|
||||
.hd-diff-del {
|
||||
background: var(--hd-diff-del-bg);
|
||||
border-left: 3px solid var(--hd-diff-del);
|
||||
color: var(--hd-diff-del);
|
||||
}
|
||||
.hd-diff-mod {
|
||||
background: var(--hd-diff-mod-bg);
|
||||
border-left: 3px solid var(--hd-diff-mod);
|
||||
color: var(--hd-diff-mod);
|
||||
}
|
||||
|
||||
// Plum text-bg helper (Bootstrap doesn't generate this for custom theme colors)
|
||||
.text-bg-plum {
|
||||
color: color-contrast($hd-plum-500) !important;
|
||||
background-color: $hd-plum-500 !important;
|
||||
}
|
||||
|
||||
// DNS record-type chip (e.g. A, AAAA, MX, TXT, CNAME)
|
||||
.hd-record-type {
|
||||
display: inline-block;
|
||||
font-family: var(--hd-font-mono);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
padding: 0.15em 0.45em;
|
||||
border-radius: var(--hd-radius-sm);
|
||||
background: var(--hd-bg-inset);
|
||||
color: var(--hd-fg-2);
|
||||
border: 1px solid var(--hd-border-1);
|
||||
}
|
||||
23
config.yml
23
config.yml
|
|
@ -153,6 +153,29 @@ menu:
|
|||
url: "https://blog.happydomain.org/"
|
||||
weight: 30
|
||||
|
||||
module:
|
||||
mounts:
|
||||
- source: content
|
||||
target: content
|
||||
- source: static
|
||||
target: static
|
||||
- source: layouts
|
||||
target: layouts
|
||||
- source: data
|
||||
target: data
|
||||
- source: assets
|
||||
target: assets
|
||||
- source: i18n
|
||||
target: i18n
|
||||
- source: archetypes
|
||||
target: archetypes
|
||||
- source: node_modules/@fontsource-variable/hanken-grotesk
|
||||
target: static/fonts/hanken-grotesk
|
||||
- source: node_modules/@fontsource-variable/jetbrains-mono
|
||||
target: static/fonts/jetbrains-mono
|
||||
- source: node_modules/@fontsource-variable/quicksand
|
||||
target: static/fonts/quicksand
|
||||
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
- id: slogan
|
||||
translation: |
|
||||
<span class="font-weight-bolder" style="color: var(--secondary-subtle)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--secondary-subtle)">One</span> interface.
|
||||
<span class="font-weight-bolder" style="color: var(--bs-plum)">All</span> your domains. <span class="font-weight-bolder" style="color: var(--bs-plum)">One</span> interface.
|
||||
|
||||
- id: lead
|
||||
translation: "is a free web interface that brings all your domain names together in one simple space."
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
- id: slogan
|
||||
translation: |
|
||||
<span class="font-weight-bolder" style="color: var(--secondary-subtle)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--secondary-subtle)">Une</span> interface.
|
||||
<span class="font-weight-bolder" style="color: var(--bs-plum)">Tous</span> vos domaines. <span class="font-weight-bolder" style="color: var(--bs-plum)">Une</span> interface.
|
||||
|
||||
- id: lead
|
||||
translation: "est une interface web libre qui rassemble tous vos noms de domaine dans un endroit simple."
|
||||
|
|
|
|||
|
|
@ -1,51 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
{{ partial "head.html" . }}
|
||||
|
||||
{{ partial "head.html" . }}
|
||||
<body>
|
||||
<div id="all">
|
||||
{{ partial "nav.html" . }} {{ partial "breadcrumbs.html" . }}
|
||||
|
||||
<body>
|
||||
<div
|
||||
id="content"
|
||||
class="mt-5 mb-5"
|
||||
style="min-height: calc(80vh - 152px)"
|
||||
>
|
||||
{{ if isset .Params "id" }} {{ partial .Params.id . }} {{ else
|
||||
}}
|
||||
|
||||
<div id="all">
|
||||
<div class="container">
|
||||
{{ if .Params.toc }}
|
||||
<aside>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
{{ .TableOfContents }}
|
||||
</aside>
|
||||
{{ end }}
|
||||
|
||||
{{ partial "nav.html" . }}
|
||||
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
|
||||
<div id="content" class="mt-5 mb-5" style="min-height: calc(80vh - 180px)">
|
||||
{{ if isset .Params "id" }}
|
||||
|
||||
{{ partial .Params.id . }}
|
||||
|
||||
{{ else }}
|
||||
|
||||
<div class="container">
|
||||
|
||||
{{ if .Params.toc }}
|
||||
<aside>
|
||||
<header>
|
||||
<h1>{{ .Title }}</h1>
|
||||
</header>
|
||||
{{ .TableOfContents }}
|
||||
</aside>
|
||||
{{ end }}
|
||||
|
||||
<div>
|
||||
{{ .Content }}
|
||||
</div>
|
||||
<div>{{ .Content }}</div>
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- /#content -->
|
||||
</div>
|
||||
<!-- /.container -->
|
||||
<!-- /#all -->
|
||||
|
||||
{{ end }}
|
||||
</div>
|
||||
<!-- /#content -->
|
||||
|
||||
</div>
|
||||
<!-- /#all -->
|
||||
|
||||
{{ partial "footer.html" . }}
|
||||
|
||||
{{ partial "scripts.html" . }}
|
||||
|
||||
</body>
|
||||
{{ partial "footer.html" . }} {{ partial "scripts.html" . }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -49,15 +49,21 @@
|
|||
<!-- Mastodon proof -->
|
||||
<link rel="me" href="https://floss.social/@happyDomain">
|
||||
|
||||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="/icons/font/bootstrap-icons.min.css">
|
||||
<!-- Variable fonts (Hanken Grotesk, JetBrains Mono, Quicksand) — served from node_modules via Hugo mounts -->
|
||||
<link rel="stylesheet" href="/fonts/hanken-grotesk/wght.css">
|
||||
<link rel="stylesheet" href="/fonts/jetbrains-mono/wght.css">
|
||||
<link rel="stylesheet" href="/fonts/quicksand/wght.css">
|
||||
|
||||
<!-- Theme stylesheet, if possible do not edit this stylesheet -->
|
||||
{{ if and (isset .Site.Params "style") .Site.Params.style }}
|
||||
<link href="{{ .Site.BaseURL }}css/style.{{ .Site.Params.style }}.css" rel="stylesheet" id="theme-stylesheet">
|
||||
{{ else }}
|
||||
<link href="{{ .Site.BaseURL }}css/style.default.css" rel="stylesheet" id="theme-stylesheet">
|
||||
<!-- Bootstrap (compiled from SCSS) -->
|
||||
{{ $scss := resources.Get "scss/bootstrap.scss" }}
|
||||
{{ $opts := dict "transpiler" "libsass" "includePaths" (slice "node_modules") }}
|
||||
{{ $css := $scss | css.Sass $opts }}
|
||||
{{ if hugo.IsProduction }}
|
||||
{{ $css = $css | minify | fingerprint }}
|
||||
{{ end }}
|
||||
<link rel="stylesheet" href="{{ $css.RelPermalink }}">
|
||||
|
||||
<link rel="stylesheet" href="/icons/font/bootstrap-icons.min.css">
|
||||
|
||||
<!-- Custom stylesheet - for your changes -->
|
||||
<link href="{{ .Site.BaseURL }}css/custom.css" rel="stylesheet">
|
||||
|
|
|
|||
|
|
@ -3,7 +3,11 @@
|
|||
id="mainnav"
|
||||
>
|
||||
<div class="container">
|
||||
<a class="h1 navbar-brand mb-0" href="/{{ .Site.Language.Lang }}/">
|
||||
<a
|
||||
class="h1 navbar-brand d-flex align-items-top gap-2 mb-0"
|
||||
href="/{{ .Site.Language.Lang }}/"
|
||||
>
|
||||
<img src="/img/apple-touch-icon.png" alt="" style="height: 24px" />
|
||||
<svg
|
||||
version="1.1"
|
||||
viewBox="7 5 100 15"
|
||||
|
|
|
|||
90
package-lock.json
generated
Normal file
90
package-lock.json
generated
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
{
|
||||
"name": "happydomain-website",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "happydomain-website",
|
||||
"dependencies": {
|
||||
"@fontsource-variable/hanken-grotesk": "^5.2.8",
|
||||
"@fontsource-variable/jetbrains-mono": "^5.2.8",
|
||||
"@fontsource-variable/quicksand": "^5.2.10",
|
||||
"bootstrap": "^5.3.0",
|
||||
"bootstrap-icons": "^1.13.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource-variable/hanken-grotesk": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/hanken-grotesk/-/hanken-grotesk-5.2.8.tgz",
|
||||
"integrity": "sha512-K7hu09ZKReBc7EifRLeM4K94NZBrxFEg0nGcISmVwlFQOJo4EmYkLXTWEwr5JcNW4z2hr5zy8vLS2sxC8JDmrQ==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource-variable/jetbrains-mono": {
|
||||
"version": "5.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/jetbrains-mono/-/jetbrains-mono-5.2.8.tgz",
|
||||
"integrity": "sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource-variable/quicksand": {
|
||||
"version": "5.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource-variable/quicksand/-/quicksand-5.2.10.tgz",
|
||||
"integrity": "sha512-1uzkzGDwWgtFnxquAXuD7fZV9wHkALb49UPzRXxGTVeeLsNrGnIU0O/pcz6m1U7RDtpHz2qx77JhCpKaq7FrUg==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap": {
|
||||
"version": "5.3.8",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.8.tgz",
|
||||
"integrity": "sha512-HP1SZDqaLDPwsNiqRqi5NcP0SSXciX2s9E+RyqJIIqGo+vJeN5AJVM98CXmW/Wux0nQ5L7jeWUdplCEf0Ee+tg==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"@popperjs/core": "^2.11.8"
|
||||
}
|
||||
},
|
||||
"node_modules/bootstrap-icons": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.13.1.tgz",
|
||||
"integrity": "sha512-ijombt4v6bv5CLeXvRWKy7CuM3TRTuPEuGaGKvTV5cz65rQSY8RQ2JcHt6b90cBBAC7s8fsf2EkQDldzCoXUjw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/twbs"
|
||||
},
|
||||
{
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/bootstrap"
|
||||
}
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
}
|
||||
}
|
||||
11
package.json
Normal file
11
package.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"name": "happydomain-website",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fontsource-variable/hanken-grotesk": "^5.2.8",
|
||||
"@fontsource-variable/jetbrains-mono": "^5.2.8",
|
||||
"@fontsource-variable/quicksand": "^5.2.10",
|
||||
"bootstrap": "^5.3.0",
|
||||
"bootstrap-icons": "^1.13.0"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,86 +1,66 @@
|
|||
:root {
|
||||
--primary: #1cb487;
|
||||
--primary-dark: #169c73;
|
||||
--primary-light: #5ed1b0;
|
||||
--primary-ultralight: #e7f7f2;
|
||||
--secondary: #360b48;
|
||||
--secondary-dark: #29083a;
|
||||
--secondary-subtle: #871cb4;
|
||||
--secondary-light: #4e1566;
|
||||
--secondary-ultralight: #f0e6f3;
|
||||
--dark: #2c3e50;
|
||||
--light: #f8f9fa;
|
||||
--gray: #6c757d;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Montserrat';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Montserrat'), local('Montserrat-Regular'), url(/fonts/Montserrat.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #343a40;
|
||||
}
|
||||
body {
|
||||
font-family: Montserrat,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji,sans;
|
||||
}
|
||||
nav.navbar {
|
||||
background: var(--light);
|
||||
box-shadow: 0 0px 3px 0 #1cb487;
|
||||
border-bottom: 1px solid #1cb487;
|
||||
background: var(--hd-bg-subtle);
|
||||
box-shadow: 0 0px 3px 0 var(--hd-accent);
|
||||
border-bottom: 1px solid var(--hd-accent);
|
||||
z-index: 1024;
|
||||
transition: background 1s linear;
|
||||
}
|
||||
nav.navbar.beginscroll {
|
||||
background: linear-gradient(90deg, var(--primary-ultralight) 0%, white 150%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--hd-accent-subtle) 0%,
|
||||
white 150%
|
||||
);
|
||||
box-shadow: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
nav.navbar.scrolled {
|
||||
background: var(--light);
|
||||
box-shadow: 0 0px 3px 0 #1cb487;
|
||||
border-bottom: 1px solid #1cb487;
|
||||
background: var(--hd-bg-subtle);
|
||||
box-shadow: 0 0px 3px 0 var(--hd-accent);
|
||||
border-bottom: 1px solid var(--hd-accent);
|
||||
}
|
||||
|
||||
a.card {
|
||||
background: #f6f7f8;
|
||||
background: var(--hd-bg-subtle);
|
||||
transition: transform 250ms;
|
||||
}
|
||||
a.card:hover {
|
||||
background: #e9ecef;
|
||||
background: var(--hd-bg-inset);
|
||||
transform: scale(1.14);
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
content: "";
|
||||
width: 120px;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
var(--hd-accent) 0%,
|
||||
var(--hd-brand-dark) 100%
|
||||
);
|
||||
display: block;
|
||||
margin: 10px auto 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.link-rounded, .circle-head {
|
||||
.link-rounded,
|
||||
.circle-head {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 1.8em;
|
||||
line-height: 1em;
|
||||
width: 1.8em;
|
||||
background: #1cb487;
|
||||
background: var(--hd-accent);
|
||||
border-radius: 100%;
|
||||
color: #f8f9fa;
|
||||
color: var(--hd-accent-fg);
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
.link-rounded:hover {
|
||||
background-color: #127255;
|
||||
background-color: var(--hd-green-800);
|
||||
}
|
||||
.link-rounded:hover > div {
|
||||
color: #f8f9fa;
|
||||
color: var(--hd-accent-fg);
|
||||
}
|
||||
|
||||
.anchor {
|
||||
|
|
@ -89,7 +69,7 @@ a.card:hover {
|
|||
}
|
||||
|
||||
.carousel {
|
||||
background-color: #430c59;
|
||||
background-color: var(--hd-plum-700);
|
||||
}
|
||||
|
||||
.text-hilight {
|
||||
|
|
@ -104,13 +84,13 @@ a.card:hover {
|
|||
bottom: 5vh;
|
||||
right: 5vw;
|
||||
border-radius: 5px;
|
||||
background-color: #9332bbee;
|
||||
background-color: color-mix(in srgb, var(--hd-plum-400) 93%, transparent);
|
||||
z-index: 1023;
|
||||
max-width: 98%;
|
||||
}
|
||||
#voxppl a:hover {
|
||||
text-decoration: none;
|
||||
background-color: #9332bb;
|
||||
background-color: var(--hd-plum-400);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -118,23 +98,22 @@ img {
|
|||
}
|
||||
|
||||
#features .card {
|
||||
background-color: white;
|
||||
background-color: var(--hd-bg-canvas);
|
||||
border-radius: 10px;
|
||||
padding-top: 3px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s;
|
||||
border-top: 4px solid var(--primary);
|
||||
border-top: 4px solid var(--hd-accent);
|
||||
}
|
||||
|
||||
#features .col:nth-child(even) .card {
|
||||
border-top: 4px solid var(--secondary);
|
||||
border-top: 4px solid var(--hd-brand-dark);
|
||||
}
|
||||
|
||||
#features .card:hover {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
|
||||
|
||||
#discover .steps {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -144,13 +123,17 @@ img {
|
|||
}
|
||||
|
||||
#discover .steps::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 25px;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
var(--hd-accent) 0%,
|
||||
var(--hd-brand-dark) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
@ -162,7 +145,11 @@ img {
|
|||
}
|
||||
|
||||
#discover .step-number {
|
||||
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--hd-accent) 0%,
|
||||
var(--hd-brand-dark) 100%
|
||||
);
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
|
|
@ -181,20 +168,25 @@ img {
|
|||
}
|
||||
|
||||
#discover .step p {
|
||||
color: var(--gray);
|
||||
color: var(--hd-fg-3);
|
||||
}
|
||||
|
||||
#cta {
|
||||
padding: 100px 0;
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
var(--hd-brand-dark) 0%,
|
||||
var(--hd-accent) 100%
|
||||
);
|
||||
color: white;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#cta::before, #cta::after {
|
||||
content: '';
|
||||
#cta::before,
|
||||
#cta::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
|
|
@ -224,7 +216,7 @@ img {
|
|||
}
|
||||
|
||||
footer {
|
||||
border-top: 3px solid #9332bb;
|
||||
border-top: 3px solid var(--hd-plum-400);
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
|
|
@ -250,17 +242,40 @@ footer {
|
|||
animation: floatinghouse 6s linear infinite;
|
||||
}
|
||||
@keyframes floatinghouse {
|
||||
0% { top: 0; left: 0; }
|
||||
10% { top: -2px; }
|
||||
20% { top: -4px; }
|
||||
30% { top: -6px; }
|
||||
40% { top: -2px; }
|
||||
50% { top: 0px; }
|
||||
60% { top: 4px; }
|
||||
70% { top: 6px; }
|
||||
80% { top: 8px; }
|
||||
90% { top: 4px; }
|
||||
100% { top: 0; }
|
||||
0% {
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
10% {
|
||||
top: -2px;
|
||||
}
|
||||
20% {
|
||||
top: -4px;
|
||||
}
|
||||
30% {
|
||||
top: -6px;
|
||||
}
|
||||
40% {
|
||||
top: -2px;
|
||||
}
|
||||
50% {
|
||||
top: 0px;
|
||||
}
|
||||
60% {
|
||||
top: 4px;
|
||||
}
|
||||
70% {
|
||||
top: 6px;
|
||||
}
|
||||
80% {
|
||||
top: 8px;
|
||||
}
|
||||
90% {
|
||||
top: 4px;
|
||||
}
|
||||
100% {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
|
@ -268,6 +283,6 @@ footer {
|
|||
width: 50% !important;
|
||||
}
|
||||
#community > div > div:first-child {
|
||||
border-right: 1px solid #9332bb;
|
||||
border-right: 1px solid var(--hd-plum-400);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Add table
Add a link
Reference in a new issue