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

Continue redesigning site

Browse Source
This commit is contained in:
Matthew Grove
2020-03-02 22:38:03 +00:00
parent 64cd4f03d4
commit 8d6382d3a6
72 changed files with 1154 additions and 4979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
css/global.css
View File

@@ -1,7 +1,12 @@
/* change theme */
:root {
--mdc-theme-primary: #273967;
--mdc-theme-secondary: #ef6c00;
--mdc-theme-primary: #253a67;
--mdc-theme-secondary: #ea6343;
--mdc-theme-background: #181a1b;
}
.mdc-top-app-bar--short-fixed-adjust {
padding-top: 41px;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
@@ -12,6 +17,24 @@ body {
font-family: 'Roboto', sans-serif;
display: flex;
margin: 0;
background-color: var(--mdc-theme-primary);
color: #ffffff;
}
.mdc-drawer {
background-color: var(--mdc-theme-background);
}
.mdc-drawer *, .mdc-drawer .material-icons, .mdc-drawer h3 {
color: #ddd;
}
.mdc-drawer .mdc-list-group__subheader {
color: #ccc;
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label, .mdc-list-item--activated .mdc-list-item__text, .mdc-drawer .mdc-list-item--activated .mdc-list-item__graphic {
color: var(--mdc-theme-secondary);
}
:not(.mdc-list--non-interactive)>:not(.mdc-list-item--disabled).mdc-list-item--activated::before, :not(.mdc-list--non-interactive)>:not(.mdc-list-item--disabled).mdc-list-item--activated::after {
background-color: var(--mdc-theme-secondary);
}
a {
@@ -33,7 +56,7 @@ a {
}
.main-content {
margin: 15px;
margin: 15px 0;
overflow: auto;
}
@@ -41,11 +64,49 @@ a {
position: absolute;
}
.footer-container {
background: var(--mdc-theme-background);
padding: 5px 0;
}
footer {
margin: 15px;
overflow: auto;
}
/* change button colours */
.mdc-button:not(:disabled) {
color: var(--mdc-theme-secondary);
border-color: var(--mdc-theme-secondary);
}
.mdc-button::before, .mdc-button::after {
background-color: var(--mdc-theme-secondary);
}
/* parallax backgrounds */
.parallax-section {
position: relative;
z-index: 0;
display: flow-root;
}
/* responsive side margins */
.article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 {
padding-left: 15%;
padding-right: 15%;
}
@media screen and (max-width: 1000px) {
.article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 {
padding-left: 8%;
padding-right: 8%;
}
}
@media screen and (max-width: 800px) {
.article-section .articles, .article-section-header, .footer-container, .article-content, .footer-container, .article-title-section ~ .mdc-typography--caption-text, .article-title-section, .mdc-typography--subtitle1, .mdc-typography--headline3 {
padding-left: 2%;
padding-right: 2%;
}
}
/* edit footer depending on screen size - edits alignment & changes switches between center- and left- aligned BBC Young Reporter logos */
footer span {
position: relative;
@@ -76,24 +137,6 @@ footer img {
}
}
/* add side margins */
.main-content, footer {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content, footer {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content, footer {
margin-left: 2%;
margin-right: 2%;
}
}
/* for cookie notice */
#cookies {
display: none;