mirror of
https://github.com/wassname/template.git
synced 2026-07-17 11:33:44 +08:00
Tweaking mobile styles
This commit is contained in:
Shan Carter
@@ -2,9 +2,11 @@
|
||||
|
||||
<head>
|
||||
<script src="../dist/template.v2.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<distill-header></distill-header>
|
||||
<d-front-matter>
|
||||
<script id='distill-front-matter' type="text/json">{
|
||||
"title": "Why Momentum Really Works",
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { Template } from '../mixins/template';
|
||||
import { Controller } from '../controller';
|
||||
import style from '../styles/d-article.css';
|
||||
|
||||
const isOnlyWhitespace = /^\s*$/;
|
||||
|
||||
|
||||
@@ -1,50 +1,3 @@
|
||||
import { Template } from '../mixins/template';
|
||||
|
||||
const T = Template('d-title', `
|
||||
<style>
|
||||
|
||||
:host {
|
||||
padding: 4rem 0 1.5rem;
|
||||
contain: content;
|
||||
display: block;
|
||||
}
|
||||
|
||||
::slotted(h1) {
|
||||
grid-column: text;
|
||||
font-size: 60px;
|
||||
font-weight: 700;
|
||||
line-height: 1.05em;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
font-weight: 300;
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2em;
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-top: 0px;
|
||||
font-size: 12px;
|
||||
color: #009688;
|
||||
opacity: 0.8;
|
||||
grid-column: kicker;
|
||||
}
|
||||
.status span {
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #80cbc4;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- <div class="status"><span>✓ Peer Reviewed</span></div> -->
|
||||
<slot></slot>
|
||||
`);
|
||||
|
||||
export class Title extends T(HTMLElement) {
|
||||
|
||||
export class Title extends HTMLElement {
|
||||
static get is() { return 'd-title'; }
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ const T = Template('distill-footer', `
|
||||
:host {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-weight: 300;
|
||||
padding: 60px 0;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
background-color: hsl(180, 5%, 15%); /*hsl(200, 60%, 15%);*/
|
||||
text-align: left;
|
||||
|
||||
@@ -3,6 +3,7 @@ d-article {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding-top: 2rem;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
d-article > * {
|
||||
@@ -168,11 +169,14 @@ d-article span.equation-mimic {
|
||||
d-article > d-code,
|
||||
d-article section > d-code {
|
||||
display: block;
|
||||
overflow-x: scroll;
|
||||
|
||||
}
|
||||
|
||||
d-article > d-math[block],
|
||||
d-article section > d-math[block] {
|
||||
display: block;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
d-article .citation {
|
||||
|
||||
+17
-3
@@ -7,14 +7,28 @@ d-byline {
|
||||
min-height: 1.8em;
|
||||
}
|
||||
|
||||
|
||||
d-byline .byline {
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
d-byline .authors-affiliations {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@media(min-width: 768px) {
|
||||
d-byline .byline {
|
||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
d-byline .authors-affiliations {
|
||||
grid-column-end: span 2;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-byline .authors-affiliations {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
d-byline h3 {
|
||||
|
||||
@@ -0,0 +1,55 @@
|
||||
d-title {
|
||||
padding: 2rem 0 1.5rem;
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-title {
|
||||
padding: 4rem 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
d-title h1 {
|
||||
grid-column: text;
|
||||
font-size: 40px;
|
||||
font-weight: 700;
|
||||
line-height: 1.05em;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-title h1 {
|
||||
font-size: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
d-title p {
|
||||
font-weight: 300;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.7em;
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
d-title p {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
d-title .status {
|
||||
margin-top: 0px;
|
||||
font-size: 12px;
|
||||
color: #009688;
|
||||
opacity: 0.8;
|
||||
grid-column: kicker;
|
||||
}
|
||||
|
||||
d-title .status span {
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid #80cbc4;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
html {
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6em;
|
||||
/* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
|
||||
@@ -9,6 +9,10 @@ html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -3,9 +3,10 @@ import layout from './styles-layout.css';
|
||||
import print from './styles-print.css';
|
||||
import byline from './d-byline.css';
|
||||
import article from './d-article.css';
|
||||
import title from './d-title.css';
|
||||
import math from './d-math.css';
|
||||
|
||||
export const styles = base + layout + byline + article + math + print;
|
||||
export const styles = base + layout + title + byline + article + math + print;
|
||||
|
||||
export function makeStyleTag(dom) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user