101 lines
2.3 KiB
CSS
Executable File
101 lines
2.3 KiB
CSS
Executable File
/* Use this file to control the layout of cards (articles) within the
|
|
* main region of the page. */
|
|
|
|
/* TODO: Map the articles to grid areas */
|
|
main > h2 {
|
|
grid-area: heading;
|
|
}
|
|
main > article:nth-of-type(1) {
|
|
grid-area: article1;
|
|
}
|
|
main > article:nth-of-type(2) {
|
|
grid-area: article2;
|
|
}
|
|
main > article:nth-of-type(3) {
|
|
grid-area: article3;
|
|
}
|
|
main > article:nth-of-type(4) {
|
|
grid-area: article4;
|
|
}
|
|
main > article:nth-of-type(5) {
|
|
grid-area: article5;
|
|
}
|
|
main > article:nth-of-type(6) {
|
|
grid-area: article6;
|
|
}
|
|
|
|
/* TODO: Make the main element into a grid to hold the cards */
|
|
main {
|
|
display: grid;
|
|
}
|
|
|
|
/* TODO: Tiny and small layouts:
|
|
* All articles in a vertical column using grid-template-areas with
|
|
* the main h2 title at the top. */
|
|
|
|
@media (max-width: 699px) {
|
|
main {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"heading"
|
|
"article1"
|
|
"article2"
|
|
"article3"
|
|
"article4"
|
|
"article5"
|
|
"article6";
|
|
}
|
|
}
|
|
|
|
/* TODO: Medium layouts:
|
|
* Article cards are displayed 2 per row (articles 1 and 2 in the top row,
|
|
* 3 and 4 in the second, 5 and 6 in the third). Use 1vh for row gaps and
|
|
* 2vw for column gaps. Both columns should have the same width. Again,
|
|
* place the main h2 title at the top. */
|
|
@media (min-width: 700px) {
|
|
main {
|
|
grid-template-columns: 1fr 1fr;
|
|
grid-template-areas:
|
|
"heading heading"
|
|
"article1 article2"
|
|
"article3 article4"
|
|
"article5 article6";
|
|
}
|
|
}
|
|
|
|
/* TODO: Large layouts:
|
|
* Article cards are now in 3 equal-width columns with the main h2 title
|
|
* at the top. */
|
|
@media (min-width: 1000px) {
|
|
main {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-areas:
|
|
"heading heading heading"
|
|
"article1 article2 article3"
|
|
"article4 article5 article6";
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
article h3,
|
|
p {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
main > h2 {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* TODO: Print formatting:
|
|
* Make the main content into a flex-box with the articles
|
|
* in a column with space between the items vertically. Get rid
|
|
* of the vertical padding on the p and h3 elements inside
|
|
* the articles (keeping 1vw padding on the sides).
|
|
* Remove the main h2 title from the display. */
|