diff --git a/assets/css/custom.css b/assets/css/custom.css
index 832ab03..1d96225 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,11 +1 @@
/* You can customize theme styles here */
-.header .navbar-brand span:first-child{
- color: #478079;
-}
-.header .container{
- padding-left: 10px;
-}
-
-html body ::selection{
- background-color:#488079;color:#fff
-}
diff --git a/assets/js/color-modes.js b/assets/js/color-modes.js
new file mode 100644
index 0000000..225120a
--- /dev/null
+++ b/assets/js/color-modes.js
@@ -0,0 +1,83 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2024 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+ 'use strict'
+
+ console.log('Dark mode toggle script loaded')
+
+ const getStoredTheme = () => localStorage.getItem('theme')
+ const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+ const getPreferredTheme = () => {
+ const storedTheme = getStoredTheme()
+ if (storedTheme) {
+ return storedTheme
+ }
+
+ return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+ }
+
+ const setTheme = theme => {
+ if (theme === 'auto') {
+ document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'))
+ } else {
+ document.documentElement.setAttribute('data-bs-theme', theme)
+ }
+ }
+
+ setTheme(getPreferredTheme())
+
+ const showActiveTheme = (theme, focus = false) => {
+ const themeSwitcher = document.querySelector('#bd-theme')
+
+ if (!themeSwitcher) {
+ return
+ }
+
+ const themeSwitcherText = document.querySelector('#bd-theme-text')
+ const activeTheme = document.querySelector('.current-theme')
+ const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+ const iconOfActiveBtn = btnToActive.querySelector('span.theme-icon')
+
+
+ document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+ element.classList.remove('active')
+ element.setAttribute('aria-pressed', 'false')
+ })
+
+ btnToActive.classList.add('active')
+ btnToActive.setAttribute('aria-pressed', 'true')
+ activeTheme.textContent = btnToActive.textContent
+ const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+ themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+ if (focus) {
+ themeSwitcher.focus()
+ }
+ }
+
+ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+ const storedTheme = getStoredTheme()
+ if (storedTheme !== 'light' && storedTheme !== 'dark') {
+ setTheme(getPreferredTheme())
+ }
+ })
+
+ window.addEventListener('DOMContentLoaded', () => {
+ showActiveTheme(getPreferredTheme())
+
+ document.querySelectorAll('[data-bs-theme-value]')
+ .forEach(toggle => {
+ toggle.addEventListener('click', () => {
+ const theme = toggle.getAttribute('data-bs-theme-value')
+ setStoredTheme(theme)
+ setTheme(theme)
+ showActiveTheme(theme, true)
+ })
+ })
+ })
+ })()
\ No newline at end of file
diff --git a/assets/scss/_menu.scss b/assets/scss/_menu.scss
new file mode 100644
index 0000000..55e6bef
--- /dev/null
+++ b/assets/scss/_menu.scss
@@ -0,0 +1,30 @@
+$color: white;
+$color-border: #478079;
+$color-dark: scale-color($color, $lightness: -30%);
+$transition: 280ms all 120ms ease-out;
+
+.language-selector {
+ li.choice {
+ padding-left: 22px;
+ }
+
+ .label {
+ color: $color;
+ }
+
+ .dropdown-toggle::after {
+ color: $color;
+ }
+
+}
+
+#footer-color-selector {
+ .dropdown-toggle::after {
+ color: $color;
+ }
+
+ .current-theme{
+ color: $color;
+ }
+
+}
diff --git a/assets/scss/_navbar.scss b/assets/scss/_navbar.scss
new file mode 100644
index 0000000..604c12e
--- /dev/null
+++ b/assets/scss/_navbar.scss
@@ -0,0 +1,132 @@
+.bd-navbar {
+ padding: .75rem 0;
+ background-color: transparent;
+
+ @media (forced-colors) {
+ background-color: Canvas;
+ }
+
+ &::after {
+ position: absolute;
+ inset: 0;
+ z-index: -1;
+ display: block;
+ content: "";
+ background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
+ }
+
+ .bd-navbar-toggle {
+ @include media-breakpoint-down(lg) {
+ width: 4.25rem;
+ }
+ }
+
+ .navbar-toggler {
+ padding: 0;
+ margin-right: -.5rem;
+ border: 0;
+
+ &:first-child {
+ margin-left: -.5rem;
+ }
+
+ .bi {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ &:focus {
+ box-shadow: none;
+ }
+ }
+
+ .navbar-brand {
+ color: $white;
+ @include transition(transform .2s ease-in-out);
+
+ &:hover {
+ transform: scale(1.04);
+ }
+ }
+
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
+
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+
+ &.active {
+ font-weight: 600;
+ color: $white;
+ }
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ vertical-align: -.125rem;
+ }
+
+ .offcanvas-lg {
+ background-color: var(--bd-violet-bg);
+ border-left: 0;
+
+ @include media-breakpoint-down(lg) {
+ box-shadow: var(--bs-box-shadow-lg);
+ }
+ }
+
+ .dropdown-toggle {
+ &:focus:not(:focus-visible) {
+ outline: 0;
+ }
+ }
+
+ .dropdown-menu {
+ --bs-dropdown-min-width: 12rem;
+ --bs-dropdown-padding-x: .25rem;
+ --bs-dropdown-padding-y: .25rem;
+ --bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
+ --bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
+ @include rfs(.875rem, --bs-dropdown-font-size);
+ @include font-size(.875rem);
+ @include border-radius(.5rem);
+ box-shadow: $dropdown-box-shadow;
+
+ li + li {
+ margin-top: .125rem;
+ }
+
+ .dropdown-item {
+ @include border-radius(.25rem);
+
+ &:active {
+ .bi {
+ color: inherit !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+
+ .active {
+ font-weight: 600;
+
+ .bi {
+ display: block !important; // stylelint-disable-line declaration-no-important
+ }
+ }
+ }
+
+ .dropdown-menu-end {
+ --bs-dropdown-min-width: 8rem;
+ }
+ }
+
+ @include color-mode(dark) {
+ .bd-navbar {
+ box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
+ }
+ }
\ No newline at end of file
diff --git a/assets/css/main.css b/assets/scss/_raditian.scss
similarity index 100%
rename from assets/css/main.css
rename to assets/scss/_raditian.scss
diff --git a/assets/scss/adritian.scss b/assets/scss/adritian.scss
index 23f6db7..833144b 100644
--- a/assets/scss/adritian.scss
+++ b/assets/scss/adritian.scss
@@ -1,5 +1,19 @@
@import "./bootstrap/bootstrap.scss";
-@import "./menu.scss";
+@import "navbar";
+@import "menu";
+@import "raditian";
+
+/** main style **/
+.header .navbar-brand span:first-child{
+ color: #478079;
+}
+.header .container{
+ padding-left: 10px;
+}
+
+html body ::selection{
+ background-color:#488079;color:#fff
+}
.container {
@@ -138,10 +152,23 @@ br {
}
}
-
+html[data-bs-theme="dark"] {
+ #dark-toggle {
+ span.dark{
+ display: none;
+ }
+ }
+}
+html[data-bs-theme="light"] {
+ #dark-toggle {
+ span.light{
+ display: none;
+ }
+ }
+}
/* dark mode */
/** Media-query based color switching **/
-$color-mode-type: media-query;
+// $color-mode-type: media-query;
@include color-mode(dark) {
html body, body {
diff --git a/assets/scss/menu.scss b/assets/scss/menu.scss
deleted file mode 100644
index cad9696..0000000
--- a/assets/scss/menu.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-$color: white;
-$color-border: #478079;
-$color-dark: scale-color($color, $lightness: -30%);
-$transition: 280ms all 120ms ease-out;
-
-.dropdown__title {
- background-color: transparent;
- border: none;
- font-family: inherit;
- }
-
- .language-selector {
- background-color: black;
- padding: 0 1rem;
- position: sticky;
- top: 0;
- display: grid;
- place-items: center;
-
- > ul {
- grid-auto-flow: column;
-
- > li {
- margin: 0 0.5rem;
-
- a,
- span,
- .dropdown__title {
- text-decoration: none;
- text-align: center;
- display: inline-block;
- color: #fff;
-
- &:focus {
- outline: none;
- }
- }
-
- > a,
- .dropdown__title,
- > span {
- padding: 1rem 0.5rem;
- border-top: 3px solid transparent;
- transition: $transition;
-
- &:hover,
- &:focus {
- border-top-color: $color-border;
- color: $color-border;
- }
- }
- }
- }
-
- ul {
- list-style: none;
- margin: 0;
- padding: 0;
- display: grid;
-
- li {
- padding: 0;
- }
- }
- }
-
- .dropdown {
- position: relative;
-
- .dropdown__title {
- display: inline-flex;
- align-items: center;
-
- &:after {
- content: "";
- border: 0.35rem solid transparent;
- border-top-color: rgba(#fff, 0.45);
- margin-left: 0.25em;
- transform: translateY(0.15em);
- }
- }
-
- .dropdown__menu {
- position: absolute;
- min-width: 15ch;
- left: 0;
- top: 0;
- transition: $transition;
- transform: translateY(-80%);
- transform-origin: bottom center;
- visibility: hidden;
- opacity: 0.3;
- background-color: #fff;
- box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
-
- li.current{
- font-weight: bold;
- }
- a,
- span {
- color: black;
- display: block;
- padding: 0.5em;
- transition: $transition;
-
- &:hover {
- background-color: rgba($color, 0.15);
- }
-
- &:focus {
- outline: none;
- background-color: rgba($color, 0.25);
- }
- }
- }
-
- &:after {
- content: "";
- border: 0.5rem solid transparent;
- border-bottom-color: #fff;
- position: absolute;
- top: 0;
- left: 112%;
- transform: translateX(-220%) rotateX(180deg) translateY(-82%);
- transition: $transition;
- opacity: 0;
- will-change: opacity;
- }
-
- &:hover,
- &:focus-within {
- .dropdown__title {
- border-bottom-color: $color-border;
- }
-
- .dropdown__menu {
- opacity: 1;
- visibility: visible;
- transform: translateY(-80%);
-
- a {
- opacity: 1;
- }
- }
-
- &:after {
- opacity: 1;
- }
- }
- }
\ No newline at end of file
diff --git a/exampleSite/hugo.toml b/exampleSite/hugo.toml
index 1da58e9..eb5a342 100755
--- a/exampleSite/hugo.toml
+++ b/exampleSite/hugo.toml
@@ -29,6 +29,9 @@ theme = "adritian-free-hugo-theme"
disableTags = false
enable = true
+[params.languages.selector.disable]
+ footer = false
+
[languages]
[languages.en]
disabled = false
@@ -178,8 +181,6 @@ theme = "adritian-free-hugo-theme"
# CSS Plugins
[[params.plugins.css]]
- URL = "css/main.css"
- [[params.plugins.css]]
URL = "css/custom.css"
[[params.plugins.css]]
URL = "css/adritian-icons.css"
@@ -194,4 +195,21 @@ theme = "adritian-free-hugo-theme"
# SCSS Plugins
[[params.plugins.scss]]
- URL = "scss/adritian.scss"
\ No newline at end of file
+ URL = "scss/adritian.scss"
+
+
+# theme/color style
+[params.colorTheme]
+
+## the following configuration would disable automatic theme selection
+# [params.colorTheme.auto]
+# disable = true
+# [params.colorTheme.forced]
+# theme = "dark"
+
+## the following parameter will disable theme override in the footer
+# [params.colorTheme.selector.disable]
+# footer = true
+
+
+## by default we allow override AND automatic selection
diff --git a/i18n/en.yaml b/i18n/en.yaml
index f4a84e8..b8df80b 100644
--- a/i18n/en.yaml
+++ b/i18n/en.yaml
@@ -1,9 +1,21 @@
+## Meta tags
+- id: "meta_title"
+ translation: "Adritian - a high performance hugo theme by Adrián Moreno"
+- id: "meta_description"
+ translation: "This hugo theme (Adritian) is based on Bootstrap and has features that make it suitable for a personal site, a portfolio or other kind of Single Page Applications."
+- id: "meta_keywords"
+ translation: "hugo, theme, bootstrap, adritian, adrian moreno, personal site, portfolio, single page application"
+- id: "meta_author"
+ translation: "Adrián Moreno Peña"
+- id: "meta_image"
+ translation: "/img/general/og-image.jpg"
+
## Header
- id: "logo_text1"
- translation: "Cool"
+ translation: "Adritian"
- id: "logo_text2"
- translation: "Name"
+ translation: "Demo"
## Footer
- id: "footer_notice"
@@ -12,6 +24,16 @@
- id: "language"
translation: "Language"
+- id: "toggle_theme"
+ translation: "Toggle theme"
+
+- id: "theme_light"
+ translation: "☀️ Light"
+- id: "theme_dark"
+ translation: "🌑 Dark"
+- id: "theme_auto"
+ translation: "✨ Auto"
+
## Homepage head title
- id: "head_title"
translation: "Demo site for Adritian - a high performance hugo theme by Adrián Moreno"
@@ -21,13 +43,13 @@
## Homepage showcase
- id: "showcase_title"
- translation: "Hello, I’m Cool."
+ translation: "Welcome the demo"
- id: "showcase_subtitle"
- translation: "This is my title"
+ translation: "Let's dive into an example"
- id: "showcase_description"
- translation: "This is a good place to start with an introduction about yourself. Maybe a mention to the place where you work. You can also mention where you live, your background and what's the purpose of the site.
You can download this theme from github, and see it live as a demo site or a real one.
You can find this content to edit in the theme.yaml file."
+ translation: "This is a high performance theme for the Hugo static site generator. This sample content can be edited in the locale files (as the theme supports translations).
You can download this theme from github, and see it live as a demo site or a real one.
You can find this content to edit in the theme.yaml file."
- id: "showcase_button"
translation: "Contact"
diff --git a/i18n/es.yaml b/i18n/es.yaml
index 8cf24cc..415b9e8 100644
--- a/i18n/es.yaml
+++ b/i18n/es.yaml
@@ -12,6 +12,16 @@
- id: "language"
translation: "Idioma"
+- id: "toggle_theme"
+ translation: "Selectionar esquema de color"
+
+- id: "theme_light"
+ translation: "☀️ Claro"
+- id: "theme_dark"
+ translation: "🌑 Oscuro"
+- id: "theme_auto"
+ translation: "✨ Auto"
+
## Homepage head title
- id: "head_title"
translation: "Sitio demo de Adritian - un tema Hugo de alto rendimiento por Adrián Moreno"
diff --git a/i18n/fr.yaml b/i18n/fr.yaml
index dce7662..00ff7f0 100644
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -12,6 +12,16 @@
- id: "language"
translation: "Langue"
+- id: "toggle_theme"
+ translation: "Changer le thème"
+
+- id: "theme_light"
+ translation: "☀️ Clair"
+- id: "theme_dark"
+ translation: "🌑 Sombre"
+- id: "theme_auto"
+ translation: "✨ Auto"
+
## Homepage head title
- id: "head_title"
translation: "Site de démonstration pour Adritian - un thème Hugo haute performance par Adrián Moreno"
diff --git a/layouts/index.html b/layouts/index.html
index cb8e2fd..d770a69 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,6 +1,13 @@
-
+
diff --git a/layouts/partials/base-foot.html b/layouts/partials/base-foot.html
index 59b14f1..45ea8ae 100644
--- a/layouts/partials/base-foot.html
+++ b/layouts/partials/base-foot.html
@@ -15,7 +15,7 @@
-
+
{{ $vercelPageInsights := .Site.Params.vercelPageInsights }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f600699..9e33709 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,44 +1,129 @@
-