Files
template/src/distill-components/distill-footer.js
T
2018-03-30 10:51:26 -07:00

94 lines
2.1 KiB
JavaScript

// Copyright 2018 The Distill Template Authors
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
import { Template } from '../mixins/template';
import logo from '../assets/distill-logo.svg';
const T = Template('distill-footer', `
<style>
:host {
color: rgba(255, 255, 255, 0.5);
font-weight: 300;
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;
contain: content;
}
.logo svg {
width: 24px;
position: relative;
top: 4px;
margin-right: 2px;
}
.logo svg path {
fill: none;
stroke: rgba(255, 255, 255, 0.8);
stroke-width: 3px;
}
.logo {
font-size: 17px;
font-weight: 200;
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
margin-right: 6px;
}
.container {
grid-column: text;
}
.nav {
font-size: 0.9em;
margin-top: 1.5em;
}
.nav a {
color: rgba(255, 255, 255, 0.8);
margin-right: 6px;
text-decoration: none;
}
</style>
<div class='container'>
<a href="/" class="logo">
${logo}
Distill
</a> is dedicated to clear explanations of machine learning
<div class="nav">
<a href="https://distill.pub/about/">About</a>
<a href="https://distill.pub/journal/">Submit</a>
<a href="https://distill.pub/prize/">Prize</a>
<a href="https://distill.pub/archive/">Archive</a>
<a href="https://distill.pub/rss.xml">RSS</a>
<a href="https://github.com/distillpub">GitHub</a>
<a href="https://twitter.com/distillpub">Twitter</a>
&nbsp;&nbsp;&nbsp;&nbsp; ISSN 2476-0757
</div>
</div>
`);
export class DistillFooter extends T(HTMLElement) {
}