Weekly = () => html`
<section class="week">
<h1 style="color:#e18000; font-weight:600;letter-spacing:10px;">${city
.split(',')[0]
.toUpperCase()}</h1>
<div class="days">
${WeeklyWeather}
</div>
</section>
</section>
<style>
.week {
width:80%;
height:${height / 2}px;
background:#181818;
position:relative;
margin:20px auto;
color:#e19646;
text-shadow:0 0 10px rgba(225,150,70,.5);
font-size:32px;
border-radius:7px;
box-shadow:
inset 0 1px 2px 1px rgba(255,255,255,.1), /* Shine */
inset 0 -4px 2px -3px rgba(255,255,255,.1), /* Bot. shine */
0 -1px 6px 4px #1b1d1f, /* Blurred border */
2px 2px 0 5px #1b1d1f, /* Border right */
-2px 2px 0 5px #1b1d1f, /* Border left */
0 0 0 7px #141516, /* Border shadow */
0 1px 0 7px rgba(255,255,255,.1);
overflow:hidden;
}
.week:before{
content:"";
width:500px;
height:500px;
position:absolute;
background:rgba(255,255,255,.2);
left:-55%;
top:-35%;
-webkit-transform:rotate(25deg);
-ms-transform:rotate(25deg);
transform:rotate(25deg);
background:linear-gradient(25deg,
rgba(255,255,255,0) 25%,
rgba(255,255,255,.1) 100%);
}
.week h1 {
text-align:center;
padding:20px 0;
border-bottom:2px solid #27292d;
font-weight:100;
min-width:100%;
}
.days {
box-sizing:border-box;
width:100%;
text-align:center;
margin-top:20px;
display:flex;
align-items:center;
justify-content:space-around;
}
.days span {
display:block;
text-align:center;
font-size:2rem;
font-weight:500;
width:100%;
border:1px solid #222;
position:relative;
}
.days span:before {
content:attr(data-degrees);
font-size:2rem;
font-weight:100;
display:block;
top:8rem;
text-align:center;
}
</style>
`