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

fixed scroll links on smaller displays

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