jacques513/psalms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first rendered html

Browse Source
This commit is contained in:
github_username_here
2026-03-25 17:01:33 +01:00
parent ce18cc23c1
commit 94dfe07839
6 changed files with 2273 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
cmd/main.go
View File

@@ -2,8 +2,10 @@ package main
import(
"project.hechon.fr/internal/renderer"
/* "project.hechon.fr/internal/fetcher"
*/
/*
"project.hechon.fr/internal/fetcher"
*/
"log"
"os"
"strings"
@@ -48,16 +50,18 @@ func main (){
os.Exit(1)
}
cfg.ProperName = properName
/*
err = fetcher.FetchBook(&cfg)
*/
err = renderer.ExtractChapter(&cfg, 2)
err = renderer.ExtractChapter(&cfg, 68)
if err != nil {
log.Printf("******%s*******\n", err)
os.Exit(1)
}
/* log.Printf("%v", cfg.Book.Chapters)
*/
os.Exit(0)
}

1
internal/models/index.html
View File

@@ -8,6 +8,7 @@
<title>Comprendre et chanter les Psaumes</title>
<link rel="stylesheet" href="css/automatic.css">
<link rel=stylesheet" href="css/automatic-token.css">
<link rel="stylesheet" href="css/psalm.css">
<!--

152
public/Psaumes2.html
View File

@@ -1,152 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mieux voir la structure des Psaumes pour mieux les comprendre et pour mieux les chanter">
<title>Comprendre et chanter les Psaumes</title>
<link rel="stylesheet" href="css/automatic.css">
<link rel="stylesheet" href="css/psalm.css">
</head>
<body>
<section class="psalm">
<div class="psalm__inner">
<ul class="psalm__strophs">
<li class="psalm__strophe" data-who="David" data-to="people" data-of="nations rulers">
<ul class="psalm__lines">
<li class="line" data-verse="1"> Pourquoi ce tumulte parmi les nations,</li>
<li class="line" data-verse="1">Ces vaines pensées parmi les peuples?</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="2"> Pourquoi les rois de la terre se soulèvent-ils</li>
<li class="line" data-verse="2">Et les princes se liguent-ils avec eux</li>
<li class="line" data-verse="2">Contre YAHWEH et contre son oint? -</li>
</ul>
</li>
<li class="psalm__strophe" data-who="nations rulers" data-to="nations rulers" data-of="Yahweh and the anointed one">
<ul class="psalm__lines">
<li class="line" data-verse="3"> Brisons leurs liens,</li>
<li class="line" data-verse="3">Délivrons-nous de leurs chaînes! -</li>
</ul>
</li>
<li class="psalm__strophe" data-who="David" data-to="people" data-of="Yahweh">
<ul class="psalm__lines">
<li class="line" data-verse="4"> Celui qui siège dans les cieux rit,</li>
<li class="line" data-verse="4">Le Seigneur se moque d&#39;eux.</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="5"> Puis il leur parle dans sa colère,</li>
<li class="line" data-verse="5">Il les épouvante dans sa fureur:</li>
</ul>
</li>
<li class="psalm__strophe" data-who="Yahveh" data-to="nations rulers" data-of="anointed one">
<ul class="psalm__lines">
<li class="line" data-verse="6"> C&#39;est moi qui ai oint mon roi</li>
<li class="line" data-verse="6">Sur Sion, ma montagne sainte!</li>
</ul>
</li>
<li class="psalm__strophe" data-who="Yahweh" data-to="anointed one" data-of="anointed one">
<ul class="psalm__lines">
<li class="line" data-verse="7"> Je publierai le décret; YAHWEH m&#39;a dit:</li>
<li class="line" data-verse="7">Tu es mon fils!</li>
<li class="line" data-verse="7">Je t&#39;ai engendré aujourd&#39;hui.</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="8"> Demande-moi et je te donnerai les nations pour héritage,</li>
<li class="line" data-verse="8">Les extrémités de la terre pour possession;</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="9"> Tu les briseras avec une verge de fer,</li>
<li class="line" data-verse="9">Tu les briseras comme le vase d&#39;un potier.</li>
</ul>
</li>
<li class="psalm__strophe" data-who="anointed one" data-to="nations rulers" data-of="Yahweh">
<ul class="psalm__lines">
<li class="line" data-verse="10"> Et maintenant, rois, conduisez-vous avec sagesse!</li>
<li class="line" data-verse="10">Juges de la terre, recevez instruction!</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="11"> Servez YAHWEH avec crainte,</li>
<li class="line" data-verse="11">Et réjouissez-vous avec tremblement.</li>
</ul>
<ul class="psalm__lines">
<li class="line" data-verse="12"> Baisez le fils, de peur qu&#39;il ne s&#39;irrite,</li>
<li class="line" data-verse="12">Et que vous ne périssiez dans votre voie,</li>
<li class="line" data-verse="12">Car sa colère est prompte à s&#39;enflammer.</li>
<li class="line" data-verse="12">Heureux tous ceux qui se confient en lui!</li>
</ul>
</li>
</ul>
</div>
</section>
</body>
</html>

0
public/Psaumes68.html Normal file
View File

519
public/css/automatic-token.css Normal file
View File

@@ -0,0 +1,519 @@
<style id="automaticcss-tokens-css">/* File: automatic-tokens.css - Version: 4.0.0-rc-1 - Generated: 2026-03-25 09:32:16 */
/* Feat: Text, Headings, & Spacing */
:root {
--root-font-size: 100%;
}
/* Feat: Palette */
:root {
--primary: oklch(0.5411585303 0.0677239567 208.7070013989);
--primary-hover: oklch(0.6028324436 0.0766444786 208.7651823647);
--primary-ultra-light: oklch(0.9668752009 0.0095621871 207.8927779136);
--primary-light: oklch(0.9005918408 0.0285950335 207.8400166549);
--primary-semi-light: oklch(0.7689215274 0.0646975618 208.011643056);
--primary-semi-dark: oklch(0.520138336 0.065109151 208.7078626094);
--primary-dark: oklch(0.4118424371 0.0498748803 208.5986184383);
--primary-ultra-dark: oklch(0.2336529733 0.0240242741 208.2344515801);
--secondary: oklch(0.8127815143 0.0656122698 188.6032325376);
--secondary-hover: oklch(0.8726273298 0.0460334034 188.8404042378);
--secondary-ultra-light: oklch(0.969464618 0.011130845 189.8144461086);
--secondary-light: oklch(0.9087347952 0.033149457 189.2321991724);
--secondary-semi-light: oklch(0.7899653979 0.0740265522 187.7639193683);
--secondary-semi-dark: oklch(0.5443489231 0.0735286244 186.3600078221);
--secondary-dark: oklch(0.4301023825 0.0564022283 186.5209052347);
--secondary-ultra-dark: oklch(0.2419147517 0.0273321579 187.1737707006);
--tertiary: oklch(0.5154803763 0.0638426417 222.004635516);
--tertiary-hover: oklch(0.5749470498 0.071769114 222.0484297731);
--tertiary-ultra-light: oklch(0.9643893635 0.0084002638 219.5722640229);
--tertiary-light: oklch(0.8927778109 0.0253143046 219.7552748689);
--tertiary-semi-light: oklch(0.7486578543 0.0587089915 220.5540117645);
--tertiary-semi-dark: oklch(0.4966446557 0.060857743 221.9468530679);
--tertiary-dark: oklch(0.3941411194 0.0464510438 221.7504719822);
--tertiary-ultra-dark: oklch(0.2256745668 0.0220613912 221.0536109967);
--neutral: oklch(0 0 0);
--neutral-hover: oklch(0 0 0);
--neutral-ultra-light: oklch(0.9619021195 0 89.8755630407);
--neutral-light: oklch(0.8845388159 0 89.8755633647);
--neutral-semi-light: oklch(0.7243514368 0 89.8755629815);
--neutral-semi-dark: oklch(0.4649026812 0 89.875562675);
--neutral-dark: oklch(0.3705423946 0 89.8755633012);
--neutral-ultra-dark: oklch(0.2156072651 0 89.8755622173);
--white: #fff;
--black: #000;
}
/* Feat: Default Section Styles */
:root {
--content-width: 80rem;
--content-width-safe: min(var(--content-width), calc(100% - var(--gutter) * 2));
}
/* Feat: Focus Styles */
:root {
--focus-color: var(--primary);
--focus-width: 2px;
--focus-offset: 2px;
}
/* Feat: Text Defaults */
:root {
--text-xxl-max-width: 100%;
--text-xl-max-width: 100%;
--text-l-max-width: 100%;
--text-m-line-height: calc(6px + 2ex);
--text-m-max-width: 100%;
--text-s-max-width: 100%;
--text-xs-max-width: 100%;
--base-text-lh: calc(6px + 2ex);
--text-font-family: Roboto;
--text-color: var(--text-dark);
--text-line-height: calc(6px + 2ex);
--text-font-weight: 400;
--text-text-wrap: pretty;
}
/* Feat: Heading Defaults */
:root {
--heading-font-family: RobotoCondensed;
--heading-line-height: calc(4px + 2ex);
--heading-font-weight: 700;
--heading-max-width: 50ch;
--heading-text-wrap: pretty;
--base-heading-lh: calc(4px + 2ex);
--h1-font-family: Great Vibes;
--h1-font-weight: 400;
--h1-line-height: 6rem;
--h1-max-width: 100%;
--h2-max-width: 100%;
--h3-max-width: 100%;
--h4-line-height: calc(4px + 2ex);
--h4-max-width: 100%;
--h5-max-width: 100%;
--h6-max-width: 100%;
}
/* Feat: Text Size Variables */
:root {
--text-xs: clamp(0.75rem, calc(-0.1947849584vw + 0.7889569917rem), 0.6331290249rem);
--text-s: clamp(0.8125rem, calc(0.0524349837vw + 0.8020130033rem), 0.8439609902rem);
--text-s-to-xs: clamp(0.75rem, calc(0.1566016504vw + 0.7186796699rem), 0.8439609902rem);
--text-m: clamp(1rem, calc(0.2083333333vw + 0.9583333333rem), 1.125rem);
--text-m-to-s: clamp(0.8125rem, calc(0.5208333333vw + 0.7083333333rem), 1.125rem);
--text-m-to-xs: clamp(0.75rem, calc(0.625vw + 0.625rem), 1.125rem);
--text-l: clamp(1.2rem, calc(0.499375vw + 1.100125rem), 1.499625rem);
--text-l-to-m: clamp(1rem, calc(0.8327083333vw + 0.8334583333rem), 1.499625rem);
--text-l-to-s: clamp(0.8125rem, calc(1.1452083333vw + 0.5834583333rem), 1.499625rem);
--text-l-to-xs: clamp(0.75rem, calc(1.249375vw + 0.500125rem), 1.499625rem);
--text-xl: clamp(1.44rem, calc(0.931666875vw + 1.253666625rem), 1.999000125rem);
--text-xl-to-l: clamp(1.2rem, calc(1.331666875vw + 0.933666625rem), 1.999000125rem);
--text-xl-to-m: clamp(1rem, calc(1.6650002083vw + 0.6669999583rem), 1.999000125rem);
--text-xl-to-s: clamp(0.8125rem, calc(1.9775002083vw + 0.4169999583rem), 1.999000125rem);
--text-xl-to-xs: clamp(0.75rem, calc(2.081666875vw + 0.333666625rem), 1.999000125rem);
--text-xxl: clamp(1.728rem, calc(1.5611119444vw + 1.4157776111rem), 2.6646671666rem);
--text-xxl-to-xl: clamp(1.44rem, calc(2.0411119444vw + 1.0317776111rem), 2.6646671666rem);
--text-xxl-to-l: clamp(1.2rem, calc(2.4411119444vw + 0.7117776111rem), 2.6646671666rem);
--text-xxl-to-m: clamp(1rem, calc(2.7744452777vw + 0.4451109445rem), 2.6646671666rem);
--text-xxl-to-s: clamp(0.8125rem, calc(3.0869452777vw + 0.1951109445rem), 2.6646671666rem);
--text-xxl-to-xs: clamp(0.75rem, calc(3.1911119444vw + 0.1117776111rem), 2.6646671666rem);
}
/* Feat: Heading Size Variables */
:root {
--h6: clamp(0.75rem, calc(-0.0775388427vw + 0.7655077685rem), 0.7034766944rem);
--h5: clamp(0.8125rem, calc(0.208724056vw + 0.7707551888rem), 0.9377344336rem);
--h5-to-h6: clamp(0.75rem, calc(0.3128907227vw + 0.6874218555rem), 0.9377344336rem);
--h4: clamp(1.125rem, calc(0.2083333333vw + 1.0833333333rem), 1.25rem);
--h4-to-h5: clamp(0.8125rem, calc(0.7291666667vw + 0.6666666667rem), 1.25rem);
--h4-to-h6: clamp(0.75rem, calc(0.8333333333vw + 0.5833333333rem), 1.25rem);
--h3: clamp(1.35rem, calc(0.5270833333vw + 1.2445833333rem), 1.66625rem);
--h3-to-h4: clamp(1.125rem, calc(0.9020833333vw + 0.9445833333rem), 1.66625rem);
--h3-to-h5: clamp(0.8125rem, calc(1.4229166667vw + 0.5279166667rem), 1.66625rem);
--h3-to-h6: clamp(0.75rem, calc(1.5270833333vw + 0.4445833333rem), 1.66625rem);
--h2: clamp(1.62rem, calc(1.0018520833vw + 1.4196295833rem), 2.22111125rem);
--h2-to-h3: clamp(1.35rem, calc(1.4518520833vw + 1.0596295833rem), 2.22111125rem);
--h2-to-h4: clamp(1.125rem, calc(1.8268520833vw + 0.7596295833rem), 2.22111125rem);
--h2-to-h5: clamp(0.8125rem, calc(2.3476854167vw + 0.3429629167rem), 2.22111125rem);
--h2-to-h6: clamp(0.75rem, calc(2.4518520833vw + 0.2596295833rem), 2.22111125rem);
--h1: clamp(1.944rem, calc(1.6945688271vw + 1.6050862346rem), 2.9607412963rem);
--h1-to-h2: clamp(1.62rem, calc(2.2345688271vw + 1.1730862346rem), 2.9607412963rem);
--h1-to-h3: clamp(1.35rem, calc(2.6845688271vw + 0.8130862346rem), 2.9607412963rem);
--h1-to-h4: clamp(1.125rem, calc(3.0595688271vw + 0.5130862346rem), 2.9607412963rem);
--h1-to-h5: clamp(0.8125rem, calc(3.5804021604vw + 0.0964195679rem), 2.9607412963rem);
--h1-to-h6: clamp(0.75rem, calc(3.6845688271vw + 0.0130862346rem), 2.9607412963rem);
}
/* Feat: Default Section Styles */
:root {
--section-padding-block: var(--section-space-m);
--gutter: clamp(1rem, calc(6.6666666667vw + -0.3333333333rem), 5rem);
}
/* Feat: Space Variables */
:root {
--space-xs: clamp(0.8441720333rem, calc(-0.0180644999vw + 0.8477849332rem), 0.8333333333rem);
--space-s: clamp(1.1252813203rem, calc(0.2078644661vw + 1.0837084271rem), 1.25rem);
--space-s-to-xs: clamp(0.8441720333rem, calc(0.6763799446vw + 0.7088960443rem), 1.25rem);
--space-m: clamp(1.5rem, calc(0.625vw + 1.375rem), 1.875rem);
--space-m-to-s: clamp(1.1252813203rem, calc(1.2495311328vw + 0.8753750938rem), 1.875rem);
--space-m-to-xs: clamp(0.8441720333rem, calc(1.7180466112vw + 0.500562711rem), 1.875rem);
--space-l: clamp(1.9995rem, calc(1.355vw + 1.7285rem), 2.8125rem);
--space-l-to-m: clamp(1.5rem, calc(2.1875vw + 1.0625rem), 2.8125rem);
--space-l-to-s: clamp(1.1252813203rem, calc(2.8120311328vw + 0.5628750938rem), 2.8125rem);
--space-l-to-xs: clamp(0.8441720333rem, calc(3.2805466112vw + 0.188062711rem), 2.8125rem);
--space-xl: clamp(2.6653335rem, calc(2.5890275vw + 2.147528rem), 4.21875rem);
--space-xl-to-l: clamp(1.9995rem, calc(3.69875vw + 1.25975rem), 4.21875rem);
--space-xl-to-m: clamp(1.5rem, calc(4.53125vw + 0.59375rem), 4.21875rem);
--space-xl-to-s: clamp(1.1252813203rem, calc(5.1557811328vw + 0.0941250938rem), 4.21875rem);
--space-xl-to-xs: clamp(0.8441720333rem, calc(5.6242966112vw + -0.280687289rem), 4.21875rem);
--space-xxl: clamp(3.5528895555rem, calc(4.6253924075vw + 2.627811074rem), 6.328125rem);
--space-xxl-to-xl: clamp(2.6653335rem, calc(6.1046525vw + 1.444403rem), 6.328125rem);
--space-xxl-to-l: clamp(1.9995rem, calc(7.214375vw + 0.556625rem), 6.328125rem);
--space-xxl-to-m: clamp(1.5rem, calc(8.046875vw + -0.109375rem), 6.328125rem);
--space-xxl-to-s: clamp(1.1252813203rem, calc(8.6714061328vw + -0.6089999062rem), 6.328125rem);
--space-xxl-to-xs: clamp(0.8441720333rem, calc(9.1399216112vw + -0.983812289rem), 6.328125rem);
}
/* Feat: Section Space Variables */
:root {
--section-space-xs: clamp(1.6883440665rem, calc(1.3527598891vw + 1.4177920887rem), 2.5rem);
--section-space-s: clamp(2.2505626407rem, calc(2.4990622656vw + 1.7507501875rem), 3.75rem);
--section-space-s-to-xs: clamp(1.6883440665rem, calc(3.4360932225vw + 1.001125422rem), 3.75rem);
--section-space-m: clamp(3rem, calc(4.375vw + 2.125rem), 5.625rem);
--section-space-m-to-s: clamp(2.2505626407rem, calc(5.6240622656vw + 1.1257501875rem), 5.625rem);
--section-space-m-to-xs: clamp(1.6883440665rem, calc(6.5610932225vw + 0.376125422rem), 5.625rem);
--section-space-l: clamp(3.999rem, calc(7.3975vw + 2.5195rem), 8.4375rem);
--section-space-l-to-m: clamp(3rem, calc(9.0625vw + 1.1875rem), 8.4375rem);
--section-space-l-to-s: clamp(2.2505626407rem, calc(10.3115622656vw + 0.1882501875rem), 8.4375rem);
--section-space-l-to-xs: clamp(1.6883440665rem, calc(11.2485932225vw + -0.561374578rem), 8.4375rem);
--section-space-xl: clamp(5.330667rem, calc(12.209305vw + 2.888806rem), 12.65625rem);
--section-space-xl-to-l: clamp(3.999rem, calc(14.42875vw + 1.11325rem), 12.65625rem);
--section-space-xl-to-m: clamp(3rem, calc(16.09375vw + -0.21875rem), 12.65625rem);
--section-space-xl-to-s: clamp(2.2505626407rem, calc(17.3428122656vw + -1.2179998125rem), 12.65625rem);
--section-space-xl-to-xs: clamp(1.6883440665rem, calc(18.2798432225vw + -1.967624578rem), 12.65625rem);
--section-space-xxl: clamp(7.105779111rem, calc(19.797659815vw + 3.146247148rem), 18.984375rem);
--section-space-xxl-to-xl: clamp(5.330667rem, calc(22.75618vw + 0.779431rem), 18.984375rem);
--section-space-xxl-to-l: clamp(3.999rem, calc(24.975625vw + -0.996125rem), 18.984375rem);
--section-space-xxl-to-m: clamp(3rem, calc(26.640625vw + -2.328125rem), 18.984375rem);
--section-space-xxl-to-s: clamp(2.2505626407rem, calc(27.8896872656vw + -3.3273748125rem), 18.984375rem);
--section-space-xxl-to-xs: clamp(1.6883440665rem, calc(28.8267182225vw + -4.076999578rem), 18.984375rem);
}
/* Feat: Contextual Space Variables */
:root {
--content-gap: var(--space-m);
--container-gap: var(--space-xl);
--grid-gap: var(--space-m);
}
/* Feat: Width Variables */
:root {
--width-10: calc(var(--content-width) * 0.1);
--width-20: calc(var(--content-width) * 0.2);
--width-30: calc(var(--content-width) * 0.3);
--width-40: calc(var(--content-width) * 0.4);
--width-50: calc(var(--content-width) * 0.5);
--width-60: calc(var(--content-width) * 0.6);
--width-70: calc(var(--content-width) * 0.7);
--width-80: calc(var(--content-width) * 0.8);
--width-90: calc(var(--content-width) * 0.9);
--width-full: calc(var(--content-width) * 100%);
}
/* Feat: Grid Variables */
:root {
--grid-1: repeat(1, minmax(0, 1fr));
--grid-2: repeat(2, minmax(0, 1fr));
--grid-3: repeat(3, minmax(0, 1fr));
--grid-4: repeat(4, minmax(0, 1fr));
--grid-5: repeat(5, minmax(0, 1fr));
--grid-6: repeat(6, minmax(0, 1fr));
--grid-7: repeat(7, minmax(0, 1fr));
--grid-8: repeat(8, minmax(0, 1fr));
--grid-9: repeat(9, minmax(0, 1fr));
--grid-10: repeat(10, minmax(0, 1fr));
--grid-11: repeat(11, minmax(0, 1fr));
--grid-12: repeat(12, minmax(0, 1fr));
--grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
--grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
}
/* Feat: Auto Grid Variables */
:root {
--grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
--grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
--grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
--grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
--grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
--grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
--grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
--grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
--grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
--grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
--grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
--auto-grid-aggressiveness: 0.7;
}
/* Feat: Header Height Variables */
:root {
--header-height: clamp(0rem, calc(0vw + 0rem), 0rem);
--admin-bar-height: var(--wp-admin--admin-bar--height, 0px);
}
:root {
--scroll-margin: clamp(0rem, calc(0vw + 0rem), 0rem);
--offset: calc(var(--scroll-margin) + var(--header-height));
}
/* Feat: Smart Spacing */
:root {
--paragraph-spacing: 1em;
--heading-spacing: 1.2em;
--list-spacing: var(--paragraph-spacing);
--list-indent-spacing: 2em;
--list-item-spacing: 0.5em;
--nested-list-indent-spacing: 1em;
--flow-spacing: var(--paragraph-spacing);
--figure-spacing: var(--paragraph-spacing);
--figcaption-spacing: 0.5em;
--blockquote-spacing: var(--paragraph-spacing);
}
/* Feat: Buttons */
:root {
--option-primary-btn-outline: on;
--option-secondary-btn-outline: on;
--btn-padding-block: 0.5em;
--btn-padding-inline: 1.25em;
--btn-min-width: 8.75rem;
--btn-width: max-content;
--btn-line-height: 1;
--btn-font-size: var(--text-m);
--btn-font-weight: 400;
--btn-font-family: inherit;
--btn-font-style: normal;
--btn-text-decoration: none;
--btn-text-decoration-hover: none;
--btn-letter-spacing: 0;
--btn-text-transform: none;
--btn-border-width: 2px;
--btn-border-style: solid;
--btn-border-radius: var(--radius);
--btn-radius: var(--radius);
--btn-justify-content: center;
--btn-align-items: center;
--btn-text-align: center;
}
/* Feat: Link Variables */
:root {
--link-color: var(--primary);
--link-color-hover: var(--primary-hover);
--link-transition: var(--transition);
--link-decoration: inherit;
--link-decoration-hover: inherit;
--link-underline-offset: auto;
--link-weight: inherit;
}
/* Feat: Card Variables */
:root {
--card-padding: var(--space-m);
--card-gap: calc(var(--content-gap) / 2);
--card-border-width: var(--border-width);
--card-border-style: solid;
--card-display: grid;
--card-radius: var(--radius);
--card-min-radius: 4px;
--card-heading-size: var(--h3);
--card-text-size: var(--text-m);
--card-button-font-size: var(--text-s);
--card-icon-size: 68px;
--card-icon-padding: var(--icon-padding);
--card-icon-border-width: var(--icon-border-width);
--card-icon-border-style: var(--icon-border-style);
--card-icon-radius: var(--icon-radius);
--card-icon-background: var(--icon-background);
--card-icon-color: var(--icon-color);
--card-icon-border-color: var(--icon-border-color);
--card-line-height: 1.4;
--card-avatar-radius: var(--radius);
--card-avatar-border-width: var(--border-width);
--card-avatar-border-style: var(--border-style);
--card-avatar-size: 140px;
--card-avatar-aspect-ratio: 1;
--card-media-radius: var(--radius);
--card-media-aspect-ratio: 1.3333333333;
--card-media-object-fit: cover;
--card-background: var(--white);
--card-heading-color: var(--text-dark);
--card-text-color: var(--text-dark-muted);
--card-link-color: var(--primary);
--card-link-color-hover: var(--primary-hover);
--card-button-style: primary;
--card-border-color: var(--border-color-dark);
}
/* Feat: Column Variables */
:root {
--col-width-s: 13rem;
--col-width-m: 25rem;
--col-width-l: 38rem;
--col-rule-width-s: 0.5px;
--col-rule-width-m: 1px;
--col-rule-width-l: 3px;
}
/* Feat: Sticky Variables */
:root {
--sticky-offset-custom: 60px;
--sticky-offset: var(--header-height, var(--sticky-offset-custom, 0));
}
/* Contextual Color Variables */
:root {
--body-bg-color: var(--white);
--bg-ultra-light: var(--neutral-ultra-light);
--bg-light: var(--primary-ultra-light);
--bg-dark: var(--primary);
--bg-ultra-dark: color-mix(in oklch, var(--secondary-dark) 80%, transparent);
--text-light: var(--white);
--text-light-muted: color-mix(in oklch, white 80%, transparent);
--text-dark: var(--primary-ultra-dark);
--text-dark-muted: color-mix(in oklch, var(--primary-ultra-dark) 70%, transparent);
}
/* Feat: Contextual Relationship Variables */
:root {
--bg-ultra-light-text: var(--text-dark-muted);
--bg-light-text: var(--text-dark-muted);
--bg-dark-text: var(--text-light);
--bg-ultra-dark-text: var(--text-light);
--bg-ultra-light-heading: var(--text-dark);
--bg-light-heading: var(--text-dark);
--bg-dark-heading: var(--text-light);
--bg-ultra-dark-heading: var(--text-light);
--bg-ultra-light-button: primary;
--bg-light-button: primary;
--bg-dark-button: primary-light;
--bg-ultra-dark-button: secondary;
--bg-ultra-light-icon: light;
--bg-light-icon: light;
--bg-dark-icon: dark;
--bg-ultra-dark-icon: dark;
}
/* Feat: Radius Variables */
:root {
--radius: 5px;
--radius-50: 50%;
--radius-circle: 50vw;
--radius-none: 0;
--radius-xs: 2.2222222222px;
--radius-s: 3.3333333333px;
--radius-m: 5px;
--radius-l: 7.5px;
--radius-xl: 11.25px;
--radius-xxl: 16.875px;
}
/* Feat: Border Variables */
:root {
--border-size: 1px;
--border-width: 1px;
--border-style: solid;
--border-color-dark: color-mix(in oklch, var(--black) 50%, transparent);
--border-color-light: color-mix(in oklch, var(--white) 20%, transparent);
--border: var(--border-size) var(--border-style) var(--border-color-dark);
--border-light: var(--border-size) var(--border-style) var(--border-color-light);
--border-dark: var(--border-size) var(--border-style) var(--border-color-dark);
}
/* Feat: Divider Variables */
:root {
--divider-size: 1px;
--divider-style: solid;
--divider-inline-size: 100%;
--divider-gap: var(--content-gap);
--divider-color-dark: color-mix(in oklch, var(--primary) 20%, transparent);
--divider-color-light: color-mix(in oklch, white 20%, transparent);
--divider: var(--divider-size) var(--divider-style) var(--divider-color-dark);
--divider-light: var(--divider-size) var(--divider-style) var(--divider-color-light);
--divider-dark: var(--divider-size) var(--divider-style) var(--divider-color-dark);
}
/* Feat: Transition Variables */
:root {
--transition-duration: 0.3s;
--transition-timing: ease-in-out;
--transition-delay: 0s;
--transition: 0.3s ease-in-out 0s;
}
:root {
--boxed-width: 1800px;
}
:root {
--surface-1-background-color: var(--body-bg-color, var(--white));
--surface-1-asset: linear-gradient(to right, var(--secondary), var(--tertiary));
--surface-1-asset-is-url: off;
--surface-1-size: 100%;
--surface-1-position: center center;
--surface-1-attachment: scroll;
--surface-1-repeat: no-repaet;
--surface-1-relationship: dark;
}
/* Feat: Icon Variables */
:root {
--icon-scheme: inherit;
--icon-size: 32px;
--icon-padding: 0.35em;
--icon-radius: var(--radius-circle);
--icon-background: var(--neutral-ultra-light);
--icon-background-hover: var(--neutral-light);
--icon-border-color: var(--border-color-dark);
--icon-border-color-hover: inherit;
--icon-border-width: var(--border-width);
--icon-border-style: var(--border-style);
--icon-color: var(--text-dark-muted);
--icon-color-hover: var(--primary);
--icon-list-icon-size: 1em;
--icon-list-gap: 1em;
--icon-size-xs: 12px;
--icon-size-s: 24px;
--icon-size-m: 32px;
--icon-size-l: 64px;
--icon-size-xl: 128px;
--icon-padding-xs: var(--icon-padding);
--icon-padding-s: var(--icon-padding);
--icon-padding-m: var(--icon-padding);
--icon-padding-l: var(--icon-padding);
--icon-padding-xl: var(--icon-padding);
}
/* Feat: Box Shadow Variables */
:root {
--box-shadow-1: 0 0 40px color-mix(in oklch, var(--black) 20%, transparent);
--box-shadow-2: 0 0 60px color-mix(in oklch, var(--black) 20%, transparent);
--box-shadow-3: 26px 55px 80px color-mix(in oklch, var(--black) 30%, transparent);
}
/* Feat: Text Shadow Variables */
:root {
--text-shadow-1: 0 1px 2px color-mix(in srgb, black 20%, transparent);
--text-shadow-2: 0 2px 4px color-mix(in srgb, black 30%, transparent);
--text-shadow-3: 0 4px 8px color-mix(in srgb, black 40%, transparent);
}
/* Feat: Drop Shadow Variables */
:root {
--drop-shadow-1: drop-shadow(0 1px 2px color-mix(in srgb, black 15%, transparent));
--drop-shadow-2: drop-shadow(0 4px 6px color-mix(in srgb, black 20%, transparent));
--drop-shadow-3: drop-shadow(0 10px 15px color-mix(in srgb, black 25%, transparent));
}
/* Feat: Blockquote Variables */
:root {
--blockquote-padding: var(--space-m);
--blockquote-gap: 1em;
--blockquote-border-width: 0 0 0 3px;
--blockquote-border-style: solid;
--blockquote-border-color: var(--primary);
--blockquote-border-radius: var(--radius);
--blockquote-background: var(--neutral-ultra-light);
--blockquote-box-shadow: none;
--blockquote-text-color: inherit;
--blockquote-text-font-family: inherit;
--blockquote-text-font-style: normal;
--blockquote-text-font-size: var(--text-l);
--blockquote-text-font-weight: normal;
--blockquote-text-line-height: inherit;
--blockquote-text-text-align: left;
--blockquote-text-text-transform: none;
--blockquote-footer-padding: 0;
--blockquote-footer-margin-block: 1em 0;
--blockquote-footer-font-family: inherit;
--blockquote-footer-font-size: var(--text-s);
--blockquote-footer-font-weight: normal;
--blockquote-footer-font-style: normal;
--blockquote-footer-line-height: 1.5;
--blockquote-footer-text-transform: none;
--blockquote-footer-color: currentColor;
--blockquote-cite-font-family: inherit;
--blockquote-cite-font-size: inherit;
--blockquote-cite-font-weight: inherit;
--blockquote-cite-font-style: inherit;
--blockquote-cite-line-height: inherit;
--blockquote-cite-text-transform: inherit;
--blockquote-cite-color: currentColor;
}</style>

1746
public/css/automatic.css
View File

File diff suppressed because one or more lines are too long