161 lines
2.2 KiB
CSS
161 lines
2.2 KiB
CSS
body {
|
|
background-color: black;
|
|
color: white;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
gap: 20px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
a {
|
|
color: lightgray;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
color: darkgray;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
}
|
|
|
|
aside {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 400px;
|
|
border: 2px solid white;
|
|
background-color: #111;
|
|
}
|
|
|
|
nav.profile img {
|
|
width: 100px;
|
|
margin-top: -50px;
|
|
border: 4px solid white;
|
|
}
|
|
|
|
nav.profile {
|
|
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://i.postimg.cc/jdSrJ8GD/purplesky.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-bottom: 2px solid white;
|
|
padding: 20px;
|
|
}
|
|
|
|
#links {
|
|
border-bottom: 2px solid white;
|
|
}
|
|
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
padding: 20px;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.centerText {
|
|
text-align: center;
|
|
}
|
|
|
|
.box {
|
|
padding: 10px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.noMargin {
|
|
margin: 0px;
|
|
}
|
|
|
|
.lightBackground {
|
|
background-color: #111;
|
|
}
|
|
|
|
.border {
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.dottedBorder {
|
|
border: 2px dotted white;
|
|
}
|
|
|
|
.dashedBorder {
|
|
border: 2px dashed white;
|
|
}
|
|
|
|
.thumbnail {
|
|
border: 2px solid white;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-row {
|
|
flex-direction: row;
|
|
}
|
|
|
|
.flex-column {
|
|
flex-direction: column;
|
|
}
|
|
|
|
|
|
.lightColor {
|
|
color: lightgray;
|
|
}
|
|
|
|
.flyOnHover:hover {
|
|
animation: alternate .4s fly;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.menuEntry {
|
|
display: inline-block;
|
|
width: 200;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.menuEntry > img {
|
|
background-color: black;
|
|
}
|
|
|
|
.menuEntry:hover {
|
|
animation: alternate .4s fly;
|
|
animation-fill-mode: forwards;
|
|
background-color: #171717;
|
|
gap: 4px;
|
|
}
|
|
|
|
.menuEntryColor {
|
|
color: white;
|
|
}
|
|
|
|
.menuEntryColor:hover {
|
|
color: white;
|
|
}
|
|
|
|
.menuEntry:hover > img {
|
|
filter: grayscale(100%) invert();
|
|
border-color: gray;
|
|
}
|
|
|
|
|
|
/* Keyframes */
|
|
@keyframes fly {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
|
|
100% {
|
|
transform: translate(0%, -2%);
|
|
}
|
|
}
|