css reformat in seperate files

This commit is contained in:
lukas-heiligenbrunner 2020-03-18 10:22:43 +01:00
parent 8bd8985995
commit f8d599de22
5 changed files with 166 additions and 155 deletions

51
css/about.css Normal file
View File

@ -0,0 +1,51 @@
/* About Me*/
#aboutmeText {
width: 100%;
}
.aboutcontainer {
width: 40%;
float: left;
}
.aboutPicContainer {
width: 60%;
height: 300px;
float: left;
}
#aboutPic {
float: right;
margin-top: 10%;
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
height: 100%;
}
/* special design for Screen smaller than 600px -- mobile */
@media screen and (max-width: 1200px) {
/* About Me*/
#aboutmeText {
width: 100%;
}
.aboutcontainer {
width: 100%;
}
.aboutPicContainer {
width: 100%;
height: 150px;
}
#section2 {
height: 130%;
}
#aboutPic {
float: initial;
margin-left: auto;
margin-right: auto;
/* todo nof loating right in middle */
}
}

37
css/general.css Normal file
View File

@ -0,0 +1,37 @@
body, html {
height: 100%;
scroll-behavior: smooth;
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
}
/* general definition of a tile */
.tile {
height: 80%;
padding-top: 70px;
padding-bottom: 70px;
min-height: 530px;
}
/* nav item formattings */
.nav-item {
text-transform: uppercase;
text-decoration: none;
font: bold 15px/1.4 'Open Sans', arial, sans-serif;
}
/* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) {
}
/* Screen smaller than 600px -- mobile */
@media screen and (max-width: 1200px) {
/*background color of collapsed navbar*/
.navbar-nav {
background: #311E25;
}
.tile {
min-height: 300px;
}
}

75
css/home.css Normal file
View File

@ -0,0 +1,75 @@
#section1 {
background-color: #311E25;
color: white;
}
.lightOpacity {
opacity: 0.6;
}
.bigText {
font-family: 'Helvetica Neue', fantasy;
}
#preTitle {
opacity: 0.8;
color: #fffd80;
}
#homepicture {
float: left;
height: 400px;
}
/* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) {
#section1 {
padding-top: 200px;
}
#preTitle {
font-size: 35px;
}
#titleText {
font-size: 80px;
}
#subTitleText {
font-size: 50px;
}
#meaningFullSentence {
width: 40%;
}
}
/* Screen smaller than 600px -- mobile */
@media screen and (max-width: 1200px) {
#section1 {
padding-top: 100px;
height: 90%;
}
#preTitle {
font-size: 15px;
}
#titleText {
font-size: 30px;
}
#subTitleText {
font-size: 20px;
}
#meaningFullSentence {
width: 100%;
font-size: 13px;
}
#homepicture {
height: 300px;
width: 100%;
}
}

View File

@ -1,154 +0,0 @@
body, html {
height: 100%;
scroll-behavior: smooth;
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
}
.tile {
height: 80%;
padding-top: 70px;
padding-bottom: 70px;
}
.nav-item {
text-transform: uppercase;
text-decoration: none;
font: bold 15px/1.4 'Open Sans', arial, sans-serif;
}
#section1 {
background-color: #311E25;
color: white;
}
.lightOpacity {
opacity: 0.6;
}
.bigText {
font-family: 'Helvetica Neue', fantasy;
}
#preTitle {
opacity: 0.8;
color: #fffd80;
}
#homepicture {
float: left;
height: 400px;
}
/* About Me*/
#aboutmeText {
width: 100%;
}
.aboutcontainer {
width: 40%;
float: left;
}
.aboutPicContainer {
width: 60%;
height: 300px;
float: left;
}
#aboutPic {
float: right;
margin-top: 10%;
box-shadow: rgba(2, 12, 27, 0.7) 0px 10px 30px -15px;
height: 100%;
}
/* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) {
.tile {
min-height: 530px;
}
#section1 {
padding-top: 200px;
}
#preTitle {
font-size: 35px;
}
#titleText {
font-size: 80px;
}
#subTitleText {
font-size: 50px;
}
#meaningFullSentence {
width: 40%;
}
}
/* Screen smaller than 600px -- mobile */
@media screen and (max-width: 1200px) {
/*background color of collapsed navbar*/
.navbar-nav {
background: #311E25;
}
.tile {
min-height: 300px;
}
#section1 {
padding-top: 100px;
height: 90%;
}
#preTitle {
font-size: 15px;
}
#titleText {
font-size: 30px;
}
#subTitleText {
font-size: 20px;
}
#meaningFullSentence {
width: 100%;
font-size: 13px;
}
#homepicture {
height: 300px;
width: 100%;
}
/* About Me*/
#aboutmeText {
width: 100%;
}
.aboutcontainer {
width: 100%;
}
.aboutPicContainer {
width: 100%;
height: 150px;
}
#section2 {
height: 130%;
}
#aboutPic {
float: initial;
margin-left: auto;
margin-right: auto;
/* todo nof loating right in middle */
}
}

View File

@ -15,7 +15,9 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/home.css">
<link rel="stylesheet" href="css/about.css">
</head> </head>
<!-- The scrollable area --> <!-- The scrollable area -->
<body data-spy="scroll" data-target=".navbar" data-offset="50"> <body data-spy="scroll" data-target=".navbar" data-offset="50">