shadow-dom-element
Version:
shadow-dom-element is a declarative custom element/web component to render local and remote template
86 lines (77 loc) • 5.75 kB
HTML
<style>
:host { display:block; }
header{ background-color: rgba(0, 0, 0, .6); font-family: avenir next,avenir,sans-serif; line-height: 1.15; }
.with-img-background{ overflow: hidden;display: block;position: relative; }
.img-container{ z-index: -1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
::slotted(img){ max-width: 100%; object-fit: cover; width: 100%; height: 100%; }
h1,h2{ margin: 0; }
::slotted(h1){font-size: 2.25rem; margin-bottom: 0;line-height: 1.25; font-weight: 200; color: rgba(255,255,255,.9);}
::slotted(h2){font-size: 1rem; margin-top: 1rem;margin-bottom: 2rem; line-height: 1.5; font-weight: 100; color: rgba(255,255,255,.8);}
.icon svg{ width: 2rem; height: 2rem; }
nav{ padding-top: 1rem; padding-bottom: 1rem; }
.ph3 { padding-left: 1rem; padding-right: 1rem; }
.ph4-ns { padding-left: 1rem; padding-right: 1rem; }
.twitter{ padding-top: 1rem; }
nav { align-items: center; margin-left: auto; padding: 1rem; }
nav a{ display: inline-block; font-size: 1.5rem; font-weight: 200; text-decoration: none; }
nav a, nav a:visited{ color: rgba(255,255,255,.9);}
nav a:focus, nav a:hover { color: #fff; }
nav+div{ padding-top: 8rem; padding-bottom: 8rem; }
ul{ padding-left: 0; margin-right: 1rem; }
li{ display: inline-block; list-style-type: none; padding-right: 1rem; }
li a{ font-size: 1rem; font-weight: 400; }
.ananke-socials{}
div .ananke-socials a {
vertical-align: middle;
color: #bababa;
fill: currentColor
}
.ananke-socials a:hover { color: #6b7280 }
a.twitter:hover { color: #1da1f2; }
.link, .link:active, .link:focus, .link:hover, .link:link, .link:visited { transition: color .15s ease-in; }
.link-transition:hover .new-window { opacity: 1; }
.new-window { opacity: 0; display: inline-block; vertical-align: top; }
@media screen and (min-width: 30em){
.ph4-ns { padding-left: 2rem; padding-right: 2rem; }
li a{ font-size: 1.25rem; font-weight: 400; }
}
@media screen and (min-width: 60em){
nav,nav>div{ display: flex; align-items: center; justify-content: space-between; }
::slotted(h1){font-size: 3rem;}
::slotted(h2){font-size: 1.5rem;}
nav+div{ text-align: center; }
.twitter{ padding-top: 0; }
}
</style>
<header class="with-img-background">
<div class="img-container">
<slot name="featured_image"></slot>
</div>
<nav class=" ph3 ph4-ns" role="navigation">
<a href="./index.html"> Ananke </a>
<div>
<ul>
<li><a href="https://gohugo-ananke-theme-demo.netlify.app/about/" title="About page" > About </a></li>
<li><a href="https://gohugo-ananke-theme-demo.netlify.app/post/" title="Articles page"> Articles </a></li>
<li><a href="https://gohugo-ananke-theme-demo.netlify.app/contact/" title="Contact page" > Contact </a></li>
</ul>
<div class="ananke-socials">
<a href="https://twitter.com/GoHugoIO" target="_blank"
class="twitter ananke-social-link link-transition stackoverflow link"
title="Twitter link" rel="noopener" aria-label="follow on Twitter——Opens in a new window">
<span class="icon"
><svg style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M37.167,22.283c-2.619,0.953-4.274,3.411-4.086,6.101 l0.063,1.038l-1.048-0.127c-3.813-0.487-7.145-2.139-9.974-4.915l-1.383-1.377l-0.356,1.017c-0.754,2.267-0.272,4.661,1.299,6.271 c0.838,0.89,0.649,1.017-0.796,0.487c-0.503-0.169-0.943-0.296-0.985-0.233c-0.146,0.149,0.356,2.076,0.754,2.839 c0.545,1.06,1.655,2.097,2.871,2.712l1.027,0.487l-1.215,0.021c-1.173,0-1.215,0.021-1.089,0.467 c0.419,1.377,2.074,2.839,3.918,3.475l1.299,0.444l-1.131,0.678c-1.676,0.976-3.646,1.526-5.616,1.568 C19.775,43.256,19,43.341,19,43.405c0,0.211,2.557,1.397,4.044,1.864c4.463,1.377,9.765,0.783,13.746-1.568 c2.829-1.673,5.657-5,6.978-8.221c0.713-1.716,1.425-4.851,1.425-6.354c0-0.975,0.063-1.102,1.236-2.267 c0.692-0.678,1.341-1.419,1.467-1.631c0.21-0.403,0.188-0.403-0.88-0.043c-1.781,0.636-2.033,0.551-1.152-0.402 c0.649-0.678,1.425-1.907,1.425-2.267c0-0.063-0.314,0.042-0.671,0.233c-0.377,0.212-1.215,0.53-1.844,0.72l-1.131,0.361l-1.027-0.7 c-0.566-0.381-1.361-0.805-1.781-0.932C39.766,21.902,38.131,21.944,37.167,22.283z M33,64C16.432,64,3,50.569,3,34S16.432,4,33,4 s30,13.431,30,30S49.568,64,33,64z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>
</span>
<span class="new-window"><svg height="8px" style="enable-background:new 0 0 1000 1000;" version="1.1" viewBox="0 0 1000 1000" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<path d="M598 128h298v298h-86v-152l-418 418-60-60 418-418h-152v-86zM810 810v-298h86v298c0 46-40 86-86 86h-596c-48 0-86-40-86-86v-596c0-46 38-86 86-86h298v86h-298v596h596z"
style="fill-rule:evenodd;clip-rule:evenodd;"/>
</svg>
</span></a>
</div>
</div>
</nav>
<div class=" ph3 ph4-ns">
<h1><slot name="title"></slot></h1>
<h2><slot name="description"></slot></h2>
</div>
</header>