me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 11:27:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Continue redesigning website

Browse Source 
Start template for article list for each year
This commit is contained in:
Matthew Grove
2020-03-03 07:26:53 +00:00
parent 8d6382d3a6
commit b382db281c
23 changed files with 675 additions and 794 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
_site/css/article-list.css
View File

@@ -1,63 +0,0 @@
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float: right;
clear: right;
width: calc(50% - 6px);
}
.main-content .mdc-card:nth-of-type(even) {
float: left;
clear: left;
}
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
/* makes last article full-width if it is on its own in a row - i.e. if there is an even number of articles in total */
.main-content .mdc-card:nth-of-type(odd):nth-last-of-type(2) ~ .mdc-card:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 1 article present */
.main-content .mdc-card:first-of-type:last-of-type {
float: none;
clear: both;
width: auto;
}
/* styling for when 2 articles present & small screen is detected */
@media screen and (max-width: 1000px) {
.main-content .mdc-card:nth-child(1):nth-last-of-type(2), .main-content .mdc-card:nth-of-type(2):last-of-type {
float: none;
clear: both;
width: auto;
}
}
/* styling for when 3 articles present */
.main-content .mdc-card:first-of-type:nth-last-of-type(3) {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(3):last-of-type {
float: right;
clear: right;
}
.main-content .mdc-card:nth-of-type(2):nth-last-of-type(2) {
float: left;
clear: left;
}