mirror of
https://github.com/mgrove36/bbc-young-reporter.git
synced 2026-03-03 03:17:07 +00:00
116 lines
2.5 KiB
CSS
116 lines
2.5 KiB
CSS
/* make text look nice */
|
|
.mdc-typography--headline3, .mdc-typography--subtitle1 {
|
|
text-transform: capitalize;
|
|
}
|
|
.mdc-typography--headline3, .mdc-typography--subtitle1, figure {
|
|
margin: 5px;
|
|
}
|
|
.mdc-typography--caption-text {
|
|
font-style: italic;
|
|
margin: 5px;
|
|
}
|
|
.mdc-typography--headline5 {
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* change background */
|
|
.article-content {
|
|
background-color: var(--mdc-theme-background);
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
/* hide empty black bar if there is no content to the page */
|
|
.article-content:empty {
|
|
display: none;
|
|
}
|
|
|
|
/* position headline in middle of image */
|
|
.parallax-section {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
padding: 200px 15px;
|
|
}
|
|
|
|
/* audio */
|
|
.article-content audio {
|
|
width: 100%;
|
|
}
|
|
|
|
/* video/podcast */
|
|
iframe {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* adjust video dimensions depending on screen size */
|
|
.video {
|
|
height: calc(68.8vw / 16 * 9);
|
|
}
|
|
@media screen and (max-width: 1550px) {
|
|
.video {
|
|
width: 100%;
|
|
height: calc(70vw / 16 * 9 - 6px);
|
|
}
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
.video {
|
|
height: calc(90vw / 16 * 9 - 5px);
|
|
}
|
|
.mdc-typography--headline3, .mdc-typography--headline5 {
|
|
font-size: 2.5rem;
|
|
line-height: 2.625rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
.mdc-typography--headline3, .mdc-typography--headline5 {
|
|
font-size: 2rem;
|
|
line-height: 2.125rem;
|
|
}
|
|
}
|
|
@media screen and (max-width: 600px) {
|
|
.video {
|
|
height: calc(93.5vw / 16 * 9);
|
|
}
|
|
}
|
|
|
|
/* scroll-to-top button */
|
|
.top-scroll-button {
|
|
width: 50px;
|
|
height: 50px;
|
|
-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-image-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.top-scroll-button img {
|
|
width: 35px;
|
|
height: auto;
|
|
position: relative;
|
|
bottom: 2px;
|
|
-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 {
|
|
bottom: 5px;
|
|
} |