From 83fdcac429804b4c5f7ddc5023e76eeacc173309 Mon Sep 17 00:00:00 2001 From: hyzen Date: Tue, 3 Mar 2026 15:27:18 +0530 Subject: [PATCH] Add: Theme switcher --- docs/404.html | 10 +- docs/blog/index.html | 10 +- docs/blog/what-is-education/index.html | 10 +- docs/categories/index.html | 10 +- docs/categories/philosophy/index.html | 10 +- docs/coming-soon/index.html | 10 +- docs/contact/index.html | 10 +- docs/css/custom.css | 372 +++++++++++++++---------- docs/index.html | 10 +- docs/login/index.html | 10 +- docs/services/file-share/index.html | 10 +- docs/services/index.html | 10 +- docs/services/xmpp-account/index.html | 10 +- docs/signup/index.html | 10 +- docs/tags/academics/index.html | 10 +- docs/tags/education/index.html | 10 +- docs/tags/index.html | 10 +- docs/tags/system/index.html | 10 +- layouts/_default/baseof.html | 6 + layouts/_partials/body/body-end.html | 25 +- layouts/_partials/head.html | 8 + layouts/baseof.html | 6 + layouts/coming-soon/baseof.html | 6 + layouts/login/baseof.html | 6 + layouts/services/baseof.html | 6 + layouts/signup/baseof.html | 6 + static/css/custom.css | 372 +++++++++++++++---------- 27 files changed, 637 insertions(+), 346 deletions(-) diff --git a/docs/404.html b/docs/404.html index 09e280c..aad5200 100644 --- a/docs/404.html +++ b/docs/404.html @@ -1,4 +1,8 @@ -404 Page not found | Freedoms4
Freedoms4 logo

Freedoms4

-
+404 Page not found | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

404

The page you visited was not found.

Return to the home page

\ No newline at end of file +Subscribe

404

The page you visited was not found.

Return to the home page

\ No newline at end of file diff --git a/docs/blog/index.html b/docs/blog/index.html index f03ca99..212fd3e 100644 --- a/docs/blog/index.html +++ b/docs/blog/index.html @@ -1,5 +1,9 @@ -Blogs | Freedoms4
Freedoms4 logo

Freedoms4

-
+Blogs | Freedoms4
Freedoms4 logo

Freedoms4

+
Subscribe

All Posts | Categories

What is Education?

What is Education? # Education simply means “learning”. It’s a natural process. -Ratio of components in Education: # 50% Knowledge/Understanding, 30% …

\ No newline at end of file +Ratio of components in Education: # 50% Knowledge/Understanding, 30% …

\ No newline at end of file diff --git a/docs/blog/what-is-education/index.html b/docs/blog/what-is-education/index.html index 38a7a9d..5524634 100644 --- a/docs/blog/what-is-education/index.html +++ b/docs/blog/what-is-education/index.html @@ -7,8 +7,12 @@ Education vs Academics: # Education and Academics are not the same thing. Academ Academics system has evolved with time and got worst. Let’s see what the system has become nowadays: # Wrong ratio of knowledge, skill, experience (knowledge takes about 90%). Generalised curriculum for all students. Extra bad: # Goals are only bound to exams/grades, degree or certifications (year 1088), then getting jobs. Unhealthy pressure and competition for students. Money game. Politics. Education as a concept/implementation/system is good. Academics is good only as a concept. It’s implementation and system is always the worst and corrupted.">
Freedoms4 logo

Freedoms4

-
+Academics system has evolved with time and got worst. Let’s see what the system has become nowadays: # Wrong ratio of knowledge, skill, experience (knowledge takes about 90%). Generalised curriculum for all students. Extra bad: # Goals are only bound to exams/grades, degree or certifications (year 1088), then getting jobs. Unhealthy pressure and competition for students. Money game. Politics. Education as a concept/implementation/system is good. Academics is good only as a concept. It’s implementation and system is always the worst and corrupted.">
Freedoms4 logo

Freedoms4

+
Subscribe

What is Education?


What is Education? #

Education simply means “learning”. It’s a natural process.

Ratio of components in Education: #

50% Knowledge/Understanding, 30% Skills, 20% Experience.

Education vs Academics: #

Education and Academics are not the same thing. Academics is Education based of a curriculum and an institution. Plato discovered the word while describing his school of philosophy.

Academics system has evolved with time and got worst. Let’s see what the system has become nowadays: #

  • Wrong ratio of knowledge, skill, experience (knowledge takes about 90%).
  • Generalised curriculum for all students.

Extra bad: #

  • Goals are only bound to exams/grades, degree or certifications (year 1088), then getting jobs.
  • Unhealthy pressure and competition for students.
  • Money game.
  • Politics.

Education as a concept/implementation/system is good. -Academics is good only as a concept. It’s implementation and system is always the worst and corrupted.

Activities in Education: #

  • Knowledge: Reading, listening, watching, feeling, thinking etc.

  • Understanding: Studying (literary, critical thinking, investigating), researching.

  • Skill: Practicing.

  • Experience: Time spending.

Read vs Study vs Research: #

  1. Read: Reading is about watching or interpreting something/someone to gain knowledge.

  2. Study: Studying is about interpreting a topic, going deeper and gaining some conscious understanding out of it.

  3. Research: Research is about studying a topic and then contributing to it with changes from your end.

  • Reading relates with knowledge.

  • Studying relates with understanding.

  • Research relates with understanding and contributing.

Knowledge vs Entertainment: #

  • Activities that are done for Knowledge/Understanding (reading, watching, listening, studying etc.) can also be done for Entertainment and vice versa.

Example:

  1. The first book was to provide Knowledge/Understanding, but later books became a source of Entertainment (fiction).
  2. Videos can be used for both Knowledge/Understanding and Entertainment purposes. For example, for Knowledge/Understanding, there are documentaries, tutorial videos etc. For Entertainment, there are movies, funny videos etc.
  • All these are taken from my notes, all of which I like to write and think about deeply.
Categories:
\ No newline at end of file +Academics is good only as a concept. It’s implementation and system is always the worst and corrupted.

Activities in Education: #

  • Knowledge: Reading, listening, watching, feeling, thinking etc.

  • Understanding: Studying (literary, critical thinking, investigating), researching.

  • Skill: Practicing.

  • Experience: Time spending.

Read vs Study vs Research: #

  1. Read: Reading is about watching or interpreting something/someone to gain knowledge.

  2. Study: Studying is about interpreting a topic, going deeper and gaining some conscious understanding out of it.

  3. Research: Research is about studying a topic and then contributing to it with changes from your end.

  • Reading relates with knowledge.

  • Studying relates with understanding.

  • Research relates with understanding and contributing.

Knowledge vs Entertainment: #

  • Activities that are done for Knowledge/Understanding (reading, watching, listening, studying etc.) can also be done for Entertainment and vice versa.

Example:

  1. The first book was to provide Knowledge/Understanding, but later books became a source of Entertainment (fiction).
  2. Videos can be used for both Knowledge/Understanding and Entertainment purposes. For example, for Knowledge/Understanding, there are documentaries, tutorial videos etc. For Entertainment, there are movies, funny videos etc.
  • All these are taken from my notes, all of which I like to write and think about deeply.
Categories:
\ No newline at end of file diff --git a/docs/categories/index.html b/docs/categories/index.html index ffb6808..7620fe1 100644 --- a/docs/categories/index.html +++ b/docs/categories/index.html @@ -1,4 +1,8 @@ -Categories | Freedoms4
Freedoms4 logo

Freedoms4

-
+Categories | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

Philosophy (1)

\ No newline at end of file +Subscribe

All Posts | Categories

Philosophy (1)

\ No newline at end of file diff --git a/docs/categories/philosophy/index.html b/docs/categories/philosophy/index.html index 809faf4..1d00a0a 100644 --- a/docs/categories/philosophy/index.html +++ b/docs/categories/philosophy/index.html @@ -1,4 +1,8 @@ -Philosophy | Freedoms4
Freedoms4 logo

Freedoms4

-
+Philosophy | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

Philosophy

What is Education?

\ No newline at end of file +Subscribe

All Posts | Categories

Philosophy

What is Education?

\ No newline at end of file diff --git a/docs/coming-soon/index.html b/docs/coming-soon/index.html index 8e7b58d..2751a01 100644 --- a/docs/coming-soon/index.html +++ b/docs/coming-soon/index.html @@ -1,4 +1,8 @@ -Coming Soon | Freedoms4
Freedoms4 logo

Freedoms4

-
+Coming Soon | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Coming Soon

This feature is not yet available. Check back later!

\ No newline at end of file +Subscribe

Coming Soon

This feature is not yet available. Check back later!

\ No newline at end of file diff --git a/docs/contact/index.html b/docs/contact/index.html index ad0c799..0f56b34 100644 --- a/docs/contact/index.html +++ b/docs/contact/index.html @@ -10,7 +10,11 @@ Lemmy: hyzen@lemmy.today">
Freedoms4 logo

Freedoms4

-
+Lemmy: hyzen@lemmy.today">
Freedoms4 logo

Freedoms4

+
-Subscribe

Admin: hyzen

Contacts #

Email and XMPP: hyzen@freedoms4.org

IRC/Liberachat: hyzen, #freedoms4

Follow on #

Mastodon: hyzen@mastodon.social

Lemmy: hyzen@lemmy.today

\ No newline at end of file +Subscribe

Admin: hyzen

Contacts #

Email and XMPP: hyzen@freedoms4.org

IRC/Liberachat: hyzen, #freedoms4

Follow on #

Mastodon: hyzen@mastodon.social

Lemmy: hyzen@lemmy.today

\ No newline at end of file diff --git a/docs/css/custom.css b/docs/css/custom.css index cc084e9..6490484 100644 --- a/docs/css/custom.css +++ b/docs/css/custom.css @@ -48,6 +48,7 @@ display: flex; align-items: center; gap: 0.3rem; + position: relative; } /* RSS Subscribe button */ @@ -75,7 +76,12 @@ color: var(--foreground-color) !important; } -/* Auth links */ +.rss-subscribe__link svg { + width: 10px; + height: 10px; +} + +/* Auth links base */ .auth-link { display: inline-flex; align-items: center; @@ -91,56 +97,107 @@ color 0.2s ease; } -.auth-link--login { - border: 1px solid currentColor; - background-color: transparent; - color: inherit !important; -} - -.auth-link--login:hover { - background-color: var(--foreground-color); - color: var(--background-color) !important; -} - -.auth-link--signup { - border: 1px solid currentColor; - background-color: transparent; - color: inherit !important; -} - -.auth-link--signup:hover { - background-color: var(--foreground-color); - color: var(--background-color) !important; -} - -/* Make RSS icon bigger on desktop without affecting button size */ -.rss-subscribe__link svg { - width: 10px; - height: 10px; -} - -/* Auth toggle hidden on desktop, links always visible */ -.brand__auth-toggle { - display: none; -} - +/* Dropdown toggle — visible on ALL screens */ .brand__auth-check { display: none; } -.brand__auth-links { - display: flex; +.brand__auth-toggle { + display: inline-flex; align-items: center; - gap: 0.3rem; + justify-content: center; + gap: 0.2rem; + padding: 0.2rem 0.4rem; + box-sizing: border-box; + border-radius: 3px; + border: 1px solid #f26522; + background-color: #f26522; + color: #fff; + cursor: pointer; + font-size: 0.7rem; + font-weight: 340; + line-height: 1.4; + user-select: none; + outline: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease; } -/* Mobile dropdown */ +.brand__auth-toggle:hover { + background-color: transparent; + border-color: #f26522; + color: #f26522; +} + +@media (prefers-color-scheme: dark) { + .brand__auth-toggle { + background-color: transparent; + border-color: currentColor; + color: var(--foreground-color); + } + + .brand__auth-toggle:hover, + .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* Dropdown panel — hidden by default, shown on focus-within */ +.brand__auth-links { + display: none; + position: absolute; + top: calc(100% + 0.4rem); + right: 0; + flex-direction: column; + gap: 0; + background-color: var(--background-color); + border: 1px solid var(--background-color1); + border-radius: 6px; + overflow: hidden; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); + z-index: 100; + min-width: 110px; +} + +.brand__auth:focus-within .brand__auth-links { + display: flex; +} + +.brand__auth-links .auth-link { + border: none; + border-radius: 0; + padding: 0.55rem 1rem; + font-size: 0.78rem; + width: 100%; + justify-content: center; + background-color: transparent; + color: var(--foreground-color) !important; +} + +.brand__auth-links .auth-link:not(:last-child) { + border-bottom: 1px solid var(--background-color1); +} + +.brand__auth-links .auth-link:hover { + background-color: var(--background-color1); + color: var(--foreground-color) !important; +} + +/* Mobile */ @media (max-width: 600px) { - /* RSS outline on mobile */ .rss-subscribe__link { background-color: transparent !important; color: var(--foreground-color) !important; border-color: currentColor; + width: 1.6rem; + height: 1.6rem; + box-sizing: border-box; + padding: 0; + justify-content: center; } .rss-subscribe__link:hover { @@ -148,127 +205,148 @@ color: var(--background-color) !important; } - /* Orange filled dropdown toggle on mobile light mode */ + .rss-subscribe__link span { + display: none; + } + + .rss-subscribe__link svg { + width: 14px; + height: 14px; + } + + .brand__auth-text { + display: none; + } + + .brand__auth-toggle { + width: 1.6rem; + height: 1.6rem; + padding: 0; + } +} + +/* ── Mobile auth toggle colors ── */ + +/* Default (system light): orange filled */ +@media (max-width: 600px) { .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } - .brand__auth-toggle:hover { + .brand__auth:focus-within .brand__auth-toggle { + background-color: transparent !important; + border-color: #f26522 !important; + color: #f26522 !important; + } +} + +/* System dark: outline */ +@media (max-width: 600px) and (prefers-color-scheme: dark) { + .brand__auth-toggle { + background-color: transparent !important; + border-color: currentColor !important; + color: var(--foreground-color) !important; + } + + .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* Manual light override */ +@media (max-width: 600px) { + [data-theme="light"] .brand__auth-toggle { + background-color: #f26522 !important; + border-color: #f26522 !important; + color: #fff !important; + } + + [data-theme="light"] .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } - @media (prefers-color-scheme: dark) { - .brand__auth-toggle { - background-color: transparent !important; - border-color: currentColor !important; - color: var(--foreground-color) !important; - } - - .brand__auth-toggle:hover, - .brand__auth:focus-within .brand__auth-toggle { - background-color: var(--foreground-color) !important; - border-color: var(--foreground-color) !important; - color: var(--background-color) !important; - } - } - - /* Hide subscribe text, icon only */ - .rss-subscribe__link span { - display: none; - } - - .rss-subscribe__link, - .brand__auth-toggle { - height: 1.6rem; - width: 1.6rem; - box-sizing: border-box; - padding: 0; - justify-content: center; - } - - /* Make RSS icon bigger without affecting button size */ - .rss-subscribe__link svg { - width: 14px; - height: 14px; - } - - .brand__auth { - position: relative; - } - - /* Show toggle button */ - .brand__auth-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.15rem; - padding: 0.2rem 0.4rem; - border-radius: 3px; - border: 1px solid currentColor; - background: transparent; - color: var(--foreground-color); - cursor: pointer; - font-size: 0.7rem; - line-height: 1; - user-select: none; - outline: none; - } - - .brand__auth-toggle:hover { - background-color: var(--background-color1); - } - - .brand__auth-chevron { - transition: transform 0.2s ease; - } - - /* Open dropdown on focus-within — closes when user taps outside */ - .brand__auth:focus-within .brand__auth-links { - display: flex; - } - - .brand__auth:focus-within .brand__auth-chevron { - transform: rotate(180deg); - } - - /* Dropdown panel */ - .brand__auth-links { - display: none; - position: absolute; - top: calc(100% + 0.4rem); - right: 0; - flex-direction: column; - gap: 0; - background-color: var(--background-color); - border: 1px solid var(--background-color1); - border-radius: 6px; - overflow: hidden; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); - z-index: 100; - min-width: 110px; - } - - .brand__auth-links .auth-link { - border: none; - border-radius: 0; - padding: 0.55rem 1rem; - font-size: 0.78rem; - width: 100%; - justify-content: center; - background-color: transparent; + /* Manual dark override */ + [data-theme="dark"] .brand__auth-toggle { + background-color: transparent !important; + border-color: currentColor !important; color: var(--foreground-color) !important; } - .brand__auth-links .auth-link:not(:last-child) { - border-bottom: 1px solid var(--background-color1); - } - - .brand__auth-links .auth-link:hover { - background-color: var(--background-color1); - color: var(--foreground-color) !important; + [data-theme="dark"] .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* ── Theme switcher ── */ + +/* Force light theme */ +[data-theme="light"] { + --background-color: #fbf1c7; + --background-color1: #ebdbb2; + --foreground-color: #3c3836; + --foreground-color3: #665c54; + --accent-color: #af3a03; +} + +/* Force dark theme */ +[data-theme="dark"] { + --background-color: #171414; + --background-color1: #fff; + --foreground-color: #e3e1db; + --foreground-color3: #ccc3b3; + --accent-color: #fff; +} + +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.2rem 0.4rem; + border-radius: 3px; + border: 1px solid currentColor; + background: transparent; + color: var(--foreground-color); + cursor: pointer; + font-size: 0.7rem; + line-height: 1.4; + transition: + background-color 0.2s ease, + color 0.2s ease; +} + +.theme-toggle:hover { + background-color: var(--foreground-color); + color: var(--background-color); +} + +/* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */ +.theme-toggle__sun { display: none; } +.theme-toggle__moon { display: block; } + +[data-theme="dark"] .theme-toggle__sun { display: block; } +[data-theme="dark"] .theme-toggle__moon { display: none; } + +[data-theme="light"] .theme-toggle__sun { display: none; } +[data-theme="light"] .theme-toggle__moon { display: block; } + +/* Match size to other buttons on mobile */ +@media (max-width: 600px) { + .theme-toggle { + width: 1.6rem; + height: 1.6rem; + box-sizing: border-box; + padding: 0; + } + + .theme-toggle__text { + display: none; } } diff --git a/docs/index.html b/docs/index.html index ee16f8f..8a07e7b 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,8 @@ -Freedoms4
Freedoms4 logo

Freedoms4

-
+Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Hello! Welcome 🙏 #

My name is hyzen, I'm the founder of this site. This site is my space to write about my views on various subjects and explore ideas that matter to me. I also provide free services to the public that may matter to them.

On the blog I’m writing about: #

  • Tech - Free and Open-Source Software, digital freedom.
  • Philosophy - Reflections on ideas, ethics, meaning, and ways of thinking.
  • Communism - I believe in Marxism. I am committed to the principle of providing internet services in a socialist way. This means creating tools and spaces that prioritize community benefit over profit, and believing in the collective good.
  • Politics as a whole - Commentary on political systems, economics, and social issues.

Beyond theoretical discussions, I may also write about my day-to-day experiences, thoughts, and feelings - the personal reflections that shape my worldview and understanding of the world around me.

Motive: #

My goal is for everyone who visits this site to leave with something valuable.

Site’s Code: #

This site is also built with open source tools like Hugo and served freely. If you're interested in the code , you can find it here↗.

\ No newline at end of file +Subscribe

Hello! Welcome 🙏 #

My name is hyzen, I'm the founder of this site. This site is my space to write about my views on various subjects and explore ideas that matter to me. I also provide free services to the public that may matter to them.

On the blog I’m writing about: #

  • Tech - Free and Open-Source Software, digital freedom.
  • Philosophy - Reflections on ideas, ethics, meaning, and ways of thinking.
  • Communism - I believe in Marxism. I am committed to the principle of providing internet services in a socialist way. This means creating tools and spaces that prioritize community benefit over profit, and believing in the collective good.
  • Politics as a whole - Commentary on political systems, economics, and social issues.

Beyond theoretical discussions, I may also write about my day-to-day experiences, thoughts, and feelings - the personal reflections that shape my worldview and understanding of the world around me.

Motive: #

My goal is for everyone who visits this site to leave with something valuable.

Site’s Code: #

This site is also built with open source tools like Hugo and served freely. If you're interested in the code , you can find it here↗.

\ No newline at end of file diff --git a/docs/login/index.html b/docs/login/index.html index d41158a..f498050 100644 --- a/docs/login/index.html +++ b/docs/login/index.html @@ -1,4 +1,8 @@ -Coming soon! | Freedoms4
Freedoms4 logo

Freedoms4

-
+Coming soon! | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Coming soon!

The feature is not available yet.

\ No newline at end of file +Subscribe

Coming soon!

The feature is not available yet.

\ No newline at end of file diff --git a/docs/services/file-share/index.html b/docs/services/file-share/index.html index ff64eef..77d6601 100644 --- a/docs/services/file-share/index.html +++ b/docs/services/file-share/index.html @@ -1,5 +1,9 @@ -File share | Freedoms4
Freedoms4 logo

Freedoms4

-
+File share | Freedoms4
Freedoms4 logo

Freedoms4

+
Subscribe

Visit share.freedoms4.org↗ -to quickly upload files and get sharable links.

\ No newline at end of file +to quickly upload files and get sharable links.

\ No newline at end of file diff --git a/docs/services/index.html b/docs/services/index.html index 1e6be4d..61937df 100644 --- a/docs/services/index.html +++ b/docs/services/index.html @@ -1,4 +1,8 @@ -Services | Freedoms4
Freedoms4 logo

Freedoms4

-
+Services | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Services

1. File share

2. XMPP Account

\ No newline at end of file +Subscribe

Services

1. File share

2. XMPP Account

\ No newline at end of file diff --git a/docs/services/xmpp-account/index.html b/docs/services/xmpp-account/index.html index 0d4275e..8045261 100644 --- a/docs/services/xmpp-account/index.html +++ b/docs/services/xmpp-account/index.html @@ -1,4 +1,8 @@ -XMPP Account | Freedoms4
Freedoms4 logo

Freedoms4

-
+XMPP Account | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Send your desired username to hyzen@freedoms4.org via Email (or via XMPP if already have an XMPP account). Account creation can take upto 24 hours.

\ No newline at end of file +Subscribe

Send your desired username to hyzen@freedoms4.org via Email (or via XMPP if already have an XMPP account). Account creation can take upto 24 hours.

\ No newline at end of file diff --git a/docs/signup/index.html b/docs/signup/index.html index 5e2bf5d..1b6b39f 100644 --- a/docs/signup/index.html +++ b/docs/signup/index.html @@ -1,4 +1,8 @@ -Coming soon! | Freedoms4
Freedoms4 logo

Freedoms4

-
+Coming soon! | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

Coming soon!

The feature is not available yet.

\ No newline at end of file +Subscribe

Coming soon!

The feature is not available yet.

\ No newline at end of file diff --git a/docs/tags/academics/index.html b/docs/tags/academics/index.html index f6a3b18..239b5bd 100644 --- a/docs/tags/academics/index.html +++ b/docs/tags/academics/index.html @@ -1,4 +1,8 @@ -Academics | Freedoms4
Freedoms4 logo

Freedoms4

-
+Academics | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

Academics

What is Education?

\ No newline at end of file +Subscribe

All Posts | Categories

Academics

What is Education?

\ No newline at end of file diff --git a/docs/tags/education/index.html b/docs/tags/education/index.html index e86199d..e52cb8c 100644 --- a/docs/tags/education/index.html +++ b/docs/tags/education/index.html @@ -1,4 +1,8 @@ -Education | Freedoms4
Freedoms4 logo

Freedoms4

-
+Education | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

Education

What is Education?

\ No newline at end of file +Subscribe

All Posts | Categories

Education

What is Education?

\ No newline at end of file diff --git a/docs/tags/index.html b/docs/tags/index.html index 1b1c4fa..a0f2644 100644 --- a/docs/tags/index.html +++ b/docs/tags/index.html @@ -1,4 +1,8 @@ -Tags | Freedoms4
Freedoms4 logo

Freedoms4

-
+Tags | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

Academics (1)

Education (1)

System (1)

\ No newline at end of file +Subscribe

All Posts | Categories

Academics (1)

Education (1)

System (1)

\ No newline at end of file diff --git a/docs/tags/system/index.html b/docs/tags/system/index.html index ed7f44d..92b2bf0 100644 --- a/docs/tags/system/index.html +++ b/docs/tags/system/index.html @@ -1,4 +1,8 @@ -System | Freedoms4
Freedoms4 logo

Freedoms4

-
+System | Freedoms4
Freedoms4 logo

Freedoms4

+
-Subscribe

All Posts | Categories

System

What is Education?

\ No newline at end of file +Subscribe

All Posts | Categories

System

What is Education?

\ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/layouts/_partials/body/body-end.html b/layouts/_partials/body/body-end.html index a5b8446..6446416 100644 --- a/layouts/_partials/body/body-end.html +++ b/layouts/_partials/body/body-end.html @@ -1 +1,24 @@ -{{- /* You can dynamically load scripts in this file */ -}} + diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html index 83c234c..32ca8d2 100644 --- a/layouts/_partials/head.html +++ b/layouts/_partials/head.html @@ -12,4 +12,12 @@ + + + {{ partial "head/head-end.html" . }} diff --git a/layouts/baseof.html b/layouts/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/layouts/coming-soon/baseof.html b/layouts/coming-soon/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/coming-soon/baseof.html +++ b/layouts/coming-soon/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/layouts/login/baseof.html b/layouts/login/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/login/baseof.html +++ b/layouts/login/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/layouts/services/baseof.html b/layouts/services/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/services/baseof.html +++ b/layouts/services/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/layouts/signup/baseof.html b/layouts/signup/baseof.html index c1a4489..0d3bedc 100644 --- a/layouts/signup/baseof.html +++ b/layouts/signup/baseof.html @@ -13,10 +13,16 @@ Freedoms4 logo

Freedoms4

+
diff --git a/static/css/custom.css b/static/css/custom.css index cc084e9..6490484 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -48,6 +48,7 @@ display: flex; align-items: center; gap: 0.3rem; + position: relative; } /* RSS Subscribe button */ @@ -75,7 +76,12 @@ color: var(--foreground-color) !important; } -/* Auth links */ +.rss-subscribe__link svg { + width: 10px; + height: 10px; +} + +/* Auth links base */ .auth-link { display: inline-flex; align-items: center; @@ -91,56 +97,107 @@ color 0.2s ease; } -.auth-link--login { - border: 1px solid currentColor; - background-color: transparent; - color: inherit !important; -} - -.auth-link--login:hover { - background-color: var(--foreground-color); - color: var(--background-color) !important; -} - -.auth-link--signup { - border: 1px solid currentColor; - background-color: transparent; - color: inherit !important; -} - -.auth-link--signup:hover { - background-color: var(--foreground-color); - color: var(--background-color) !important; -} - -/* Make RSS icon bigger on desktop without affecting button size */ -.rss-subscribe__link svg { - width: 10px; - height: 10px; -} - -/* Auth toggle hidden on desktop, links always visible */ -.brand__auth-toggle { - display: none; -} - +/* Dropdown toggle — visible on ALL screens */ .brand__auth-check { display: none; } -.brand__auth-links { - display: flex; +.brand__auth-toggle { + display: inline-flex; align-items: center; - gap: 0.3rem; + justify-content: center; + gap: 0.2rem; + padding: 0.2rem 0.4rem; + box-sizing: border-box; + border-radius: 3px; + border: 1px solid #f26522; + background-color: #f26522; + color: #fff; + cursor: pointer; + font-size: 0.7rem; + font-weight: 340; + line-height: 1.4; + user-select: none; + outline: none; + transition: + background-color 0.2s ease, + border-color 0.2s ease, + color 0.2s ease; } -/* Mobile dropdown */ +.brand__auth-toggle:hover { + background-color: transparent; + border-color: #f26522; + color: #f26522; +} + +@media (prefers-color-scheme: dark) { + .brand__auth-toggle { + background-color: transparent; + border-color: currentColor; + color: var(--foreground-color); + } + + .brand__auth-toggle:hover, + .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* Dropdown panel — hidden by default, shown on focus-within */ +.brand__auth-links { + display: none; + position: absolute; + top: calc(100% + 0.4rem); + right: 0; + flex-direction: column; + gap: 0; + background-color: var(--background-color); + border: 1px solid var(--background-color1); + border-radius: 6px; + overflow: hidden; + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); + z-index: 100; + min-width: 110px; +} + +.brand__auth:focus-within .brand__auth-links { + display: flex; +} + +.brand__auth-links .auth-link { + border: none; + border-radius: 0; + padding: 0.55rem 1rem; + font-size: 0.78rem; + width: 100%; + justify-content: center; + background-color: transparent; + color: var(--foreground-color) !important; +} + +.brand__auth-links .auth-link:not(:last-child) { + border-bottom: 1px solid var(--background-color1); +} + +.brand__auth-links .auth-link:hover { + background-color: var(--background-color1); + color: var(--foreground-color) !important; +} + +/* Mobile */ @media (max-width: 600px) { - /* RSS outline on mobile */ .rss-subscribe__link { background-color: transparent !important; color: var(--foreground-color) !important; border-color: currentColor; + width: 1.6rem; + height: 1.6rem; + box-sizing: border-box; + padding: 0; + justify-content: center; } .rss-subscribe__link:hover { @@ -148,127 +205,148 @@ color: var(--background-color) !important; } - /* Orange filled dropdown toggle on mobile light mode */ + .rss-subscribe__link span { + display: none; + } + + .rss-subscribe__link svg { + width: 14px; + height: 14px; + } + + .brand__auth-text { + display: none; + } + + .brand__auth-toggle { + width: 1.6rem; + height: 1.6rem; + padding: 0; + } +} + +/* ── Mobile auth toggle colors ── */ + +/* Default (system light): orange filled */ +@media (max-width: 600px) { .brand__auth-toggle { background-color: #f26522 !important; border-color: #f26522 !important; color: #fff !important; } - .brand__auth-toggle:hover { + .brand__auth:focus-within .brand__auth-toggle { + background-color: transparent !important; + border-color: #f26522 !important; + color: #f26522 !important; + } +} + +/* System dark: outline */ +@media (max-width: 600px) and (prefers-color-scheme: dark) { + .brand__auth-toggle { + background-color: transparent !important; + border-color: currentColor !important; + color: var(--foreground-color) !important; + } + + .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* Manual light override */ +@media (max-width: 600px) { + [data-theme="light"] .brand__auth-toggle { + background-color: #f26522 !important; + border-color: #f26522 !important; + color: #fff !important; + } + + [data-theme="light"] .brand__auth:focus-within .brand__auth-toggle { background-color: transparent !important; border-color: #f26522 !important; color: #f26522 !important; } - @media (prefers-color-scheme: dark) { - .brand__auth-toggle { - background-color: transparent !important; - border-color: currentColor !important; - color: var(--foreground-color) !important; - } - - .brand__auth-toggle:hover, - .brand__auth:focus-within .brand__auth-toggle { - background-color: var(--foreground-color) !important; - border-color: var(--foreground-color) !important; - color: var(--background-color) !important; - } - } - - /* Hide subscribe text, icon only */ - .rss-subscribe__link span { - display: none; - } - - .rss-subscribe__link, - .brand__auth-toggle { - height: 1.6rem; - width: 1.6rem; - box-sizing: border-box; - padding: 0; - justify-content: center; - } - - /* Make RSS icon bigger without affecting button size */ - .rss-subscribe__link svg { - width: 14px; - height: 14px; - } - - .brand__auth { - position: relative; - } - - /* Show toggle button */ - .brand__auth-toggle { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 0.15rem; - padding: 0.2rem 0.4rem; - border-radius: 3px; - border: 1px solid currentColor; - background: transparent; - color: var(--foreground-color); - cursor: pointer; - font-size: 0.7rem; - line-height: 1; - user-select: none; - outline: none; - } - - .brand__auth-toggle:hover { - background-color: var(--background-color1); - } - - .brand__auth-chevron { - transition: transform 0.2s ease; - } - - /* Open dropdown on focus-within — closes when user taps outside */ - .brand__auth:focus-within .brand__auth-links { - display: flex; - } - - .brand__auth:focus-within .brand__auth-chevron { - transform: rotate(180deg); - } - - /* Dropdown panel */ - .brand__auth-links { - display: none; - position: absolute; - top: calc(100% + 0.4rem); - right: 0; - flex-direction: column; - gap: 0; - background-color: var(--background-color); - border: 1px solid var(--background-color1); - border-radius: 6px; - overflow: hidden; - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); - z-index: 100; - min-width: 110px; - } - - .brand__auth-links .auth-link { - border: none; - border-radius: 0; - padding: 0.55rem 1rem; - font-size: 0.78rem; - width: 100%; - justify-content: center; - background-color: transparent; + /* Manual dark override */ + [data-theme="dark"] .brand__auth-toggle { + background-color: transparent !important; + border-color: currentColor !important; color: var(--foreground-color) !important; } - .brand__auth-links .auth-link:not(:last-child) { - border-bottom: 1px solid var(--background-color1); - } - - .brand__auth-links .auth-link:hover { - background-color: var(--background-color1); - color: var(--foreground-color) !important; + [data-theme="dark"] .brand__auth:focus-within .brand__auth-toggle { + background-color: var(--foreground-color) !important; + border-color: var(--foreground-color) !important; + color: var(--background-color) !important; + } +} + +/* ── Theme switcher ── */ + +/* Force light theme */ +[data-theme="light"] { + --background-color: #fbf1c7; + --background-color1: #ebdbb2; + --foreground-color: #3c3836; + --foreground-color3: #665c54; + --accent-color: #af3a03; +} + +/* Force dark theme */ +[data-theme="dark"] { + --background-color: #171414; + --background-color1: #fff; + --foreground-color: #e3e1db; + --foreground-color3: #ccc3b3; + --accent-color: #fff; +} + +.theme-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 0.2rem 0.4rem; + border-radius: 3px; + border: 1px solid currentColor; + background: transparent; + color: var(--foreground-color); + cursor: pointer; + font-size: 0.7rem; + line-height: 1.4; + transition: + background-color 0.2s ease, + color 0.2s ease; +} + +.theme-toggle:hover { + background-color: var(--foreground-color); + color: var(--background-color); +} + +/* Show sun in dark mode (click to go light), moon in light mode (click to go dark) */ +.theme-toggle__sun { display: none; } +.theme-toggle__moon { display: block; } + +[data-theme="dark"] .theme-toggle__sun { display: block; } +[data-theme="dark"] .theme-toggle__moon { display: none; } + +[data-theme="light"] .theme-toggle__sun { display: none; } +[data-theme="light"] .theme-toggle__moon { display: block; } + +/* Match size to other buttons on mobile */ +@media (max-width: 600px) { + .theme-toggle { + width: 1.6rem; + height: 1.6rem; + box-sizing: border-box; + padding: 0; + } + + .theme-toggle__text { + display: none; } }