me/bbc-young-reporter
1
0
Fork 0
mirror of https://github.com/mgrove36/bbc-young-reporter.git synced 2026-03-03 03:17:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refine design

Browse Source
This commit is contained in:
Matthew Grove
2020-03-03 16:57:37 +00:00
parent c4b1e309c4
commit f9e1f61d06
8 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
_site/css/article-list.css
View File

@@ -5,13 +5,17 @@
margin: 6px; margin: 6px;
display: inline; display: inline;
} }
.article-section-header, .year-header { .article-section-header, .year-header {
background-color: rgba(50,50,50,0.9); background-color: rgba(0,0,0,0.6);
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
} }
/* main list of articles */
.articles {
padding-top: 12px;
padding-bottom: 12px;
}
/* make cards display next to each other with correct dimensions and adjust styling */ /* make cards display next to each other with correct dimensions and adjust styling */
.main-content .mdc-card { .main-content .mdc-card {
@@ -23,16 +27,13 @@
cursor: pointer; cursor: pointer;
} }
/* style cards */ /* style cards */
.mdc-card-content { .mdc-card-content {
margin: 5px 15px 5px 15px; margin: 5px 15px 5px 15px;
} }
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 { .mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0; margin: 0;
} }
.mdc-card .mdc-typography--headline6 { .mdc-card .mdc-typography--headline6 {
text-transform: capitalize; text-transform: capitalize;
} }

6
_site/css/global.css
View File

@@ -84,12 +84,11 @@ footer {
z-index: 0; z-index: 0;
display: flow-root; display: flow-root;
} }
.parallax-section #jarallax-container-0 div, .parallax-section #jarallax-container-1 div { .parallax-section > div:last-child > div {
background-color: rgba(0,0,0,0.45); background-color: rgba(50,50,50,0.9);
background-blend-mode: multiply; background-blend-mode: multiply;
} }
/* splitter for between sections */ /* splitter for between sections */
.splitter { .splitter {
height: 15px; height: 15px;
@@ -97,7 +96,6 @@ footer {
background-color: var(--mdc-theme-primary); background-color: var(--mdc-theme-primary);
} }
/* responsive side margins */ /* 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 { .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-left: 15%;

9
_site/css/home.css
View File

@@ -1,9 +1,16 @@
/* centre contents vertically */
.article-section-header {
min-height: 100px;
display: flex;
align-items: center;
}
/* place button on right */ /* place button on right */
.article-section-header button { .article-section-header button {
display: inline; display: inline;
padding: 5px 14px; padding: 5px 14px;
position: relative; position: relative;
float: right; margin-left: auto;
top: 3.5px; top: 3.5px;
} }

2
_site/css/year.css
View File

@@ -7,6 +7,4 @@
/* list of articles */ /* list of articles */
.articles { .articles {
background-color: var(--mdc-theme-background); background-color: var(--mdc-theme-background);
padding-top: 12px;
padding-bottom: 12px;
} }

11
css/article-list.css
View File

@@ -5,13 +5,17 @@
margin: 6px; margin: 6px;
display: inline; display: inline;
} }
.article-section-header, .year-header { .article-section-header, .year-header {
background-color: rgba(50,50,50,0.9); background-color: rgba(0,0,0,0.6);
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
} }
/* main list of articles */
.articles {
padding-top: 12px;
padding-bottom: 12px;
}
/* make cards display next to each other with correct dimensions and adjust styling */ /* make cards display next to each other with correct dimensions and adjust styling */
.main-content .mdc-card { .main-content .mdc-card {
@@ -23,16 +27,13 @@
cursor: pointer; cursor: pointer;
} }
/* style cards */ /* style cards */
.mdc-card-content { .mdc-card-content {
margin: 5px 15px 5px 15px; margin: 5px 15px 5px 15px;
} }
.mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 { .mdc-card .mdc-typography--headline6, .mdc-card .mdc-typography--subtitle2 {
margin: 0; margin: 0;
} }
.mdc-card .mdc-typography--headline6 { .mdc-card .mdc-typography--headline6 {
text-transform: capitalize; text-transform: capitalize;
} }

6
css/global.css
View File

@@ -84,12 +84,11 @@ footer {
z-index: 0; z-index: 0;
display: flow-root; display: flow-root;
} }
.parallax-section #jarallax-container-0 div, .parallax-section #jarallax-container-1 div { .parallax-section > div:last-child > div {
background-color: rgba(0,0,0,0.45); background-color: rgba(50,50,50,0.9);
background-blend-mode: multiply; background-blend-mode: multiply;
} }
/* splitter for between sections */ /* splitter for between sections */
.splitter { .splitter {
height: 15px; height: 15px;
@@ -97,7 +96,6 @@ footer {
background-color: var(--mdc-theme-primary); background-color: var(--mdc-theme-primary);
} }
/* responsive side margins */ /* 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 { .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-left: 15%;

9
css/home.css
View File

@@ -1,9 +1,16 @@
/* centre contents vertically */
.article-section-header {
min-height: 100px;
display: flex;
align-items: center;
}
/* place button on right */ /* place button on right */
.article-section-header button { .article-section-header button {
display: inline; display: inline;
padding: 5px 14px; padding: 5px 14px;
position: relative; position: relative;
float: right; margin-left: auto;
top: 3.5px; top: 3.5px;
} }

2
css/year.css
View File

@@ -7,6 +7,4 @@
/* list of articles */ /* list of articles */
.articles { .articles {
background-color: var(--mdc-theme-background); background-color: var(--mdc-theme-background);
padding-top: 12px;
padding-bottom: 12px;
} }