tijl/tijl.dev-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

new UI theming
Some checks failed
build / build (push) Successful in 28s
Details
release-tag / release-image (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Tijl 2024-09-05 00:06:08 +02:00
parent 5ad1da76b1
commit 00c8b5678e
Signed by: tijl
GPG Key ID: DAE24BFCD722F053
6 changed files with 58 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
tailwind.config.ts
View File

@ -15,15 +15,18 @@ module.exports = {
secondary: "#804df3", // #804df3
accent: "#66c4fa", // #66c4fa
neutral: "#f7931a", // #212121
"base-100": "#181818", // previously 171717
"base-200": "#151515", // previously 151515
"base-300": "#101010", // previously 121212
//"base-100": "#181818", // previously 171717
"base-100": "#0B0908",
"base-200": "#0B0908", // previously 151515
"base-300": "#121212", // previously 121212
info: "#0ea5e9",
success: "#22c55e",
warning: "#FBBD23",
error: "#ef4444",
"--rounded-btn": "0.75rem",
"--border-btn": "2px",
"--tab-border": "2px",
//"--btn-text-case": "uppercase",
},
},

6
web/lib/main.css
View File

@ -2,6 +2,12 @@
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@layer components {
.btn:not(.btn-ghost) {
@apply border-base-300 border-2 ;
}
}
@layer base {
*, html {
font-family: "Cantarell", "CantarellVF", sans-serif;

2
web/views/blog.html
View File

@ -2,7 +2,7 @@
<div class="grid gap-4">
{{range .Posts}}
<a href="/blog/{{.Meta.Slug}}"
class="card posts-item bg-base-300 hover:bg-base-100 border-[2px] border-base-200 shadow-xl cursor-pointer">
class="card posts-item bg-base-100 border-[2px] border-base-300 shadow-xl cursor-pointer">
<div class="card-body">
<header class="card-title">
<h2 class="card-title text-2xl">{{.Meta.Title}}</h2>

2
web/views/layouts/base.html
View File

@ -16,7 +16,7 @@
<header>
{{template "partials/menu" .}}
</header>
<main id="main-content" class="mx-6 pt-24 pb-4">
<main id="main-content" class="mx-4 pt-24 pb-4">
{{embed}}
</main>
</body>

10
web/views/partials/menu.html
View File

@ -1,5 +1,5 @@
<nav hx-boost="true" class="z-[100] flex fixed mx-auto w-full md:w-[80%] lg:w-[75%]">
<div class="mt-4 mx-4 rounded-2xl shadow-xl bg-base-300 navbar">
<div class="mt-4 mx-4 rounded-2xl shadow-xl bg-base-100 border-base-300 border-[2px] navbar">
<div class="flex-1">
<a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
</div>
@ -12,7 +12,8 @@
d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</summary>
<ul class="mt-3 z-[101] menu dropdown-content bg-base-300 rounded-box w-52 p-3 shadow-xl gap-1">
<ul
class="mt-2 z-[101] menu dropdown-content bg-base-100 border-2 border-base-300 border-t-none rounded-t-none rounded-box w-52 p-3 shadow-xl gap-1">
<li>
<a class='flex gap-4 {{if eq .Path "/"}}active{{end}}' href="/">
<span class="w-5 text-center">
@ -57,7 +58,7 @@
</li>
<li class="flex-none">
<details class="dropdown">
<summary><button class="flex gap-4">
<summary><button type="menu" class="flex gap-4">
<span class="w-5 text-center">
{{icon "language"}}
</span>
@ -65,7 +66,8 @@
</button>
</summary>
<ul class="menu dropdown-content z-[102] bg-base-200 rounded-box w-48 p-3 shadow-xl gap-1">
<ul
class="menu dropdown-content z-[102] bg-base-100 border-2 border-base-300 rounded-box w-48 p-3 shadow-xl gap-1">
<li>
<a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
href="/settings?lang=en&redirect={{.Path}}">

73
web/views/services.html
View File

@ -1,40 +1,43 @@
<div class="prose mb-4">
<h1 class="m-0">Service's</h1>
<hr class="m-0 w-full" />
</div>
<div class="mt-4 flex justify-center">
<div class="flex gap-2">
{{range .Services}}
<a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 1}})';">
<div class="relative w-24 h-24 rounded-2xl rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
<div class="absolute inset-0 flex items-center justify-center">
<img alt="{{.Name}} logo"
class="text-white transform transition-transform duration-300 drop-shadow-2xl"
style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
</div>
</div>
<div id="service-{{.Slug}}-label" class="w-24 text-center mt-2 rounded-2xl rounded-b-none py-1">
{{.Name}}
</div>
</a>
{{end}}
<div class="mx-2">
<div class="prose mb-4">
<h1 class="m-0">Service's</h1>
<hr class="m-0 w-full" />
</div>
</div>
<div class="card bg-base-300" id="services-info">
{{range .Services}}
<div class="card-body hidden" id="service-{{.Slug}}-info">
<h2 class="card-title">{{.Name}}</h2>
<p>{{.Description}}</p>
<div class="card-actions justify-end">
<a href="/service/{{.Slug}}/info" class="btn bg-base-300">Info</a>
<a href="/service/{{.Slug}}" class="btn btn-primary">Open</a>
<div class="z-[99] mt-4 flex justify-center">
<div class="flex gap-2">
{{range .Services}}
<a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 1}})';">
<div class="relative w-24 h-24 rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
<div class="absolute inset-0 flex items-center justify-center">
<img alt="{{.Name}} logo"
class="text-white transform transition-transform duration-300 drop-shadow-2xl"
style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
</div>
</div>
<div id="service-{{.Slug}}-label"
class="w-24 text-center mt-2 -mb-[2px] border-2 border-base-300 rounded-2xl rounded-b-none py-1">
{{.Name}}
</div>
</a>
{{end}}
</div>
</div>
{{end}}
<div class="bg-base-100 rounded-2xl border-base-300 border-2" id="services-info">
{{range .Services}}
<div class="card-body hidden" id="service-{{.Slug}}-info">
<h2 class="card-title">{{.Name}}</h2>
<p>{{.Description}}</p>
<div class="card-actions justify-end">
<a href="/service/{{.Slug}}/info" class="btn">Info</a>
<a href="/service/{{.Slug}}" class="btn btn-primary">Open</a>
</div>
</div>
{{end}}
</div>
</div>
<script>
@ -47,10 +50,10 @@
element.classList.remove("hidden")
setTimeout(() => {
document.querySelectorAll('a[id^="service-"]').forEach(button2 => {
document.getElementById("service-" + button2.id.slice(8) + "-label").classList.remove("bg-base-300")
document.getElementById("service-" + button2.id.slice(8) + "-label").classList.remove("border-b-base-100")
button2.href = "#" + button2.id.slice(8)
})
document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("bg-base-300")
document.getElementById("service-" + button.id.slice(8) + "-label").classList.add("border-b-base-100")
button.href = "/service/" + button.id.slice(8)
}, 0)
} else {