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

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

24
css/article-page.css
View File

@@ -7,3 +7,27 @@
.mdc-typography--caption-text {
font-style: italic;
}
iframe {
width: 100%;
height: calc(68.8vw / 16 * 9);
}
@media screen and (max-width: 1550px) {
iframe {
width: 100%;
height: calc(70vw / 16 * 9 - 6px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(90vw / 16 * 9 - 5px);
}
}
@media screen and (max-width: 600px) {
iframe {
height: calc(93.5vw / 16 * 9);
}
}

37
css/global.css
View File

@@ -39,21 +39,52 @@ a {
footer {
margin: 15px;
overflow: auto;
}
/* edit footer depending on screen size - edits alignment & changes switches between center- and left- aligned BBC Young Reporter logos */
footer span {
position: relative;
top: 19px;
}
footer img {
display: block;
width: 125px;
float: right;
content: url("/images/young-reporter-logo.png");
vertical-align: middle;
}
@media screen and (max-width: 800px) {
footer {
text-align: center;
}
footer img {
float: none;
margin: auto;
content: url("/images/young-reporter-logo-centered.png");
width: 200px;
padding-bottom: 10px;
}
footer span {
top: 0;
}
}
/* add side margins */
.main-content {
.main-content, footer {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content {
.main-content, footer {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content {
.main-content, footer {
margin-left: 2%;
margin-right: 2%;
}

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;
}