kira/cesium.one
1
0
Fork 0
Code Issues Activity

make css more better

Browse Source 
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
This commit is contained in:
Kira
2026-04-08 18:48:20 -04:00
parent 9a7f38b787
commit 1e4c35bb17
1 changed files with 28 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
styles.css
View File

@@ -33,21 +33,18 @@ a {
* { /* unfucks some stuff */ * { /* unfucks some stuff */
box-sizing: border-box; box-sizing: border-box;
} }
.contacts {
width: 550px;
margin:auto;
display: grid;
grid-template-areas: /* i know how to do it this way, */
'one two three'; /* so shut up about the "right way" */
grid-gap: 10px;
padding: 10px;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
.contacts {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 580px;
margin: auto;
padding: 10px;
} }
.contact { .contact {
float: left;
width: 170px; width: 170px;
margin: 5px;
padding: 15px; padding: 15px;
background-color: #232629; background-color: #232629;
border-radius: 10px; border-radius: 10px;
@@ -56,6 +53,7 @@ a {
position: relative; position: relative;
transition: opacity .25s; transition: opacity .25s;
} }
/* some hacky shit to make <div class=contact>s clickable. basically just makes /* 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 */ an <a> in a <div class=contact> take up the full div */
.contact a { .contact a {
@@ -67,55 +65,31 @@ a {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
} }
div.contact:hover { div.contact:hover {
opacity: 1; opacity: 1;
} }
.apps {
width: 550px;
margin:auto;
display: grid;
grid-template-areas:
'one two three';
grid-gap: 10px;
padding: 10px;
grid-auto-columns: 1fr;
grid-auto-rows: 1fr;
} @media screen and (max-width:900px) {
.app {
float: left;
width: 170px;
padding: 15px;
background-color: #232629;
border-radius: 10px;
text-align: center;
opacity: .9;
position: relative;
transition: opacity .25s;
}
.app a {
z-index: 10;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
position: absolute;
}
div.app:hover {
opacity: 1;
}
@media screen and (max-width:500px) {
.contacts { .contacts {
width: 100%; width: 580px;
grid-template-areas: 'one two';
}
.apps {
width: 100%;
grid-template-areas: 'one two';
} }
:root { :root {
width: 95%; 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;
} }
} }