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

Update branding & home page

Browse Source 
Add BBC Young Reporter branding & update positioning of articles on home 
page
This commit is contained in:
Matthew Grove
2019-03-04 21:25:35 +00:00
parent 620aadcc6e
commit 3b67b7a5d7
34 changed files with 1897 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
css/mdc-card-list.css
View File

@@ -1,6 +1,8 @@
/* make article cards look nice by altering margins */
.mdc-card {
margin: 2px 2px 10px 2px;
}
.mdc-card-content {
margin: 5px 15px 5px 15px;
}
@@ -9,26 +11,72 @@
margin: 0;
}
/* automatically display articles on either side of the page, alternating */
.main-content .mdc-card {
float:left;
clear:left;
float: left;
clear: left;
width: 49%;
}
.main-content .mdc-card:nth-of-type(even){
float:right;
clear:right;
.main-content .mdc-card:nth-of-type(even) {
float: right;
clear: right;
}
.main-content .mdc-card:nth-child(1), .main-content .mdc-card:nth-child(3) {
float: none;
clear: none;
width: auto;
/* make first article full-width */
.main-content .mdc-card:first-of-type {
float: none;
clear: both;
width: auto;
}
.main-content .mdc-card:nth-of-type(odd) ~ .mdc-card:last-of-type {
/* 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;
}
/* for scroll-to-top button */
.top-scroll-button {
width: 50px;
height: 50px;
@@ -50,7 +98,7 @@
.top-scroll-button img {
position: relative;
top: 9.5px;
top: 7px;
width: 35px;
height: auto;
-webkit-transition-duration: 0.25s;
@@ -64,5 +112,5 @@
}
.top-scroll-button:hover img {
top: 0;
top: 3px;
}