mirror of
https://github.com/mgrove36/bbc-young-reporter.git
synced 2026-03-03 19:37:05 +00:00
Add template for articles with sound files
This commit is contained in:
@@ -1,65 +0,0 @@
|
||||
/* 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: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
/* hide empty black bar if there is no content to the article */
|
||||
.article-content:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* position headline in middle of image */
|
||||
.parallax-section {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
padding: 150px 15px;
|
||||
}
|
||||
|
||||
/* adjust video dimensions depending on screen size */
|
||||
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: 800px) {
|
||||
iframe {
|
||||
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) {
|
||||
iframe {
|
||||
height: calc(93.5vw / 16 * 9);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user