centersl/docker-docs
1
0
Fork 0
mirror of https://github.com/docker/docs.git synced 2026-03-27 14:28:47 +07:00
Code Issues Packages Projects Releases Wiki Activity

site: improve home banner's bg image/color blend

Browse Source 
Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson
2024-02-08 10:54:14 +01:00
parent 287cfd605e
commit 5e716537cb
2 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
assets/css/global.css
View File

@@ -36,33 +36,36 @@
@apply underline decoration-blue-light decoration-4 underline-offset-4 dark:decoration-blue-dark;
}
.bg-pattern-blue-light {
background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-blue.webp');
@apply bg-no-repeat bg-cover;
.bg-pattern-blue {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-blue.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
.bg-pattern-purple-light {
background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-purple.webp');
@apply bg-no-repeat bg-cover;
.bg-pattern-purple {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-purple.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
.bg-pattern-verde-light {
background: linear-gradient(to right, theme(colors.white / 50%), theme(colors.white / 70%)), url('/assets/images/bg-pattern-verde.webp');
@apply bg-no-repeat bg-cover;
}
.bg-pattern-blue-dark {
background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-blue.webp');
@apply bg-no-repeat bg-cover;
}
.bg-pattern-purple-dark {
background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-purple.webp');
@apply bg-no-repeat bg-cover;
}
.bg-pattern-verde-dark {
background: linear-gradient(to right, theme(colors.black / 70%), theme(colors.black / 70%)), url('/assets/images/bg-pattern-verde.webp');
@apply bg-no-repeat bg-cover;
.bg-pattern-verde {
background-color: theme(colors.white / 50%);
background-image: url('/assets/images/bg-pattern-verde.webp');
background-blend-mode: overlay;
background-size: cover;
background-repeat: none;
.dark & {
background-color: theme(colors.black / 70%);
}
}
}

6
layouts/index.html
View File

@@ -17,7 +17,7 @@
{{ partial "header.html" . }}
<main class="flex min-h-screen w-full flex-col items-stretch self-center">
<div class="flex w-[1200px] flex-col items-stretch gap-20 self-center py-20 lg:w-full lg:px-4">
<div class="bg-pattern-blue-light dark:bg-pattern-blue-dark relative overflow-hidden rounded drop-shadow">
<div class="bg-pattern-blue relative overflow-hidden rounded drop-shadow">
<div class="flex h-full flex-col items-start justify-between gap-4 p-8">
<div class="flex items-center gap-6">
<span class="icon-svg text-violet-light dark:text-violet-dark">
@@ -110,7 +110,7 @@
</div>
<div class="z-10 grid grid-cols-2 gap-20 md:grid-cols-1">
<div class="bg-pattern-verde-light dark:bg-pattern-verde-dark relative rounded p-6 drop-shadow">
<div class="bg-pattern-verde relative rounded p-6 drop-shadow">
<div class="flex h-full flex-col items-start justify-between gap-12">
<div class="flex flex-col gap-4">
<h2 class="font-medium">Getting started</h2>
@@ -132,7 +132,7 @@
</div>
</div>
<div class="rounded-[6px] bg-gradient-to-br from-blue-light-400 to-magenta-light-400 dark:from-blue-dark-400 dark:to-magenta-dark-400 p-[2px] drop-shadow">
<div class="bg-pattern-purple-light dark:bg-pattern-purple-dark rounded p-6">
<div class="bg-pattern-purple rounded p-6">
<div class="flex flex-col gap-12">
<div class="flex flex-col gap-4">
<h2 class="font-medium">Featured</h2>