Commit 100d638c authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

fixed scroll links on smaller displays

parent 194fc214
...@@ -2,19 +2,23 @@ ...@@ -2,19 +2,23 @@
@scrollLinkHeight: 40px; @scrollLinkHeight: 40px;
@scrollLinkHeightMedium: 50px; @scrollLinkHeightMedium: 50px;
@scrollLinkHeightMax: 70px; @scrollLinkHeightMax: 70px;
:root { // the default is for screensizes bigger than 12000px
:root {
// the default is for screensizes bigger than 12000px
--screen-mobile: 550px; --screen-mobile: 550px;
--screen-extrasmall: 760px; --screen-extrasmall: 760px;
--screen-small: 1000px; --screen-small: 1000px;
--screen-medium: 1200px; --screen-medium: 1200px;
} }
html { html {
display: block; display: block;
height: 100%; height: 100%;
&>body { &>body {
display: block; display: block;
height: 100%; height: 100%;
&>div.wrapper { &>div.wrapper {
display: block; display: block;
height: 100%; height: 100%;
...@@ -34,6 +38,7 @@ html { ...@@ -34,6 +38,7 @@ html {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
&>#search-block { &>#search-block {
margin-top: -10%; margin-top: -10%;
} }
...@@ -41,22 +46,24 @@ html { ...@@ -41,22 +46,24 @@ html {
} }
#main-content { #main-content {
justify-content: start!important; justify-content: start !important;
width: 100%!important; width: 100% !important;
max-width: 100%!important; max-width: 100% !important;
overflow-y: scroll; overflow-y: scroll;
height: 100%; height: 100%;
scroll-behavior: smooth; scroll-behavior: smooth;
} }
#plugin-btn-div { #plugin-btn-div {
margin-top: 20px!important; margin-top: 20px !important;
} }
#plugin-btn { #plugin-btn {
display: flex; display: flex;
align-items: center; align-items: center;
> img { // sets the size for the plugin button
>img {
// sets the size for the plugin button
max-width: 15px; max-width: 15px;
max-height: 15px; max-height: 15px;
margin-right: 8px; margin-right: 8px;
...@@ -64,32 +71,37 @@ html { ...@@ -64,32 +71,37 @@ html {
} }
#scroll-links { // creates a grid for the story-icons #scroll-links {
// creates a grid for the story-icons
min-width: 100%; min-width: 100%;
min-height: @scrollLinkHeight; min-height: @scrollLinkHeight;
margin-top: -@scrollLinkHeight; margin-top: -@scrollLinkHeight;
display: flex; display: flex;
font-size: 1rem;
text-align: center; text-align: center;
border-top:1px solid #888888; border-top: 1px solid #888888;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 10; z-index: 10;
@media(max-height: 250px){ @media(max-height: 250px) {
display:none; display: none;
} }
&>:nth-child(1) { &>:nth-child(1) {
background-color: @story-privacy-background; background-color: @story-privacy-background;
} }
&>:nth-child(2) { &>:nth-child(2) {
background-color: @story-ngo-background; background-color: @story-ngo-background;
color: @story-ngo-color; color: @story-ngo-color;
} }
&>:nth-child(3) { &>:nth-child(3) {
background-color: @story-diversity-background; background-color: @story-diversity-background;
color: @story-diversity-color; color: @story-diversity-color;
} }
&>:nth-child(4) { &>:nth-child(4) {
background-color: @story-eco-background; background-color: @story-eco-background;
color: @story-eco-color; color: @story-eco-color;
...@@ -102,12 +114,20 @@ html { ...@@ -102,12 +114,20 @@ html {
color: inherit; color: inherit;
padding: 8px; padding: 8px;
width: 25%; width: 25%;
@media(max-width: 1000px) {
>div {
font-size: .8rem;
}
}
&#story-plugin-link { &#story-plugin-link {
text-align: center; text-align: center;
align-self: center; align-self: center;
padding: 4px; padding: 4px;
max-width: 250px; max-width: 250px;
align-self: center; align-self: center;
&>i { &>i {
font-style: normal; font-style: normal;
display: inline-block; display: inline-block;
...@@ -115,6 +135,7 @@ html { ...@@ -115,6 +135,7 @@ html {
transform: rotate(-90deg); transform: rotate(-90deg);
} }
} }
&>img { &>img {
width: 20px; width: 20px;
height: 20px; height: 20px;
...@@ -123,13 +144,14 @@ html { ...@@ -123,13 +144,14 @@ html {
margin-right: 8px; margin-right: 8px;
object-fit: contain; object-fit: contain;
} }
&>span { &>span {
display: block; display: block;
} }
} }
} }
.four-reasons ~ a { .four-reasons~a {
grid-row-start: 3; grid-row-start: 3;
} }
...@@ -143,11 +165,12 @@ footer { ...@@ -143,11 +165,12 @@ footer {
background-color: transparent; background-color: transparent;
} }
#story-container > section { // creates the grid for the story sections #story-container>section {
// creates the grid for the story sections
display: grid; display: grid;
grid-template-columns: 25% 75% ; grid-template-columns: 25% 75%;
grid-template-rows: auto; grid-template-rows: auto;
grid-template-areas: grid-template-areas:
". ." ". ."
"story-icon heading" "story-icon heading"
". paragraph" ". paragraph"
...@@ -155,10 +178,11 @@ footer { ...@@ -155,10 +178,11 @@ footer {
". ."; ". .";
position: relative; position: relative;
align-items:center; align-items: center;
min-height: 70vh; min-height: 70vh;
&:not(:nth-child(1)){
@supports(clip-path: polygon(0 0, 30% 0, 50% 30px, 70% 0, 100% 0, 100% 100%, 0 100%)) or (-webkit-clip-path: polygon(0 0, 40% 0, 50% 30px, 60% 0, 100% 0, 100% 100%, 0 100%)){ &:not(:nth-child(1)) {
@supports(clip-path: polygon(0 0, 30% 0, 50% 30px, 70% 0, 100% 0, 100% 100%, 0 100%)) or (-webkit-clip-path: polygon(0 0, 40% 0, 50% 30px, 60% 0, 100% 0, 100% 100%, 0 100%)) {
padding-bottom: @clippathHeight; padding-bottom: @clippathHeight;
padding-top: @clippathHeight; padding-top: @clippathHeight;
margin-top: -@clippathHeight; margin-top: -@clippathHeight;
...@@ -166,31 +190,36 @@ footer { ...@@ -166,31 +190,36 @@ footer {
} }
} }
#story-container > section > h1 { //sets the heading for all sections #story-container>section>h1 {
//sets the heading for all sections
grid-area: heading; grid-area: heading;
font-size: 80px; font-size: 80px;
margin: 0; margin: 0;
} }
#story-container > section > p { // sets all paragraphs for all sections #story-container>section>p {
// sets all paragraphs for all sections
grid-area: paragraph; grid-area: paragraph;
font-size: 30px; font-size: 30px;
color: @story-font-color; color: @story-font-color;
max-width: 1100px; max-width: 1100px;
padding-right: 50px; padding-right: 50px;
} }
#story-container > section .story-icon { // sets all icons for all sections
#story-container>section .story-icon {
// sets all icons for all sections
grid-area: story-icon; grid-area: story-icon;
padding: 16px; padding: 16px;
text-align: center; text-align: center;
} }
.story-icon img { // defines the story-icons in the sections .story-icon img {
// defines the story-icons in the sections
height: 150px; height: 150px;
max-height: 300px; max-height: 300px;
max-width: 300px; max-width: 300px;
width:150px; width: 150px;
object-fit: contain; object-fit: contain;
} }
...@@ -198,7 +227,8 @@ footer { ...@@ -198,7 +227,8 @@ footer {
#story-privacy { #story-privacy {
margin-bottom: 0; margin-bottom: 0;
background-color: @story-privacy-background; background-color: @story-privacy-background;
.story-icon{
.story-icon {
filter: invert(@icon-color); filter: invert(@icon-color);
} }
} }
...@@ -209,8 +239,8 @@ footer { ...@@ -209,8 +239,8 @@ footer {
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
} }
#story-ngo > h1 { #story-ngo>h1 {
color:@story-ngo-color; color: @story-ngo-color;
} }
#story-diversity { #story-diversity {
...@@ -219,7 +249,7 @@ footer { ...@@ -219,7 +249,7 @@ footer {
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
} }
#story-diversity > h1 { #story-diversity>h1 {
color: @story-diversity-color; color: @story-diversity-color;
} }
...@@ -229,13 +259,15 @@ footer { ...@@ -229,13 +259,15 @@ footer {
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
} }
#story-eco > h1 { #story-eco>h1 {
color: @story-eco-color; color: @story-eco-color;
} }
#story-container #story-plugin > h1 {
font-size:60px; #story-container #story-plugin>h1 {
font-size: 60px;
} }
#story-container #story-plugin {
#story-container #story-plugin {
min-height: 60vh; min-height: 60vh;
background-color: @story-plugin-background; background-color: @story-plugin-background;
clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 40% 0, 50% @clippathHeight, 60% 0, 100% 0, 100% 100%, 0 100%);
...@@ -248,60 +280,72 @@ footer { ...@@ -248,60 +280,72 @@ footer {
padding: 0px; padding: 0px;
list-style: none; list-style: none;
gap: 2em; gap: 2em;
&>li { &>li {
min-width: 150px; min-width: 150px;
&>a { &>a {
display: block; display: block;
text-align: center; text-align: center;
} }
} }
} }
a.story-button { // sets the story-button for all sections
a.story-button {
// sets the story-button for all sections
padding: 12px; padding: 12px;
border-radius: 10px; border-radius: 10px;
font-size: 18px; font-size: 18px;
} }
// following lines set the Button color for each section // following lines set the Button color for each section
#story-privacy .story-button { #story-privacy .story-button {
background-color:#535353; background-color: #535353;
color:#ffffff; color: #ffffff;
} }
#story-ngo .story-button { #story-ngo .story-button {
background-color:#AD1A00; background-color: #AD1A00;
color:#ffffff; color: #ffffff;
} }
#story-diversity .story-button { #story-diversity .story-button {
background-color: #0c4690; background-color: #0c4690;
color:#ffffff; color: #ffffff;
} }
#story-eco .story-button { #story-eco .story-button {
background-color:#0c621A; background-color: #0c621A;
color:#ffffff; color: #ffffff;
} }
#story-plugin .story-button { #story-plugin .story-button {
background-color: #535353; background-color: #535353;
color: #ffffff; color: #ffffff;
} }
@media screen and (max-width: 1000px) { // changes the layout for screen sizes between 760-1000px @media screen and (max-width: 1000px) {
// changes the layout for screen sizes between 760-1000px
#scroll-links { #scroll-links {
min-height: @scrollLinkHeightMedium; min-height: @scrollLinkHeightMedium;
margin-top: -@scrollLinkHeightMedium; margin-top: -@scrollLinkHeightMedium;
} }
div#story-container h1{ div#story-container h1 {
font-size: 50px; font-size: 50px;
padding: 0 16px; padding: 0 16px;
} }
div#story-container p{
div#story-container p {
font-size: 25px; font-size: 25px;
padding-left: 16px; padding-left: 16px;
padding-right: 10vw; padding-right: 10vw;
} }
#story-container > section {
#story-container>section {
grid-template-columns: 132px auto; grid-template-columns: 132px auto;
grid-template-areas: grid-template-areas:
". ." ". ."
"story-icon heading" "story-icon heading"
"paragraph paragraph" "paragraph paragraph"
...@@ -315,12 +359,14 @@ a.story-button { // sets the story-button for all sections ...@@ -315,12 +359,14 @@ a.story-button { // sets the story-button for all sections
width: 100px; width: 100px;
} }
#story-container > section .story-icon { #story-container>section .story-icon {
text-align: left; text-align: left;
} }
#plugin > a {
#plugin>a {
flex-direction: column; flex-direction: column;
} }
.story-links { .story-links {
grid-area: story-links; grid-area: story-links;
display: flex; display: flex;
...@@ -328,10 +374,12 @@ a.story-button { // sets the story-button for all sections ...@@ -328,10 +374,12 @@ a.story-button { // sets the story-button for all sections
list-style: none; list-style: none;
gap: 1em; gap: 1em;
font-size: 10px; font-size: 10px;
}
#story-container #story-plugin > h1 {
font-size:50px;
} }
#story-container #story-plugin>h1 {
font-size: 50px;
}
#story-container #story-plugin { #story-container #story-plugin {
min-height: 50vh; min-height: 50vh;
} }
...@@ -347,41 +395,53 @@ a.story-button { // sets the story-button for all sections ...@@ -347,41 +395,53 @@ a.story-button { // sets the story-button for all sections
#story-eco { #story-eco {
clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
} }
#story-container #story-plugin { #story-container #story-plugin {
clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 30% 0, 50% @clippathHeight, 70% 0, 100% 0, 100% 100%, 0 100%);
} }
} }
@media screen and (min-width: 1000px) and (max-width:1200px) { // changes the layout for screen sizes between 1000px and 12000px @media screen and (min-width: 1000px) and (max-width:1200px) {
div#story-container h1{
font-size: 65px; // changes the layout for screen sizes between 1000px and 12000px
div#story-container h1 {
font-size: 65px;
} }
div#story-container p{
div#story-container p {
font-size: 25px; font-size: 25px;
padding-left: 8px; padding-left: 8px;
padding-right: 10vw; padding-right: 10vw;
} }
.story-links {
.story-links {
grid-area: story-links; grid-area: story-links;
display: flex; display: flex;
padding: 8px; padding: 8px;
list-style: none; list-style: none;
gap: 1em; gap: 1em;
} }
#story-container #story-plugin > h1 {
font-size:65px; #story-container #story-plugin>h1 {
font-size: 65px;
} }
} }
@media screen and (max-width: 550px) { // changes the layout for screen sizes smaller than 550px
@media screen and (max-width: 550px) {
// changes the layout for screen sizes smaller than 550px
#scroll-links { #scroll-links {
min-height: @scrollLinkHeightMax; min-height: @scrollLinkHeightMax;
margin-top: -@scrollLinkHeightMax; margin-top: -@scrollLinkHeightMax;
&>a { &>a {
flex-direction: column; flex-direction: column;
font-size: .8em; font-size: .8em;
&>img { &>img {
margin-right: 0; margin-right: 0;
} }
&>div { &>div {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
...@@ -390,17 +450,19 @@ a.story-button { // sets the story-button for all sections ...@@ -390,17 +450,19 @@ a.story-button { // sets the story-button for all sections
} }
} }