mirror of
https://github.com/axzilla/templui.git
synced 2025-02-21 00:53:18 +00:00
style: beautify docs layout
This commit is contained in:
“axzilla”
parent
1df0a9bc58
commit
4fdf078dcc
@ -3,6 +3,7 @@
|
||||
## 2024-10-07
|
||||
|
||||
- Added: Avatar component
|
||||
- Changed: Beautify docs layout
|
||||
|
||||
## 2024-10-07
|
||||
|
||||
|
||||
@ -791,10 +791,18 @@ body {
|
||||
margin-top: 100vh;
|
||||
}
|
||||
|
||||
.mb-5 {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
@ -879,6 +887,10 @@ body {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.h-3 {
|
||||
height: 0.75rem;
|
||||
}
|
||||
|
||||
.\!max-h-\[501px\] {
|
||||
max-height: 501px !important;
|
||||
}
|
||||
@ -951,6 +963,18 @@ body {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-3 {
|
||||
width: 0.75rem;
|
||||
}
|
||||
|
||||
.w-60 {
|
||||
width: 15rem;
|
||||
}
|
||||
|
||||
.max-w-3xl {
|
||||
max-width: 48rem;
|
||||
}
|
||||
@ -1065,10 +1089,18 @@ body {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.items-start {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.justify-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
@ -1142,6 +1174,10 @@ body {
|
||||
border-color: hsl(var(--border) / var(--tw-divide-opacity));
|
||||
}
|
||||
|
||||
.divide-gray-200\/60 > :not([hidden]) ~ :not([hidden]) {
|
||||
border-color: rgb(229 231 235 / 0.6);
|
||||
}
|
||||
|
||||
.overflow-auto {
|
||||
overflow: auto;
|
||||
}
|
||||
@ -1154,6 +1190,10 @@ body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.overflow-scroll {
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.\!overflow-y-auto {
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
@ -1239,6 +1279,16 @@ body {
|
||||
border-color: rgb(59 130 246 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-gray-800 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(31 41 55 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.border-foreground {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: hsl(var(--foreground) / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-background {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--background) / var(--tw-bg-opacity));
|
||||
@ -1298,6 +1348,10 @@ body {
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.bg-muted\/50 {
|
||||
background-color: hsl(var(--muted) / 0.5);
|
||||
}
|
||||
|
||||
.bg-opacity-50 {
|
||||
--tw-bg-opacity: 0.5;
|
||||
}
|
||||
@ -1358,6 +1412,10 @@ body {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.px-0\.5 {
|
||||
padding-left: 0.125rem;
|
||||
padding-right: 0.125rem;
|
||||
@ -1448,6 +1506,30 @@ body {
|
||||
padding-top: 1.25rem;
|
||||
}
|
||||
|
||||
.pb-12 {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
|
||||
.pb-32 {
|
||||
padding-bottom: 8rem;
|
||||
}
|
||||
|
||||
.pt-6 {
|
||||
padding-top: 1.5rem;
|
||||
}
|
||||
|
||||
.pt-8 {
|
||||
padding-top: 2rem;
|
||||
}
|
||||
|
||||
.pb-10 {
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.pt-10 {
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
@ -1612,6 +1694,11 @@ body {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
@ -1633,6 +1720,18 @@ body {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.opacity-90 {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.opacity-70 {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.opacity-80 {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
@ -1715,6 +1814,10 @@ body {
|
||||
transition-duration: 300ms;
|
||||
}
|
||||
|
||||
.duration-150 {
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
.ease-in {
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
@ -1796,6 +1899,20 @@ body {
|
||||
background-color: hsl(var(--secondary) / 0.8);
|
||||
}
|
||||
|
||||
.hover\:bg-gray-50:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-accent\/50:hover {
|
||||
background-color: hsl(var(--accent) / 0.5);
|
||||
}
|
||||
|
||||
.hover\:bg-muted:hover {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: hsl(var(--muted) / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.hover\:bg-opacity-75:hover {
|
||||
--tw-bg-opacity: 0.75;
|
||||
}
|
||||
@ -1828,6 +1945,10 @@ body {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.hover\:opacity-100:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.hover\:shadow-md:hover {
|
||||
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
||||
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
||||
@ -1910,15 +2031,49 @@ body {
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:translate-x-0 {
|
||||
--tw-translate-x: 0px;
|
||||
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-primary {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--primary) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-gray-700 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(55 65 81 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-gray-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(31 41 55 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-gray-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-accent-foreground {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--accent-foreground) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:text-foreground {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--foreground) / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.group:hover .group-hover\:opacity-100 {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -1957,6 +2112,11 @@ body {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-400:is(.dark *) {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(163 163 163 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:file\:text-foreground:is(.dark *)::file-selector-button {
|
||||
--tw-text-opacity: 1;
|
||||
color: hsl(var(--foreground) / var(--tw-text-opacity));
|
||||
@ -2055,6 +2215,10 @@ body {
|
||||
height: 10rem;
|
||||
}
|
||||
|
||||
.md\:h-6 {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.md\:w-1\/2 {
|
||||
width: 50%;
|
||||
}
|
||||
@ -2062,6 +2226,11 @@ body {
|
||||
.md\:w-40 {
|
||||
width: 10rem;
|
||||
}
|
||||
|
||||
.md\:text-sm {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
@ -2069,6 +2238,10 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.lg\:hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lg\:w-1\/3 {
|
||||
width: 33.333333%;
|
||||
}
|
||||
|
||||
@ -38,7 +38,7 @@ templ NavbarMobileMenu() {
|
||||
@Sheet(SheetProps{Side: Left}) {
|
||||
for _, section := range shared.Sections {
|
||||
<div class="pb-4">
|
||||
<h3 class="px-4 text-sm font-bold text-gray-600 uppercase">{ section.Title }</h3>
|
||||
<h3 class="px-4 text-sm font-bold text-gray-600">{ section.Title }</h3>
|
||||
<ul class="mt-2 space-y-1">
|
||||
for _, link := range section.Links {
|
||||
<li>
|
||||
@ -58,7 +58,7 @@ templ NavbarMobileMenu() {
|
||||
@SheetTrigger(string(Left), Left) {
|
||||
<button
|
||||
@click="sidebarOpen = !sidebarOpen"
|
||||
class="mr-2 md:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
class="mr-2 lg:hidden p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
>
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h8M4 12h12M4 18h16"></path>
|
||||
|
||||
@ -9,7 +9,7 @@ templ Sidebar() {
|
||||
<ul class="space-y-2">
|
||||
for _, section := range shared.Sections {
|
||||
<li class="pb-4">
|
||||
<h3 class="px-4 text-sm font-bold text-gray-600 uppercase">{ section.Title }</h3>
|
||||
<h3 class="px-4 text-sm font-bold text-gray-600">{ section.Title }</h3>
|
||||
<ul class="mt-2 space-y-1">
|
||||
for _, link := range section.Links {
|
||||
<li>
|
||||
|
||||
@ -1,49 +1,60 @@
|
||||
package components
|
||||
|
||||
type SidebarRightLItem struct {
|
||||
ImageSrc string
|
||||
Url string
|
||||
Text string
|
||||
}
|
||||
|
||||
var SidebarRightLinks = []SidebarRightLItem{
|
||||
{
|
||||
ImageSrc: "https://templ.guide/img/logo.svg",
|
||||
Url: "https://templ.guide",
|
||||
Text: "Elevate your Go projects with type-safe, efficient HTML templating.",
|
||||
},
|
||||
{
|
||||
ImageSrc: "https://alpinejs.dev/alpine_long.svg",
|
||||
Url: "https://alpinejs.dev",
|
||||
Text: "Simplify your JavaScript with a lightweight, powerful framework.",
|
||||
},
|
||||
{
|
||||
ImageSrc: "https://tailwindcss.com/_next/static/media/tailwindcss-logotype-white.944c5d0ef628083bb316f9b3d643385c86bcdb3d.svg",
|
||||
Url: "https://tailwindcss.com",
|
||||
Text: "Create beautiful, responsive designs with ease.",
|
||||
},
|
||||
}
|
||||
|
||||
templ SidebarRight() {
|
||||
<aside class="border-l border-border hidden md:flex flex-col w-64 h-full p-6">
|
||||
<h3 class="text-lg font-semibold text-foreground mb-6">Our Ecosystem</h3>
|
||||
<div class="space-y-8">
|
||||
<div class="bg-card rounded-lg p-4 shadow-sm transition-all hover:shadow-md">
|
||||
<a href="https://templ.guide" target="_blank" class="group">
|
||||
<img src="https://templ.guide/img/logo.svg" alt="Templ" class="h-8 mb-3"/>
|
||||
<p class="text-sm text-card-foreground group-hover:text-primary transition-colors">
|
||||
Elevate your Go projects with type-safe, efficient HTML templating.
|
||||
</p>
|
||||
<span class="inline-flex items-center text-xs font-medium text-primary mt-2 group-hover:underline">
|
||||
Learn more
|
||||
<svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
<aside class="border-l border-border flex flex-col w-64 h-full p-6">
|
||||
<h3 class="text-sm font-bold text-muted-foreground">Our Friends</h3>
|
||||
for i, link := range SidebarRightLinks {
|
||||
<a href={ templ.SafeURL(link.Url) } target="_blank" class="relative opacity-80 hover:opacity-100 py-6 flex flex-col items-start justify-between overflow-hidden group">
|
||||
<span class="flex items-center justify-between w-full mb-3">
|
||||
<img src={ link.ImageSrc } alt={ link.Text } class="relative h-5 md:h-6"/>
|
||||
</span>
|
||||
<span class="relative text-xs text-muted-foreground group-hover:text-foreground md:text-sm">{ link.Text }</span>
|
||||
<span class="flex justify-start w-full">
|
||||
<span class="relative inline-block mt-2 overflow-hidden text-xs font-medium text-muted-foreground group-hover:text-foreground">
|
||||
<span class="absolute bottom-0 block w-full transition duration-150 ease-out transform -translate-x-full border-b border-foreground opacity-0 group-hover:translate-x-0 group-hover:opacity-100"></span>
|
||||
<span class="">View Website</span>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-card rounded-lg p-4 shadow-sm transition-all hover:shadow-md">
|
||||
<a href="https://alpinejs.dev" target="_blank" class="group">
|
||||
<img src="https://alpinejs.dev/alpine_long.svg" alt="Alpine.js" class="h-8 mb-3"/>
|
||||
<p class="text-sm text-card-foreground group-hover:text-primary transition-colors">
|
||||
Simplify your JavaScript with a lightweight, powerful framework.
|
||||
</p>
|
||||
<span class="inline-flex items-center text-xs font-medium text-primary mt-2 group-hover:underline">
|
||||
Explore features
|
||||
<svg class="w-4 h-4 ml-1 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-muted rounded-lg p-4">
|
||||
<h4 class="text-sm font-medium text-foreground mb-2">Grow With Us</h4>
|
||||
<p class="text-xs text-muted-foreground mb-3">
|
||||
Have a tool that complements our stack? Let's collaborate and reach developers together.
|
||||
</p>
|
||||
<a href="https://twitter.com/_axzilla" target="_blank" class="inline-flex items-center text-xs font-medium text-primary hover:underline">
|
||||
Connect
|
||||
<svg class="w-4 h-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</span>
|
||||
</a>
|
||||
if i < len(SidebarRightLinks)-1 {
|
||||
<hr class="border-t border-border"/>
|
||||
}
|
||||
}
|
||||
<div class="border border-border rounded-lg p-4 bg-muted/50 hover:bg-muted transition-colors duration-300">
|
||||
<h4 class="text-sm font-medium text-foreground mb-2">Your Logo Here</h4>
|
||||
<p class="text-xs text-muted-foreground mb-3">
|
||||
Join our showcase and connect with fellow developers.
|
||||
</p>
|
||||
<a href="https://twitter.com/_axzilla" target="_blank" class="inline-flex items-center text-xs font-medium text-primary hover:text-primary/80 transition-colors duration-300">
|
||||
Add Your Logo
|
||||
<svg class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@ templ DocsLayout() {
|
||||
@components.Navbar()
|
||||
</div>
|
||||
<div class="flex flex-1 overflow-hidden">
|
||||
<div class="hidden md:block border-r overflow-y-auto h-full">
|
||||
<div class="hidden lg:block border-r overflow-y-auto h-full">
|
||||
@components.Sidebar()
|
||||
</div>
|
||||
<main class="flex-1 overflow-y-auto h-full">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user