mirror of
https://github.com/wassname/template.git
synced 2026-09-11 12:51:52 +08:00
New design
This commit is contained in:
Shan Carter
@@ -1,226 +0,0 @@
|
||||
d-article {
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
padding-top: 0;
|
||||
padding-bottom: 72px;
|
||||
overflow: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 1.6em;
|
||||
/*border-top: 1px solid rgba(0, 0, 0, 0.2);*/
|
||||
}
|
||||
@media(min-width: 768px) {
|
||||
d-article {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article h1 {
|
||||
grid-column: left / page;
|
||||
padding-top: 16px;
|
||||
padding-bottom: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 18px;
|
||||
line-height: 1.15;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
d-article h1+h2 {
|
||||
grid-column: left / page;
|
||||
border-bottom: none !important;
|
||||
font-size: 26px !important;
|
||||
font-weight: 300 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
line-height: 1.6em !important;
|
||||
margin-top: -2px !important;
|
||||
margin-bottom: 36px !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px), print {
|
||||
d-article h1 {
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
d-article h1 {
|
||||
padding-top: 64px;
|
||||
font-size: 42px;
|
||||
}
|
||||
}
|
||||
@media(min-width: 1280px) {
|
||||
d-article h1 {
|
||||
padding-top: 96px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H2 */
|
||||
|
||||
d-article h2 {
|
||||
font-weight: 400;
|
||||
font-size: 26px;
|
||||
line-height: 1.25em;
|
||||
padding-top: 36px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 18px;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
d-article h2 {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H3 */
|
||||
|
||||
d-article h3 {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 24px;
|
||||
margin-top: 0;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
d-article h3 {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* H4 */
|
||||
|
||||
d-article h4 {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
d-article a {
|
||||
color: inherit;
|
||||
}
|
||||
d-article p,
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
margin-top: 0;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
d-article a {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.4);
|
||||
text-decoration: none;
|
||||
}
|
||||
d-article a:hover {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
d-article .link {
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
padding-left: 24px;
|
||||
}
|
||||
d-article li {
|
||||
margin-bottom: 24px;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
d-article pre {
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
d-article hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
d-article section {
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
/* Figure */
|
||||
|
||||
d-article figure {
|
||||
position: relative;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
d-article h1 + figure {
|
||||
margin-top: 12px;
|
||||
}
|
||||
d-article figure img {
|
||||
width: 100%;
|
||||
}
|
||||
d-article figure svg text,
|
||||
d-article figure svg tspan {
|
||||
}
|
||||
d-article figure figcaption {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
font-size: 12px;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
@media(min-width: 1024px) {
|
||||
d-article figure figcaption {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
d-article figure.external img {
|
||||
background: white;
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 18px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
d-article figure figcaption a {
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
/*d-article figure figcaption::before {
|
||||
position: relative;
|
||||
display: block;
|
||||
top: -20px;
|
||||
content: "";
|
||||
width: 25px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}*/
|
||||
d-article span.equation-mimic {
|
||||
font-family: georgia;
|
||||
font-size: 115%;
|
||||
font-style: italic;
|
||||
}
|
||||
d-article figure figcaption b {
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 1.0);
|
||||
}
|
||||
d-article > d-code,
|
||||
d-article section > d-code {
|
||||
display: block;
|
||||
}
|
||||
d-article > d-math[block],
|
||||
d-article section > d-math[block] {
|
||||
display: block;
|
||||
}
|
||||
d-article .citation {
|
||||
color: #668;
|
||||
cursor: pointer;
|
||||
}
|
||||
d-include {
|
||||
width: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
d-figure {
|
||||
contain: content;
|
||||
overflow: hidden;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* KaTeX */
|
||||
|
||||
.katex, .katex-prerendered {
|
||||
contain: content;
|
||||
display: inline-block;
|
||||
}
|
||||
@@ -44,3 +44,10 @@ pre {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.kicker,
|
||||
.marker {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
@@ -1,20 +1,25 @@
|
||||
@supports not (display: grid) {
|
||||
d-headline,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
distill-footer {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
d-headline,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
distill-footer {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
grid-template-columns: [start] 8px [left-outset] 8px [left] 1fr [text] 0px [page] 8px [text-outset] 0px [page-outset] 8px [end];
|
||||
}
|
||||
/*
|
||||
@media(min-width: 768px) {
|
||||
@@ -26,39 +31,69 @@ 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-headline,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
d-byline,
|
||||
d-footnote-list,
|
||||
distill-footer {
|
||||
grid-template-columns: [start] 1fr [left-outset] 32px [left] 672px [text] 32px [text-outset] 224px [page] 32px [page-outset] 1fr [end];
|
||||
grid-template-columns: [screen-start] 0 [page-start] 1fr [text-start] 1fr 1fr 1fr 1fr [text-end] 1fr [page-end] 0 [screen-end];
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
} */
|
||||
|
||||
@media(min-width: 1060px) {
|
||||
d-headline,
|
||||
d-abstract,
|
||||
d-article,
|
||||
d-appendix,
|
||||
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-column-gap: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
d-article,
|
||||
d-appendix,
|
||||
d-article > d-byline,
|
||||
d-article > distill-footer {
|
||||
grid-column: start / end;
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
.l-body,
|
||||
d-article > * {
|
||||
grid-column: left / text;
|
||||
.col-3 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
.col-2 {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 30px;
|
||||
}
|
||||
|
||||
|
||||
/* .l-body,
|
||||
d-article > * {
|
||||
grid-column: text;
|
||||
}
|
||||
|
||||
.l-page,
|
||||
d-headline > *,
|
||||
d-figure {
|
||||
grid-column: left / page;
|
||||
}
|
||||
grid-column: page;
|
||||
} */
|
||||
|
||||
.l-body-outset {
|
||||
grid-column: left-outset / text-outset;
|
||||
grid-column: left-outset / right-outset;
|
||||
}
|
||||
|
||||
.l-page-outset {
|
||||
grid-column: left-outset / page-outset;
|
||||
grid-column: left-outset / right-outset;
|
||||
}
|
||||
|
||||
.l-screen {
|
||||
@@ -74,13 +109,13 @@ d-figure {
|
||||
|
||||
/* Aside */
|
||||
|
||||
aside {
|
||||
grid-column: left / text;
|
||||
d-article aside {
|
||||
grid-column: gutter;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
aside {
|
||||
grid-column: text-outset / page;
|
||||
grid-column: right-outset / right-page;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
@@ -91,22 +126,3 @@ aside {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Rows and Columns */
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
.column {
|
||||
flex: 1;
|
||||
box-sizing: border-box;
|
||||
margin-right: 24px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
.row > .column:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
.row > .column:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import base from './styles-base.css';
|
||||
import layout from './styles-layout.css';
|
||||
import article from './styles-article.css';
|
||||
import print from './styles-print.css';
|
||||
import { style as byline } from '../components/d-byline';
|
||||
import { style as article } from '../components/d-article';
|
||||
import math from './d-math.css';
|
||||
|
||||
export const styles = base + layout + byline + math + article + print;
|
||||
export const styles = base + layout + byline + article + math + print;
|
||||
|
||||
export function makeStyleTag(dom) {
|
||||
|
||||
|
||||
Reference in New Issue
Block a user