This repository has been archived on 2022-01-01. You can view files and clone it, but cannot push or open issues or pull requests.
Web/css/index.css

102 lines
1.4 KiB
CSS
Raw Normal View History

.left, .right {
position: absolute;
left: 0;
right: 0;
}
.left {
text-align: center;
top: 0;
bottom: 60%;
box-shadow: 0 0 2em black;
z-index: 100;
}
.right {
top: 40%;
bottom: 0;
background: url("../images/pic1.webp");
background-size: cover;
background-position: center;
z-index: 1;
}
.left h1, .left h2 {
font-family: 'IBM Plex Serif', serif;
position: absolute;
font-size: 3rem;
height: 1em;
line-height: 1em;
margin: 0;
width: 100%;
}
.left h2 {
top: calc( 50% - 1em );
font-weight: 800;
}
.left h1 {
bottom: calc( 50% - 1em );
font-weight: 300;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
background: #000000de;
color: #ffffffde;
text-align: center;
}
footer ul {
list-style: none;
padding: 1em;
}
footer li span {
font-weight: 800;
margin-right: 1em;
}
footer a {
color: #dededede;
text-decoration: none;
transition: color 50ms;
}
footer a:hover {
color: #ffffffde;
}
footer a:active {
color: #ffffffde;
}
@media screen and ((min-width: 1024px) or (orientation: landscape)) {
.left, .right {
top: 0;
bottom: 0;
}
.right {
right: 0;
left: 40%
}
.left {
right: 60%;
}
.left h1, .left h2 {
text-align: right;
padding-right: 1em;
}
}
@media screen and (min-width: 1024px) {
.left h1, .left h2 {
font-size: 4rem;
}
}
@media screen and ((max-width: 700px) and (orientation: landscape)) {
.left h1, .left h2 {
font-size: 2rem;
padding-right: .5em;
}
}