experience more responsive mobile design

This commit is contained in:
lukas-heiligenbrunner 2020-03-20 16:28:33 +01:00
parent d237bd5d07
commit dec12cb6d2
3 changed files with 68 additions and 32 deletions

View File

@ -1,3 +1,10 @@
/*!
* experience.css - https://heili.eu
* Licensed under the MIT license - http://opensource.org/licenses/MIT
* E-mail: lukas.heiligenbrunner@gmail.com
* Copyright (c) 2020 Lukas Heiligenbrunner
*/
#section3 { #section3 {
background-color: #53bf65; background-color: #53bf65;
} }
@ -54,16 +61,9 @@
height: 260px; height: 260px;
background-color: #357840; background-color: #357840;
color: white; color: white;
border-radius: 5mm;; border-radius: 5mm;
} }
/*!
* experience.css - https://heili.eu
* Licensed under the MIT license - http://opensource.org/licenses/MIT
* E-mail: lukas.heiligenbrunner@gmail.com
* Copyright (c) 2020 Lukas Heiligenbrunner
*/
.ratiobtn { .ratiobtn {
display: none; display: none;
} }
@ -84,3 +84,37 @@
margin-top: 5mm; margin-top: 5mm;
font-size: large; font-size: large;
} }
/* Screen smaller than 600px -- general small width screens */
@media screen and (max-width: 1200px) {
#section3 {
height: 100%;
}
.tab {
display: inline-block;
width: 20%;
/*float: left;*/
margin-right: 0;
border: 0mm solid hsla(0, 100%, 50%, 0);
padding-left: 0;
clear: none;
margin-bottom: 70px;
}
.content {
position: static;
display: block;
float: none;
width: auto;
height: 450px;
}
.ratiobtn:checked + .tab {
color: aqua;
transition: border-left-color 500ms;
}
}

View File

@ -16,7 +16,7 @@ body, html, #maincontent {
height: 80%; height: 80%;
padding-top: 70px; padding-top: 70px;
padding-bottom: 70px; padding-bottom: 70px;
min-height: 530px; min-height: 570px;
} }
#backtotopbutton { #backtotopbutton {

View File

@ -8,6 +8,7 @@
#section1 { #section1 {
background-color: #311E25; background-color: #311E25;
color: white; color: white;
padding-top: 200px;
} }
.lightOpacity { .lightOpacity {
@ -19,6 +20,7 @@
} }
#preTitle { #preTitle {
font-size: 35px;
opacity: 0.8; opacity: 0.8;
color: #fffd80; color: #fffd80;
} }
@ -28,36 +30,32 @@
height: 400px; height: 400px;
} }
/* screen larger than 600px -- desktop */ #titleText {
@media screen and (min-width: 1201px) {
#section1 {
padding-top: 200px;
}
#preTitle {
font-size: 35px;
}
#titleText {
font-size: 80px; font-size: 80px;
} }
#subTitleText { #subTitleText {
font-size: 50px; font-size: 50px;
} }
#meaningFullSentence { #meaningFullSentence {
width: 40%; width: 40%;
} }
/* todo maybe a bit weird?? */ /* todo maybe a bit weird?? */
#homepicture:hover { #homepicture:hover {
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px; box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px 0px;
transition: all 500ms; transition: all 500ms;
}
/* height smaller than 720px */
@media screen and (max-height: 720px) {
#homepicture {
height: 300px;
} }
} }
/* Screen smaller than 600px -- mobile */ /* Screen smaller than 600px -- general small width screens */
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
#section1 { #section1 {
padding-top: 100px; padding-top: 100px;
@ -86,3 +84,7 @@
width: 100%; width: 100%;
} }
} }
@media only screen and (min-width: 600px) {
/* For tablets: */
}