Jak postupovat
-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í.
-
+
-
+
-
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í.
+Krok po kroku
Plán pomoci je tady od toho, aby nás krok po kroku provedl různými situacemi, se kterými se u žáků můžeme setkat. Když je budeme následovat, můžeme si na konci procesu v klidu oddechnout – nic důležitého jsme totiž neopomenuli.
+
+
@@ -254,10 +254,10 @@
Podívat se na všechny příběhy
- Na koho se obrátit
-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 vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.
-
+
-
+
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 vámi prokonzultují jednotlivé kroky. Níže najdete tipy na organizace, které vám poskytnout odbornou pomoc.
+Linka pro rodinu a školu
@@ -324,12 +324,12 @@
NEJČASTĚJŠÍ DOTAZY
-
+
-
@@ -340,7 +340,7 @@
+
-
@@ -351,7 +351,7 @@
+
-
@@ -362,7 +362,7 @@
+
-
@@ -373,7 +373,7 @@
+
-
@@ -384,7 +384,7 @@
+
-
@@ -395,7 +395,7 @@
+
-
@@ -406,7 +406,7 @@
+
-
@@ -417,7 +417,7 @@
+
diff --git a/sass/style.scss b/sass/style.scss
index d0163c0..cf9a143 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -271,7 +271,7 @@ body.noscroll {
margin-top: 2rem;
padding-top: 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-position: top center;
background-size: 100% auto;
@@ -347,201 +347,217 @@ body.noscroll {
}
.principles {
- display: grid;
- grid-template-columns: 1fr;
- grid-column-gap: 8rem;
- grid-row-gap: 2rem;
- margin-top: 5em;
+ background-image: url("/static/img/bg/principles.svg");
+ background-repeat: no-repeat;
+ background-position: -60rem top;
+ background-size: auto 100%;
- .dropdown {
+ .principles-list {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-column-gap: 8rem;
+ grid-row-gap: 2rem;
+ margin-top: 5em;
- select {
- 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;
+ .dropdown {
- &:hover {
- background-color: $col-accent;
+ select {
+ 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 {
- display: none;
- flex-direction: column;
- gap: 1em;
+ .list {
+ display: none;
+ flex-direction: column;
+ gap: 1em;
- &>div {
- padding: 1.5em;
- outline: 1pt solid $col-secondary;
- outline-offset: -1pt;
- border-radius: 1em;
- cursor: pointer;
- transition: background-color .1s ease-out;
+ &>div {
+ padding: 1.5em;
+ outline: 1pt solid $col-secondary;
+ outline-offset: -1pt;
+ border-radius: 1em;
+ cursor: pointer;
+ transition: background-color .1s ease-out;
- &.active {
- border-radius: 1em 0 0 1em;
- position: relative;
- overflow: visible;
+ &.active {
+ border-radius: 1em 0 0 1em;
+ position: relative;
+ 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 {
- content: "";
- display: block;
- position: absolute;
- right: 0;
- top: 0;
- width: 2em;
- height: 100%;
+ &.active, &:hover {
background-color: $col-accent;
- clip-path: polygon(0 0, 0 100%, 100% 50%);
- transform: translatex(2em);
+ outline: none;
}
- }
- &.active, &:hover {
- background-color: $col-accent;
- outline: none;
- }
-
- .title {
- margin: 0;
- 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 {
- height: 0;
- overflow: hidden;
- opacity: 0;
- transform: translatey(-1em);
- transition: opacity .2s ease-out, transform .2s ease-out;
+ .content {
+ display: flex;
+ flex-direction: column;
- &.visible {
- height: auto;
- opacity: 1;
- transform: translatex(0);
+ &>div {
+ height: 0;
+ overflow: hidden;
+ opacity: 0;
+ transform: translatey(-1em);
+ transition: opacity .2s ease-out, transform .2s ease-out;
+
+ &.visible {
+ height: auto;
+ opacity: 1;
+ transform: translatex(0);
+ }
}
- }
- h2 {
- position: relative;
- text-align: left;
- padding-bottom: 1rem;
- margin-top: 0;
+ h2 {
+ position: relative;
+ text-align: left;
+ padding-bottom: 1rem;
+ margin-top: 0;
- &:after {
- content: "";
- display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- width: 2em;
- height: 1pt;
- background-color: $col-secondary;
+ &:after {
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 2em;
+ height: 1pt;
+ background-color: $col-secondary;
+ }
}
- }
- a {
- text-decoration: none;
- color: lighten($col-accent, 25%);
+ a {
+ text-decoration: none;
+ color: lighten($col-accent, 25%);
+ }
}
}
}
.checklist {
display: flex;
- justify-content: flex-start;
- gap: 1em;
- margin-top: 2rem;
- overflow-x: scroll;
-
- // Firefox
- scrollbar-width: none;
- // Chrome, Safari, Edge
- &::-webkit-scrollbar {
- width: 0;
- }
-
- // `overflow-y: visible` does not work
- padding: 1rem;
+ flex-direction: column;
+ background-image: url("/static/img/bg/checklist.svg");
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: auto 100%;
- .card {
+ .checklist-cards {
display: flex;
- flex-direction: column;
- flex-shrink: 0;
- width: 15em;
- border: .15em solid $col-accent;
- border-radius: 1.5rem;
- padding: 1.5em;
- background-color: $col-bg;
- text-align: left;
- user-select: none;
+ justify-content: flex-start;
+ gap: 1em;
+ margin-top: 2rem;
+ overflow-x: scroll;
- img {
- width: 100%;
- border-radius: 1rem;
+ // Firefox
+ scrollbar-width: none;
+ // Chrome, Safari, Edge
+ &::-webkit-scrollbar {
+ width: 0;
}
- &>.title {
- position: relative;
- font-weight: bold;
- font-size: 1.138rem;
- padding: 1em 0;
+ // `overflow-y: visible` does not work
+ padding: 1rem;
- &:after {
- content: "";
- display: block;
- position: absolute;
- left: 0;
- bottom: 0;
- width: 25%;
- height: 1px;
- background-color: #fff;
- }
- }
-
- .download {
- margin-top: 1rem;
- cursor: pointer;
- color: inherit;
- text-decoration: none;
- margin-top: auto;
+ .card {
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+ width: 15em;
+ border: .15em solid $col-accent;
+ border-radius: 1.5rem;
+ padding: 1.5em;
+ background-color: $col-bg;
+ text-align: left;
+ user-select: none;
- &:hover {
- color: lighten($col-accent, 25%);
+ img {
+ width: 100%;
+ border-radius: 1rem;
}
- .title {
- display: flex;
- align-items: baseline;
- font-size: 1.25em;
+ &>.title {
+ position: relative;
font-weight: bold;
- margin-bottom: .25em;
+ font-size: 1.138rem;
+ padding: 1em 0;
&:after {
- content: url("/static/img/download-icon.svg");
- display: inline-block;
- height: 1em;
- margin-left: .5rem;
+ content: "";
+ display: block;
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 25%;
+ height: 1px;
+ background-color: #fff;
}
}
- .meta {
- color: $col-secondary;
- font-size: .85em;
+
+ .download {
+ 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 {
padding-top: 5rem; // To clear the image
- background-image: url("/static/img/bg/2.svg");
- background-size: 90rem auto;
- background-position: center top;
+ background-image: url("/static/img/bg/stories.svg");
+ background-size: auto 110%;
+ background-position: center;
background-repeat: no-repeat;
&:before {
@@ -675,164 +691,179 @@ body.noscroll {
}
}
-.contact-list {
- margin: 5rem 0 8rem 0;
-
- .row {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
+.contacts {
+ margin-top: 8rem;
+ background-image: url("/static/img/bg/contacts.svg");
+ background-repeat: no-repeat;
+ background-position: -40rem center;
+ background-size: auto 100%;
- .row:first-child .contact:first-child {
- border-top: none;
- }
- .row .contact:first-child {
- border-top: 1px solid $col-secondary;
- }
+ .contact-list {
+ margin: 5rem auto 8rem auto;
- .row .contact {
- width: 100%;
- padding: 3rem 0;
- border-bottom: 1px solid $col-secondary;
- flex: 1;
-
- &:last-child {
- border: none;
+ .row {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
- .title {
- font-weight: bold;
- font-size: 1.25em;
+ .row:first-child .contact:first-child {
+ border-top: none;
+ }
+ .row .contact:first-child {
+ border-top: 1px solid $col-secondary;
}
- .meta {
- display: flex;
- flex-direction: column;
- gap: 1rem;
- font-weight: bold;
+ .row .contact {
+ width: 100%;
+ padding: 3rem 0;
+ border-bottom: 1px solid $col-secondary;
+ flex: 1;
- &>div {
+ &:last-child {
+ border: none;
+ }
+
+ .title {
+ font-weight: bold;
+ font-size: 1.25em;
+ }
+
+ .meta {
display: flex;
- align-items: center;
+ flex-direction: column;
gap: 1rem;
+ font-weight: bold;
- &:before {
- content: "";
- height: 2rem;
- width: 2rem;
- border: 1px solid $col-secondary;
- border-radius: .5rem;
- background-size: 50%;
- background-position: center;
- background-repeat: no-repeat;
+ &>div {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+
+ &:before {
+ content: "";
+ height: 2rem;
+ width: 2rem;
+ border: 1px solid $col-secondary;
+ border-radius: .5rem;
+ background-size: 50%;
+ background-position: center;
+ background-repeat: no-repeat;
+ }
}
- }
- .phone:before {
- background-image: url("/static/img/icons/phone.svg");
- }
- .website:before {
- background-image: url("/static/img/icons/web.svg");
- }
- .email:before {
- background-image: url("/static/img/icons/email.svg");
- }
+ .phone:before {
+ background-image: url("/static/img/icons/phone.svg");
+ }
+ .website:before {
+ background-image: url("/static/img/icons/web.svg");
+ }
+ .email:before {
+ background-image: url("/static/img/icons/email.svg");
+ }
- a {
- text-decoration: none;
- color: inherit;
+ a {
+ text-decoration: none;
+ color: inherit;
- &:hover {
- color: lighten($col-accent, 25%);
+ &:hover {
+ color: lighten($col-accent, 25%);
+ }
}
}
}
}
}
-.faq-list {
- width: 100%;
- margin-top: 5em;
-
- &.wrap {
- padding: 0;
- }
+.faq {
+ background-image: url("/static/img/bg/faq.svg");
+ background-repeat: no-repeat;
+ background-position: right center;
+ background-size: auto 100%;
- .faq {
- position: relative;
- display: grid;
- grid-template-columns: 1em auto;
- column-gap: 1em;
+ .faq-list {
width: 100%;
- padding: 2em;
- cursor: pointer;
-
- background-color: inherit;
- transition: all .5s ease;
+ margin-top: 5em;
- // Hide bottom border.
- margin-bottom: -1px;
+ &.wrap {
+ padding: 0;
+ }
- border-width: 1px 0 0 0;
- border-style: solid;
- border-color: rgba(200,200,200,0.1);
+ .faq-card {
+ position: relative;
+ display: grid;
+ grid-template-columns: 1em auto;
+ column-gap: 1em;
+ width: 100%;
+ padding: 2em;
+ cursor: pointer;
- &:last-child {
- border-width: 1px 0;
- }
+ background-color: inherit;
+ transition: all .5s ease;
- &.active {
- border-width: 0;
- background-color: $col-accent;
- z-index: 1;
+ // Hide bottom border.
+ margin-bottom: -1px;
- &:before { border: 0 }
+ border-width: 1px 0 0 0;
+ border-style: solid;
+ border-color: rgba(200,200,200,0.1);
- .answer {
- height: auto;
- margin-top: 1em;
- opacity: 1;
+ &:last-child {
+ border-width: 1px 0;
}
- .mark:before {
- content: "\2212";
+ &.active {
+ 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 {
- text-align: center;
+ .mark {
+ text-align: center;
- &:before {
- content: "\002B";
- display: block;
- text-align: right;
- color: #fff;
- font-weight: bold;
+ &:before {
+ content: "\002B";
+ display: block;
+ text-align: right;
+ color: #fff;
+ font-weight: bold;
+ font-size: 1.138rem;
+ }
+ }
+
+ .question {
font-size: 1.138rem;
}
- }
- .question {
- font-size: 1.138rem;
- }
+ .answer {
+ height: 0;
+ overflow: hidden;
+ opacity: 0;
+ transition: all .5s ease;
- .answer {
- height: 0;
- overflow: hidden;
- opacity: 0;
- transition: all .5s ease;
+ a {
+ color: lighten($col-bg, 75%);
+ }
- a {
- color: lighten($col-bg, 75%);
+ ul {
+ margin: 0;
+ }
}
- ul {
- margin: 0;
- }
}
-
}
}
@@ -916,32 +947,29 @@ footer {
}
}
- .facts {
-
- .fact-list {
- flex-direction: row;
- justify-content: center;
- align-items: stretch;
- gap: 0;
+ .facts .fact-list {
+ flex-direction: row;
+ justify-content: center;
+ align-items: stretch;
+ gap: 0;
- .item {
- border-right: 1px solid $col-secondary;
- justify-content: flex-start;
- padding: 0 3rem;
- max-width: 17rem;
+ .item {
+ border-right: 1px solid $col-secondary;
+ justify-content: flex-start;
+ padding: 0 3rem;
+ max-width: 17rem;
- &:after {
- display: none;
- }
+ &:after {
+ display: none;
+ }
- &:last-child {
- border: none;
- }
+ &:last-child {
+ border: none;
}
}
}
- .principles {
+ .principles .principles-list {
grid-template-columns: 1fr 1fr;
.dropdown{
@@ -958,19 +986,12 @@ footer {
}
}
- .checklist {
-
- .card {
- width: 17em;
- }
- }
-
.stories .stories-list {
flex-direction: row;
align-items: stretch;
}
- .contact-list .row {
+ .contacts .contact-list .row {
flex-direction: row;
margin-bottom: 4rem;
@@ -987,7 +1008,15 @@ footer {
}
.checklist {
- justify-content: center;
+ align-items: center;
+
+ .checklist-cards .card {
+ width: 17em;
+ }
+ }
+
+ .faq {
+ background-position: 170% center;
}
footer .grid {
diff --git a/static/img/bg/2.svg b/static/img/bg/2.svg
deleted file mode 100644
index b0120a1..0000000
--- a/static/img/bg/2.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/static/img/bg/checklist.svg b/static/img/bg/checklist.svg
new file mode 100644
index 0000000..40a84a0
--- /dev/null
+++ b/static/img/bg/checklist.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/img/bg/contacts.svg b/static/img/bg/contacts.svg
new file mode 100644
index 0000000..1c0ebf7
--- /dev/null
+++ b/static/img/bg/contacts.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/img/bg/1.svg b/static/img/bg/facts.svg
similarity index 100%
rename from static/img/bg/1.svg
rename to static/img/bg/facts.svg
diff --git a/static/img/bg/faq.svg b/static/img/bg/faq.svg
new file mode 100644
index 0000000..f2618b3
--- /dev/null
+++ b/static/img/bg/faq.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/img/bg/principles.svg b/static/img/bg/principles.svg
new file mode 100644
index 0000000..91460ad
--- /dev/null
+++ b/static/img/bg/principles.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/static/img/bg/stories.svg b/static/img/bg/stories.svg
new file mode 100644
index 0000000..bb6b140
--- /dev/null
+++ b/static/img/bg/stories.svg
@@ -0,0 +1 @@
+
\ No newline at end of file