forked from projects/thebadspace
ro
efe568bf60
Responsive styles are non-existent so it was time to get that sorted. This first pass was just getting a feel for what can be done with list items since that's one of the main components of the site. Second pass will clean this up as well as the majority of text styling so it all smoothly adapts. Ha, or that's the plan anyway.
126 lines
2.2 KiB
CSS
126 lines
2.2 KiB
CSS
section[role="listings"] {
|
|
background: var(--primary);
|
|
width: 100%;
|
|
max-width: 600px;
|
|
padding: 10px;
|
|
margin: 0 auto;
|
|
color: var(--white);
|
|
}
|
|
|
|
section[role="listings"] a {
|
|
color: var(--highlight);
|
|
font-size: 2em;
|
|
font-weight: bold;
|
|
border: 0;
|
|
}
|
|
|
|
section[role="listings"] a label {
|
|
color: var(--secondary);
|
|
font-size: 0.3em;
|
|
text-decoration: underline;
|
|
font-family: var(--mono-type);
|
|
}
|
|
|
|
section[role="listings"] a:hover {
|
|
color: var(--white);
|
|
}
|
|
|
|
section[role="listings"] div[role="paginate"] {
|
|
padding: 5px;
|
|
}
|
|
|
|
section[role="listings"] div[role="paginate"] span {
|
|
vertical-align: super;
|
|
font-weight: bold;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
a.list-link {
|
|
display: grid;
|
|
grid-template-columns: 70px 1fr 80px 80px;
|
|
gap: 10px;
|
|
height: 45px;
|
|
padding-bottom: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.list-link > .item-rating {
|
|
background: var(--secondary);
|
|
border-radius: 3px;
|
|
color: var(--white);
|
|
font-weight: 500;
|
|
padding: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
a.list-link > .item-name {
|
|
background: var(--white);
|
|
border-radius: 3px;
|
|
color: var(--black);
|
|
font-weight: 400;
|
|
padding: 9px 5px;
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
a.list-link > .item-silence {
|
|
background: var(--silence);
|
|
border-radius: 3px;
|
|
color: var(--black);
|
|
font-weight: 500;
|
|
padding: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
a.list-link > .item-block {
|
|
background: var(--suspend);
|
|
border-radius: 3px;
|
|
color: var(--black);
|
|
font-weight: 500;
|
|
padding: 10px;
|
|
position: relative;
|
|
}
|
|
|
|
a.list-link > .item-silence > .item-icon,
|
|
a.list-link > .item-block > .item-icon {
|
|
width: 30px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/*
|
|
responsive
|
|
*/
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
a.list-link {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
|
|
grid-template-rows: 100% 100px 30px 30px;
|
|
gap: 5px;
|
|
height: auto;
|
|
padding-bottom: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.list-link > .item-rating {
|
|
grid-row: 3;
|
|
grid-column: 1/4;
|
|
height: 100%;
|
|
}
|
|
|
|
a.list-link > .item-name {
|
|
grid-row: 2/3;
|
|
grid-column: 1/6;
|
|
}
|
|
|
|
a.list-link > .item-silence {
|
|
grid-row: 3/4;
|
|
height: 100%;
|
|
}
|
|
|
|
a.list-link > .item-block {
|
|
grid-row: 3/4;
|
|
height: 100%;
|
|
}
|
|
}
|