♻️ refactor: Move most inline styles out of line

- Move out of line by using already defined css classes
- Move paddings out of line
- Move margins out of line
- Move z-indexes out of line
- Move center-relative-left out of line
This commit is contained in:
Served Smart
2025-06-05 19:07:33 +02:00
parent 8387c6ea0a
commit 9f85c0566e
25 changed files with 74 additions and 39 deletions

View File

@@ -451,6 +451,46 @@ 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"] {
scroll-margin-top: 145px;

View File

@@ -4,8 +4,7 @@
{{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}
<span
class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100">
<a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700"
style="text-decoration-line: none !important;" href="#{{ $anchor }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>
<a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700 !no-underline" href="#{{ $anchor }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>
</span>
{{ end }}
</h{{ .Level }}>

View File

@@ -91,7 +91,7 @@
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
{{ if $cardViewScreenWidth }}
<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
{{ end }}
<h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
@@ -107,7 +107,7 @@
{{ else }}
{{ if $cardViewScreenWidth }}
<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<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

@@ -90,7 +90,7 @@
{{ if $groupByYear }}
{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }}
<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<h2 class="mt-12 mb-3 text-2xl font-bold text-neutral-700 first:mt-8 dark:text-neutral-300">
{{ .Key }}
</h2>
@@ -104,7 +104,7 @@
{{ else }}
<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<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

@@ -71,7 +71,7 @@
{{ if (eq $taxonomy "authors")}}
{{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
{{ range $i, $a := $context.GetTerms $taxonomy }}
{{ if not (eq $i 0) }} ,&nbsp; {{ end }} <div style="cursor: pointer;" onclick="window.open({{ $a.RelPermalink }},'_self');return false;">{{ $a.LinkTitle }}</div>
{{ if not (eq $i 0) }} ,&nbsp; {{ end }} <div class="cursor-pointer" onclick="window.open({{ $a.RelPermalink }},'_self');return false;">{{ $a.LinkTitle }}</div>
{{ end }}
{{ end }}
{{ end }}
@@ -86,7 +86,7 @@
{{ if and (not (eq $taxonomy "authors")) (not (eq $taxonomy "series"))}}
{{ if (gt (len ($context.GetTerms $taxonomy)) 0) }}
{{ range $context.GetTerms $taxonomy }}
<span style="margin-top:0.5rem" class="mr-2" onclick="window.open({{ .RelPermalink }},'_self');return false;">
<span class="mr-2 margin-top-[0.5rem]" onclick="window.open({{ .RelPermalink }},'_self');return false;">
{{ partial "badge.html" .LinkTitle }}
</span>
{{ end }}
@@ -100,7 +100,7 @@
{{ if .Params.showCategoryOnly | default (.Site.Params.article.showCategoryOnly | default false) }}
<div class="flex flex-row flex-wrap items-center">
{{ range (.GetTerms "categories") }}
<span style="margin-top:0.5rem" class="mr-2" onclick="window.open({{ .RelPermalink }},'_self');return false;">
<span class="mr-2 margin-top-[0.5rem]" onclick="window.open({{ .RelPermalink }},'_self');return false;">
{{ partial "badge.html" .LinkTitle }}
</span>
{{ end }}

View File

@@ -1,4 +1,4 @@
<span class="flex" style="cursor: pointer;">
<span class="flex cursor-pointer">
<span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">
{{ . }}
</span>

View File

@@ -1,5 +1,4 @@
<div style="padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px"
class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3">
<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">
{{ if .Site.Params.Logo }}
{{ $logo := resources.Get .Site.Params.Logo }}
{{ if $logo }}
@@ -98,8 +97,7 @@
<div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400">
{{ partial "icon.html" "bars" }}
</div>
<div id="menu-wrapper" style="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">
<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]">
<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">
@@ -150,8 +148,7 @@
</div>
{{ 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
}} style="margin-top:-15px" {{ end }}>
<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 }}">
<div class="hidden md:flex items-center space-x-5">
{{ range .Site.Menus.subnavigation }}
<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }}

View File

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

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" style="z-index:100">
<div class="fixed inset-x-0 pl-[24px] pr-[24px] bg-neutral dark:bg-neutral-800 z-index-100">
<div class="relative max-w-[64rem] ml-auto mr-auto">
{{ partial "header/basic.html" . }}
</div>

View File

@@ -1,6 +1,6 @@
<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" style="z-index:80"></div>
<div class="fixed inset-x-0 pl-[24px] pr-[24px]" style="z-index:100">
<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">
<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>
<div class="relative max-w-[64rem] ml-auto mr-auto">
{{ partial "header/basic.html" . }}

View File

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

View File

@@ -34,7 +34,7 @@
<figure>
<img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" src="{{ .RelPermalink }}">
{{ if $caption }}
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline" style="text-align: center;"> {{ $caption | markdownify }} </figcaption>
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center"> {{ $caption | markdownify }} </figcaption>
{{end}}
</figure>
{{ end }}
@@ -43,7 +43,7 @@
<figure>
<img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
{{ if $caption }}
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline" style="text-align: center;"> {{ $caption | markdownify }} </figcaption>
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center"> {{ $caption | markdownify }} </figcaption>
{{end}}
</figure>
{{ end }}
@@ -52,7 +52,7 @@
<figure>
<img class="w-full rounded-lg single_hero_round nozoom" alt="{{ $alt }}" width="{{ .Width }}" height="{{ .Height }}" src="{{ .RelPermalink }}">
{{ if $caption }}
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline" style="text-align: center;"> {{ $caption | markdownify }} </figcaption>
<figcaption class="text-sm text-neutral-700 dark:text-neutral-400 hover:underline text-center"> {{ $caption | markdownify }} </figcaption>
{{end}}
</figure>
{{ end }}

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" style="z-index:-10">
<div class="fixed inset-x-0 top-0 z-index-[-10]">
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -21,7 +21,7 @@
{{ end }}
{{ end }}
{{ if $homepageImage }}
<img class="w-full h-[1000px] object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}" role="presentation" style="margin: 0">
<img class="w-full h-[1000px] object-cover m-0 nozoom margin-0" src="{{ $homepageImage.RelPermalink }}" role="presentation">
<div
class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
</div>

View File

@@ -13,7 +13,7 @@
</article>
</div>
<div class="mt-6 sm:mt-16 lg:mt-0 mx-auto max-w-xl px-4 sm:px-6 lg:mx-0 lg:max-w-none lg:py-16 lg:px-0">
<div class="-mr-48 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0" style="width:100%">
<div class="-mr-48 md:-mr-16 lg:relative lg:m-0 lg:h-full lg:px-0 w-full">
{{ $homepageImage := "" }}
{{ with .Site.Params.defaultBackgroundImage }}
{{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}

View File

@@ -22,7 +22,7 @@
{{ end }}
{{ end }}
{{ if $homepageImage }}
<img class="h-full w-full object-cover m-0 nozoom" src="{{ $homepageImage.RelPermalink }}" style="margin: 0">
<img class="h-full w-full object-cover m-0 nozoom margin-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">

View File

@@ -2,7 +2,7 @@
<button id="button_likes"
class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400"
onclick="process_article()">
<span id="button_likes_heart" style="display:none" class="inline-block align-text-bottom">{{ partial "icon.html" "heart" }} </span>
<span id="button_likes_heart" class="inline-block align-text-bottom hidden">{{ partial "icon.html" "heart" }} </span>
<span id="button_likes_emtpty_heart" class="inline-block align-text-bottom">{{ partial "icon.html" "heart-empty" }}</span>
<span id="button_likes_text">&nbsp;Like</span>
</button>

View File

@@ -1,7 +1,7 @@
{{ $recentArticles := 5 }}
{{ $recentArticles = .Site.Params.homepage.showRecentItems }}
<div class="relative w-screen max-w-[1600px] px-[30px]" style="left: calc(max(-50vw,-800px) + 50%);">
<div class="relative w-screen max-w-[1600px] px-[30px] center-relative-left">
<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"

View File

@@ -1,8 +1,7 @@
<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]"
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"
data-url="{{ "" | absLangURL }}"
style="z-index:500"
>
<div
id="search-modal"

View File

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

View File

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

View File

@@ -10,7 +10,7 @@
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" style="margin-right:10px;">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
{{ partial "icon.html" "codeberg" }}
</span>
<div

View File

@@ -10,7 +10,7 @@
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" style="margin-right:10px;">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
{{ partial "icon.html" "forgejo" }}
</span>
<div

View File

@@ -10,7 +10,7 @@
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" style="margin-right:10px;">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
{{ partial "icon.html" "gitea" }}
</span>
<div

View File

@@ -27,7 +27,7 @@
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" style="margin-right:10px;">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
{{ partial "icon.html" "github" }}
</span>
<div id="{{ $id }}-full_name"

View File

@@ -9,7 +9,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" style="margin-right:10px;">
<span class="text-2xl text-neutral-800 dark:text-neutral margin-right-[10px]">
{{ partial "icon.html" "gitlab" }}
</span>
<div id="{{ $id }}-name_with_namespace" class="m-0 font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral">