Use generated css, common to the project
This commit is contained in:
parent
bad7e8e689
commit
d74149f404
18 changed files with 1269 additions and 155 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -1,2 +1,3 @@
|
|||
public/
|
||||
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:exts-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
|
||||
commands:
|
||||
- npm ci
|
||||
- hugo
|
||||
environment:
|
||||
HUGO_ENVIRONMENT: production
|
||||
|
|
@ -21,7 +22,7 @@ steps:
|
|||
ftp_password:
|
||||
from_secret: ovh_ftp_password
|
||||
clean_dir: true
|
||||
pre_action: 'set ftp:passive-mode true'
|
||||
pre_action: "set ftp:passive-mode true"
|
||||
secure: false
|
||||
src_dir: /public/
|
||||
dest_dir: /www/
|
||||
|
|
|
|||
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:
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title = "Subscribe to our newsletter"
|
|||
Join the happyDomain newsletter
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 card bg-secondary text-light" style="border-radius: 1rem; box-shadow: 3px 3px 5px #999">
|
||||
<div class="mt-4 card bg-primary-subtle" style="border-radius: 1rem">
|
||||
<div class="card-body p-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-flex flex-column justify-content-center">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ title = "Rejoindre notre newsletter"
|
|||
S'inscrire à la lettre d'information d'happyDomain
|
||||
</h2>
|
||||
|
||||
<div class="mt-4 card bg-secondary text-light" style="border-radius: 1rem; box-shadow: 3px 3px 5px #999">
|
||||
<div class="mt-4 card bg-primary-subtle" style="border-radius: 1rem">
|
||||
<div class="card-body p-4">
|
||||
<div class="row">
|
||||
<div class="col-lg-6 d-flex flex-column justify-content-center">
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
@ -258,3 +258,8 @@
|
|||
translation: "https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/"
|
||||
- id: conf-fosdem24-body-2
|
||||
translation: "on the FOSDEM website, along with the video."
|
||||
|
||||
- id: usage-discover-pre
|
||||
translation: "Discover"
|
||||
- id: usage-discover-post
|
||||
translation: "for:"
|
||||
|
|
|
|||
|
|
@ -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."
|
||||
|
|
@ -257,3 +257,8 @@
|
|||
translation: "https://fosdem.org/2024/schedule/event/fosdem-2024-2316-let-s-make-people-love-domain-names-again/"
|
||||
- id: conf-fosdem24-body-2
|
||||
translation: "sur le site du FOSDEM, avec la captation vidéo !"
|
||||
|
||||
- id: usage-discover-pre
|
||||
translation: "Découvrez"
|
||||
- id: usage-discover-post
|
||||
translation: "pour :"
|
||||
|
|
|
|||
|
|
@ -1,51 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ .Site.LanguageCode }}">
|
||||
<!doctype html>
|
||||
<html lang="{{ .Site.LanguageCode }}" style="background-color: var(--bs-dark)">
|
||||
{{ 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>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<nav aria-label="breadcrumb" style="background-color: #e9ecef">
|
||||
<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
|
||||
<ol class="breadcrumb container">
|
||||
<li class="breadcrumb-item"><a href="../">{{ i18n "home" }}</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">{{ .Title }}</li>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,14 @@
|
|||
<nav aria-label="breadcrumb" style="background-color: #e9ecef">
|
||||
<div class="container d-flex">
|
||||
<div class="align-self-center">
|
||||
Découvrez
|
||||
<svg version="1.1" viewBox="7 5 100 15" aria-labelledby="title" style="height: 1em">
|
||||
<title>happyDomain</title>
|
||||
<g fill="#000" stroke="#000" stroke-width=".4" aria-label="happy"><path d="m7.1613 5.7392h0.28939v4.2106q2.59-0.96945 3.9791-0.96945 0.77412 0 1.172 0.30386 0.709 0.53537 0.709 2.0257v4.8907h-0.28939v-4.8907q0-1.3457-0.59325-1.7942-0.36174-0.27492-1.0563-0.27492-0.57878 0-1.3746 0.1881-0.88264 0.20981-2.5466 0.83199v5.9397h-0.28939z" /><path d="m21.175 12.721h-2.7781q-1.1214 0-1.6929 0.24598-0.82476 0.36174-0.82476 1.3095 0 0.79582 0.5209 1.2299 0.49196 0.41238 1.3022 0.41238h0.0217q0.83923 0 1.8231-0.60772 0.34003-0.20981 0.83923-0.57878 0.709-0.52813 0.78858-0.57878zm2.496 3.0748q-0.3762 0.44132-1.0852 0.44132-0.67283 0-1.0418-0.39068-0.36897-0.39067-0.36897-1.0635v-0.28215q-1.3674 0.99116-1.6206 1.1431-0.96222 0.56431-1.8304 0.56431h-0.0217q-0.93328 0-1.5048-0.49196-0.60772-0.52813-0.60772-1.4397 0-1.0852 0.90434-1.5265 0.65836-0.31833 1.9027-0.31833h2.7781v-1.0635q0-1.0056-0.29662-1.3529-0.67283-0.78858-2.3875-0.78858-0.78135 0-1.3963 0.29662-0.74518 0.34727-0.94051 1.0129l-0.27492-0.07958q0.22428-0.76688 1.0346-1.172 0.69453-0.34727 1.5772-0.34727 1.8449 0 2.6117 0.88987 0.3545 0.42685 0.3545 1.541v3.4148q0.0072 1.1648 1.1286 1.1648 0.57878 0 0.86817-0.34003z" /><path d="m25.27 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m34.241 14.935q0.98392 1.0129 2.7998 1.0129h0.0217q1.5555 0 2.3875-0.8971 0.82476-0.88264 0.82476-2.4598 0-1.3891-0.61495-2.2862-0.709-1.0346-2.0257-1.0346-1.3746 0-3.3931 0.95498zm0-5.9325v0.90434q1.9606-0.92604 3.3931-0.92604 1.4469 0 2.2355 1.1141 0.69453 0.98392 0.69453 2.496 0 1.7002-0.91157 2.6624-0.92604 0.98392-2.6117 0.98392-1.7291 0-2.7998-0.91157v4.2106h-0.28939v-10.534z" /><path d="m49 16.627q-0.1881 1.3891-1.0707 2.1559-0.91157 0.78858-2.4092 0.78858-1.1141-0.0072-2.033-0.42685-1.0635-0.49196-1.4759-1.3963l0.26045-0.12299q0.37621 0.83199 1.3746 1.2733 0.8537 0.38344 1.8738 0.38344 1.3818 0 2.2066-0.709 0.80305-0.6873 0.97669-1.9534 0.05064-0.32556 0.05064-0.88264v-0.49196q-1.7074 0.62942-2.6551 0.83923-0.709 0.15193-1.2588 0.15193-0.80305 0-1.2444-0.3328-0.70177-0.52813-0.70177-2.0257v-4.8762h0.28215v4.8762q0 1.3529 0.59325 1.7942 0.36174 0.27492 1.0563 0.27492 0.57878 0 1.3818-0.1881 0.88264-0.20257 2.5466-0.82476v-5.9325h0.28215v6.6921q0 0.60048-0.03617 0.93328z" /></g>
|
||||
<g fill="#000" aria-label="Domain"><path d="m 53.228042,15.362291 h 1.938901 q 1.960602,0 2.966225,-0.940511 0.983919,-0.911573 0.983919,-2.684074 0,-1.786971 -0.991153,-2.749186 -1.020093,-0.991154 -2.987931,-0.991154 h -1.909961 z m 1.909961,-8.949325 q 2.626196,0 4.10931,1.439706 1.47588,1.425236 1.47588,3.885034 0,2.452563 -1.49035,3.841626 -1.475878,1.367358 -4.09484,1.367358 h -3.516064 v -10.533724 z" /><path d="m 62.228011,13.125048 q 0,-1.779737 1.070734,-2.814299 1.085204,-1.056266 2.973461,-1.056266 1.888258,0.0072 2.966228,1.056266 1.077971,1.041797 1.077971,2.814299 0,1.772501 -1.077971,2.807063 -1.07797,1.049032 -2.966228,1.049032 -1.88102,0 -2.973461,-1.041797 -1.070734,-1.049031 -1.070734,-2.814298 z m 1.598866,0 q 0,1.099674 0.593246,1.671215 0.622184,0.60048 1.852083,0.60048 1.2299,0 1.84485,-0.60048 0.593246,-0.571541 0.593246,-1.671215 0,-1.10691 -0.593246,-1.685686 -0.61495,-0.593245 -1.852083,-0.60048 -1.222666,0 -1.84485,0.60048 -0.593246,0.578776 -0.593246,1.685686 z" /><path d="m 73.66607,16.957892 h -1.606103 v -7.668782 h 1.606103 v 0.83199 q 0.687297,-0.535368 1.606105,-0.72347 0.708999,-0.144694 1.273307,-0.144694 0.947746,0 1.519285,0.426847 0.470258,0.340031 0.61495,0.600481 0.904338,-0.658358 1.786972,-0.853695 0.788583,-0.173633 1.396297,-0.173633 0.954981,0 1.526521,0.419613 0.918808,0.665592 0.918808,2.315104 v 4.970239 h -1.606103 v -4.970239 q 0,-0.84646 -0.267684,-1.041797 -0.144695,-0.10852 -0.557072,-0.10852 -0.470255,0 -1.172023,0.166398 -0.998386,0.340031 -1.729091,0.933276 v 5.020882 h -1.613339 v -4.970239 q 0,-0.84646 -0.260448,-1.041797 -0.151929,-0.115755 -0.557073,-0.115755 -0.448553,0 -1.09244,0.151929 -0.759643,0.173632 -1.786972,0.824756 z" /><path d="m 91.051057,14.051772 -1.996779,-0.166398 q -0.954979,0 -1.381828,0.166398 -0.376203,0.151929 -0.376203,0.535368 0,0.368969 0.24598,0.549837 0.289388,0.23151 0.839224,0.23151 h 0.0217 q 0.62942,0 1.425236,-0.405143 0.376206,-0.224275 1.222666,-0.651123 z m 3.935677,2.286165 q -0.752409,0.593246 -1.917197,0.636654 -0.911572,0 -1.46141,-0.528133 -0.245978,-0.238745 -0.383437,-0.542603 -0.477491,0.325562 -0.745175,0.470256 -1.070737,0.578776 -2.07636,0.578776 h -0.0217 q -1.121378,0 -1.852083,-0.578776 -0.839224,-0.665593 -0.839224,-1.786971 0,-1.389063 1.266071,-1.953369 0.759645,-0.332797 2.098063,-0.332797 l 1.996779,0.311092 v -0.643888 q 0,-1.157552 -1.700157,-1.157552 -1.418,0 -2.604492,0.911572 l -0.860928,-1.215429 q 0.549836,-0.499195 1.46141,-0.918807 0.80305,-0.36897 1.794206,-0.36897 2.061887,0 2.995165,0.998389 0.520899,0.571541 0.520899,1.808675 v 3.002401 q 0.0072,0.361734 0.419613,0.434082 h 0.07958 q 0.535365,0 1.157552,-0.405144 z" /><path d="m 96.448142,6.566922 q 0.368969,0 0.636653,0.24598 0.289388,0.267684 0.289388,0.658358 0,0.390674 -0.289388,0.658358 -0.267684,0.245979 -0.636653,0.245979 -0.347266,0 -0.629418,-0.238745 -0.303858,-0.274918 -0.303858,-0.665592 0,-0.390674 0.303858,-0.672827 0.282152,-0.231511 0.629418,-0.231511 z m -0.80305,10.38903 v -7.668782 h 1.598869 v 7.668782 z" /><path d="m 100.803432,16.957892 h -1.598869 v -7.668782 h 1.598869 v 0.774113 q 0.803053,-0.477491 1.758032,-0.665593 0.752409,-0.144694 1.345655,-0.144694 0.969449,0 1.562695,0.405143 0.969446,0.672828 0.969446,2.329574 v 4.970239 h -1.6061 v -4.970239 q 0,-0.831991 -0.289388,-1.034562 -0.173632,-0.12299 -0.636653,-0.12299 -0.477491,0 -1.179256,0.151929 -0.810287,0.180867 -1.924431,0.759643 z" /></g>
|
||||
</svg>
|
||||
pour :
|
||||
<nav aria-label="breadcrumb" style="background-color: #e9ecef; padding-top: 64px">
|
||||
<div class="container d-flex gap-1">
|
||||
<div class="align-self-center">
|
||||
{{ i18n "usage-discover-pre" }} <span style="font-family: var(--hd-font-brand)">happy<strong>Domain</strong></span> {{ i18n "usage-discover-post" }}
|
||||
</div>
|
||||
<ol class="breadcrumb mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
<ol class="breadcrumb mb-0">
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/freelance" }}">{{ i18n "freelance" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/sysadmin" }}">{{ i18n "sysadmin" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/devops" }}">{{ i18n "devops" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/cio" }}">{{ i18n "cio" }}</a></li>
|
||||
<li class="breadcrumb-item"><a href="{{ ref . "/use-happyDomain/geek" }}">{{ i18n "geek" }}</a></li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -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