dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 16:31:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2715 from ZhenShuo2021/stylee

Browse Source 
💄 Style: multiple appearance improvements
This commit is contained in:
Nuno C.
2026-01-12 00:53:25 +00:00
committed by GitHub
parent 7090513545 1d275134ad
commit 7a23e560c3
7 changed files with 121 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
assets/css/compiled/main.css
View File

@@ -10,7 +10,6 @@
"Courier New", monospace;
--spacing: 0.25rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-md: 28rem;
--container-xl: 36rem;
--container-3xl: 48rem;
@@ -923,6 +922,9 @@
.mt-12 {
margin-top: calc(var(--spacing) * 12);
}
.mt-16 {
margin-top: calc(var(--spacing) * 16);
}
.mt-20 {
margin-top: calc(var(--spacing) * 20);
}
@@ -968,6 +970,9 @@
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-5 {
margin-bottom: calc(var(--spacing) * 5);
}
@@ -983,6 +988,9 @@
.mb-12 {
margin-bottom: calc(var(--spacing) * 12);
}
.mb-16 {
margin-bottom: calc(var(--spacing) * 16);
}
.mb-20 {
margin-bottom: calc(var(--spacing) * 20);
}
@@ -1112,6 +1120,9 @@
.h-14 {
height: calc(var(--spacing) * 14);
}
.h-16 {
height: calc(var(--spacing) * 16);
}
.h-24 {
height: calc(var(--spacing) * 24);
}
@@ -1196,6 +1207,9 @@
.w-12 {
width: calc(var(--spacing) * 12);
}
.w-16 {
width: calc(var(--spacing) * 16);
}
.w-24 {
width: calc(var(--spacing) * 24);
}
@@ -1728,10 +1742,10 @@
.bg-primary-200 {
background-color: rgba(var(--color-primary-200), 1);
}
.bg-primary-200\/50 {
background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 50%, transparent);
.bg-primary-200\/80 {
background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-200), 1), 1) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, rgba(var(--color-primary-200), 1) 50%, transparent);
background-color: color-mix(in oklab, rgba(var(--color-primary-200), 1) 80%, transparent);
}
}
.bg-primary-500 {
@@ -1746,10 +1760,10 @@
.bg-white {
background-color: #fff;
}
.bg-linear-65 {
--tw-gradient-position: 65deg;
.bg-linear-60 {
--tw-gradient-position: 60deg;
@supports (background-image: linear-gradient(in lab, red, red)) {
--tw-gradient-position: 65deg in oklab;
--tw-gradient-position: 60deg in oklab;
}
background-image: linear-gradient(var(--tw-gradient-stops));
}
@@ -2105,6 +2119,9 @@
.text-neutral-500 {
color: rgba(var(--color-neutral-500), 1);
}
.text-neutral-600 {
color: rgba(var(--color-neutral-600), 1);
}
.text-neutral-700 {
color: rgba(var(--color-neutral-700), 1);
}
@@ -2237,6 +2254,13 @@
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-2 {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
.ring-primary-500 {
--tw-ring-color: rgba(var(--color-primary-500), 1);
}
.outline {
outline-style: var(--tw-outline-style);
outline-width: 1px;
@@ -2324,6 +2348,11 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-colors {
transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -2390,6 +2419,23 @@
rotate: 0deg;
}
}
.group-hover\:scale-110 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-scale-x: 110%;
--tw-scale-y: 110%;
--tw-scale-z: 110%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.group-hover\:text-primary-500 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
color: rgba(var(--color-primary-500), 1);
}
}
}
.group-hover\:opacity-100 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
@@ -2397,6 +2443,21 @@
}
}
}
.group-hover\:ring-2 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
}
}
.group-hover\:ring-primary-500 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-ring-color: rgba(var(--color-primary-500), 1);
}
}
}
.group-data-\[twe-input-focused\]\:border-x-0 {
&:is(:where(.group)[data-twe-input-focused] *) {
border-inline-style: var(--tw-border-style);
@@ -2947,16 +3008,16 @@
margin-inline: auto;
}
}
.lg\:ms-auto {
@media (width >= 1024px) {
margin-inline-start: auto;
}
}
.lg\:mt-0 {
@media (width >= 1024px) {
margin-top: calc(var(--spacing) * 0);
}
}
.lg\:ml-auto {
@media (width >= 1024px) {
margin-left: auto;
}
}
.lg\:block {
@media (width >= 1024px) {
display: block;
@@ -3007,11 +3068,6 @@
max-width: none;
}
}
.lg\:max-w-xs {
@media (width >= 1024px) {
max-width: var(--container-xs);
}
}
.lg\:grid-flow-col-dense {
@media (width >= 1024px) {
grid-auto-flow: column dense;
@@ -3289,6 +3345,14 @@
background-color: rgba(var(--color-primary-800), 1);
}
}
.dark\:bg-primary-800\/30 {
&:is(.dark *) {
background-color: color-mix(in srgb, rgba(rgba(var(--color-primary-800), 1), 1) 30%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, rgba(var(--color-primary-800), 1) 30%, transparent);
}
}
}
.dark\:bg-primary-900 {
&:is(.dark *) {
background-color: rgba(var(--color-primary-900), 1);
@@ -3300,46 +3364,18 @@
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:from-neutral-900\/88 {
&:is(.dark *) {
--tw-gradient-from: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 88%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-from: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 88%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:from-primary-600 {
&:is(.dark *) {
--tw-gradient-from: rgba(var(--color-primary-600), 1);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:via-neutral-800\/72 {
&:is(.dark *) {
--tw-gradient-via: color-mix(in srgb, rgba(rgba(var(--color-neutral-800), 1), 1) 72%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-via: color-mix(in oklab, rgba(var(--color-neutral-800), 1) 72%, transparent);
}
--tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-via-stops);
}
}
.dark\:to-neutral-800 {
&:is(.dark *) {
--tw-gradient-to: rgba(var(--color-neutral-800), 1);
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:to-neutral-900\/55 {
&:is(.dark *) {
--tw-gradient-to: color-mix(in srgb, rgba(rgba(var(--color-neutral-900), 1), 1) 55%, transparent);
@supports (color: color-mix(in lab, red, red)) {
--tw-gradient-to: color-mix(in oklab, rgba(var(--color-neutral-900), 1) 55%, transparent);
}
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
}
.dark\:to-secondary-800 {
&:is(.dark *) {
--tw-gradient-to: rgba(var(--color-secondary-800), 1);
@@ -4228,35 +4264,35 @@ body.zen-mode-enable {
--adm-todo-text: oklch(44.3% 0.11 240.79);
}
html.dark {
--adm-note-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.1% 0.09 240.876) 40%, transparent), black 15%);
--adm-note-bg: color-mix(in srgb, oklch(44.3% 0.11 240.79), #0f0f0f 50%);
--adm-note-text: oklch(95.1% 0.026 236.824);
--adm-tip-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
--adm-tip-bg: color-mix(in srgb, oklch(43.2% 0.095 166.913), #0f0f0f 50%);
--adm-tip-text: oklch(95% 0.052 163.051);
--adm-important-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
--adm-important-bg: color-mix(in srgb, oklch(43.8% 0.218 303.724), #0f0f0f 50%);
--adm-important-text: oklch(94.6% 0.033 307.174);
--adm-warning-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.123 38.172) 40%, transparent), black 15%);
--adm-warning-bg: color-mix(in srgb, oklch(47% 0.157 37.304), #0f0f0f 45%);
--adm-warning-text: oklch(95.4% 0.038 75.164);
--adm-caution-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
--adm-caution-bg: color-mix(in srgb, oklch(44.4% 0.177 26.899), #0f0f0f 45%);
--adm-caution-text: oklch(93.6% 0.032 17.717);
--adm-abstract-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.8% 0.07 227.392) 40%, transparent), black 15%);
--adm-abstract-bg: color-mix(in srgb, oklch(45% 0.085 224.283), #0f0f0f 50%);
--adm-abstract-text: oklch(95.6% 0.045 203.388);
--adm-bug-bg: color-mix(in srgb, color-mix(in oklab, oklch(41% 0.159 10.272) 40%, transparent), black 15%);
--adm-bug-bg: color-mix(in srgb, oklch(45.5% 0.188 13.697), #0f0f0f 50%);
--adm-bug-text: oklch(94.1% 0.03 12.58);
--adm-danger-bg: color-mix(in srgb, color-mix(in oklab, oklch(39.6% 0.141 25.723) 40%, transparent), black 15%);
--adm-danger-bg: color-mix(in srgb, oklch(44.4% 0.177 26.899), #0f0f0f 45%);
--adm-danger-text: oklch(93.6% 0.032 17.717);
--adm-example-bg: color-mix(in srgb, color-mix(in oklab, oklch(38.1% 0.176 304.987) 40%, transparent), black 15%);
--adm-example-bg: color-mix(in srgb, oklch(43.8% 0.218 303.724), #0f0f0f 50%);
--adm-example-text: oklch(94.6% 0.033 307.174);
--adm-failure-bg: color-mix(in srgb, color-mix(in oklab, oklch(40.8% 0.153 2.432) 40%, transparent), black 15%);
--adm-failure-bg: color-mix(in srgb, oklch(45.9% 0.187 3.815), #0f0f0f 50%);
--adm-failure-text: oklch(94.8% 0.028 342.258);
--adm-info-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.9% 0.146 265.522) 40%, transparent), black 15%);
--adm-info-bg: color-mix(in srgb, oklch(42.4% 0.199 265.638), #0f0f0f 50%);
--adm-info-text: oklch(93.2% 0.032 255.585);
--adm-question-bg: color-mix(in srgb, color-mix(in oklab, oklch(41.4% 0.112 45.904) 40%, transparent), black 15%);
--adm-question-bg: color-mix(in srgb, oklch(47.3% 0.137 46.201), #0f0f0f 50%);
--adm-question-text: oklch(96.2% 0.059 95.617);
--adm-quote-bg: color-mix(in srgb, color-mix(in oklab, oklch(21% 0.034 264.665) 40%, transparent), black 15%);
--adm-quote-bg: color-mix(in srgb, oklch(27.8% 0.033 256.848), #0f0f0f 50%);
--adm-quote-text: oklch(96.7% 0.003 264.542);
--adm-success-bg: color-mix(in srgb, color-mix(in oklab, oklch(37.8% 0.077 168.94) 40%, transparent), black 15%);
--adm-success-bg: color-mix(in srgb, oklch(43.2% 0.095 166.913), #0f0f0f 50%);
--adm-success-text: oklch(95% 0.052 163.051);
--adm-todo-bg: color-mix(in srgb, color-mix(in oklab, oklch(44.3% 0.11 240.79) 40%, transparent), black 15%);
--adm-todo-bg: color-mix(in srgb, oklch(44.3% 0.11 240.79), #0f0f0f 50%);
--adm-todo-text: oklch(95.1% 0.026 236.824);
}
.admonition-content > :first-child {

30
assets/css/components/admonition.css
View File

@@ -68,50 +68,50 @@
html.dark {
/* GitHub Core Types (5) */
--adm-note-bg: color-mix(in srgb, theme("colors.sky.900 / 0.4"), black 15%);
--adm-note-bg: color-mix(in srgb, theme("colors.sky.800"), #0f0f0f 50%);
--adm-note-text: theme("colors.sky.100");
--adm-tip-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%);
--adm-tip-bg: color-mix(in srgb, theme("colors.emerald.800"), #0f0f0f 50%);
--adm-tip-text: theme("colors.emerald.100");
--adm-important-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%);
--adm-important-bg: color-mix(in srgb, theme("colors.purple.800"), #0f0f0f 50%);
--adm-important-text: theme("colors.purple.100");
--adm-warning-bg: color-mix(in srgb, theme("colors.orange.900 / 0.4"), black 15%);
--adm-warning-bg: color-mix(in srgb, theme("colors.orange.800"), #0f0f0f 45%);
--adm-warning-text: theme("colors.orange.100");
--adm-caution-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%);
--adm-caution-bg: color-mix(in srgb, theme("colors.red.800"), #0f0f0f 45%);
--adm-caution-text: theme("colors.red.100");
/* Extended Types (10) */
--adm-abstract-bg: color-mix(in srgb, theme("colors.cyan.900 / 0.4"), black 15%);
--adm-abstract-bg: color-mix(in srgb, theme("colors.cyan.800"), #0f0f0f 50%);
--adm-abstract-text: theme("colors.cyan.100");
--adm-bug-bg: color-mix(in srgb, theme("colors.rose.900 / 0.4"), black 15%);
--adm-bug-bg: color-mix(in srgb, theme("colors.rose.800"), #0f0f0f 50%);
--adm-bug-text: theme("colors.rose.100");
--adm-danger-bg: color-mix(in srgb, theme("colors.red.900 / 0.4"), black 15%);
--adm-danger-bg: color-mix(in srgb, theme("colors.red.800"), #0f0f0f 45%);
--adm-danger-text: theme("colors.red.100");
--adm-example-bg: color-mix(in srgb, theme("colors.purple.900 / 0.4"), black 15%);
--adm-example-bg: color-mix(in srgb, theme("colors.purple.800"), #0f0f0f 50%);
--adm-example-text: theme("colors.purple.100");
--adm-failure-bg: color-mix(in srgb, theme("colors.pink.900 / 0.4"), black 15%);
--adm-failure-bg: color-mix(in srgb, theme("colors.pink.800"), #0f0f0f 50%);
--adm-failure-text: theme("colors.pink.100");
--adm-info-bg: color-mix(in srgb, theme("colors.blue.900 / 0.4"), black 15%);
--adm-info-bg: color-mix(in srgb, theme("colors.blue.800"), #0f0f0f 50%);
--adm-info-text: theme("colors.blue.100");
--adm-question-bg: color-mix(in srgb, theme("colors.amber.900 / 0.4"), black 15%);
--adm-question-bg: color-mix(in srgb, theme("colors.amber.800"), #0f0f0f 50%);
--adm-question-text: theme("colors.amber.100");
--adm-quote-bg: color-mix(in srgb, theme("colors.gray.900 / 0.4"), black 15%);
--adm-quote-bg: color-mix(in srgb, theme("colors.gray.800"), #0f0f0f 50%);
--adm-quote-text: theme("colors.gray.100");
--adm-success-bg: color-mix(in srgb, theme("colors.emerald.900 / 0.4"), black 15%);
--adm-success-bg: color-mix(in srgb, theme("colors.emerald.800"), #0f0f0f 50%);
--adm-success-text: theme("colors.emerald.100");
--adm-todo-bg: color-mix(in srgb, theme("colors.sky.800 / 0.4"), black 15%);
--adm-todo-bg: color-mix(in srgb, theme("colors.sky.800"), #0f0f0f 50%);
--adm-todo-text: theme("colors.sky.100");
}

6
layouts/_default/list.html
View File

@@ -43,10 +43,10 @@
{{/* Description (markdown content) */}}
{{ $tocMargin := cond $showToc "mt-12" "mt-0" }}
{{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
<section class="{{ $tocMargin }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row">
<section class="{{ $tocMargin }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row mb-10">
{{ if $showToc }}
<div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ps-5 lg:sticky {{ $topClass }}">
<div class="order-first lg:ms-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
<div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
{{ partial "toc.html" . }}
</div>
</div>

6
layouts/_default/single.html
View File

@@ -36,11 +36,9 @@
{{ $showToc := and $enableToc (in .TableOfContents "<ul") }}
{{ $topClass := cond (hasPrefix site.Params.header.layout "fixed") "lg:top-[140px]" "lg:top-10" }}
{{ if $showToc }}
<div class="order-first lg:ml-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
<div class="order-first lg:ms-auto px-0 lg:order-last lg:ps-8 lg:max-w-2xs">
<div class="toc ps-5 print:hidden lg:sticky {{ $topClass }}">
{{ if $showToc }}
{{ partial "toc.html" . }}
{{ end }}
{{ partial "toc.html" . }}
</div>
</div>
{{ end }}

4
layouts/partials/contributors.html
View File

@@ -2,7 +2,7 @@
<section class="contributors-section mt-12 mb-16">
<div class="flex flex-col items-center mb-6">
<div class="flex items-center gap-2 mb-2">
<span class="text-2xl text-neutral-600 dark:text-neutral-400">
<span class="text-2xl text-neutral-800 dark:text-neutral-200">
{{ partial "icon.html" "github" }}
</span>
<h2 class="text-2xl font-extrabold text-neutral-800 dark:text-neutral-200">
@@ -24,7 +24,7 @@
title="{{ .username }} ({{ .contributions }} contributions)"
aria-label="Contributor: {{ .username }}">
<img
class="nozoom h-10 w-10 rounded-full opacity-80 transition-all group-hover:opacity-100 group-hover:scale-110 group-hover:ring-2 group-hover:ring-primary-500"
class="nozoom h-10 w-10 rounded-full transition-all group-hover:scale-110 group-hover:ring-2 group-hover:ring-primary-500"
src="{{ .avatar_url }}"
alt="{{ .username }}"
width="40"

2
layouts/partials/header/fixed-fill-blur.html
View File

@@ -2,7 +2,7 @@
<div class="fixed inset-x-0 z-100">
<div
id="menu-blur"
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl backdrop-saturate-220 backdrop-brightness-112 dark:backdrop-saturate-180 dark:backdrop-brightness-95 bg-primary-200/50 bg-linear-65 dark:from-neutral-900/88 dark:via-neutral-800/72 dark:to-neutral-900/55 shadow-xl"></div>
class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl backdrop-saturate-220 backdrop-brightness-112 dark:backdrop-saturate-180 dark:backdrop-brightness-95 bg-primary-200/80 bg-linear-60 dark:bg-primary-800/30 shadow-xl"></div>
<div class="relative m-auto leading-7 max-w-7xl px-6 sm:px-14 md:px-24 lg:px-32">
{{ partial "header/basic.html" . }}
</div>

4
layouts/shortcodes/alert.html
View File

@@ -10,9 +10,9 @@
<div
{{ if not ($.Scratch.Get "cardColor") }}
class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"
class="flex px-4 py-3 rounded-md shadow bg-primary-100 dark:bg-primary-900"
{{ else }}
class="flex px-4 py-3 rounded-md" style="background-color: {{ $.Scratch.Get "cardColor" }}"
class="flex px-4 py-3 rounded-md shadow" style="background-color: {{ $.Scratch.Get "cardColor" }}"
{{ end }}
>
<span