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;
justify-content: space-between;
align-items: center;
@media (max-width: 600px) {
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
}
.list {
@ -52,11 +58,3 @@
color: var(--darkest-gray);
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 {
position: relative;
z-index: 1;
}
z-index: 1;
.actionWrapper .actions {
.actions {
/* small screens, top: 0 */
@media (max-width: 767px) {
top: 0;
}
}
/* small screens, top: 0 */
@media (max-width: 767px) {
.actionWrapper .actions {
top: 0;
}
}
@media (max-width: 768px) {
.actionWrapper .actions {
position: relative;
margin-left: 0 !important;
@media (max-width: 768px) {
position: relative;
margin-left: 0 !important;
}
}
}

View file

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

View file

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

View file

@ -4,22 +4,22 @@
gap: var(--gap);
max-width: 350px;
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 */
.form .fieldset {
display: flex;
flex-direction: row;
gap: var(--gap);
border: none;
padding: 0;
margin: 0;
}
.fieldset {
display: flex;
flex-direction: row;
gap: var(--gap);
border: none;
padding: 0;
margin: 0;
}
.tokens {
margin-top: var(--gap);
}
.tokens {
margin-top: var(--gap);
.tokens table thead th {
text-align: left;
table thead th {
text-align: left;
}
}
}

View file

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

View file

@ -6,15 +6,13 @@
width: 100%;
height: auto;
margin: 0 auto;
/* 55rem == --main-content */
@media screen and (max-width: 55rem) {
padding: 0 1rem;
}
}
.forSites {
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 {
display: flex;
align-items: center;
gap: var(--gap);
padding: var(--gap-quarter);
}
.files {
li {
display: flex;
align-items: center;
gap: var(--gap);
padding: var(--gap-quarter);
}
.files li a {
display: flex;
align-items: center;
gap: var(--gap);
color: var(--darker-gray);
}
li a {
display: flex;
align-items: center;
gap: var(--gap);
color: var(--darker-gray);
}
.files li a:hover {
color: var(--link);
text-decoration: none;
}
li a:hover {
color: var(--link);
text-decoration: none;
}
.files li a svg {
color: inherit;
li a svg {
color: inherit;
}
}

View file

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