mirror of
https://github.com/mgrove36/bbc-young-reporter.git
synced 2026-03-03 11:27:06 +00:00
117 lines
2.4 KiB
CSS
117 lines
2.4 KiB
CSS
/* make article cards look nice by altering margins */
|
|
.mdc-card {
|
|
margin: 2px 2px 10px 2px;
|
|
}
|
|
|
|
.mdc-card-content {
|
|
margin: 5px 15px 5px 15px;
|
|
}
|
|
|
|
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
|
|
margin: 0;
|
|
}
|
|
|
|
|
|
/* automatically display articles on either side of the page, alternating */
|
|
.main-content .mdc-card {
|
|
float: left;
|
|
clear: left;
|
|
width: 49%;
|
|
}
|
|
|
|
.main-content .mdc-card:nth-of-type(even) {
|
|
float: right;
|
|
clear: right;
|
|
}
|
|
|
|
|
|
/* 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;
|
|
}
|
|
|
|
/* for scroll-to-top button */
|
|
.top-scroll-button {
|
|
width: 50px;
|
|
height: 50px;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
-webkit-border-radius: 50%;
|
|
-moz-border-radius: 50%;
|
|
border-radius: 50%;
|
|
position: fixed;
|
|
right: 20px;
|
|
bottom: 20px;
|
|
background-color: #273967;
|
|
display: none;
|
|
-webkit-transition-duration: 0.25s;
|
|
-moz-transition-duration: 0.25s;
|
|
-o-transition-duration: 0.25s;
|
|
transition-duration: 0.25s;
|
|
}
|
|
|
|
.top-scroll-button img {
|
|
position: relative;
|
|
top: 7px;
|
|
width: 35px;
|
|
height: auto;
|
|
-webkit-transition-duration: 0.25s;
|
|
-moz-transition-duration: 0.25s;
|
|
-o-transition-duration: 0.25s;
|
|
transition-duration: 0.25s;
|
|
}
|
|
|
|
.top-scroll-button:hover, .top-scroll-button:focus {
|
|
background-color: #1C2E56;
|
|
}
|
|
|
|
.top-scroll-button:hover img {
|
|
top: 3px;
|
|
}
|