Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Theme palette #33

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Theme palette #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ac0f998
add multiple color palettes
voorloopnul Dec 17, 2024
ecd5cea
define mew palette variables and replace old references
voorloopnul Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions input.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,19 +4,19 @@

@layer components {
.markdown h1 {
@apply text-4xl py-4 font-black text-green-kelp
@apply text-4xl py-4 font-black text-tertiary
}

.markdown h2 {
@apply text-3xl py-4 font-black text-green-kelp
@apply text-3xl py-4 font-black text-tertiary
}

.markdown h3 {
@apply text-2xl py-2 font-black text-green-kelp
@apply text-2xl py-2 font-black text-tertiary
}

.markdown h3 > a{
@apply text-2xl py-2 font-black text-green-kelp
@apply text-2xl py-2 font-black text-tertiary
}

.markdown h4 {
Expand Down Expand Up @@ -72,7 +72,7 @@
}

.markdown a {
@apply text-blue-mariner underline hover:no-underline
@apply text-secondary underline hover:no-underline
}

.markdown a.zola-anchor {
Expand All @@ -84,7 +84,7 @@
}

.markdown code {
@apply text-green-kelp ms-1 me-1 font-mono text-sm bg-gray-50
@apply text-tertiary ms-1 me-1 font-mono text-sm bg-gray-50
}

.markdown pre > code {
Expand Down Expand Up @@ -119,7 +119,7 @@
}
/* style the search modal content */
.search_section {
@apply text-blue-mariner block
@apply text-secondary block
}

.search_description {
Expand Down
70 changes: 69 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
"dependencies": {
"flowbite": "^2.3.0",
"flowbite-typography": "^1.0.4",
"tailwindcss": "^3.4.3"
"tailwindcss": "^3.4.3",
"tw-colors": "^3.3.2"
}
}
62 changes: 38 additions & 24 deletions static/output.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1631,7 +1631,7 @@ input:checked + .toggle-bg {
line-height: 2.5rem;
font-weight: 900;
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.markdown h2 {
Expand All @@ -1641,7 +1641,7 @@ input:checked + .toggle-bg {
line-height: 2.25rem;
font-weight: 900;
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.markdown h3 {
Expand All @@ -1651,7 +1651,7 @@ input:checked + .toggle-bg {
line-height: 2rem;
font-weight: 900;
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.markdown h3 > a {
Expand All @@ -1661,7 +1661,7 @@ input:checked + .toggle-bg {
line-height: 2rem;
font-weight: 900;
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.markdown h4 {
Expand Down Expand Up @@ -1753,7 +1753,7 @@ input:checked + .toggle-bg {

.markdown a {
--tw-text-opacity: 1;
color: rgb(19 93 163 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-secondary) / var(--twc-secondary-opacity, var(--tw-text-opacity)));
text-decoration-line: underline;
}

Expand Down Expand Up @@ -1788,7 +1788,7 @@ input:checked + .toggle-bg {
font-size: 0.875rem;
line-height: 1.25rem;
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.markdown pre > code {
Expand Down Expand Up @@ -1863,7 +1863,7 @@ input:checked + .toggle-bg {
.search_section {
display: block;
--tw-text-opacity: 1;
color: rgb(19 93 163 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-secondary) / var(--twc-secondary-opacity, var(--tw-text-opacity)));
}

.search_description {
Expand Down Expand Up @@ -2473,16 +2473,6 @@ input:checked + .toggle-bg {
background-color: rgb(26 86 219 / var(--tw-bg-opacity, 1));
}

.bg-blue-br {
--tw-bg-opacity: 1;
background-color: rgb(38 153 208 / var(--tw-bg-opacity, 1));
}

.bg-blue-mariner {
--tw-bg-opacity: 1;
background-color: rgb(19 93 163 / var(--tw-bg-opacity, 1));
}

.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
Expand All @@ -2507,6 +2497,16 @@ input:checked + .toggle-bg {
background-color: rgb(17 24 39 / 0.5);
}

.bg-navbar {
--tw-bg-opacity: 1;
background-color: hsl(var(--twc-navbar) / var(--twc-navbar-opacity, var(--tw-bg-opacity)));
}

.bg-secondary {
--tw-bg-opacity: 1;
background-color: hsl(var(--twc-secondary) / var(--twc-secondary-opacity, var(--tw-bg-opacity)));
}

.bg-transparent {
background-color: transparent;
}
Expand Down Expand Up @@ -2670,11 +2670,6 @@ input:checked + .toggle-bg {
color: rgb(28 100 242 / var(--tw-text-opacity, 1));
}

.text-blue-br {
--tw-text-opacity: 1;
color: rgb(38 153 208 / var(--tw-text-opacity, 1));
}

.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity, 1));
Expand All @@ -2695,9 +2690,9 @@ input:checked + .toggle-bg {
color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}

.text-green-kelp {
.text-primary {
--tw-text-opacity: 1;
color: rgb(79 164 131 / var(--tw-text-opacity, 1));
color: hsl(var(--twc-primary) / var(--twc-primary-opacity, var(--tw-text-opacity)));
}

.text-purple-500 {
Expand All @@ -2710,6 +2705,11 @@ input:checked + .toggle-bg {
color: rgb(240 82 82 / var(--tw-text-opacity, 1));
}

.text-tertiary {
--tw-text-opacity: 1;
color: hsl(var(--twc-tertiary) / var(--twc-tertiary-opacity, var(--tw-text-opacity)));
}

.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
Expand Down Expand Up @@ -2777,6 +2777,20 @@ input:checked + .toggle-bg {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

.blueos,[data-theme="blueos"] {
--twc-navbar: 199.39999999999998 69.1% 48.2%;
--twc-primary: 199.39999999999998 69.1% 48.2%;
--twc-secondary: 209.20000000000005 79.1% 35.7%;
--twc-tertiary: 156.70000000000005 35% 47.6%;
}

.cockpit,[data-theme="cockpit"] {
--twc-navbar: 308.1 69.1% 48.2%;
--twc-primary: 199.39999999999998 69.1% 48.2%;
--twc-secondary: 209.20000000000005 79.1% 35.7%;
--twc-tertiary: 156.70000000000005 35% 47.6%;
}

@media (min-width: 1536px) {
.\32xl\:container {
width: 100%;
Expand Down
20 changes: 15 additions & 5 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
/** @type {import('tailwindcss').Config} */
const { createThemes } = require('tw-colors');
module.exports = {
content: [
"./node_modules/flowbite/**/*.js",
Expand All @@ -7,16 +8,25 @@ module.exports = {
"./templates/**/*.html",
],
theme: {
colors: {
'green-kelp': '#4fa483',
'blue-br': '#2699d0',
'blue-mariner': '#135da3',
},
extend: {},
},
plugins: [
require('flowbite/plugin'),
require('flowbite-typography'),
createThemes({
blueos: {
'navbar': '#2699d0',
'primary': '#2699d0',
'secondary': '#135da3',
'tertiary': '#4fa483',
},
cockpit: {
'navbar': '#d026b9',
'primary': '#2699d0',
'secondary': '#135da3',
'tertiary': '#4fa483',
},
}),
]
}

Loading