From c180d14ca67e1eeae3e13fe3cfba9396e6e77354 Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Mon, 10 Apr 2023 10:53:50 +0100 Subject: [PATCH 01/21] Adding dark mode variables --- build.rs | 6 ++-- content/issue-1/1-first.md | 1 + content/issue-1/zine.toml | 13 +++++++++ src/main.rs | 2 +- your-zine-site/content/issue-1/1-first.md | 3 ++ your-zine-site/content/issue-1/2-first.md | 3 ++ your-zine-site/content/issue-1/zine.toml | 34 +++++++++++++++++++++++ your-zine-site/zine.toml | 8 ++++++ zine.toml | 19 +++++++++++++ 9 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 content/issue-1/1-first.md create mode 100644 content/issue-1/zine.toml create mode 100644 your-zine-site/content/issue-1/1-first.md create mode 100644 your-zine-site/content/issue-1/2-first.md create mode 100644 your-zine-site/content/issue-1/zine.toml create mode 100644 your-zine-site/zine.toml create mode 100644 zine.toml diff --git a/build.rs b/build.rs index f86f460..6bf19f0 100644 --- a/build.rs +++ b/build.rs @@ -1,5 +1,5 @@ use std::io::{Error, ErrorKind}; -use std::process::Command; +use std::process::Command; // A process builder, controlling how a new process should be spawned fn main() { // Obtain build infomation from Git. @@ -10,8 +10,8 @@ fn main() { } fn run(args: &[&str]) -> Result { - let out = Command::new(args[0]).args(&args[1..]).output()?; - match out.status.success() { + let out = Command::new(args[0]).args(&args[1..]).output()?; // Output() executes command as child process + match out.status.success() { // Collecting status (child process) and checking for success true => Ok(String::from_utf8(out.stdout).unwrap().trim().to_string()), false => Err(Error::new(ErrorKind::Other, "Command not successful.")), } diff --git a/content/issue-1/1-first.md b/content/issue-1/1-first.md new file mode 100644 index 0000000..9fb4992 --- /dev/null +++ b/content/issue-1/1-first.md @@ -0,0 +1 @@ +Hello Zine \ No newline at end of file diff --git a/content/issue-1/zine.toml b/content/issue-1/zine.toml new file mode 100644 index 0000000..a3b7e68 --- /dev/null +++ b/content/issue-1/zine.toml @@ -0,0 +1,13 @@ + +slug = "issue-1" +number = 1 +title = "Issue 1" + +[[article]] +file = "1-first.md" +title = "First article" +author = "josh_thompson" +cover = "" +pub_date = "2023-03-01" +publish = true +featured = true diff --git a/src/main.rs b/src/main.rs index 3015cc8..c65e4b3 100644 --- a/src/main.rs +++ b/src/main.rs @@ -55,7 +55,7 @@ enum Commands { /// Prints the app version. Version, } - +// 'match' is used to distinguish what type of action 'Commands' is to do #[tokio::main] async fn main() -> Result<()> { match Cli::parse().command { diff --git a/your-zine-site/content/issue-1/1-first.md b/your-zine-site/content/issue-1/1-first.md new file mode 100644 index 0000000..8a73128 --- /dev/null +++ b/your-zine-site/content/issue-1/1-first.md @@ -0,0 +1,3 @@ +Hi all, + +This is my first artice. I hope you really enjoy it!! \ No newline at end of file diff --git a/your-zine-site/content/issue-1/2-first.md b/your-zine-site/content/issue-1/2-first.md new file mode 100644 index 0000000..e91b11c --- /dev/null +++ b/your-zine-site/content/issue-1/2-first.md @@ -0,0 +1,3 @@ +Second Article + +Boshhhh \ No newline at end of file diff --git a/your-zine-site/content/issue-1/zine.toml b/your-zine-site/content/issue-1/zine.toml new file mode 100644 index 0000000..0aca974 --- /dev/null +++ b/your-zine-site/content/issue-1/zine.toml @@ -0,0 +1,34 @@ + +slug = "issue-1" +number = 1 +title = "Issue 1" + +[[article]] +file = "1-first.md" +path = "/1-first" +title = "First article" +author = "josh_thompson" +cover = "" +pub_date = "2023-03-10" +publish = true +# Whether to publish the artice or not +featured = true +# When artices are reposted from the original source, +# set a canonical property to help prevent duplicate content issues for search enginges +i18n.fr = { file = "1-first-fr.md", title = "Issue 1 Wooo", pub_date = "2022-03-10"} +i18n.fr = { file = "1-first-zh.md", title = "Issue 1 Wooo", pub_date = "2022-03-10"} + + + +[[artice]] +file = "2-first.md" +path="2-first" +title = "First Second article" +author = "josh_thompson" +cover = "" +pub_date = "2023-03-10" +publish = true +# Whether to publish the artice or not +featured = true +# When artices are reposted from the original source, +# set a canonical property to help prevent duplicate content issues for search enginges diff --git a/your-zine-site/zine.toml b/your-zine-site/zine.toml new file mode 100644 index 0000000..e2a17da --- /dev/null +++ b/your-zine-site/zine.toml @@ -0,0 +1,8 @@ + +[site] +url = "http://localhost" +name = "your-zine-site" +description = "" + +[authors] +josh_thompson = { name = "Josh_Thompson" } \ No newline at end of file diff --git a/zine.toml b/zine.toml new file mode 100644 index 0000000..e7e6a25 --- /dev/null +++ b/zine.toml @@ -0,0 +1,19 @@ + +[site] +url = "http://localhost" +name = "My Zine Site" +description = "" + +# The menu tabs (optional) +menu = [ + { name = "About", url="/about" }, + { name = "Blog", url = "/blog" }, +] + +[authors] +josh_thompson = { name = "Josh_Thompson" } + +[theme] +# the primary color +primary_color = "#87CEEB" +secondary_color = "#FFC0CB" \ No newline at end of file From 27422d580718c59b245454e94319050c69c9a471 Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Mon, 10 Apr 2023 10:55:11 +0100 Subject: [PATCH 02/21] Adding dark mode class for jinja --- proposed plan.txt | 6 ++++++ src/engine.rs | 2 +- src/entity/zine.rs | 2 +- templates/base.jinja | 2 ++ templates/page.jinja | 2 +- 5 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 proposed plan.txt diff --git a/proposed plan.txt b/proposed plan.txt new file mode 100644 index 0000000..e06d741 --- /dev/null +++ b/proposed plan.txt @@ -0,0 +1,6 @@ +Adjust theme.rs so that +adding boolean for dark mode, +and then also a page colour picker for dark mode, +Doing this by changing root colours + +Add to base.jinja and all others to inherit it file so that the html actually changes diff --git a/src/engine.rs b/src/engine.rs index 60bcf28..f49ccd0 100644 --- a/src/engine.rs +++ b/src/engine.rs @@ -214,7 +214,7 @@ impl ZineEngine { pub fn build(&mut self, reload: bool) -> Result<()> { if reload { - self.zine = Zine::parse_from_toml(&self.source)?; + self.zine = Zine::parse_from_toml(&self.source)?; // Converting toml file into text } self.zine.parse(&self.source)?; diff --git a/src/entity/zine.rs b/src/entity/zine.rs index 2bbf914..2d53e70 100644 --- a/src/entity/zine.rs +++ b/src/entity/zine.rs @@ -62,7 +62,7 @@ impl Zine { /// Parse Zine instance from the root zine.toml file.li pub fn parse_from_toml>(source: P) -> Result { let source = source.as_ref().join(crate::ZINE_FILE); - let content = fs::read_to_string(&source) + let content = fs::read_to_string(&source) // Content holds information of toml file .with_context(|| format!("Failed to read `{}`", source.display()))?; Ok(toml::from_str::(&content).map_err(|err| { diff --git a/templates/base.jinja b/templates/base.jinja index c6cde01..e81bf91 100644 --- a/templates/base.jinja +++ b/templates/base.jinja @@ -19,6 +19,8 @@ --main-color: {{ theme.main_color }}; --link-color: {{ theme.link_color }}; --secondary-color: {{ theme.secondary_color }}; + --page-color: {{ theme.page_color }}; + {% Here we add page colour so that the white block (where articles are) becomes dark mode %} } diff --git a/templates/page.jinja b/templates/page.jinja index 478a2c9..a48ca90 100644 --- a/templates/page.jinja +++ b/templates/page.jinja @@ -1,6 +1,6 @@ {% extends "base.jinja" -%} {% block content -%} -
+
{% if site.edit_url -%} From 6fea43b564f86e8391e33dca2c3439e20d9c4994 Mon Sep 17 00:00:00 2001 From: John Bannerman Date: Mon, 10 Apr 2023 11:09:58 +0100 Subject: [PATCH 03/21] added support for page color picker --- src/entity/theme.rs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/entity/theme.rs b/src/entity/theme.rs index cf7ed54..80d8cab 100644 --- a/src/entity/theme.rs +++ b/src/entity/theme.rs @@ -20,6 +20,9 @@ pub struct Theme { // The background color. #[serde(default = "Theme::default_secondary_color")] pub secondary_color: String, + // The page color. + #[serde(default = "Theme::default_page_color")] + pub page_color: String, // The background image url. #[serde(default)] pub background_image: Option, @@ -41,6 +44,7 @@ impl Default for Theme { main_color: Self::default_main_color(), link_color: Self::default_link_color(), secondary_color: Self::default_secondary_color(), + page_color: Self::default_page_color(), background_image: None, head_template: None, footer_template: None, @@ -58,6 +62,7 @@ impl std::fmt::Debug for Theme { .field("main_color", &self.main_color) .field("link_color", &self.link_color) .field("secondary_color", &self.secondary_color) + .field("page_color", &self.page_color) .field("background_image", &self.background_image) .field("head_template", &self.head_template.is_some()) .field("footer_template", &self.footer_template.is_some()) @@ -76,6 +81,7 @@ impl Theme { const DEFAULT_MAIN_COLOR: &'static str = "#ffffff"; const DEFAULT_LINK_COLOR: &'static str = "#2563eb"; const DEFAULT_SECONDARY_COLOR: &'static str = "#eff3f7"; + const DEFAULT_PAGE_COLOR: &'static str = "#ffffff"; fn default_primary_color() -> String { Self::DEFAULT_PRIMARY_COLOR.to_string() @@ -92,6 +98,10 @@ impl Theme { fn default_secondary_color() -> String { Self::DEFAULT_SECONDARY_COLOR.to_string() } + + fn default_page_color() -> String { + Self::DEFAULT_PAGE_COLOR.to_string() + } } impl Entity for Theme { From 0e8f6496ab87b8fcc29caa1243f5f2249b796376 Mon Sep 17 00:00:00 2001 From: John Bannerman Date: Sun, 16 Apr 2023 18:47:49 +0100 Subject: [PATCH 04/21] added alternate dark mode default constants --- src/entity/theme.rs | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/src/entity/theme.rs b/src/entity/theme.rs index 80d8cab..14ceda8 100644 --- a/src/entity/theme.rs +++ b/src/entity/theme.rs @@ -8,6 +8,8 @@ use super::Entity; #[derive(Clone, Serialize, Deserialize)] #[serde(rename_all(deserialize = "snake_case"))] pub struct Theme { + //whether dark mode is enabled + pub dark_mode: Option, // The primary color. #[serde(default = "Theme::default_primary_color")] pub primary_color: String, @@ -40,6 +42,7 @@ pub struct Theme { impl Default for Theme { fn default() -> Self { Self { + dark_mode: false, primary_color: Self::default_primary_color(), main_color: Self::default_main_color(), link_color: Self::default_link_color(), @@ -58,6 +61,7 @@ impl Default for Theme { impl std::fmt::Debug for Theme { fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result { f.debug_struct("Theme") + .field("dark_mode", &self.dark_mode) .field("primary_color", &self.primary_color) .field("main_color", &self.main_color) .field("link_color", &self.link_color) @@ -77,30 +81,36 @@ impl std::fmt::Debug for Theme { } impl Theme { - const DEFAULT_PRIMARY_COLOR: &'static str = "#2563eb"; - const DEFAULT_MAIN_COLOR: &'static str = "#ffffff"; - const DEFAULT_LINK_COLOR: &'static str = "#2563eb"; - const DEFAULT_SECONDARY_COLOR: &'static str = "#eff3f7"; - const DEFAULT_PAGE_COLOR: &'static str = "#ffffff"; + const DEFAULT_PRIMARY_COLOR_LIGHT: &'static str = "#2563eb"; + const DEFAULT_MAIN_COLOR_LIGHT: &'static str = "#ffffff"; + const DEFAULT_LINK_COLOR_LIGHT: &'static str = "#2563eb"; + const DEFAULT_SECONDARY_COLOR_LIGHT: &'static str = "#eff3f7"; + const DEFAULT_PAGE_COLOR_LIGHT: &'static str = "#ffffff"; + + const DEFAULT_PRIMARY_COLOR_DARK: &'static str = "#0d0d0d"; + const DEFAULT_MAIN_COLOR_DARK: &'static str = "#ffffff"; + const DEFAULT_LINK_COLOR_DARK: &'static str = "#2563eb"; + const DEFAULT_SECONDARY_COLOR_DARK: &'static str = "#303030"; + const DEFAULT_PAGE_COLOR_DARK: &'static str = "#505050"; fn default_primary_color() -> String { - Self::DEFAULT_PRIMARY_COLOR.to_string() + Self::DEFAULT_PRIMARY_COLOR_LIGHT.to_string() } fn default_main_color() -> String { - Self::DEFAULT_MAIN_COLOR.to_string() + Self::DEFAULT_MAIN_COLOR_LIGHT.to_string() } fn default_link_color() -> String { - Self::DEFAULT_LINK_COLOR.to_string() + Self::DEFAULT_LINK_COLOR_LIGHT.to_string() } fn default_secondary_color() -> String { - Self::DEFAULT_SECONDARY_COLOR.to_string() + Self::DEFAULT_SECONDARY_COLOR_LIGHT.to_string() } fn default_page_color() -> String { - Self::DEFAULT_PAGE_COLOR.to_string() + Self::DEFAULT_PAGE_COLOR_LIGHT.to_string() } } From 327e49f5e33c92a587a42623d9e3fd04c94aba4f Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Sun, 16 Apr 2023 18:56:43 +0100 Subject: [PATCH 05/21] dark mode boolean and page color in base.jinja --- templates/base.jinja | 2 +- zine.toml | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/base.jinja b/templates/base.jinja index e81bf91..ffa74ab 100644 --- a/templates/base.jinja +++ b/templates/base.jinja @@ -20,7 +20,7 @@ --link-color: {{ theme.link_color }}; --secondary-color: {{ theme.secondary_color }}; --page-color: {{ theme.page_color }}; - {% Here we add page colour so that the white block (where articles are) becomes dark mode %} + {% Here we add page colour so that the white block (where articles are) becomes dark mode -%} } diff --git a/zine.toml b/zine.toml index e7e6a25..45e02fc 100644 --- a/zine.toml +++ b/zine.toml @@ -14,6 +14,7 @@ menu = [ josh_thompson = { name = "Josh_Thompson" } [theme] +dark_mode = false # the primary color primary_color = "#87CEEB" secondary_color = "#FFC0CB" \ No newline at end of file From 8796a43be4f00219dc3e9fc4bd123f3b151adfb1 Mon Sep 17 00:00:00 2001 From: John Bannerman Date: Sun, 16 Apr 2023 19:00:39 +0100 Subject: [PATCH 06/21] added function to change page color on dark mode --- src/entity/theme.rs | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/entity/theme.rs b/src/entity/theme.rs index 22abd3f..e46fe8e 100644 --- a/src/entity/theme.rs +++ b/src/entity/theme.rs @@ -114,10 +114,20 @@ impl Theme { fn default_page_color() -> String { Self::DEFAULT_PAGE_COLOR_LIGHT.to_string() } + + pub fn change_defaults(&mut self) { + if self.dark_mode.unwrap_or(false) { + if self.page_color == default_page_color() { + self.page_color = Self::DEFAULT_PAGE_COLOR_DARK.to_string(); + } + } + } } impl Entity for Theme { fn parse(&mut self, source: &Path) -> Result<()> { + change_defaults(self); + if self.default_cover.is_none() { self.default_cover = Some(String::from("/static/zine-placeholder.svg")); } From dae900a489a0cb8e97cce7398aadc00a0b0fc17e Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Wed, 19 Apr 2023 15:09:31 +0100 Subject: [PATCH 07/21] Working on dark mode. --- Cargo.toml | 4 ++-- src/entity/theme.rs | 8 ++++---- tailwind.config.js | 1 + templates/base.jinja | 3 ++- templates/index.jinja | 1 + zine.toml | 2 +- 6 files changed, 11 insertions(+), 8 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index 1d895f2..e61fa05 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -3,8 +3,8 @@ name = "zine" version = "0.13.0" description = "A simple and opinionated tool to build your own magazine." authors = ["Folyd"] -homepage = "https://github.com/zineland/zine" -repository = "https://github.com/zineland/zine" +homepage = "https://github.com/JOSHMT0744/zine.git" # This here will need to be changed back to original repo rather than fork +repository = "https://github.com/JOSHMT0744/zine.git" # And here license = "Apache-2.0" edition = "2021" exclude = ["tailwind.config.js", "tailwindcss.html", "zine-entry.css"] diff --git a/src/entity/theme.rs b/src/entity/theme.rs index e46fe8e..3c09e1d 100644 --- a/src/entity/theme.rs +++ b/src/entity/theme.rs @@ -8,7 +8,7 @@ use super::Entity; #[derive(Clone, Serialize, Deserialize)] #[serde(rename_all(deserialize = "snake_case"))] pub struct Theme { - //whether dark mode is enabled + //whether dark mode is enabled (boolean) pub dark_mode: Option, // The primary color. #[serde(default = "Theme::default_primary_color")] @@ -44,7 +44,7 @@ pub struct Theme { impl Default for Theme { fn default() -> Self { Self { - dark_mode: false, + dark_mode: Some(false), primary_color: Self::default_primary_color(), main_color: Self::default_main_color(), link_color: Self::default_link_color(), @@ -117,7 +117,7 @@ impl Theme { pub fn change_defaults(&mut self) { if self.dark_mode.unwrap_or(false) { - if self.page_color == default_page_color() { + if self.page_color == Self::default_page_color() { self.page_color = Self::DEFAULT_PAGE_COLOR_DARK.to_string(); } } @@ -126,7 +126,7 @@ impl Theme { impl Entity for Theme { fn parse(&mut self, source: &Path) -> Result<()> { - change_defaults(self); + self.change_defaults(); // Change default colors if dark mode is enabled. if self.default_cover.is_none() { self.default_cover = Some(String::from("/static/zine-placeholder.svg")); diff --git a/tailwind.config.js b/tailwind.config.js index 4bc1826..f0e79bd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -16,6 +16,7 @@ module.exports = { main: 'var(--main-color)', secondary: 'var(--secondary-color)', link: 'var(--link-color)', + page: 'var(--page-color)' }, typography: { DEFAULT: { diff --git a/templates/base.jinja b/templates/base.jinja index ffa74ab..de5705b 100644 --- a/templates/base.jinja +++ b/templates/base.jinja @@ -20,7 +20,7 @@ --link-color: {{ theme.link_color }}; --secondary-color: {{ theme.secondary_color }}; --page-color: {{ theme.page_color }}; - {% Here we add page colour so that the white block (where articles are) becomes dark mode -%} + {# Here we add page colour so that the white block (where articles are) becomes dark mode #} } @@ -57,6 +57,7 @@ {% else -%}
+ Here {{ theme.page_color }} Zine - a simple and opinionated tool to build your own magazine.
diff --git a/templates/index.jinja b/templates/index.jinja index 3cee550..94a19d6 100644 --- a/templates/index.jinja +++ b/templates/index.jinja @@ -4,6 +4,7 @@ {% for issue in issues | reverse -%}
+ {# Here I need to change the bg-white attribute to change depending on dark mode selection #}
{{ macros::issue_diamond(title=issue.title, date=issue.pub_date) }} diff --git a/zine.toml b/zine.toml index 45e02fc..d047e9f 100644 --- a/zine.toml +++ b/zine.toml @@ -14,7 +14,7 @@ menu = [ josh_thompson = { name = "Josh_Thompson" } [theme] -dark_mode = false +dark_mode = true # the primary color primary_color = "#87CEEB" secondary_color = "#FFC0CB" \ No newline at end of file From 69e8109d8f0747de170b9c4b33c8b0be8c7b531a Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Wed, 19 Apr 2023 15:24:34 +0100 Subject: [PATCH 08/21] Changing page colour if dark theme is true --- src/entity/theme.rs | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/entity/theme.rs b/src/entity/theme.rs index 3c09e1d..eacfb41 100644 --- a/src/entity/theme.rs +++ b/src/entity/theme.rs @@ -89,10 +89,10 @@ impl Theme { const DEFAULT_SECONDARY_COLOR_LIGHT: &'static str = "#eff3f7"; const DEFAULT_PAGE_COLOR_LIGHT: &'static str = "#ffffff"; - const DEFAULT_PRIMARY_COLOR_DARK: &'static str = "#0d0d0d"; - const DEFAULT_MAIN_COLOR_DARK: &'static str = "#ffffff"; - const DEFAULT_LINK_COLOR_DARK: &'static str = "#2563eb"; - const DEFAULT_SECONDARY_COLOR_DARK: &'static str = "#303030"; + // const DEFAULT_PRIMARY_COLOR_DARK: &'static str = "#0d0d0d"; + // const DEFAULT_MAIN_COLOR_DARK: &'static str = "#ffffff"; + // const DEFAULT_LINK_COLOR_DARK: &'static str = "#2563eb"; + // const DEFAULT_SECONDARY_COLOR_DARK: &'static str = "#303030"; const DEFAULT_PAGE_COLOR_DARK: &'static str = "#505050"; fn default_primary_color() -> String { @@ -115,10 +115,15 @@ impl Theme { Self::DEFAULT_PAGE_COLOR_LIGHT.to_string() } + fn default_page_color_dark() -> String { + Self::DEFAULT_PAGE_COLOR_DARK.to_string() + } + pub fn change_defaults(&mut self) { + println!("dark_mode: {:?}", self.dark_mode); // <-- Testing if self.dark_mode.unwrap_or(false) { if self.page_color == Self::default_page_color() { - self.page_color = Self::DEFAULT_PAGE_COLOR_DARK.to_string(); + self.page_color = Self::default_page_color_dark(); // Changing page colour, if dark theme is enabled } } } From 69ceb755116aef8651308fea942091d17ec17135 Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Wed, 19 Apr 2023 15:32:35 +0100 Subject: [PATCH 09/21] Added bg-page attribute, with page-colour variable --- static/zine.css | 2 +- templates/index.jinja | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/static/zine.css b/static/zine.css index 0829854..003ff2d 100644 --- a/static/zine.css +++ b/static/zine.css @@ -1 +1 @@ -/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-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;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose [class~=lead]{color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-bottom:1.2em;margin-top:1.2em}.prose a{color:var(--link-color);font-weight:400;text-decoration:none}.prose strong{color:var(--tw-prose-bold);font-weight:500}.prose a strong{color:inherit}.prose blockquote strong{color:#6c6d6d}.prose thead th strong{color:inherit}.prose ol{list-style-type:decimal;margin-bottom:1.25em;margin-top:1.25em;padding-left:1rem}.prose ol[type=A]{list-style-type:upper-alpha}.prose ol[type=a]{list-style-type:lower-alpha}.prose ol[type=A s]{list-style-type:upper-alpha}.prose ol[type=a s]{list-style-type:lower-alpha}.prose ol[type=I]{list-style-type:upper-roman}.prose ol[type=i]{list-style-type:lower-roman}.prose ol[type=I s]{list-style-type:upper-roman}.prose ol[type=i s]{list-style-type:lower-roman}.prose ol[type="1"]{list-style-type:decimal}.prose ul{list-style-type:disc;margin-bottom:1.25em;margin-top:1.25em;padding-left:1rem}.prose ol>li::marker{color:var(--primary-color);font-weight:400}.prose ul>li::marker{color:var(--primary-color)}.prose hr{border-color:var(--tw-prose-hr);border-top-width:1px;margin-bottom:3em;margin-top:3em}.prose blockquote{border-left-color:var(--primary-color);border-left-width:2px;color:#7c8088;font-style:normal;font-weight:400;margin-bottom:1.6em;margin-top:1.6em;padding-left:.8rem;quotes:none}.prose blockquote p:first-of-type:before{content:open-quote}.prose blockquote p:last-of-type:after{content:close-quote}.prose h1{color:var(--tw-prose-headings);font-size:2.25em;font-weight:800;line-height:1.1111111;margin-bottom:.8888889em;margin-top:0}.prose h1 strong{color:inherit;font-weight:900}.prose h2{color:var(--tw-prose-headings);font-size:1.5em;font-weight:700;line-height:1.3333333;margin-bottom:1em;margin-top:2em}.prose h2 strong{color:inherit;font-weight:800}.prose h3{color:var(--tw-prose-headings);font-size:1.25em;font-weight:600;line-height:1.6;margin-bottom:.6em;margin-top:1.6em}.prose h3 strong{color:inherit;font-weight:700}.prose h4{color:var(--tw-prose-headings);font-weight:600;line-height:1.5;margin-bottom:.5em;margin-top:1.5em}.prose h4 strong{color:inherit;font-weight:700}.prose img{margin-bottom:2em;margin-top:2em}.prose figure>*{margin-bottom:0;margin-top:0}.prose figcaption{color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{background-color:#eff1f3;border-radius:6px;color:var(--tw-prose-code);font-size:85%;font-weight:400;margin:0;padding:.2em .4em;white-space:break-spaces}.prose code:after,.prose code:before{content:none}.prose a code,.prose h1 code{color:inherit}.prose h2 code{color:inherit;font-size:.875em}.prose h3 code{color:inherit;font-size:.9em}.prose blockquote code,.prose h4 code,.prose thead th code{color:inherit}.prose pre{background-color:var(--tw-prose-pre-bg);border-radius:.375rem;color:var(--tw-prose-pre-code);font-size:.875em;font-weight:400;line-height:1.7142857;margin-bottom:1.7142857em;margin-top:1.7142857em;overflow-x:auto;padding:.8571429em 1.1428571em}.prose pre code{background-color:initial;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0}.prose pre code:after,.prose pre code:before{content:none}.prose table{font-size:.875em;line-height:1.7142857;margin-bottom:2em;margin-top:2em;table-layout:auto;text-align:left;width:100%}.prose thead{border-bottom-color:var(--tw-prose-th-borders);border-bottom-width:1px}.prose thead th{color:var(--tw-prose-headings);font-weight:600;padding-bottom:.5714286em;padding-left:.5714286em;padding-right:.5714286em;vertical-align:bottom}.prose tbody tr{border-bottom-color:var(--tw-prose-td-borders);border-bottom-width:1px}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:initial}.prose tfoot{border-top-color:var(--tw-prose-th-borders);border-top-width:1px}.prose tfoot td{vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose p{margin-bottom:1.25em;margin-top:1.25em}.prose figure,.prose video{margin-bottom:2em;margin-top:2em}.prose li{margin-bottom:.5em;margin-top:.5em}.prose ol>li,.prose ul>li{padding-left:.375em}.prose>ul>li p{margin-bottom:.75em;margin-top:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-bottom:.75em;margin-top:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td,.prose tfoot td{padding:.5714286em}.prose tbody td:first-child,.prose tfoot td:first-child{padding-left:0}.prose tbody td:last-child,.prose tfoot td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose a:hover{text-decoration:underline}.prose-slate{--tw-prose-body:#64748b;--tw-prose-headings:#475569;--tw-prose-lead:#94a3b8;--tw-prose-links:#64748b;--tw-prose-bold:#475569;--tw-prose-counters:#64748b;--tw-prose-bullets:#cbd5e1;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#94a3b8;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#64748b;--tw-prose-code:#0f172a;--tw-prose-pre-code:#e2e8f0;--tw-prose-pre-bg:#1e293b;--tw-prose-th-borders:#cbd5e1;--tw-prose-td-borders:#e2e8f0;--tw-prose-invert-body:#cbd5e1;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#94a3b8;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#94a3b8;--tw-prose-invert-bullets:#475569;--tw-prose-invert-hr:#334155;--tw-prose-invert-quotes:#f1f5f9;--tw-prose-invert-quote-borders:#334155;--tw-prose-invert-captions:#94a3b8;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#cbd5e1;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#475569;--tw-prose-invert-td-borders:#334155}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-0{bottom:0}.right-0{right:0}.right-10{right:2.5rem}.right-4{right:1rem}.right-5{right:1.25rem}.right-8{right:2rem}.top-32{top:8rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-8{top:2rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[99999\]{z-index:99999}.\!m-0{margin:0!important}.m-3{margin:.75rem}.m-4{margin:1rem}.m-8{margin:2rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-12{margin-bottom:3rem;margin-top:3rem}.my-16{margin-bottom:4rem;margin-top:4rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.my-8{margin-bottom:2rem;margin-top:2rem}.\!mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-28{height:7rem}.h-32{height:8rem}.h-4{height:1rem}.h-44{height:11rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-52{max-height:13rem}.max-h-96{max-height:24rem}.min-h-\[500px\]{min-height:500px}.w-10{width:2.5rem}.w-16{width:4rem}.w-28{width:7rem}.w-4{width:1rem}.w-44{width:11rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-96{width:24rem}.w-full{width:100%}.max-w-prose{max-width:65ch}.max-w-screen-sm{max-width:640px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.grow{flex-grow:1}.-translate-y-32{--tw-translate-y:-8rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.scroll-mt-20{scroll-margin-top:5rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-0{border-width:0}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-primary{border-color:var(--primary-color)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-\[\#f8fafc\]{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-main{background-color:var(--main-color)}.bg-primary{background-color:var(--primary-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.object-cover{-o-object-fit:cover;object-fit:cover}.\!p-1{padding:.25rem!important}.p-16{padding:4rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-12{padding-left:3rem;padding-right:3rem}.px-14{padding-left:3.5rem;padding-right:3.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-10{padding-bottom:2.5rem}.pb-4{padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-10{padding-top:2.5rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.capitalize{text-transform:capitalize}.leading-10{line-height:2.5rem}.leading-loose{line-height:2}.leading-tight{line-height:1.25}.\!text-gray-500{--tw-text-opacity:1!important;color:rgb(107 114 128/var(--tw-text-opacity))!important}.\!text-main{color:var(--main-color)!important}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-link{color:var(--link-color)}.text-main{color:var(--main-color)}.text-primary{color:var(--primary-color)}.text-secondary{color:var(--secondary-color)}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.decoration-primary{text-decoration-color:var(--primary-color)}.decoration-8{text-decoration-thickness:8px}.underline-offset-1{text-underline-offset:1px}.opacity-0{opacity:0}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-slate-700\/10{--tw-shadow-color:#3341551a;--tw-shadow:var(--tw-shadow-colored)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-gray-900\/5{--tw-ring-color:#1118270d}.ring-slate-900\/5{--tw-ring-color:#0f172a0d}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.author-code{--tw-text-opacity:1!important;border-radius:.25rem;color:rgb(107 114 128/var(--tw-text-opacity))!important;display:inline;margin:0 2px;padding:2px}.author-code:hover{--tw-bg-opacity:1!important;background-color:rgb(229 231 235/var(--tw-bg-opacity))!important;text-decoration-line:none!important}.author-code>img{border-radius:9999px;display:inline;height:1rem;margin:0 0 0 2px!important;-o-object-fit:cover;object-fit:cover;vertical-align:middle;width:1rem}.author-code>span{vertical-align:middle}.url-preview{background-color:#f5f6f7;outline:1px solid #dee0e3;padding:1rem 1.25rem}.url-preview>div:first-child{font-size:1rem;font-weight:500}.url-preview>div:nth-child(2){color:#6b7078;font-size:.9rem;margin:.5rem 0}.url-preview>a{display:block;font-size:.8rem;overflow:hidden}.url-preview>img{margin-bottom:0;margin-top:1rem}.url-preview:hover{cursor:pointer;outline:2px solid #dee0e3}.prose p>img:hover{cursor:zoom-out;outline:2px solid #dee0e3}.callout{border:1px solid #0000;border-radius:4px;margin:20px 0;padding:0 20px}.inline-link{--tw-text-opacity:1!important;border-radius:.25rem;color:rgb(0 0 0/var(--tw-text-opacity))!important;display:inline;font-weight:700!important;padding:2px;text-decoration-color:var(--primary-color)!important;text-decoration-line:underline!important}.inline-link:hover{color:var(--link-color)!important}.zine-page>h1{display:flex;justify-content:center}.toc-active{background-color:var(--primary-color)!important;color:var(--main-color)!important}.first-letter\:text-4xl:first-letter{font-size:2.25rem;line-height:2.5rem}.first-letter\:font-bold:first-letter{font-weight:700}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:-inset-1:before{content:var(--tw-content);inset:-.25rem}.before\:block:before{content:var(--tw-content);display:block}.before\:-skew-x-6:before{--tw-skew-x:-6deg}.before\:-skew-x-6:before,.before\:-skew-y-3:before{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:-skew-y-3:before{--tw-skew-y:-3deg}.before\:bg-main:before{background-color:var(--main-color);content:var(--tw-content)}.before\:bg-primary:before{background-color:var(--primary-color);content:var(--tw-content)}.hover\:border:hover{border-width:1px}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:\!no-underline:hover{text-decoration-line:none!important}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-slate-900\/10:hover{--tw-ring-color:#0f172a1a}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:m-8{margin:2rem}.sm\:mx-2{margin-left:.5rem;margin-right:.5rem}.sm\:my-6{margin-bottom:1.5rem;margin-top:1.5rem}.sm\:ml-8{margin-left:2rem}.sm\:h-28{height:7rem}.sm\:w-40{width:10rem}.sm\:max-w-md{max-width:28rem}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-evenly{justify-content:space-evenly}.sm\:p-8{padding:2rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:pb-16{padding-bottom:4rem}.sm\:pl-4{padding-left:1rem}.sm\:pl-8{padding-left:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.sm\:hover\:scale-105:hover,.sm\:hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}}@media (min-width:768px){.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:ml-2{margin-left:.5rem}.md\:h-36{height:9rem}.md\:max-h-56{max-height:14rem}.md\:max-h-72{max-height:18rem}.md\:max-w-screen-lg{max-width:1024px}.md\:flex-row{flex-direction:row}.md\:justify-between{justify-content:space-between}.md\:bg-transparent{background-color:initial}.md\:p-10{padding:2.5rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:pb-14{padding-bottom:3.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.md\:opacity-10{opacity:.1}.md\:hover\:opacity-50:hover{opacity:.5}}@media (min-width:1024px){.lg\:top-36{top:9rem}.lg\:h-44{height:11rem}.lg\:-translate-y-36{--tw-translate-y:-9rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1280px){.xl\:top-44{top:11rem}.xl\:h-48{height:12rem}.xl\:-translate-y-44{--tw-translate-y:-11rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:1536px){.\32xl\:top-56{top:14rem}.\32xl\:h-56{height:14rem}.\32xl\:-translate-y-56{--tw-translate-y:-14rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}} \ No newline at end of file +/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-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;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.prose{color:var(--tw-prose-body);max-width:65ch}.prose [class~=lead]{color:var(--tw-prose-lead);font-size:1.25em;line-height:1.6;margin-bottom:1.2em;margin-top:1.2em}.prose a{color:var(--link-color);font-weight:400;text-decoration:none}.prose strong{color:var(--tw-prose-bold);font-weight:500}.prose a strong{color:inherit}.prose blockquote strong{color:#6c6d6d}.prose thead th strong{color:inherit}.prose ol{list-style-type:decimal;margin-bottom:1.25em;margin-top:1.25em;padding-left:1rem}.prose ol[type=A]{list-style-type:upper-alpha}.prose ol[type=a]{list-style-type:lower-alpha}.prose ol[type=A s]{list-style-type:upper-alpha}.prose ol[type=a s]{list-style-type:lower-alpha}.prose ol[type=I]{list-style-type:upper-roman}.prose ol[type=i]{list-style-type:lower-roman}.prose ol[type=I s]{list-style-type:upper-roman}.prose ol[type=i s]{list-style-type:lower-roman}.prose ol[type="1"]{list-style-type:decimal}.prose ul{list-style-type:disc;margin-bottom:1.25em;margin-top:1.25em;padding-left:1rem}.prose ol>li::marker{color:var(--primary-color);font-weight:400}.prose ul>li::marker{color:var(--primary-color)}.prose hr{border-color:var(--tw-prose-hr);border-top-width:1px;margin-bottom:3em;margin-top:3em}.prose blockquote{border-left-color:var(--primary-color);border-left-width:2px;color:#7c8088;font-style:normal;font-weight:400;margin-bottom:1.6em;margin-top:1.6em;padding-left:.8rem;quotes:none}.prose blockquote p:first-of-type:before{content:open-quote}.prose blockquote p:last-of-type:after{content:close-quote}.prose h1{color:var(--tw-prose-headings);font-size:2.25em;font-weight:800;line-height:1.1111111;margin-bottom:.8888889em;margin-top:0}.prose h1 strong{color:inherit;font-weight:900}.prose h2{color:var(--tw-prose-headings);font-size:1.5em;font-weight:700;line-height:1.3333333;margin-bottom:1em;margin-top:2em}.prose h2 strong{color:inherit;font-weight:800}.prose h3{color:var(--tw-prose-headings);font-size:1.25em;font-weight:600;line-height:1.6;margin-bottom:.6em;margin-top:1.6em}.prose h3 strong{color:inherit;font-weight:700}.prose h4{color:var(--tw-prose-headings);font-weight:600;line-height:1.5;margin-bottom:.5em;margin-top:1.5em}.prose h4 strong{color:inherit;font-weight:700}.prose img{margin-bottom:2em;margin-top:2em}.prose figure>*{margin-bottom:0;margin-top:0}.prose figcaption{color:var(--tw-prose-captions);font-size:.875em;line-height:1.4285714;margin-top:.8571429em}.prose code{background-color:#eff1f3;border-radius:6px;color:var(--tw-prose-code);font-size:85%;font-weight:400;margin:0;padding:.2em .4em;white-space:break-spaces}.prose code:after,.prose code:before{content:none}.prose a code,.prose h1 code{color:inherit}.prose h2 code{color:inherit;font-size:.875em}.prose h3 code{color:inherit;font-size:.9em}.prose blockquote code,.prose h4 code,.prose thead th code{color:inherit}.prose pre{background-color:var(--tw-prose-pre-bg);border-radius:.375rem;color:var(--tw-prose-pre-code);font-size:.875em;font-weight:400;line-height:1.7142857;margin-bottom:1.7142857em;margin-top:1.7142857em;overflow-x:auto;padding:.8571429em 1.1428571em}.prose pre code{background-color:initial;border-radius:0;border-width:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;padding:0}.prose pre code:after,.prose pre code:before{content:none}.prose table{font-size:.875em;line-height:1.7142857;margin-bottom:2em;margin-top:2em;table-layout:auto;text-align:left;width:100%}.prose thead{border-bottom-color:var(--tw-prose-th-borders);border-bottom-width:1px}.prose thead th{color:var(--tw-prose-headings);font-weight:600;padding-bottom:.5714286em;padding-left:.5714286em;padding-right:.5714286em;vertical-align:bottom}.prose tbody tr{border-bottom-color:var(--tw-prose-td-borders);border-bottom-width:1px}.prose tbody tr:last-child{border-bottom-width:0}.prose tbody td{vertical-align:initial}.prose tfoot{border-top-color:var(--tw-prose-th-borders);border-top-width:1px}.prose tfoot td{vertical-align:top}.prose{--tw-prose-body:#374151;--tw-prose-headings:#111827;--tw-prose-lead:#4b5563;--tw-prose-links:#111827;--tw-prose-bold:#111827;--tw-prose-counters:#6b7280;--tw-prose-bullets:#d1d5db;--tw-prose-hr:#e5e7eb;--tw-prose-quotes:#111827;--tw-prose-quote-borders:#e5e7eb;--tw-prose-captions:#6b7280;--tw-prose-code:#111827;--tw-prose-pre-code:#e5e7eb;--tw-prose-pre-bg:#1f2937;--tw-prose-th-borders:#d1d5db;--tw-prose-td-borders:#e5e7eb;--tw-prose-invert-body:#d1d5db;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#9ca3af;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#9ca3af;--tw-prose-invert-bullets:#4b5563;--tw-prose-invert-hr:#374151;--tw-prose-invert-quotes:#f3f4f6;--tw-prose-invert-quote-borders:#374151;--tw-prose-invert-captions:#9ca3af;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#d1d5db;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#4b5563;--tw-prose-invert-td-borders:#374151;font-size:1rem;line-height:1.75}.prose p{margin-bottom:1.25em;margin-top:1.25em}.prose figure,.prose video{margin-bottom:2em;margin-top:2em}.prose li{margin-bottom:.5em;margin-top:.5em}.prose ol>li,.prose ul>li{padding-left:.375em}.prose>ul>li p{margin-bottom:.75em;margin-top:.75em}.prose>ul>li>:first-child{margin-top:1.25em}.prose>ul>li>:last-child{margin-bottom:1.25em}.prose>ol>li>:first-child{margin-top:1.25em}.prose>ol>li>:last-child{margin-bottom:1.25em}.prose ol ol,.prose ol ul,.prose ul ol,.prose ul ul{margin-bottom:.75em;margin-top:.75em}.prose h2+*,.prose h3+*,.prose h4+*,.prose hr+*{margin-top:0}.prose thead th:first-child{padding-left:0}.prose thead th:last-child{padding-right:0}.prose tbody td,.prose tfoot td{padding:.5714286em}.prose tbody td:first-child,.prose tfoot td:first-child{padding-left:0}.prose tbody td:last-child,.prose tfoot td:last-child{padding-right:0}.prose>:first-child{margin-top:0}.prose>:last-child{margin-bottom:0}.prose a:hover{text-decoration:underline}.prose-slate{--tw-prose-body:#64748b;--tw-prose-headings:#475569;--tw-prose-lead:#94a3b8;--tw-prose-links:#64748b;--tw-prose-bold:#475569;--tw-prose-counters:#64748b;--tw-prose-bullets:#cbd5e1;--tw-prose-hr:#e2e8f0;--tw-prose-quotes:#94a3b8;--tw-prose-quote-borders:#e2e8f0;--tw-prose-captions:#64748b;--tw-prose-code:#0f172a;--tw-prose-pre-code:#e2e8f0;--tw-prose-pre-bg:#1e293b;--tw-prose-th-borders:#cbd5e1;--tw-prose-td-borders:#e2e8f0;--tw-prose-invert-body:#cbd5e1;--tw-prose-invert-headings:#fff;--tw-prose-invert-lead:#94a3b8;--tw-prose-invert-links:#fff;--tw-prose-invert-bold:#fff;--tw-prose-invert-counters:#94a3b8;--tw-prose-invert-bullets:#475569;--tw-prose-invert-hr:#334155;--tw-prose-invert-quotes:#f1f5f9;--tw-prose-invert-quote-borders:#334155;--tw-prose-invert-captions:#94a3b8;--tw-prose-invert-code:#fff;--tw-prose-invert-pre-code:#cbd5e1;--tw-prose-invert-pre-bg:#00000080;--tw-prose-invert-th-borders:#475569;--tw-prose-invert-td-borders:#334155}.static{position:static}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.bottom-0{bottom:0}.right-0{right:0}.right-10{right:2.5rem}.right-4{right:1rem}.right-5{right:1.25rem}.right-8{right:2rem}.top-32{top:8rem}.top-4{top:1rem}.top-5{top:1.25rem}.top-8{top:2rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-\[99999\]{z-index:99999}.\!m-0{margin:0!important}.m-3{margin:.75rem}.m-4{margin:1rem}.m-8{margin:2rem}.mx-2{margin-left:.5rem;margin-right:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.mx-auto{margin-left:auto;margin-right:auto}.my-1{margin-bottom:.25rem;margin-top:.25rem}.my-12{margin-bottom:3rem;margin-top:3rem}.my-16{margin-bottom:4rem;margin-top:4rem}.my-2{margin-bottom:.5rem;margin-top:.5rem}.my-4{margin-bottom:1rem;margin-top:1rem}.my-6{margin-bottom:1.5rem;margin-top:1.5rem}.my-8{margin-bottom:2rem;margin-top:2rem}.\!mr-2{margin-right:.5rem!important}.mb-2{margin-bottom:.5rem}.mb-8{margin-bottom:2rem}.ml-1{margin-left:.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.line-clamp-2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-10{height:2.5rem}.h-16{height:4rem}.h-28{height:7rem}.h-32{height:8rem}.h-4{height:1rem}.h-44{height:11rem}.h-52{height:13rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-full{height:100%}.max-h-52{max-height:13rem}.max-h-96{max-height:24rem}.min-h-\[500px\]{min-height:500px}.w-10{width:2.5rem}.w-16{width:4rem}.w-28{width:7rem}.w-4{width:1rem}.w-44{width:11rem}.w-6{width:1.5rem}.w-60{width:15rem}.w-7{width:1.75rem}.w-8{width:2rem}.w-96{width:24rem}.w-full{width:100%}.max-w-prose{max-width:65ch}.max-w-screen-sm{max-width:640px}.flex-1{flex:1 1 0%}.flex-none{flex:none}.grow{flex-grow:1}.-translate-y-32{--tw-translate-y:-8rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.scroll-mt-20{scroll-margin-top:5rem}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-t{border-top-left-radius:.25rem;border-top-right-radius:.25rem}.border{border-width:1px}.border-0{border-width:0}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-dashed{border-style:dashed}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity))}.border-primary{border-color:var(--primary-color)}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225/var(--tw-border-opacity))}.bg-\[\#f8fafc\]{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity))}.bg-main{background-color:var(--main-color)}.bg-primary{background-color:var(--primary-color)}.bg-secondary{background-color:var(--secondary-color)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.bg-page{--tw-bg-opacity:1;background-color:var(--page-color)}.object-cover{-o-object-fit:cover;object-fit:cover}.\!p-1{padding:.25rem!important}.p-16{padding:4rem}.p-2{padding:.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-12{padding-left:3rem;padding-right:3rem}.px-14{padding-left:3.5rem;padding-right:3.5rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-6{padding-bottom:1.5rem;padding-top:1.5rem}.py-8{padding-bottom:2rem;padding-top:2rem}.pb-10{padding-bottom:2.5rem}.pb-4{padding-bottom:1rem}.pl-2{padding-left:.5rem}.pl-4{padding-left:1rem}.pl-6{padding-left:1.5rem}.pt-10{padding-top:2.5rem}.pt-6{padding-top:1.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.capitalize{text-transform:capitalize}.leading-10{line-height:2.5rem}.leading-loose{line-height:2}.leading-tight{line-height:1.25}.\!text-gray-500{--tw-text-opacity:1!important;color:rgb(107 114 128/var(--tw-text-opacity))!important}.\!text-main{color:var(--main-color)!important}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity))}.text-link{color:var(--link-color)}.text-main{color:var(--main-color)}.text-primary{color:var(--primary-color)}.text-secondary{color:var(--secondary-color)}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184/var(--tw-text-opacity))}.text-slate-700{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.decoration-primary{text-decoration-color:var(--primary-color)}.decoration-8{text-decoration-thickness:8px}.underline-offset-1{text-underline-offset:1px}.opacity-0{opacity:0}.shadow-sm{--tw-shadow:0 1px 2px 0 #0000000d;--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.shadow-slate-700\/10{--tw-shadow-color:#3341551a;--tw-shadow:var(--tw-shadow-colored)}.ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-gray-900\/5{--tw-ring-color:#1118270d}.ring-slate-900\/5{--tw-ring-color:#0f172a0d}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-500{transition-duration:.5s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.author-code{--tw-text-opacity:1!important;border-radius:.25rem;color:rgb(107 114 128/var(--tw-text-opacity))!important;display:inline;margin:0 2px;padding:2px}.author-code:hover{--tw-bg-opacity:1!important;background-color:rgb(229 231 235/var(--tw-bg-opacity))!important;text-decoration-line:none!important}.author-code>img{border-radius:9999px;display:inline;height:1rem;margin:0 0 0 2px!important;-o-object-fit:cover;object-fit:cover;vertical-align:middle;width:1rem}.author-code>span{vertical-align:middle}.url-preview{background-color:#f5f6f7;outline:1px solid #dee0e3;padding:1rem 1.25rem}.url-preview>div:first-child{font-size:1rem;font-weight:500}.url-preview>div:nth-child(2){color:#6b7078;font-size:.9rem;margin:.5rem 0}.url-preview>a{display:block;font-size:.8rem;overflow:hidden}.url-preview>img{margin-bottom:0;margin-top:1rem}.url-preview:hover{cursor:pointer;outline:2px solid #dee0e3}.prose p>img:hover{cursor:zoom-out;outline:2px solid #dee0e3}.callout{border:1px solid #0000;border-radius:4px;margin:20px 0;padding:0 20px}.inline-link{--tw-text-opacity:1!important;border-radius:.25rem;color:rgb(0 0 0/var(--tw-text-opacity))!important;display:inline;font-weight:700!important;padding:2px;text-decoration-color:var(--primary-color)!important;text-decoration-line:underline!important}.inline-link:hover{color:var(--link-color)!important}.zine-page>h1{display:flex;justify-content:center}.toc-active{background-color:var(--primary-color)!important;color:var(--main-color)!important}.first-letter\:text-4xl:first-letter{font-size:2.25rem;line-height:2.5rem}.first-letter\:font-bold:first-letter{font-weight:700}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:-inset-1:before{content:var(--tw-content);inset:-.25rem}.before\:block:before{content:var(--tw-content);display:block}.before\:-skew-x-6:before{--tw-skew-x:-6deg}.before\:-skew-x-6:before,.before\:-skew-y-3:before{content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:-skew-y-3:before{--tw-skew-y:-3deg}.before\:bg-main:before{background-color:var(--main-color);content:var(--tw-content)}.before\:bg-primary:before{background-color:var(--primary-color);content:var(--tw-content)}.hover\:border:hover{border-width:1px}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.hover\:bg-gray-200:hover{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity))}.hover\:text-slate-700:hover{--tw-text-opacity:1;color:rgb(51 65 85/var(--tw-text-opacity))}.hover\:underline:hover{text-decoration-line:underline}.hover\:\!no-underline:hover{text-decoration-line:none!important}.hover\:shadow:hover{--tw-shadow:0 1px 3px 0 #0000001a,0 1px 2px -1px #0000001a;--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:ring-slate-900\/10:hover{--tw-ring-color:#0f172a1a}.group:hover .group-hover\:underline{text-decoration-line:underline}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width:640px){.sm\:m-8{margin:2rem}.sm\:mx-2{margin-left:.5rem;margin-right:.5rem}.sm\:my-6{margin-bottom:1.5rem;margin-top:1.5rem}.sm\:ml-8{margin-left:2rem}.sm\:h-28{height:7rem}.sm\:w-40{width:10rem}.sm\:max-w-md{max-width:28rem}.sm\:flex-row{flex-direction:row}.sm\:items-center{align-items:center}.sm\:justify-evenly{justify-content:space-evenly}.sm\:p-8{padding:2rem}.sm\:px-8{padding-left:2rem;padding-right:2rem}.sm\:pb-16{padding-bottom:4rem}.sm\:pl-4{padding-left:1rem}.sm\:pl-8{padding-left:2rem}.sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}.sm\:text-lg{font-size:1.125rem;line-height:1.75rem}.sm\:hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.sm\:hover\:scale-105:hover,.sm\:hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.sm\:hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}}@media (min-width:768px){.md\:mx-8{margin-left:2rem;margin-right:2rem}.md\:ml-2{margin-left:.5rem}.md\:h-36{height:9rem}.md\:max-h-56{max-height:14rem}.md\:max-h-72{max-height:18rem}.md\:max-w-screen-lg{max-width:1024px}.md\:flex-row{flex-direction:row}.md\:justify-between{justify-content:space-between}.md\:bg-transparent{background-color:initial}.md\:p-10{padding:2.5rem}.md\:p-8{padding:2rem}.md\:px-8{padding-left:2rem;padding-right:2rem}.md\:pb-14{padding-bottom:3.5rem}.md\:text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:text-slate-100{--tw-text-opacity:1;color:rgb(241 245 249/var(--tw-text-opacity))}.md\:opacity-10{opacity:.1}.md\:hover\:opacity-50:hover{opacity:.5}}@media (min-width:1024px){.lg\:top-36{top:9rem}.lg\:h-44{height:11rem}.lg\:-translate-y-36{--tw-translate-y:-9rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.lg\:text-5xl{font-size:3rem;line-height:1}}@media (min-width:1280px){.xl\:top-44{top:11rem}.xl\:h-48{height:12rem}.xl\:-translate-y-44{--tw-translate-y:-11rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:1536px){.\32xl\:top-56{top:14rem}.\32xl\:h-56{height:14rem}.\32xl\:-translate-y-56{--tw-translate-y:-14rem;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}} \ No newline at end of file diff --git a/templates/index.jinja b/templates/index.jinja index 94a19d6..68b919b 100644 --- a/templates/index.jinja +++ b/templates/index.jinja @@ -2,9 +2,9 @@ {% import "_macros.jinja" as macros -%} {% block content -%} {% for issue in issues | reverse -%} -
+
- {# Here I need to change the bg-white attribute to change depending on dark mode selection #} + {# Here I need to change the bg-white attribute to bg-page change depending on dark mode selection #}
{{ macros::issue_diamond(title=issue.title, date=issue.pub_date) }} From 7d0fbea2d359c813248a52ad0ce110d9508a3842 Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Wed, 19 Apr 2023 15:39:59 +0100 Subject: [PATCH 10/21] Added page-colour to 'build' --- zine.toml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zine.toml b/zine.toml index d047e9f..c944856 100644 --- a/zine.toml +++ b/zine.toml @@ -16,5 +16,5 @@ josh_thompson = { name = "Josh_Thompson" } [theme] dark_mode = true # the primary color -primary_color = "#87CEEB" +primary_color = "#FFC0CB" secondary_color = "#FFC0CB" \ No newline at end of file From a7205f5a0c6589e875efa83e9b9c123816dfa725 Mon Sep 17 00:00:00 2001 From: Josh Thompson Date: Wed, 19 Apr 2023 16:03:45 +0100 Subject: [PATCH 11/21] Changed all bg-white -> bg-page --- templates/article.jinja | 10 +++++----- templates/author-list.jinja | 2 +- templates/author.jinja | 2 +- templates/issue.jinja | 2 +- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/templates/article.jinja b/templates/article.jinja index 72952e3..3a013ed 100644 --- a/templates/article.jinja +++ b/templates/article.jinja @@ -1,9 +1,9 @@ {% extends "base.jinja" -%} {% import "_macros.jinja" as macros -%} {% block content -%} -
+
+ class="sticky z-10 py-4 top-32 lg:top-36 xl:top-44 2xl:top-56 bg-page border-dashed border-b border-slate-300">
{% if i18n -%}