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

Make CSS more efficient

Browse Source 
Add side margins in global.css rather than two separate files
This commit is contained in:
Matthew Grove
2018-11-24 15:40:12 +00:00
parent de632e9145
commit 0c49ba651b
4 changed files with 19 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/article-page.css
View File

@@ -4,20 +4,3 @@
.mdc-typography--headline2, .mdc-typography--subtitle1, figure { .mdc-typography--headline2, .mdc-typography--subtitle1, figure {
margin: 5px; margin: 5px;
} }
.main-content {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 800px) {
.main-content {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 600px) {
.main-content {
margin-left: 2%;
margin-right: 2%;
}
}

18
assets/global.css
View File

@@ -36,7 +36,25 @@ footer {
margin: 15px; margin: 15px;
} }
/* add side margins */
.main-content {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content {
margin-left: 2%;
margin-right: 2%;
}
}
/* for cookie notice */
#cookies { #cookies {
display: none; display: none;
width: 100%; width: 100%;

17
assets/mdc-card-list.css
View File

@@ -9,23 +9,6 @@
margin: 0; margin: 0;
} }
.main-content {
margin-left: 15%;
margin-right: 15%;
}
@media screen and (max-width: 600px) {
.main-content {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 500px) {
.main-content {
margin-left: 2%;
margin-right: 2%;
}
}
.main-content .mdc-card { .main-content .mdc-card {
float:left; float:left;
clear:left; clear:left;

2
authors/name/index.html
View File

@@ -66,7 +66,7 @@
<main class="main-content" id="main-content"> <main class="main-content" id="main-content">
<div class="mdc-top-app-bar--short-fixed-adjust"> <div class="mdc-top-app-bar--short-fixed-adjust">
<div class="mdc-card"> <div class="mdc-card">
<div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg/images/article_name--cover.jpg');"></div> <div class="mdc-card__media mdc-card__media--16-9" style="background-image:url('/images/article_name--cover.jpg');"></div>
<div class="mdc-card-content"> <div class="mdc-card-content">
<h2 class="mdc-typography--headline6">Title</h2> <h2 class="mdc-typography--headline6">Title</h2>
<h3 class="mdc-typography--subtitle2"> <h3 class="mdc-typography--subtitle2">