WallyHackenslacker/NibasaViewer
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects 2 Releases Wiki Activity

Changed CSS grid layout for a table layout.

Browse Source
This commit is contained in:
Wally Hackenslacker
2023-07-30 21:18:36 -04:00
parent 84faf3d84c
commit 468769275b
3 changed files with 68 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
viewer/static/css/styles.css
View File

@@ -24,69 +24,15 @@
height: 100%;
}
.mauto {
margin: auto;
}
/****************************************************************************
* Grid. *
****************************************************************************/
.grid-container {
display: flex;
flex: 1;
}
.grid {
max-width: 1920px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-rows: auto auto 1fr 1fr 1fr auto auto;
}
.grid-icon {
text-align: center;
}
.column {
flex-direction: column;
text-align: center;
border: black 1px solid;
}
/****************************************************************************
* Media queries. *
****************************************************************************/
@media (min-width: 300px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 500px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 600px) {
.grid {
grid-template-columns: repeat(5, 1fr);
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(7, 1fr);
}
}
@media (min-width: 1280px) {
.grid {
grid-template-columns: repeat(9, 1fr);
}
}
@media (min-width: 1500px) {
.grid {
grid-template-columns: repeat(11, 1fr);
}
}