mirror of
https://github.com/wassname/template.git
synced 2026-06-27 16:32:20 +08:00
Distill header
This commit is contained in:
Shan Carter
@@ -39,7 +39,9 @@
|
||||
}
|
||||
}</script>
|
||||
</d-front-matter>
|
||||
<distill-header></distill-header>
|
||||
<d-abstract>
|
||||
<figure style="grid-column: page; margin: 1rem 0;"><img src="momentum.png" style="width:100%; border: 1px solid rgba(0, 0, 0, 0.2);"/></figure>
|
||||
<p>We often think of Momentum as a means of dampening oscillations and speeding up the iterations, leading to faster convergence. But it has other interesting behavior. It allows a larger range of step-sizes to be used, and creates its own oscillations. What is going on?</p>
|
||||
</d-abstract>
|
||||
<d-article>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 255 KiB |
@@ -5,12 +5,12 @@ const T = Template('d-abstract', `
|
||||
<style>
|
||||
:host {
|
||||
display: block;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8em;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.6em;
|
||||
padding-bottom: 1.5em;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
font-weight: 300;
|
||||
font-family: "Merriweather", georgia, serif;
|
||||
color: rgba(0, 0, 0, 0.7);
|
||||
font-family: georgia, serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
::slotted(p) {
|
||||
|
||||
@@ -21,8 +21,8 @@ d-article > * {
|
||||
|
||||
@media(min-width: 1024px) {
|
||||
d-article {
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.9em;
|
||||
font-size: 1rem;
|
||||
line-height: 1.7em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,10 +100,10 @@ d-article a {
|
||||
d-article p,
|
||||
d-article ul,
|
||||
d-article ol {
|
||||
font-family: "Merriweather", georgia, serif;
|
||||
font-weight: 300;
|
||||
font-family: georgia, serif;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.7em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
d-article a {
|
||||
|
||||
@@ -3,7 +3,7 @@ d-byline {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.1);
|
||||
contain: content;
|
||||
font-size: 0.7rem;
|
||||
line-height: 2em;
|
||||
line-height: 1.8em;
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
|
||||
@@ -21,8 +21,6 @@ d-byline h3 {
|
||||
}
|
||||
|
||||
d-byline p {
|
||||
font-family: "Merriweather", georgia, serif;
|
||||
font-weight: 300;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,19 +3,19 @@ import { Template } from '../mixins/template';
|
||||
const T = Template('d-title', `
|
||||
<style>
|
||||
:host {
|
||||
padding-top: 64px;
|
||||
padding-top: 2rem;
|
||||
contain: content;
|
||||
display: block;
|
||||
}
|
||||
::slotted(h1) {
|
||||
grid-column: text-start / page-end;
|
||||
font-size: 46px;
|
||||
grid-column: text-start / span 5;
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 1.3em;
|
||||
margin: 0 0 10px;
|
||||
line-height: 1em;
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
.status {
|
||||
margin-top: 15px;
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
color: #009688;
|
||||
opacity: 0.8;
|
||||
@@ -24,11 +24,9 @@ const T = Template('d-title', `
|
||||
.status span {
|
||||
line-height: 1;
|
||||
display: inline-block;
|
||||
padding: 7px 7px;
|
||||
border: 1px solid #80cbc4;
|
||||
border-bottom: 1px solid #80cbc4;
|
||||
border-radius: 5px;
|
||||
font-size: 9px;
|
||||
padding: 7px 0;
|
||||
border-top: 1px solid #80cbc4;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,66 +10,53 @@ const T = Template('distill-header', `
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 60px;
|
||||
background-color: transparent;
|
||||
z-index: ${1e6};
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
/*border-bottom: 1px solid rgba(0, 0, 0, 0.08);*/
|
||||
/*box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);*/
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
contain: content;
|
||||
}
|
||||
.content {
|
||||
height: 70px;
|
||||
}
|
||||
a {
|
||||
font-size: 16px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-decoration: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
padding: 22px 0;
|
||||
}
|
||||
a:hover {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
svg {
|
||||
background-color: hsl(0, 0%, 15%);;
|
||||
padding: 8px;
|
||||
border-radius: 12px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
@media(min-width: 768px) {
|
||||
:host {
|
||||
height: 120px;
|
||||
}
|
||||
svg {
|
||||
top: 40px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.content > * {
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
padding: 3px 7px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
@media(min-width: 1080px) {
|
||||
:host {
|
||||
height: 120px;
|
||||
}
|
||||
a {
|
||||
height: 70px;
|
||||
line-height: 70px;
|
||||
padding: 28px 0;
|
||||
}
|
||||
.logo {
|
||||
}
|
||||
.name {
|
||||
grid-column-end: span 8;
|
||||
font-weight: 500;
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 13px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
svg {
|
||||
display: none;
|
||||
background-color: hsl(0, 0%, 15%);
|
||||
padding: 8px;
|
||||
border-radius: 6px;
|
||||
width: 24px;
|
||||
position: relative;
|
||||
margin-right: 2px;
|
||||
}
|
||||
svg path {
|
||||
fill: white;
|
||||
stroke: rgba(255, 255, 255, 1.0);
|
||||
stroke-width: 3px;
|
||||
}
|
||||
.content {
|
||||
grid-column: page;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
display: grid;
|
||||
grid-column-gap: 40px;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
}
|
||||
@@ -82,29 +69,23 @@ svg path {
|
||||
margin-left: 24px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.name {
|
||||
opacity: 0.0;
|
||||
transition: opacity 0.5s
|
||||
}
|
||||
|
||||
a:hover .name {
|
||||
opacity: 1.0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="content l-page">
|
||||
<div class="content grid">
|
||||
<a href="/" class="logo">
|
||||
${logo}
|
||||
</a>
|
||||
<span class='name'>
|
||||
<div class='name'>
|
||||
Distill
|
||||
</span>
|
||||
</div>
|
||||
<a href="/faq">Latest</a>
|
||||
<a href="/faq">About</a>
|
||||
<a href="/faq">Prize</a>
|
||||
<a href="/faq">Submit</a>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// <div class="nav">
|
||||
// <a href="/faq">About</a>
|
||||
// <a href="https://github.com/distillpub">GitHub</a>
|
||||
// <!-- https://twitter.com/distillpub -->
|
||||
// </div>
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
html {
|
||||
font-size: 19px;
|
||||
line-height: 1rem;
|
||||
font-family: "Libre Franklin", "Helvetica Neue", sans-serif;
|
||||
/* font-family: "Libre Franklin", "Helvetica Neue", sans-serif; */
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@supports not (display: grid) {
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
@@ -11,6 +12,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
@@ -25,6 +27,7 @@ distill-footer {
|
||||
}
|
||||
|
||||
@media(min-width: 768px) {
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
@@ -38,6 +41,7 @@ distill-footer {
|
||||
}
|
||||
|
||||
@media(min-width: 1000px) {
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
@@ -51,6 +55,7 @@ distill-footer {
|
||||
}
|
||||
|
||||
@media(min-width: 1280px) {
|
||||
distill-header,
|
||||
d-title,
|
||||
d-abstract,
|
||||
d-article,
|
||||
|
||||
Reference in New Issue
Block a user