mirror of
https://github.com/wassname/template.git
synced 2026-09-11 12:51:52 +08:00
Design changes
This commit is contained in:
Ludwig Schubert
@@ -1,12 +1,17 @@
|
||||
|
||||
d-article {
|
||||
display: block;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
padding-top: 36px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 72px;
|
||||
overflow: hidden;
|
||||
font-size: 16px;
|
||||
font-size: 14px;
|
||||
line-height: 1.6em;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.2);
|
||||
/*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 {
|
||||
@@ -17,10 +22,10 @@ d-article {
|
||||
/* H2 */
|
||||
|
||||
d-article h2 {
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
font-size: 26px;
|
||||
line-height: 1.25em;
|
||||
margin-top: 36px;
|
||||
margin-top: 16px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
@@ -51,7 +56,7 @@ d-article h1 + h2 {
|
||||
/* H3 */
|
||||
|
||||
d-article h3 {
|
||||
font-weight: 400;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
line-height: 1.4em;
|
||||
margin-top: 36px;
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
html {
|
||||
font-size: 20px;
|
||||
line-height: 1rem;
|
||||
/*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif;*/
|
||||
font-family: "Libre Franklin", "Helvetica Neue", sans-serif;
|
||||
text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
/*background-color: hsl(223, 9%, 25%);*/
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -33,53 +31,16 @@ table th {
|
||||
table thead {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
table thead th {
|
||||
padding-bottom: 0.5em;
|
||||
}
|
||||
|
||||
table tbody :first-child td {
|
||||
padding-top: 0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
pre {
|
||||
overflow: auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}*/
|
||||
|
||||
+168
-77
@@ -1,22 +1,97 @@
|
||||
/*
|
||||
Column: 60px
|
||||
Gutter: 24px
|
||||
@supports not (display: grid) {
|
||||
d-article,
|
||||
d-title,
|
||||
d-byline,
|
||||
d-appendix,
|
||||
distill-footer {
|
||||
display: block;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
Body: 648px
|
||||
- 8 columns
|
||||
- 7 gutters
|
||||
Middle: 816px
|
||||
Page: 984px
|
||||
- 12 columns
|
||||
- 11 gutters
|
||||
*/
|
||||
d-article,
|
||||
d-title,
|
||||
d-byline,
|
||||
d-appendix,
|
||||
distill-footer {
|
||||
display: grid;
|
||||
justify-items: stretch;
|
||||
grid-template-columns: [start] 8px [margin-left-outset] 8px [margin-left] 1fr [body] 0px [page] 8px [body-outset] 0px [page-outset] 8px [end];
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
|
||||
d-article,
|
||||
d-title,
|
||||
d-byline,
|
||||
d-appendix,
|
||||
distill-footer {
|
||||
grid-template-columns: [start] 32px [margin-left-outset] 32px [margin-left] 3fr [body] 32px [body-outset] 1fr [page] 32px [page-outset] 32px [end];
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article,
|
||||
d-title,
|
||||
d-byline,
|
||||
d-appendix,
|
||||
distill-footer {
|
||||
grid-template-columns: [start] 1fr [margin-left-outset] 32px [margin-left] 672px [body] 32px [body-outset] 224px [page] 32px [page-outset] 1fr [end];
|
||||
}
|
||||
}
|
||||
|
||||
d-appendix,
|
||||
d-article > d-title,
|
||||
d-article > d-title > d-byline,
|
||||
d-article > distill-footer {
|
||||
grid-column: start / end;
|
||||
}
|
||||
|
||||
.l-body,
|
||||
.l-body-outset,
|
||||
d-article > * {
|
||||
grid-column: margin-left / body;
|
||||
}
|
||||
|
||||
.l-page {
|
||||
grid-column: margin-left / page;
|
||||
}
|
||||
|
||||
.l-body-outset {
|
||||
grid-column: margin-left-outset / body-outset;
|
||||
}
|
||||
|
||||
.l-page-outset {
|
||||
grid-column: margin-left-outset / page-outset;
|
||||
}
|
||||
|
||||
.l-screen {
|
||||
grid-column: start / end;
|
||||
}
|
||||
|
||||
.l-screen-inset {
|
||||
grid-column: start / end;
|
||||
padding-left: 16px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
|
||||
/* Aside */
|
||||
|
||||
aside {
|
||||
grid-column: margin-left / body;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
aside {
|
||||
grid-column: body-outset / page;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
/*
|
||||
.l-body,
|
||||
.l-page,
|
||||
.l-page-outset,
|
||||
.l-middle,
|
||||
.l-middle-outset,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
d-article > h1,
|
||||
@@ -40,20 +115,32 @@ d-article section > ul,
|
||||
d-article section > d-abstract,
|
||||
d-article section > d-code,
|
||||
d-article section > d-math,
|
||||
d-article section > table, {
|
||||
width: auto;
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
d-article section > table {
|
||||
width: calc(100% - 32px);
|
||||
margin-left: 16px;
|
||||
margin-right: 16px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.l-body-outset,
|
||||
.l-page-outset,
|
||||
.l-middle-outset {
|
||||
width: calc(100% - 16px);
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.l-screen {
|
||||
margin-left: 0px;
|
||||
margin-right: 0px;
|
||||
width: 100%;
|
||||
background-color: #F8F8FC;
|
||||
border-top: 1px solid #E8E8EC;
|
||||
border-bottom: 1px solid #E8E8EC;
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
.l-body,
|
||||
.l-body-outset,
|
||||
.l-page,
|
||||
.l-page-outset,
|
||||
.l-middle,
|
||||
.l-middle-outset,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
d-article > h1,
|
||||
@@ -78,12 +165,42 @@ d-article section > table, {
|
||||
d-article section > d-code,
|
||||
d-article section > d-math,
|
||||
d-article section > table {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
margin-left: 64px;
|
||||
width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px );
|
||||
}
|
||||
|
||||
.l-body-outset {
|
||||
margin-left: 32px;
|
||||
width: calc((100% - 2 * 64px - 3 * 16px)/4*3 + 2*16px + 64px );;
|
||||
}
|
||||
|
||||
.l-middle,
|
||||
.l-middle-outset,
|
||||
.l-page {
|
||||
margin-left: 64px;
|
||||
margin-right: 64px;
|
||||
width: calc(100% - 2*64px);
|
||||
}
|
||||
|
||||
.l-page-outset {
|
||||
margin-left: 32px;
|
||||
margin-right: 32px;
|
||||
width: calc(100% - 64px);
|
||||
}
|
||||
|
||||
.margin {
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 64px;
|
||||
width: calc((100% - 2 * 64px - 3 * 16px)/4);
|
||||
}
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
@media(min-width: 1024px) {
|
||||
.l-body,
|
||||
d-article > div,
|
||||
d-article > p,
|
||||
@@ -107,67 +224,42 @@ d-article section > table, {
|
||||
d-article section > d-code,
|
||||
d-article section > d-math,
|
||||
d-article section > table {
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
width: 648px;
|
||||
margin-left: calc(50% - (1024px - 2*64px) / 2);
|
||||
width: 668px;
|
||||
}
|
||||
.l-body-outset,
|
||||
d-article .l-body-outset {
|
||||
margin-left: calc(50% - 984px / 2 - 96px/2);
|
||||
width: calc(648px + 96px);
|
||||
|
||||
.l-body-outset {
|
||||
margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
|
||||
width: calc(668px + 64px)
|
||||
}
|
||||
|
||||
.l-middle,
|
||||
d-article .l-middle {
|
||||
width: 816px;
|
||||
margin-left: calc(50% - 984px / 2);
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-middle-outset,
|
||||
d-article .l-middle-outset {
|
||||
width: calc(816px + 96px);
|
||||
margin-left: calc(50% - 984px / 2 - 48px);
|
||||
margin-right: auto;
|
||||
.l-page {
|
||||
margin-left: calc(50% - (1024px - 2*64px) / 2);
|
||||
width: calc(100% - 2* (50% - (1024px - 2*64px) / 2));
|
||||
}
|
||||
d-article > h1,
|
||||
d-article section > h1,
|
||||
.l-page,
|
||||
d-article .l-page,
|
||||
d-article.centered .l-page {
|
||||
width: 984px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.l-page-outset {
|
||||
margin-left: calc((50% - (1024px - 2*64px) / 2) - 32px);
|
||||
width: calc(100% - 2* (50% - (1024px - 2*64px) / 2) + 64px);
|
||||
}
|
||||
.l-page-outset,
|
||||
d-article .l-page-outset,
|
||||
d-article.centered .l-page-outset {
|
||||
width: 1080px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.l-screen,
|
||||
d-article .l-screen,
|
||||
d-article.centered .l-screen {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: auto;
|
||||
}
|
||||
.l-screen-inset,
|
||||
d-article .l-screen-inset,
|
||||
d-article.centered .l-screen-inset {
|
||||
margin-left: 24px;
|
||||
margin-right: 24px;
|
||||
width: auto;
|
||||
}
|
||||
.l-gutter,
|
||||
d-article .l-gutter {
|
||||
|
||||
.margin {
|
||||
font-size: 14px;
|
||||
line-height: normal;
|
||||
clear: both;
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 24px;
|
||||
margin-right: calc((100vw - 984px) / 2 + 168px);
|
||||
width: calc((984px - 648px) / 2 - 24px);
|
||||
margin-left: 0;
|
||||
margin-right: calc(50% - (1024px - 2*64px) / 2);
|
||||
width: 206px;
|
||||
}
|
||||
|
||||
|
||||
/* Side */
|
||||
|
||||
/*
|
||||
.side.l-body,
|
||||
d-article .side.l-body {
|
||||
clear: both;
|
||||
@@ -217,8 +309,7 @@ d-article section > table, {
|
||||
width: 624px;
|
||||
margin-right: calc((100vw - 984px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
}*/
|
||||
|
||||
/* Rows and Columns */
|
||||
|
||||
|
||||
@@ -1,20 +1,30 @@
|
||||
|
||||
@media print {
|
||||
|
||||
@page {
|
||||
size: 8in 11in;
|
||||
@bottom-right {
|
||||
content: counter(page) " of " counter(pages);
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
/* no general margins -- CSS Grid takes care of those */
|
||||
}
|
||||
|
||||
p, code {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
h2, h3 {
|
||||
page-break-after: avoid;
|
||||
}
|
||||
|
||||
d-header {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
d-footer {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user