wassname/template
1
0
Fork 0
mirror of https://github.com/wassname/template.git synced 2026-07-04 18:50:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Some responsive positions

Browse Source
This commit is contained in:
Shan Carter
2017-10-05 18:02:40 -07:00
parent c011e67c96
commit de4514bcf3
6 changed files with 29 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/article.html
+1
View File
@@ -2,6 +2,7 @@
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="../dist/template.v2.js"></script>
</head>
src/components/d-abstract.js
+2 -2
View File
@@ -7,7 +7,7 @@ const T = Template('d-abstract', `
display: block;
font-size: 1.2rem;
line-height: 1.8em;
margin-bottom: 1.5em;
padding-bottom: 1.5em;
color: rgba(0, 0, 0, 0.8);
font-weight: 300;
font-family: "Merriweather", georgia, serif;
@@ -16,7 +16,7 @@ const T = Template('d-abstract', `
::slotted(p) {
margin-top: 0;
margin-bottom: 0;
grid-column: text-start / span 9;
grid-column: text-start / middle-end;
}
${body('d-abstract')}
</style>
src/components/d-article.js
+1 -1
View File
@@ -55,7 +55,7 @@ d-article .marker:hover span {
}
d-article h2 {
grid-column-end: span 10;
grid-column-end: page-end;
font-weight: 700;
font-size: 24px;
line-height: 1.25em;
src/components/d-byline.js
+2 -2
View File
@@ -8,8 +8,8 @@ d-byline {
}
d-byline .byline {
grid-template-columns: repeat(5, 1fr);
grid-column: text-start / page-end;
grid-template-columns: repeat(4, 1fr);
grid-column: text;
}
d-byline h3 {
src/components/d-title.js
+3 -3
View File
@@ -3,7 +3,7 @@ import { Template } from '../mixins/template';
const T = Template('d-title', `
<style>
:host {
margin-top: 64px;
padding-top: 64px;
contain: content;
display: block;
}
@@ -15,11 +15,11 @@ const T = Template('d-title', `
margin: 0 0 10px;
}
.status {
margin-top: 15px;
font-size: 12px;
color: #009688;
opacity: 0.7;
opacity: 0.8;
grid-column: kicker;
margin-top: 19px;
}
.status span {
line-height: 1;
src/styles/styles-layout.css
+20 -15
View File
@@ -20,18 +20,11 @@ d-footnote-list,
distill-footer {
display: grid;
justify-items: stretch;
grid-template-columns: [screen-start] 0.5fr [page-start kicker-start text-start gutter-start middle-start] 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr [text-end page-end gutter-end kicker-end middle-end] 0.5fr [screen-end];
grid-column-gap: 30px;
}
/*
@media(min-width: 768px) {
d-article,
d-appendix,
d-byline,
distill-footer {
grid-template-columns: [start] 32px [left-outset] 32px [left] 3fr [text] 32px [text-outset] 1fr [page] 32px [page-outset] 32px [end];
}
}*/
/* @media(min-width: 768px) {
@media(min-width: 768px) {
d-title,
d-abstract,
d-article,
@@ -39,12 +32,12 @@ distill-footer {
d-byline,
d-footnote-list,
distill-footer {
grid-template-columns: [screen-start] 0 [page-start] 1fr [text-start] 1fr 1fr 1fr 1fr [text-end] 1fr [page-end] 0 [screen-end];
grid-template-columns: [screen-start] 1fr [page-start kicker-start middle-start text-start] 45px 45px 45px 45px 45px 45px 45px 45px [ kicker-end text-end gutter-start] 45px [middle-end] 45px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 30px;
}
} */
}
@media(min-width: 1060px) {
@media(min-width: 1000px) {
d-title,
d-abstract,
d-article,
@@ -52,8 +45,20 @@ distill-footer {
d-byline,
d-footnote-list,
distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px 50px [page-end gutter-end] 1fr [screen-end];
/* grid-template-columns: [screen-start] 1fr [page-start] 130px [text-start] 130px 130px 130px 130px [text-end] 130px [page-end] 1fr [screen-end]; */
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 50px [middle-start] 50px [text-start kicker-end] 50px 50px 50px 50px 50px 50px 50px 50px [text-end gutter-start] 50px [middle-end] 50px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 30px;
}
}
@media(min-width: 1200px) {
d-title,
d-abstract,
d-article,
d-appendix,
d-byline,
d-footnote-list,
distill-footer {
grid-template-columns: [screen-start] 1fr [page-start kicker-start] 60px [middle-start] 60px [text-start kicker-end] 60px 60px 60px 60px 60px 60px 60px 60px [text-end gutter-start] 60px [middle-end] 60px [page-end gutter-end] 1fr [screen-end];
grid-column-gap: 30px;
}
}