♻️ Refactor: Autogen classes and use consistent naming

- This should greatly improve consistency
- This mainly targets one of my PRs https://github.com/nunocoracao/blowfish/pull/2211
This commit is contained in:
Served Smart
2025-06-18 16:03:01 +02:00
parent 8d940881a4
commit 17faf8b738
24 changed files with 81 additions and 113 deletions

View File

@@ -284,18 +284,33 @@ body.zen-mode-enable {
.left-0 {
left: calc(var(--spacing) * 0);
}
.left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
left: calc(max(-50vw, -800px) + 50%);
}
.-z-10 {
z-index: calc(10 * -1);
}
.z-2 {
z-index: 2;
}
.z-10 {
z-index: 10;
}
.z-30 {
z-index: 30;
}
.z-80 {
z-index: 80;
}
.z-100 {
z-index: 100;
}
.z-500 {
z-index: 500;
}
.z-\[1\] {
z-index: 1;
}
.z-\[2\] {
z-index: 2;
}
.z-\[999\] {
z-index: 999;
}
@@ -826,6 +841,12 @@ body.zen-mode-enable {
.\!mt-0 {
margin-top: calc(var(--spacing) * 0) !important;
}
.-mt-\[2px\] {
margin-top: calc(2px * -1);
}
.-mt-\[15px\] {
margin-top: calc(15px * -1);
}
.mt-0 {
margin-top: calc(var(--spacing) * 0);
}
@@ -859,18 +880,21 @@ body.zen-mode-enable {
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
.mt-\[-2px\] {
margin-top: -2px;
}
.mt-\[0\.1rem\] {
margin-top: 0.1rem;
}
.mt-\[0\.5rem\] {
margin-top: 0.5rem;
}
.-mr-48 {
margin-right: calc(var(--spacing) * -48);
}
.-mr-\[100\%\] {
margin-right: calc(100% * -1);
}
.mr-0 {
margin-right: calc(var(--spacing) * 0);
}
.mr-1 {
margin-right: calc(var(--spacing) * 1);
}
@@ -883,6 +907,9 @@ body.zen-mode-enable {
.mr-5 {
margin-right: calc(var(--spacing) * 5);
}
.mr-\[10px\] {
margin-right: 10px;
}
.mr-auto {
margin-right: auto;
}
@@ -934,6 +961,9 @@ body.zen-mode-enable {
.-ml-12 {
margin-left: calc(var(--spacing) * -12);
}
.ml-0 {
margin-left: calc(var(--spacing) * 0);
}
.ml-2 {
margin-left: calc(var(--spacing) * 2);
}
@@ -1743,6 +1773,15 @@ body.zen-mode-enable {
.pt-16 {
padding-top: calc(var(--spacing) * 16);
}
.pt-\[2px\] {
padding-top: 2px;
}
.pt-\[5px\] {
padding-top: 5px;
}
.pr-0 {
padding-right: calc(var(--spacing) * 0);
}
.pr-\[24px\] {
padding-right: 24px;
}
@@ -1761,6 +1800,12 @@ body.zen-mode-enable {
.pb-32 {
padding-bottom: calc(var(--spacing) * 32);
}
.pb-\[3px\] {
padding-bottom: 3px;
}
.pl-0 {
padding-left: calc(var(--spacing) * 0);
}
.pl-2 {
padding-left: calc(var(--spacing) * 2);
}
@@ -3698,42 +3743,6 @@ pre {
height: 0px;
visibility: hidden;
}
.center-relative-left {
left: calc(max(-50vw, -800px) + 50%);
}
.margin-0 {
margin: 0;
}
.margin-top-\[-15px\] {
margin-top: -15px;
}
.margin-top-\[0\.5rem\] {
margin-top: 0.5rem;
}
.margin-right-\[10px\] {
margin-right: 10px;
}
.margin-left-\[0px\] {
margin-left: 0px;
}
.padding-main-menu {
padding: 2px 0 3px 0;
}
.padding-top-\[5px\] {
padding-top: 5px;
}
.z-index-\[-10\] {
z-index: -10;
}
.z-index-80 {
z-index: 80;
}
.z-index-100 {
z-index: 100;
}
.z-index-500 {
z-index: 500;
}
[id^="fn"], [id^="fnref"] {
scroll-margin-top: 145px;
}

View File

@@ -453,46 +453,6 @@ pre {
visibility: hidden;
}
.center-relative-left {
left: calc(max(-50vw, -800px) + 50%);
}
.margin-0 {
margin: 0;
}
.margin-top-\[-15px\] {
margin-top: -15px;
}
.margin-top-\[0\.5rem\] {
margin-top: 0.5rem;
}
.margin-right-\[10px\] {
margin-right: 10px;
}
.margin-left-\[0px\] {
margin-left: 0px;
}
.padding-main-menu {
padding: 2px 0 3px 0;
}
.padding-top-\[5px\] {
padding-top: 5px;
}
.z-index-\[-10\] {
z-index: -10;
}
.z-index-80 {
z-index: 80;
}
.z-index-100 {
z-index: 100;
}
.z-index-500 {
z-index: 500;
}
/* Offset scroll position to avoid header overlap */
[id^="fn"],
[id^="fnref"] {

View File

@@ -87,7 +87,7 @@
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ if $cardViewScreenWidth }}
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
{{ end }}
<h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
@@ -103,7 +103,7 @@
{{ else }}
{{ if $cardViewScreenWidth }}
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ else }}
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3">

View File

@@ -88,7 +88,7 @@
{{ if $groupByYear }}
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
<h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
</h2>
@@ -102,7 +102,7 @@
{{ else }}
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ range .Pages }}

View File

@@ -100,7 +100,7 @@
{{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
{{ range $context.GetTerms $taxonomy }}
<span
class="mr-2 margin-top-[0.5rem]"
class="mr-2 mt-[0.5rem]"
onclick="window.open({{ .RelPermalink }},'_self');return false;">
{{ partial "badge.html" .LinkTitle }}
</span>
@@ -115,7 +115,7 @@
{{ if .Params.showCategoryOnly | default (.Site.Params.article.showCategoryOnly | default false) }}
<div class="flex flex-row flex-wrap items-center">
{{ range (.GetTerms "categories") }}
<span class="mr-2 margin-top-[0.5rem]" onclick="window.open({{ .RelPermalink }},'_self');return false;">
<span class="mr-2 mt-[0.5rem]" onclick="window.open({{ .RelPermalink }},'_self');return false;">
{{ partial "badge.html" .LinkTitle }}
</span>
{{ end }}

View File

@@ -106,7 +106,7 @@
</div>
<div
id="menu-wrapper"
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 padding-top-[5px]">
class="fixed inset-0 z-30 invisible w-screen h-screen m-0 overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50 pt-[5px]">
<ul
class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl">
<li id="menu-close-button">
@@ -154,7 +154,7 @@
{{/* ========== Render HTML ========== */}}
<div
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 padding-main-menu">
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
{{ template "HeaderLogo" . }}
<div class="flex flex-1 items-center justify-between">
<nav class="flex space-x-3">
@@ -172,8 +172,7 @@
{{ if .Site.Menus.subnavigation }}
<div
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3
{{ if .Site.Params.Logo }}margin-top-[-15px]{{ end }}">
class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3{{ if .Site.Params.Logo }} -mt-[15px]{{ end }}">
<div class="hidden md:flex items-center space-x-5">
{{ range .Site.Menus.subnavigation }}
<a

View File

@@ -1,5 +1,5 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-index-100">
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom bg-neutral dark:bg-neutral-800"></div>

View File

@@ -1,5 +1,5 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] bg-neutral dark:bg-neutral-800 z-index-100">
<div class="fixed inset-x-0 pl-[24px] pr-[24px] bg-neutral dark:bg-neutral-800 z-100">
<div class="relative max-w-[64rem] ml-auto mr-auto">
{{ partial "header/basic.html" . }}
</div>

View File

@@ -1,7 +1,7 @@
<div class="min-h-[148px]"></div>
<div
class="fixed inset-x-0 min-h-[130px] opacity-65 pl-[24px] pr-[24px] bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal z-index-80"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-index-100">
class="fixed inset-x-0 min-h-[130px] opacity-65 pl-[24px] pr-[24px] bg-gradient-to-b from-neutral from-60% dark:from-neutral-800 to-transparent mix-blend-normal z-80"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>

View File

@@ -1,5 +1,5 @@
<div class="min-h-[148px]"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-index-100">
<div class="fixed inset-x-0 pl-[24px] pr-[24px] z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div>

View File

@@ -4,7 +4,7 @@
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
<div class="mx-auto max-w-7xl p-0">
<div class="relative sm:overflow-hidden">
<div class="fixed inset-x-0 top-0 z-index-[-10]">
<div class="fixed inset-x-0 top-0 -z-10">
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -22,7 +22,7 @@
{{ end }}
{{ if $homepageImage }}
<img
class="w-full h-[1000px] object-cover m-0 nozoom margin-0"
class="w-full h-[1000px] object-cover nozoom mt-0 mr-0 mb-0 ml-0"
src="{{ $homepageImage.RelPermalink }}"
role="presentation">
<div

View File

@@ -22,7 +22,7 @@
{{ end }}
{{ end }}
{{ if $homepageImage }}
<img class="h-full w-full object-cover m-0 nozoom margin-0" src="{{ $homepageImage.RelPermalink }}">
<img class="h-full w-full object-cover nozoom mt-0 mr-0 mb-0 ml-0" src="{{ $homepageImage.RelPermalink }}">
{{ if not $disableHeroImageFilter }}
<div
class="absolute inset-0 bg-gradient-to-r from-primary-500 to-secondary-600 dark:from-primary-600 dark:to-secondary-800 mix-blend-multiply"></div>

View File

@@ -17,7 +17,7 @@
{{ end }}
<span
id="{{ $id }}"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full mt-[-2px] align-middle bg-neutral-300 dark:bg-neutral-400"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="likes"
>loading</span
>

View File

@@ -17,7 +17,7 @@
{{ end }}
<span
id="{{ $id }}"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full mt-[-2px] align-middle bg-neutral-300 dark:bg-neutral-400"
class="animate-pulse inline-block text-transparent max-h-3 rounded-full -mt-[2px] align-middle bg-neutral-300 dark:bg-neutral-400"
title="views"
>loading</span
>

View File

@@ -2,7 +2,7 @@
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<div class="relative w-screen max-w-[1600px] px-[30px] left-[calc(max(-50vw,-800px)+50%)]">
<section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
{{ range first $recentArticles (.Paginate (where .Site.RegularPages "Type" "in"
.Site.Params.mainSections)).Pages

View File

@@ -1,6 +1,6 @@
<div
id="search-wrapper"
class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-index-500"
class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh] z-500"
data-url="{{ "" | absLangURL }}">
<div
id="search-modal"

View File

@@ -1,5 +1,5 @@
{{ if .Params.series }}
<details class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 margin-left-[0px]">
<details class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 ml-0">
{{ partial "series/series_base.html" . }}
</details>
{{ end }}

View File

@@ -1,6 +1,6 @@
{{ if .Params.series }}
<details
class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 margin-left-[0px]"
class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 ml-0"
{{ if .Params.seriesOpened | default (.Site.Params.article.seriesOpened | default false) }}open{{ end }}>
{{ partial "series/series_base.html" . }}
</details>

View File

@@ -19,7 +19,7 @@
<div id="{{ $id }}" class="relative" data-twe-carousel-init data-twe-ride="carousel">
<div
class="absolute right-0 bottom-0 left-0 z-[2] mx-[15%] mb-10 flex list-none justify-center p-0"
class="absolute right-0 bottom-0 left-0 z-2 mx-[15%] mb-10 flex list-none justify-center p-0"
data-twe-carousel-indicators>
{{ $num := 0 }}
{{ range $images }}
@@ -57,7 +57,7 @@
</div>
<button
class="absolute top-0 bottom-0 left-0 z-[2] flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
class="absolute top-0 bottom-0 left-0 z-2 flex w-[15%] items-center justify-center border-0 bg-none p-0 text-center text-white opacity-50 transition-opacity duration-150 ease-[cubic-bezier(0.25,0.1,0.25,1.0)] hover:text-white hover:no-underline hover:opacity-90 hover:outline-none focus:text-white focus:no-underline focus:opacity-90 focus:outline-none motion-reduce:transition-none"
type="button"
data-twe-target="#{{ $id }}"
data-twe-slide="prev">

View File

@@ -8,7 +8,7 @@
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
<span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
{{ partial "icon.html" "codeberg" }}
</span>
<div

View File

@@ -8,7 +8,7 @@
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
<span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
{{ partial "icon.html" "forgejo" }}
</span>
<div

View File

@@ -8,7 +8,7 @@
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
<span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
{{ partial "icon.html" "gitea" }}
</span>
<div

View File

@@ -23,7 +23,7 @@
<div class="w-full md:w-auto pt-3 p-5">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
<span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
{{ partial "icon.html" "github" }}
</span>
<div

View File

@@ -8,7 +8,7 @@
<div
class="w-full md:w-auto pt-3 p-5 border border-neutral-200 dark:border-neutral-700 border rounded-md shadow-2xl">
<div class="flex items-center">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
<span class="text-2xl text-neutral-800 dark:text-neutral mr-[10px]">
{{ partial "icon.html" "gitlab" }}
</span>
<div