added background with fade

This commit is contained in:
Hazel Noack 2025-07-02 14:20:11 +02:00
parent 636fa83478
commit 724f824a8f
2 changed files with 297 additions and 0 deletions

293
frontend/assets/bg.svg Normal file
View File

@ -0,0 +1,293 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="350mm"
height="250mm"
viewBox="0 0 350 250"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="bg.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#000000"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:export-bgcolor="#00000000"
inkscape:zoom="0.48315491"
inkscape:cx="734.75399"
inkscape:cy="595.04724"
inkscape:window-width="1672"
inkscape:window-height="957"
inkscape:window-x="816"
inkscape:window-y="1259"
inkscape:window-maximized="0"
inkscape:current-layer="layer1" />
<defs
id="defs1">
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812968"
id="rect4" />
<rect
x="203.42924"
y="897.13763"
width="220.99149"
height="62.931351"
id="rect3" />
<rect
x="140.49789"
y="166.84126"
width="339.53659"
height="86.347672"
id="rect2" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1-7" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1-2" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1-9" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1-6" />
<rect
x="140.49789"
y="166.84126"
width="339.53659"
height="86.347672"
id="rect2-0" />
<rect
x="140.49789"
y="166.84126"
width="339.53659"
height="86.347672"
id="rect2-2" />
<rect
x="140.49789"
y="166.84126"
width="339.53659"
height="86.347672"
id="rect2-2-6" />
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812969"
id="rect4-4" />
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812969"
id="rect4-3" />
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812969"
id="rect4-3-2" />
<rect
x="125.8627"
y="753.71271"
width="357.09882"
height="87.811188"
id="rect1-2-4" />
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812969"
id="rect4-3-3" />
<rect
x="1105.2356"
y="300.11078"
width="161.4389"
height="53.812969"
id="rect6" />
<rect
x="140.49789"
y="166.84126"
width="339.53659"
height="86.347672"
id="rect2-2-6-7" />
</defs>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1">
<text
xml:space="preserve"
transform="matrix(0.26273149,-0.03124901,0.03124901,0.26273149,9.6318685,1.010781)"
id="text1"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan7">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26223034,0.03520772,-0.03520772,0.26223034,181.67491,-73.913601)"
id="text1-3"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-7);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan8">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.2637851,0.02053679,-0.02053679,0.2637851,9.5700315,-96.792778)"
id="text1-1"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan9">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26279038,-0.03074987,0.03074987,0.26279038,54.519132,-87.602003)"
id="text1-1-6"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-2-4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan10">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26273149,-0.03124901,0.03124901,0.26273149,160.00124,-138.94545)"
id="text1-6"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-9);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan11">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26430785,-0.01207042,0.01207042,0.26430785,123.83488,0.36913542)"
id="text1-8"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect1-6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="125.86328"
y="784.2323"
id="tspan12">Meow</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,-21.357022,-13.142783)"
id="text2"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="140.49805"
y="197.36121"
id="tspan13">gock &lt;333</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26309895,-0.02798714,0.02798714,0.26309895,43.481131,24.812837)"
id="text2-3"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-0);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="140.49805"
y="197.36121"
id="tspan14">gock &lt;333</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26094671,-0.04371676,0.04371676,0.26094671,222.97079,141.94755)"
id="text2-8"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="140.49805"
y="197.36121"
id="tspan15">gock &lt;333</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26260965,-0.03225692,0.03225692,0.26260965,163.16927,187.98351)"
id="text2-8-2"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2-6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="140.49805"
y="197.36121"
id="tspan16">gock &lt;333</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26261141,0.03224256,-0.03224256,0.26261141,-26.436727,169.44502)"
id="text2-8-2-4"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect2-2-6-7);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="140.49805"
y="197.36121"
id="tspan17">gock &lt;333</tspan></text>
<text
xml:space="preserve"
transform="scale(0.26458333)"
id="text3"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect3);display:inline;fill:#ffffff;stroke-width:4.91339" />
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,20.26179,-16.976094)"
id="text4"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan18">Gay :3</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.25941349,0.05204788,-0.05204788,0.25941349,14.622996,-20.113934)"
id="text4-8"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-4);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan19">Gay :3</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26458333,0,0,0.26458333,-185.03108,79.899068)"
id="text4-1"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan20">Gay :3</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.26300551,-0.02885206,0.02885206,0.26300551,-153.43986,-14.753595)"
id="text4-1-6"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3-2);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan21">Gay :3</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.25999838,0.04904269,-0.04904269,0.25999838,-255.80374,45.596021)"
id="text4-1-4"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect4-3-3);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan22">Gay :3</tspan></text>
<text
xml:space="preserve"
transform="matrix(0.25999838,0.04904269,-0.04904269,0.25999838,-255.80374,45.596021)"
id="text6"
style="font-size:37.7953px;line-height:1;font-family:Ubuntu;-inkscape-font-specification:Ubuntu;text-align:start;writing-mode:lr-tb;direction:ltr;white-space:pre;shape-inside:url(#rect6);display:inline;fill:#ffffff;stroke-width:4.91339"><tspan
x="1105.2363"
y="330.63074"
id="tspan23">Gay :3</tspan></text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

View File

@ -14,6 +14,10 @@ body {
display: flex;
align-items: center;
justify-content: center;
background: url("bg.svg") center center/auto repeat, linear-gradient(
to bottom, transparent, pink
);
}
.search-grid {