move overall grid to 12 columns

I want finer-grained column spacing for the Trackables section,
so moving to 12 columns overall and shifting all elements to
roughly match their previous 6-column placement.
This commit is contained in:
Edgeworth E
2023-02-10 08:55:00 -08:00
parent 3ea7497bef
commit 8e2dca2bae
@@ -5,7 +5,7 @@
margin: 25px;
padding: 15px;
display: grid;
grid-template-columns: repeat(6, 1fr); /* TODO: consider 12 columns instead */
grid-template-columns: repeat(12, 1fr);
gap: 5px;
}
@@ -13,7 +13,7 @@ img.logo {
background: ghostwhite;
border-radius: 20px;
padding: 0px 10px 0px 0px;
grid-column: 1 / 7;
grid-column: 1 / 13;
width: 100%;
}
@@ -34,7 +34,7 @@ img.logo {
display: flex;
padding: 0;
text-align: center;
grid-column: 1 / 7;
grid-column: 1 / 13;
}
.kitty-attributes .score {
@@ -181,7 +181,7 @@ div.redtext {
background-color: #a00a03;
padding: .2em .4em;
border-radius: .2em;
grid-column: 1 / 7;
grid-column: 1 / 13;
}
.rightalign {
@@ -207,7 +207,7 @@ div.redtext {
}
.flex-between {
grid-column: 1 / 7;
grid-column: 1 / 13;
grid-template-columns: repeat(6, 1fr);
}
@@ -229,7 +229,7 @@ div.redtext {
}
.flex-grow-2 {
grid-column: 3 / 7; /* TODO: why not stretching across? likely needs div wrapper */
grid-column: 6 / 13; /* TODO: why not stretching across? likely needs div wrapper */
}
textarea.flex-grow-2 {
@@ -244,7 +244,7 @@ textarea.flex-grow-2 {
}
.width200 {
grid-column: 1 / 3;
grid-column: 1 / 6;
}
.twentywide {
@@ -272,7 +272,7 @@ textarea.flex-grow-2 {
}
.halfwide {
grid-column: 5 / 7;
grid-column: 8 / 13;
}
.threequarterswide {
@@ -284,7 +284,7 @@ textarea.flex-grow-2 {
.fullwide {
grid-template-columns: repeat(6, 1fr);
grid-column: 1 / 7;
grid-column: 1 / 13;
}
/* Miscellaneous formatting */
@@ -292,7 +292,7 @@ textarea.flex-grow-2 {
.trackables {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column: 1 / 5;
grid-column: 1 / 8;
gap: inherit;
}
@@ -356,7 +356,7 @@ textarea.kitty-desc {
}
div.repcontainer {
grid-column: 1 / 7;
grid-column: 1 / 13;
}
.repcontainer textarea {
@@ -366,7 +366,7 @@ div.repcontainer {
}
hr {
grid-column: 1 / 7;
grid-column: 1 / 13;
height: 10px;
border: 0;
border-top: 10px solid #ccc;