zoomyboy
/
wn-discoteam-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update grids
continuous-integration/drone/push Build is passing Details

This commit is contained in:
philipp lang 2024-09-26 18:44:01 +02:00
parent ad09ab0885
commit 98dda51654
2 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
partials/imagegrid-end.htm
View File

@ -1,12 +1,9 @@
</div>
</div>
<div class="lg:col-span-3">
<div class="relative" style="
--polygon: 76% 4%, 100% 0, 100% 100%, 66% 95%, 29% 96%, 0 100%, 6% 44%, 3% 8%, 34% 1%;
--polygonmobile: 0 0, 65% 7%, 100% 0, 100% 100%, 29% 93%, 0 100%;
">
<div class="absolute w-[calc(100%+10px)] h-[calc(100%+20px)] top-[-10px] left-[-10px] md:meft-0 bg-neutral-800 clip-path-polygon-[var(--polygonmobile)] lg:clip-path-polygon-[var(--polygon)]"></div>
<img src="{{image | media }}" class="w-full h-[60vh] lg:h-[80vh] object-cover clip-path-polygon-[var(--polygonmobile)] lg:clip-path-polygon-[var(--polygon)]" alt="{{ alt }}" />
</div>
</div>
</div>
</main>
<aside class="lg:col-span-3">
<figure class="relative">
<div class="absolute w-full lg:w-[calc(100%+10px)] h-[calc(100%+20px)] top-[-10px] bg-neutral-800"></div>
<img src="{{image | media }}" class="w-full h-[60vh] lg:h-[80vh] object-cover" alt="{{ alt }}" />
</figure>
</aside>
</section>

24
partials/imagegrid-start.htm
View File

@ -1,4 +1,22 @@
<div class="grid lg:grid-cols-5 items-center">
<div class="lg:col-span-2 row-start-2 lg:row-start-auto w-[calc(100%-3rem)] sm:w-96 lg:max-w-none lg:w-full mx-auto lg:py-8 lg:pl-10">
<div class="prose prose-invert prose-lg bg-neutral-800 p-8 rounded-b-xl lg:rounded-b-0 rounded-l-0 lg:rounded-l-xl max-w-none pt-[12vw] lg:pt-8 mt-[-10vw] lg:mt-0 lg:mr-[-4vw] pr-[4vw] [&>h2]:text-xl md:[&>h2]:text-xl xl:[&>h2]:text-[1.8vw]">
<section class="grid lg:grid-cols-[1fr_repeat(3,9%)_1fr] items-center lg:[&:nth-child(even)_aside]:col-start-1 lg:[&:nth-child(even)_main]:col-start-4 lg:[&:nth-child(even)>*]:row-start-1
[&_figure>*]:clip-path-polygon-[var(--polygonmobile)] lg:[&_figure>*]:clip-path-polygon-[var(--polygon)]
lg:[&:nth-child(even)_figure>*]:clip-path-polygon-[var(--polygonOdd)]
lg:[&:nth-child(even)_figure>div]:right-[-10px]
lg:[&:nth-child(odd)_figure>div]:left-[-10px]
lg:[&:nth-child(odd)_main>div]:mr-[-4vw] lg:[&:nth-child(odd)_main>div]:pr-[8vw]
lg:[&:nth-child(even)_main>div]:ml-[-4vw] lg:[&:nth-child(even)_main>div]:pl-[8vw]
lg:[&:nth-child(odd)_main>div]:rounded-l-xl lg:[&:nth-child(even)_main>div]:rounded-r-xl
lg:[&:nth-child(odd)_main]:pl-10
lg:[&:nth-child(even)_main]:pr-10
"
style="
--polygon: 8% 0, 100% 0%, 100% 100%, 8% 100%, 0% 50%;
--polygonOdd: 92% 0, 100% 50%, 92% 100%, 0 100%, 0 0;
--polygonmobile: 0 0, 65% 7%, 100% 0, 100% 100%, 29% 93%, 0 100%;
"
>
<main class="lg:col-span-2 row-start-2 lg:row-start-auto w-[calc(100%-3rem)] sm:w-96 lg:max-w-none lg:w-full mx-auto lg:py-8">
<div class="prose prose-invert prose-lg bg-neutral-800 p-8 rounded-b-xl lg:rounded-b-0 rounded-l-0 max-w-none pt-[12vw] lg:pt-8 mt-[-10vw] lg:mt-0 [&>h2]:text-xl md:[&>h2]:text-xl xl:[&>h2]:text-[1.8vw]">
<h2 class="text-center lg:text-left">{{heading}}</h2>