pedf
/
domu-nevidis
1
0
Fork 0
Code Releases Activity

Remake section backgrounds

Browse Source
master
Emil Miler 2 years ago
parent 693c6a10f2
commit ae5e940738
9 changed files with 355 additions and 322 deletions
Show Stats Download Patch File Download Diff File

36
index.html
Unescape Escape View File

@ -109,10 +109,10 @@
</div> </div>
<div class="source">*Údaje pocházejí ze zdrojů MPSV z&nbsp;roku 2021.</div> <div class="source">*Údaje pocházejí ze zdrojů MPSV z&nbsp;roku 2021.</div>
</section> </section>
<section class="wrap" id="jak-postupovat"> <section class="principles" id="jak-postupovat">
<h1>Jak postupovat</h1> <h1>Jak postupovat</h1>
<p class="narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p> <p class="wrap narrow text-center">Ačkoli je každá situace jiná,existují obecné zásady, které nám pomohou za všech okolností. Zahrnují všechny fáze procesu od vzniku problému až po jeho vyřešení.</p>
<div class="principles"> <div class="principles-list wrap">
<div class="dropdown"> <div class="dropdown">
<!-- Used on mobile --> <!-- Used on mobile -->
<select name="principles" id="principles-dropdown"> <select name="principles" id="principles-dropdown">
@ -165,12 +165,12 @@
</div> </div>
</div> </div>
</section> </section>
<section id="krok-po-kroku"> <section id="krok-po-kroku" class="checklist">
<div class="wrap"> <div class="wrap">
<h1>Krok po kroku</h1> <h1>Krok po kroku</h1>
<p class="narrow text-center">Plán pomoci je tady od toho, aby nás krok po kroku provedl různými situacemi, se kterými se u&nbsp;žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v&nbsp;klidu oddechnout – nic důležitého jsme totiž neopomenuli.</p> <p class="narrow text-center">Plán pomoci je tady od toho, aby nás krok po kroku provedl různými situacemi, se kterými se u&nbsp;žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v&nbsp;klidu oddechnout – nic důležitého jsme totiž neopomenuli.</p>
</div> </div>
<div class="checklist"> <div class="checklist-cards">
<div class="card" data-tilt> <div class="card" data-tilt>
<img src="/static/img/checklist-1.jpg" alt="Checklist 1"> <img src="/static/img/checklist-1.jpg" alt="Checklist 1">
<div class="title"> <div class="title">
@ -254,10 +254,10 @@
<a href="pribehy" class="button">Podívat se na všechny příběhy</a> <a href="pribehy" class="button">Podívat se na všechny příběhy</a>
</div> </div>
</section> </section>
<section class="wrap" id="kontakty"> <section class="contacts" id="kontakty">
<h1>Na koho se obrátit</h1> <h1>Na koho se obrátit</h1>
<p class="narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.</p> <p class="wrap narrow text-center">Ve chvílích, kdy si nevíte rady, nebojte se obrátit na organizace a instituce, které se zabývají danou problematikou a mohou vám pomoct situaci vyřešit, případně s&nbsp;vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.</p>
<div class="contact-list"> <div class="contact-list wrap">
<div class="row"> <div class="row">
<div class="contact"> <div class="contact">
<div class="title">Linka pro rodinu a školu</div> <div class="title">Linka pro rodinu a školu</div>
@ -324,12 +324,12 @@
</div> </div>
</div> </div>
</section> </section>
<section id="faq"> <section id="faq" class="faq">
<div class="wrap"> <div class="wrap">
<h1>NEJČASTĚJŠÍ DOTAZY</h1> <h1>NEJČASTĚJŠÍ DOTAZY</h1>
</div> </div>
<div class="faq-list wrap"> <div class="faq-list wrap">
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -340,7 +340,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -351,7 +351,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -362,7 +362,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -373,7 +373,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -384,7 +384,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -395,7 +395,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -406,7 +406,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">
@ -417,7 +417,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="faq"> <div class="faq-card">
<div class="mark"></div> <div class="mark"></div>
<div> <div>
<div class="question"> <div class="question">

635
sass/style.scss
Unescape Escape View File

@ -271,7 +271,7 @@ body.noscroll {
margin-top: 2rem; margin-top: 2rem;
padding-top: 5rem; padding-top: 5rem;
padding-bottom: 5rem; padding-bottom: 5rem;
background-image: url("/static/img/bg/1.svg"); background-image: url("/static/img/bg/facts.svg");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: top center; background-position: top center;
background-size: 100% auto; background-size: 100% auto;
@ -347,201 +347,217 @@ body.noscroll {
} }
.principles { .principles {
display: grid; background-image: url("/static/img/bg/principles.svg");
grid-template-columns: 1fr; background-repeat: no-repeat;
grid-column-gap: 8rem; background-position: -60rem top;
grid-row-gap: 2rem; background-size: auto 100%;
margin-top: 5em;
.dropdown { .principles-list {
display: grid;
grid-template-columns: 1fr;
grid-column-gap: 8rem;
grid-row-gap: 2rem;
margin-top: 5em;
select { .dropdown {
width: 100%;
padding: 1.5em;
background-color: $col-bg;
color: $col-white;
border: 1pt solid $col-accent;
border-radius: 1em;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color .1s ease-out;
&:hover { select {
background-color: $col-accent; width: 100%;
padding: 1.5em;
background-color: $col-bg;
color: $col-white;
border: 1pt solid $col-accent;
border-radius: 1em;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: background-color .1s ease-out;
&:hover {
background-color: $col-accent;
}
} }
} }
}
.list { .list {
display: none; display: none;
flex-direction: column; flex-direction: column;
gap: 1em; gap: 1em;
&>div { &>div {
padding: 1.5em; padding: 1.5em;
outline: 1pt solid $col-secondary; outline: 1pt solid $col-secondary;
outline-offset: -1pt; outline-offset: -1pt;
border-radius: 1em; border-radius: 1em;
cursor: pointer; cursor: pointer;
transition: background-color .1s ease-out; transition: background-color .1s ease-out;
&.active { &.active {
border-radius: 1em 0 0 1em; border-radius: 1em 0 0 1em;
position: relative; position: relative;
overflow: visible; overflow: visible;
&:after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 2em;
height: 100%;
background-color: $col-accent;
clip-path: polygon(0 0, 0 100%, 100% 50%);
transform: translatex(2em);
}
}
&:after { &.active, &:hover {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
width: 2em;
height: 100%;
background-color: $col-accent; background-color: $col-accent;
clip-path: polygon(0 0, 0 100%, 100% 50%); outline: none;
transform: translatex(2em);
} }
}
&.active, &:hover { .title {
background-color: $col-accent; margin: 0;
outline: none; font-weight: bold;
} text-align: left;
font-size: 1.138rem;
.title { }
margin: 0;
font-weight: bold;
text-align: left;
font-size: 1.138rem;
} }
} }
}
.content {
display: flex;
flex-direction: column;
&>div { .content {
height: 0; display: flex;
overflow: hidden; flex-direction: column;
opacity: 0;
transform: translatey(-1em);
transition: opacity .2s ease-out, transform .2s ease-out;
&.visible { &>div {
height: auto; height: 0;
opacity: 1; overflow: hidden;
transform: translatex(0); opacity: 0;
transform: translatey(-1em);
transition: opacity .2s ease-out, transform .2s ease-out;
&.visible {
height: auto;
opacity: 1;
transform: translatex(0);
}
} }
}
h2 { h2 {
position: relative; position: relative;
text-align: left; text-align: left;
padding-bottom: 1rem; padding-bottom: 1rem;
margin-top: 0; margin-top: 0;
&:after { &:after {
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 0; bottom: 0;
width: 2em; width: 2em;
height: 1pt; height: 1pt;
background-color: $col-secondary; background-color: $col-secondary;
}
} }
}
a { a {
text-decoration: none; text-decoration: none;
color: lighten($col-accent, 25%); color: lighten($col-accent, 25%);
}
} }
} }
} }
.checklist { .checklist {
display: flex; display: flex;
justify-content: flex-start; flex-direction: column;
gap: 1em; background-image: url("/static/img/bg/checklist.svg");
margin-top: 2rem; background-repeat: no-repeat;
overflow-x: scroll; background-position: center;
background-size: auto 100%;
// Firefox
scrollbar-width: none;
// Chrome, Safari, Edge
&::-webkit-scrollbar {
width: 0;
}
// `overflow-y: visible` does not work
padding: 1rem;
.card { .checklist-cards {
display: flex; display: flex;
flex-direction: column; justify-content: flex-start;
flex-shrink: 0; gap: 1em;
width: 15em; margin-top: 2rem;
border: .15em solid $col-accent; overflow-x: scroll;
border-radius: 1.5rem;
padding: 1.5em;
background-color: $col-bg;
text-align: left;
user-select: none;
img { // Firefox
width: 100%; scrollbar-width: none;
border-radius: 1rem; // Chrome, Safari, Edge
&::-webkit-scrollbar {
width: 0;
} }
&>.title { // `overflow-y: visible` does not work
position: relative; padding: 1rem;
font-weight: bold;
font-size: 1.138rem;
padding: 1em 0;
&:after { .card {
content: ""; display: flex;
display: block; flex-direction: column;
position: absolute; flex-shrink: 0;
left: 0; width: 15em;
bottom: 0; border: .15em solid $col-accent;
width: 25%; border-radius: 1.5rem;
height: 1px; padding: 1.5em;
background-color: #fff; background-color: $col-bg;
} text-align: left;
} user-select: none;
.download {
margin-top: 1rem;
cursor: pointer;
color: inherit;
text-decoration: none;
margin-top: auto;
&:hover { img {
color: lighten($col-accent, 25%); width: 100%;
border-radius: 1rem;
} }
.title { &>.title {
display: flex; position: relative;
align-items: baseline;
font-size: 1.25em;
font-weight: bold; font-weight: bold;
margin-bottom: .25em; font-size: 1.138rem;
padding: 1em 0;
&:after { &:after {
content: url("/static/img/download-icon.svg"); content: "";
display: inline-block; display: block;
height: 1em; position: absolute;
margin-left: .5rem; left: 0;
bottom: 0;
width: 25%;
height: 1px;
background-color: #fff;
} }
} }
.meta {
color: $col-secondary; .download {
font-size: .85em; margin-top: 1rem;
cursor: pointer;
color: inherit;
text-decoration: none;
margin-top: auto;
&:hover {
color: lighten($col-accent, 25%);
}
.title {
display: flex;
align-items: baseline;
font-size: 1.25em;
font-weight: bold;
margin-bottom: .25em;
&:after {
content: url("/static/img/download-icon.svg");
display: inline-block;
height: 1em;
margin-left: .5rem;
}
}
.meta {
color: $col-secondary;
font-size: .85em;
}
} }
} }
} }
@ -549,9 +565,9 @@ body.noscroll {
.stories { .stories {
padding-top: 5rem; // To clear the image padding-top: 5rem; // To clear the image
background-image: url("/static/img/bg/2.svg"); background-image: url("/static/img/bg/stories.svg");
background-size: 90rem auto; background-size: auto 110%;
background-position: center top; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
&:before { &:before {
@ -675,164 +691,179 @@ body.noscroll {
} }
} }
.contact-list { .contacts {
margin: 5rem 0 8rem 0; margin-top: 8rem;
background-image: url("/static/img/bg/contacts.svg");
.row { background-repeat: no-repeat;
display: flex; background-position: -40rem center;
flex-direction: column; background-size: auto 100%;
justify-content: center;
align-items: center;
}
.row:first-child .contact:first-child { .contact-list {
border-top: none; margin: 5rem auto 8rem auto;
}
.row .contact:first-child {
border-top: 1px solid $col-secondary;
}
.row .contact { .row {
width: 100%; display: flex;
padding: 3rem 0; flex-direction: column;
border-bottom: 1px solid $col-secondary; justify-content: center;
flex: 1; align-items: center;
&:last-child {
border: none;
} }
.title { .row:first-child .contact:first-child {
font-weight: bold; border-top: none;
font-size: 1.25em; }
.row .contact:first-child {
border-top: 1px solid $col-secondary;
} }
.meta { .row .contact {
display: flex; width: 100%;
flex-direction: column; padding: 3rem 0;
gap: 1rem; border-bottom: 1px solid $col-secondary;
font-weight: bold; flex: 1;
&>div { &:last-child {
border: none;
}
.title {
font-weight: bold;
font-size: 1.25em;
}
.meta {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 1rem; gap: 1rem;
font-weight: bold;
&:before { &>div {
content: ""; display: flex;
height: 2rem; align-items: center;
width: 2rem; gap: 1rem;
border: 1px solid $col-secondary;
border-radius: .5rem; &:before {
background-size: 50%; content: "";
background-position: center; height: 2rem;
background-repeat: no-repeat; width: 2rem;
border: 1px solid $col-secondary;
border-radius: .5rem;
background-size: 50%;
background-position: center;
background-repeat: no-repeat;
}
} }
}
.phone:before { .phone:before {
background-image: url("/static/img/icons/phone.svg"); background-image: url("/static/img/icons/phone.svg");
} }
.website:before { .website:before {
background-image: url("/static/img/icons/web.svg"); background-image: url("/static/img/icons/web.svg");
} }
.email:before { .email:before {
background-image: url("/static/img/icons/email.svg"); background-image: url("/static/img/icons/email.svg");
} }
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
&:hover { &:hover {
color: lighten($col-accent, 25%); color: lighten($col-accent, 25%);
}
} }
} }
} }
} }
} }
.faq-list { .faq {
width: 100%; background-image: url("/static/img/bg/faq.svg");
margin-top: 5em; background-repeat: no-repeat;
background-position: right center;
&.wrap { background-size: auto 100%;
padding: 0;
}
.faq { .faq-list {
position: relative;
display: grid;
grid-template-columns: 1em auto;
column-gap: 1em;
width: 100%; width: 100%;
padding: 2em; margin-top: 5em;
cursor: pointer;
background-color: inherit;
transition: all .5s ease;
// Hide bottom border. &.wrap {
margin-bottom: -1px; padding: 0;
}
border-width: 1px 0 0 0; .faq-card {
border-style: solid; position: relative;
border-color: rgba(200,200,200,0.1); display: grid;
grid-template-columns: 1em auto;
column-gap: 1em;
width: 100%;
padding: 2em;
cursor: pointer;
&:last-child { background-color: inherit;
border-width: 1px 0; transition: all .5s ease;
}
&.active { // Hide bottom border.
border-width: 0; margin-bottom: -1px;
background-color: $col-accent;
z-index: 1;
&:before { border: 0 } border-width: 1px 0 0 0;
border-style: solid;
border-color: rgba(200,200,200,0.1);
.answer { &:last-child {
height: auto; border-width: 1px 0;
margin-top: 1em;
opacity: 1;
} }
.mark:before { &.active {
content: "\2212"; border-width: 0;
background-color: $col-accent;
z-index: 1;
&:before { border: 0 }
.answer {
height: auto;
margin-top: 1em;
opacity: 1;
}
.mark:before {
content: "\2212";
}
} }
}
.mark { .mark {
text-align: center; text-align: center;
&:before { &:before {
content: "\002B"; content: "\002B";
display: block; display: block;
text-align: right; text-align: right;
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
font-size: 1.138rem;
}
}
.question {
font-size: 1.138rem; font-size: 1.138rem;
} }
}
.question { .answer {
font-size: 1.138rem; height: 0;
} overflow: hidden;
opacity: 0;
transition: all .5s ease;
.answer { a {
height: 0; color: lighten($col-bg, 75%);
overflow: hidden; }
opacity: 0;
transition: all .5s ease;
a { ul {
color: lighten($col-bg, 75%); margin: 0;
}
} }
ul {
margin: 0;
}
} }
} }
} }
@ -916,32 +947,29 @@ footer {
} }
} }
.facts { .facts .fact-list {
flex-direction: row;
.fact-list { justify-content: center;
flex-direction: row; align-items: stretch;
justify-content: center; gap: 0;
align-items: stretch;
gap: 0;
.item { .item {
border-right: 1px solid $col-secondary; border-right: 1px solid $col-secondary;
justify-content: flex-start; justify-content: flex-start;
padding: 0 3rem; padding: 0 3rem;
max-width: 17rem; max-width: 17rem;
&:after { &:after {
display: none; display: none;
} }
&:last-child { &:last-child {
border: none; border: none;
}
} }
} }
} }
.principles { .principles .principles-list {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
.dropdown{ .dropdown{
@ -958,19 +986,12 @@ footer {
} }
} }
.checklist {
.card {
width: 17em;
}
}
.stories .stories-list { .stories .stories-list {
flex-direction: row; flex-direction: row;
align-items: stretch; align-items: stretch;
} }
.contact-list .row { .contacts .contact-list .row {
flex-direction: row; flex-direction: row;
margin-bottom: 4rem; margin-bottom: 4rem;
@ -987,7 +1008,15 @@ footer {
} }
.checklist { .checklist {
justify-content: center; align-items: center;
.checklist-cards .card {
width: 17em;
}
}
.faq {
background-position: 170% center;
} }
footer .grid { footer .grid {

1
static/img/bg/2.svg
Unescape Escape View File

@ -1 +0,0 @@
<svg width="3810.539" height="1338.541" viewBox="0 0 1008.205 354.156" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.151" y="-.551" width="1.301" height="2.101"><feGaussianBlur stdDeviation="48.5949 38.6129" result="blur"/></filter></defs><path style="fill:#1d3141;fill-opacity:.6;stroke:#000;stroke-width:.264583;filter:url(#a)" d="M87.482 20.208c102.344 41.807 135.723 74.637 195.481 71.304 94.652-5.278 175.889-61.989 272.074-74.265 39.171-5 166.306 34.533 200.077 50.303 38.427 17.944 52.439 94.204-10.168 84.648-62.607-9.556-226.467-35.829-261.778-28.304-11.425 2.435-119.583 71.729-273.403 53.814-29.015-3.38-243.197-18.942-187.239-92.86 21.538-28.45-11.594-95.91 64.956-64.64z" transform="translate(103.514 80.69)"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 785 B

1
static/img/bg/checklist.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1298.119" height="899.547" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="b" x="-.157" y="-.246" width="1.314" height="1.493"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter><filter style="color-interpolation-filters:sRGB" id="a" x="-.122" y="-.214" width="1.244" height="1.427"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1166.877 285.884s-77.348 181.645-612.332 152.188c-534.984-29.457-110.818 352 323.23 353.472 434.048 1.472 289.102-505.66 289.102-505.66z" fill="#415546" style="fill:#415546;fill-opacity:.5;filter:url(#a)"/><path d="M195.386 108.486c-40.843 13.96-128.633-8.548-64.888 242.016 63.745 250.564 621.712 221.456 663.6 128.51 41.886-92.946-557.869-384.488-598.712-370.527z" fill="#845368" style="fill:#845368;fill-opacity:.5;filter:url(#b)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 870 B

1
static/img/bg/contacts.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1681.859" height="924.495" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.152" width="1.147" height="1.305"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M354.969 423.43s100.126 146.213 514.28-156.088c414.156-302.301 597.796-96.83 696.328-12.975 98.532 83.855-704.292 866.429-1229.04 431.278-524.748-435.151 18.432-262.214 18.432-262.214z" fill="#463660" style="filter:url(#a);fill:#463660;fill-opacity:.5"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

0
static/img/bg/1.svg → static/img/bg/facts.svg
Unescape Escape View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

1
static/img/bg/faq.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="2030.912" height="1870.815" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.074" y="-.088" width="1.147" height="1.176"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M2391.695 6872s-994.633 80.767-963.587-518.257c31.046-599.024 110.947-115.8 940-601.83 829.053-486.03 471.064 916.908 307.336 1008.83C2511.716 6852.665 2391.695 6872 2391.695 6872z" transform="rotate(-17 -16234.9 7431.093)" fill="#3b2141" style="fill:#3b2141;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 561 B

1
static/img/bg/principles.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="1820.343" height="650.462" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.067" y="-.249" width="1.135" height="1.497"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M1524.834 109.238C1186.826 88 522.51 347.138 186.38 340.351c-336.13-6.787 485.2 327.463 1017.781 150.226 532.581-177.237 658.682-360.109 320.674-381.339z" fill="#504169" style="fill:#504169;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

1
static/img/bg/stories.svg
Unescape Escape View File

@ -0,0 +1 @@
<svg width="2391.488" height="839.564" xmlns="http://www.w3.org/2000/svg"><defs><filter style="color-interpolation-filters:sRGB" id="a" x="-.05" y="-.173" width="1.099" height="1.346"><feGaussianBlur stdDeviation="45 45" result="blur"/></filter></defs><path d="M190.929 345.063s454.5 163.074 967.161-43.955 675.884-224.758 831.193-159.264c155.309 65.494 378.161 83.075 261.826 247.175-116.335 164.1-938.737-20.512-1129.209 259.775C931.428 929.081 108 407.627 108 407.627z" fill="#1d3141" style="fill:#1d3141;fill-opacity:.5;filter:url(#a)"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 547 B

Write Preview
Loading…
Cancel
Save