Migrate some CSS to nested

This commit is contained in:
Max Leiter 2023-02-25 22:43:11 -08:00
parent 85f21bf505
commit 590cc51ec8
9 changed files with 82 additions and 94 deletions

View file

@ -8,6 +8,12 @@
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
@media (max-width: 600px) {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
} }
.list { .list {
@ -52,11 +58,3 @@
color: var(--darkest-gray); color: var(--darkest-gray);
box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor; box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
} }
@media (max-width: 600px) {
.listWrapper {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
}

View file

@ -1,23 +1,16 @@
.actionWrapper { .actionWrapper {
position: relative; position: relative;
z-index: 1; z-index: 1;
}
.actionWrapper .actions { .actions {
/* small screens, top: 0 */
@media (max-width: 767px) {
top: 0;
}
} @media (max-width: 768px) {
position: relative;
/* small screens, top: 0 */ margin-left: 0 !important;
@media (max-width: 767px) { }
.actionWrapper .actions {
top: 0;
}
}
@media (max-width: 768px) {
.actionWrapper .actions {
position: relative;
margin-left: 0 !important;
} }
} }

View file

@ -4,10 +4,8 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: inherit; gap: inherit;
}
@media screen and (max-width: 650px) { @media screen and (max-width: 650px) {
.title {
align-items: flex-start; align-items: flex-start;
flex-direction: column; flex-direction: column;
} }

View file

@ -2,10 +2,10 @@
width: 100%; width: 100%;
display: block; display: block;
white-space: nowrap; white-space: nowrap;
}
.table thead th { thead th {
font-weight: bold; font-weight: bold;
}
} }
.id { .id {

View file

@ -4,22 +4,22 @@
gap: var(--gap); gap: var(--gap);
max-width: 350px; max-width: 350px;
margin-top: var(--gap); margin-top: var(--gap);
} /* fieldset contains an input and button. I want button to be small next to input */
/* fieldset contains an input and button. I want button to be small next to input */ .fieldset {
.form .fieldset { display: flex;
display: flex; flex-direction: row;
flex-direction: row; gap: var(--gap);
gap: var(--gap); border: none;
border: none; padding: 0;
padding: 0; margin: 0;
margin: 0; }
}
.tokens { .tokens {
margin-top: var(--gap); margin-top: var(--gap);
}
.tokens table thead th { table thead th {
text-align: left; text-align: left;
}
}
} }

View file

@ -5,11 +5,10 @@
border: 1px solid var(--light-gray); border: 1px solid var(--light-gray);
width: 100%; width: 100%;
height: 100%; height: 100%;
}
.content {
.card .content { padding: var(--gap);
padding: var(--gap); width: 100%;
width: 100%; height: auto;
height: auto; }
} }

View file

@ -6,15 +6,13 @@
width: 100%; width: 100%;
height: auto; height: auto;
margin: 0 auto; margin: 0 auto;
/* 55rem == --main-content */
@media screen and (max-width: 55rem) {
padding: 0 1rem;
}
} }
.forSites { .forSites {
margin-top: var(--gap); margin-top: var(--gap);
} }
/* 55rem == --main-content */
@media screen and (max-width: 55rem) {
.page {
padding: 0 1rem;
}
}

View file

@ -46,26 +46,27 @@
} }
} }
.files li { .files {
display: flex; li {
align-items: center; display: flex;
gap: var(--gap); align-items: center;
padding: var(--gap-quarter); gap: var(--gap);
} padding: var(--gap-quarter);
}
.files li a { li a {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--gap); gap: var(--gap);
color: var(--darker-gray); color: var(--darker-gray);
} }
.files li a:hover { li a:hover {
color: var(--link); color: var(--link);
text-decoration: none; text-decoration: none;
} }
.files li a svg { li a svg {
color: inherit; color: inherit;
}
} }

View file

@ -1,15 +1,22 @@
.container ul { .container {
list-style: none; ul {
padding: 0; list-style: none;
margin: 0; padding: 0;
} margin: 0;
margin-top: 0.5rem;
.container > * { @media (max-width: 768px) {
width: 100%; padding: 0 var(--gap);
} }
}
.container ul li { ul li {
padding: 0.5rem 0; padding: 0.5rem 0;
}
> * {
width: 100%;
}
} }
.postHeader { .postHeader {
@ -31,9 +38,3 @@
gap: var(--gap-half); gap: var(--gap-half);
margin-bottom: var(--gap); margin-bottom: var(--gap);
} }
@media (max-width: 768px) {
.container ul {
padding: 0 var(--gap);
}
}