PersonalWebsite/css/general.css

135 lines
2.6 KiB
CSS
Raw Normal View History

/*!
* general.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
*/
2020-03-18 15:02:43 +00:00
body, html, #maincontent {
2020-03-18 09:22:43 +00:00
height: 100%;
scroll-behavior: smooth;
2020-03-20 17:49:12 +00:00
min-width: fit-content;
2020-03-18 09:22:43 +00:00
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
}
h1 {
2020-03-20 20:40:51 +00:00
text-transform: uppercase;
font-family: 'Open Sans', arial, sans-serif;
2020-03-20 20:40:51 +00:00
font-weight: bold;
}
.animationappearnow {
animation: textappear 1s 0ms 1 forwards;
}
.animationappear300ms {
animation: textappear 1s 300ms 1 forwards;
}
.animationappear600ms {
animation: textappear 1s 600ms 1 forwards;
}
2020-03-18 09:22:43 +00:00
/* general definition of a tile */
.tile {
height: 80%;
padding-top: 70px;
padding-bottom: 70px;
min-height: 570px;
2020-03-18 09:22:43 +00:00
}
2020-03-20 14:28:22 +00:00
#backtotopbutton {
2020-03-18 15:02:43 +00:00
position: fixed;
bottom: 0;
right: 0;
height: 88px;
width: 120px;
margin-bottom: 40px;
margin-right: 60px;
background-color: #194378;
2020-03-18 15:02:43 +00:00
opacity: 0.5;
transition: opacity 500ms;
color: white;
border-radius: 13px;
text-align: center;
}
2020-03-20 14:28:22 +00:00
#backtotopbutton:hover {
2020-03-18 15:02:43 +00:00
opacity: 1;
transition: opacity 500ms;
}
2020-03-18 09:22:43 +00:00
/* nav item formattings */
.nav-item {
text-transform: uppercase;
text-decoration: none;
font: bold 15px/1.4 'Open Sans', arial, sans-serif;
}
/* navbar animation */
.nav :nth-child(1) a{
visibility: hidden;
animation: textfade 1s 600ms 1 forwards;
}
.nav :nth-child(2) a{
visibility: hidden;
animation: textfade 1s 700ms 1 forwards;
}
.nav :nth-child(3) a{
visibility: hidden;
animation: textfade 1s 800ms 1 forwards;
}
.nav :nth-child(4) a{
visibility: hidden;
animation: textfade 1s 900ms 1 forwards;
}
/* The animation code */
@keyframes textfade {
from {
visibility: hidden;
position: relative;
top: -20px;
}
to {
visibility: visible;
position: relative;
top: 0;
}
}
/* The animation code */
@keyframes textappear {
from {
visibility: hidden;
opacity: 0;
top: -20px;
}
to {
visibility: visible;
opacity: 1;
top: 0;
}
}
2020-03-18 09:22:43 +00:00
/* 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: #001631;
2020-03-18 09:22:43 +00:00
}
2020-03-20 14:28:22 +00:00
#backtotopbutton {
2020-03-18 15:02:43 +00:00
display: none; /* hide scroll to top button on mobile devices */
}
2020-03-18 09:22:43 +00:00
}