new UI theming
This commit is contained in:
parent
5ad1da76b1
commit
00c8b5678e
@ -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",
|
||||
},
|
||||
},
|
||||
|
@ -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,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>
|
||||
|
@ -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>
|
||||
|
@ -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}}">
|
||||
|
@ -1,40 +1,43 @@
|
||||
<div class="prose mb-4">
|
||||
<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="mt-4 flex justify-center">
|
||||
<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-2xl rounded-3xl shadow-2xl" style="background-color: {{.Color}};">
|
||||
<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 rounded-2xl rounded-b-none py-1">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="card bg-base-300" id="services-info">
|
||||
<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 bg-base-300">Info</a>
|
||||
<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 {
|
||||
|
Loading…
Reference in New Issue
Block a user