new UI theming
This commit is contained in:
parent
5ad1da76b1
commit
00c8b5678e
@ -15,15 +15,18 @@ module.exports = {
|
|||||||
secondary: "#804df3", // #804df3
|
secondary: "#804df3", // #804df3
|
||||||
accent: "#66c4fa", // #66c4fa
|
accent: "#66c4fa", // #66c4fa
|
||||||
neutral: "#f7931a", // #212121
|
neutral: "#f7931a", // #212121
|
||||||
"base-100": "#181818", // previously 171717
|
//"base-100": "#181818", // previously 171717
|
||||||
"base-200": "#151515", // previously 151515
|
"base-100": "#0B0908",
|
||||||
"base-300": "#101010", // previously 121212
|
"base-200": "#0B0908", // previously 151515
|
||||||
|
"base-300": "#121212", // previously 121212
|
||||||
info: "#0ea5e9",
|
info: "#0ea5e9",
|
||||||
success: "#22c55e",
|
success: "#22c55e",
|
||||||
warning: "#FBBD23",
|
warning: "#FBBD23",
|
||||||
error: "#ef4444",
|
error: "#ef4444",
|
||||||
|
|
||||||
"--rounded-btn": "0.75rem",
|
"--rounded-btn": "0.75rem",
|
||||||
|
"--border-btn": "2px",
|
||||||
|
"--tab-border": "2px",
|
||||||
//"--btn-text-case": "uppercase",
|
//"--btn-text-case": "uppercase",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
@ -2,6 +2,12 @@
|
|||||||
@import "tailwindcss/components";
|
@import "tailwindcss/components";
|
||||||
@import "tailwindcss/utilities";
|
@import "tailwindcss/utilities";
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.btn:not(.btn-ghost) {
|
||||||
|
@apply border-base-300 border-2 ;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
*, html {
|
*, html {
|
||||||
font-family: "Cantarell", "CantarellVF", sans-serif;
|
font-family: "Cantarell", "CantarellVF", sans-serif;
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<div class="grid gap-4">
|
<div class="grid gap-4">
|
||||||
{{range .Posts}}
|
{{range .Posts}}
|
||||||
<a href="/blog/{{.Meta.Slug}}"
|
<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">
|
<div class="card-body">
|
||||||
<header class="card-title">
|
<header class="card-title">
|
||||||
<h2 class="card-title text-2xl">{{.Meta.Title}}</h2>
|
<h2 class="card-title text-2xl">{{.Meta.Title}}</h2>
|
||||||
|
@ -16,7 +16,7 @@
|
|||||||
<header>
|
<header>
|
||||||
{{template "partials/menu" .}}
|
{{template "partials/menu" .}}
|
||||||
</header>
|
</header>
|
||||||
<main id="main-content" class="mx-6 pt-24 pb-4">
|
<main id="main-content" class="mx-4 pt-24 pb-4">
|
||||||
{{embed}}
|
{{embed}}
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
<nav hx-boost="true" class="z-[100] flex fixed mx-auto w-full md:w-[80%] lg:w-[75%]">
|
<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">
|
<div class="flex-1">
|
||||||
<a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
|
<a href="/" class="btn btn-ghost font-mono text-xl">tijl.dev</a>
|
||||||
</div>
|
</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" />
|
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>
|
</svg>
|
||||||
</summary>
|
</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>
|
<li>
|
||||||
<a class='flex gap-4 {{if eq .Path "/"}}active{{end}}' href="/">
|
<a class='flex gap-4 {{if eq .Path "/"}}active{{end}}' href="/">
|
||||||
<span class="w-5 text-center">
|
<span class="w-5 text-center">
|
||||||
@ -57,7 +58,7 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="flex-none">
|
<li class="flex-none">
|
||||||
<details class="dropdown">
|
<details class="dropdown">
|
||||||
<summary><button class="flex gap-4">
|
<summary><button type="menu" class="flex gap-4">
|
||||||
<span class="w-5 text-center">
|
<span class="w-5 text-center">
|
||||||
{{icon "language"}}
|
{{icon "language"}}
|
||||||
</span>
|
</span>
|
||||||
@ -65,7 +66,8 @@
|
|||||||
</button>
|
</button>
|
||||||
</summary>
|
</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>
|
<li>
|
||||||
<a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
|
<a class='flex gap-4 {{if eq .Language "en"}}active{{end}}'
|
||||||
href="/settings?lang=en&redirect={{.Path}}">
|
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>
|
<h1 class="m-0">Service's</h1>
|
||||||
<hr class="m-0 w-full" />
|
<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">
|
<div class="flex gap-2">
|
||||||
{{range .Services}}
|
{{range .Services}}
|
||||||
<a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
|
<a href="#{{.Slug}}" id="service-{{.Slug}}" class="group"
|
||||||
onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
|
onmouseover="this.querySelector('img').style.transform='scale({{incfloat .Scale 1.1}})';"
|
||||||
onmouseout="this.querySelector('img').style.transform='scale({{incfloat .Scale 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">
|
<div class="absolute inset-0 flex items-center justify-center">
|
||||||
<img alt="{{.Name}} logo"
|
<img alt="{{.Name}} logo"
|
||||||
class="text-white transform transition-transform duration-300 drop-shadow-2xl"
|
class="text-white transform transition-transform duration-300 drop-shadow-2xl"
|
||||||
style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
|
style="transform: scale({{incfloat .Scale 1}});" src="/static/assets/{{.Slug}}.svg" />
|
||||||
</div>
|
</div>
|
||||||
</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}}
|
{{.Name}}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{{end}}
|
{{end}}
|
||||||
</div>
|
</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}}
|
{{range .Services}}
|
||||||
<div class="card-body hidden" id="service-{{.Slug}}-info">
|
<div class="card-body hidden" id="service-{{.Slug}}-info">
|
||||||
<h2 class="card-title">{{.Name}}</h2>
|
<h2 class="card-title">{{.Name}}</h2>
|
||||||
<p>{{.Description}}</p>
|
<p>{{.Description}}</p>
|
||||||
<div class="card-actions justify-end">
|
<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>
|
<a href="/service/{{.Slug}}" class="btn btn-primary">Open</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{end}}
|
{{end}}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@ -47,10 +50,10 @@
|
|||||||
element.classList.remove("hidden")
|
element.classList.remove("hidden")
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
document.querySelectorAll('a[id^="service-"]').forEach(button2 => {
|
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)
|
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)
|
button.href = "/service/" + button.id.slice(8)
|
||||||
}, 0)
|
}, 0)
|
||||||
} else {
|
} else {
|
||||||
|
Loading…
Reference in New Issue
Block a user