ro
8c727d4414
using a font for icons isn't great for site accessibility, so all font icons will be removed and replaced with svgs. nav and sub nav, page options and recent meta have been replaced
150 lines
2.8 KiB
CSS
150 lines
2.8 KiB
CSS
section[class="index-header"] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 60px auto 0;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: left;
|
|
align-items: center;
|
|
border-radius: 5px;
|
|
border-bottom: none;
|
|
position: relative;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a video {
|
|
width: 100%;
|
|
position: absolute;
|
|
object-fit: cover;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(1) {
|
|
grid-column: 1/4;
|
|
grid-row: 1/3;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(2) {
|
|
grid-row: 3/6;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(3) {
|
|
grid-column: 2/4;
|
|
grid-row: 3/5;
|
|
}
|
|
|
|
section[class="index-header"] div[class="index-header-right"] {
|
|
display: flex;
|
|
justify-content: right;
|
|
align-items: center;
|
|
}
|
|
|
|
section[class="index-header"] div[class="index-header-right"] a {
|
|
border-bottom: none;
|
|
margin-left: 5px;
|
|
}
|
|
|
|
section[class="index-recent-pages"] {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-auto-rows: minmax(200px, auto);
|
|
gap: 10px;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a button {
|
|
padding: 1px 5px;
|
|
}
|
|
|
|
section[class="index-recent-pages"] button i {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
button[data-active="true"] {
|
|
background: var(--primary);
|
|
}
|
|
|
|
button[data-active="false"] {
|
|
background: var(--secondary);
|
|
}
|
|
|
|
button[data-active="false"] svg {
|
|
fill: var(--primary);
|
|
}
|
|
|
|
button[data-active="true"] svg {
|
|
fill: var(--highlight);
|
|
}
|
|
|
|
section[class="index-recent-pages"] aside {
|
|
font-size: 1.1em;
|
|
color: var(--white);
|
|
text-shadow: 2px 2px 2px var(--black);
|
|
padding: 10px;
|
|
z-index: 10;
|
|
}
|
|
|
|
section[class="index-recent-pages"] hr {
|
|
color: var(--white);
|
|
border: 0.1px solid;
|
|
margin: 7px 0;
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
section[class="index-header"],
|
|
section[class="index-recent-pages"] {
|
|
width: 97%;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 520px) {
|
|
section[class="index-recent-pages"] {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(1) {
|
|
grid-column: 1/3;
|
|
grid-row: 1/2;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(2) {
|
|
grid-row: 2/3;
|
|
grid-column: 1/2;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(3) {
|
|
grid-column: 2/3;
|
|
grid-row: 2/3;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 350px) {
|
|
section[class="index-recent-pages"] a:nth-child(2) {
|
|
grid-column: 1/3;
|
|
grid-row: 2/3;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(3) {
|
|
grid-column: 1/3;
|
|
grid-row: 3/4;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(4) {
|
|
grid-column: 1/3;
|
|
grid-row: 4/5;
|
|
}
|
|
|
|
section[class="index-recent-pages"] a:nth-child(5) {
|
|
grid-column: 1/3;
|
|
grid-row: 5/6;
|
|
}
|
|
}
|