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 {
background-color: #53bf65;
}
@ -54,16 +61,9 @@
height: 260px;
background-color: #357840;
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 {
display: none;
}
@ -84,3 +84,37 @@
margin-top: 5mm;
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%;
padding-top: 70px;
padding-bottom: 70px;
min-height: 530px;
min-height: 570px;
}
#backtotopbutton {

View File

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