Kira
1e4c35bb17
the fabled "right way" i mentioned in this css file like six years ago was probably flexbox all along maybe the real screen width is the friends we made along the way
96 lines
1.6 KiB
CSS
96 lines
1.6 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap');
|
|
:root {
|
|
font-family: "Inter", sans-serif;
|
|
background-color: black;
|
|
color: white;
|
|
width: 69%;
|
|
margin: auto;
|
|
}
|
|
.header-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.profile-pic {
|
|
float: left;
|
|
margin-right: 10px;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
}
|
|
h1, h2, p {
|
|
font-family: "Inter", sans-serif;
|
|
text-align: center;
|
|
}
|
|
p {
|
|
font-size: 1.2em;
|
|
}
|
|
a {
|
|
color: #ff44bb;
|
|
text-decoration: none;
|
|
text-shadow: 0 0 5px;
|
|
}
|
|
* { /* unfucks some stuff */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.contacts {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
width: 580px;
|
|
margin: auto;
|
|
padding: 10px;
|
|
}
|
|
.contact {
|
|
width: 170px;
|
|
margin: 5px;
|
|
padding: 15px;
|
|
background-color: #232629;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
opacity: .9;
|
|
position: relative;
|
|
transition: opacity .25s;
|
|
}
|
|
|
|
/* some hacky shit to make <div class=contact>s clickable. basically just makes
|
|
an <a> in a <div class=contact> take up the full div */
|
|
.contact a {
|
|
z-index: 10;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
div.contact:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
@media screen and (max-width:900px) {
|
|
.contacts {
|
|
width: 580px;
|
|
}
|
|
:root {
|
|
width: 90%;
|
|
}
|
|
}
|
|
@media screen and (max-width:700px) {
|
|
.contacts {
|
|
width: 380px;
|
|
}
|
|
}
|
|
@media screen and (max-width:450px) {
|
|
:root {
|
|
width: 100%;
|
|
}
|
|
}
|
|
@media screen and (max-width:390px) {
|
|
.contacts {
|
|
width: 200px;
|
|
}
|
|
}
|