kopia lustrzana https://github.com/lowtechmag/solar
print styles and updates
marieotsuka
rodzic
e1ea48cd86
commit
09c55f7c69
|
|
@ -73,6 +73,7 @@ a {
|
|||
|
||||
#content h1 {
|
||||
margin-top: 2*$pad;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -94,10 +95,11 @@ BACKGROUND and BATTERY METER
|
|||
font-size: 0.75rem;
|
||||
text-align: right;
|
||||
padding: 3px .5rem 0 0;
|
||||
border-top: 1px solid #000;
|
||||
a:hover{
|
||||
border-top: 1px solid $color;
|
||||
}
|
||||
|
||||
}
|
||||
#charge_icon svg{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.bat_status{
|
||||
|
|
@ -110,28 +112,26 @@ BACKGROUND and BATTERY METER
|
|||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
footer .bat_icon{
|
||||
width: 20px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.svg_bat_icon{
|
||||
.svg_stroke{
|
||||
fill:none;
|
||||
stroke:#000;
|
||||
stroke: $color;
|
||||
stroke-miterlimit:10;
|
||||
stroke-width:33px;
|
||||
}
|
||||
|
||||
.charging .svg_bat_icon{
|
||||
fill:#000;
|
||||
.svg_fill{
|
||||
fill:$color;
|
||||
}
|
||||
|
||||
#level::after, #dashboard_level::after{
|
||||
content: "\2193";
|
||||
}
|
||||
|
||||
.charging #level::after, .charging #dashboard_level::after{
|
||||
content: "\2191";
|
||||
a:hover {
|
||||
.svg_stroke{
|
||||
stroke: $color_sub;
|
||||
}
|
||||
.svg_fill{
|
||||
fill: $color_sub;
|
||||
}
|
||||
.icon{
|
||||
fill: $color_sub;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
|
|
@ -231,7 +231,10 @@ nav .category {
|
|||
|
||||
.subtitle {
|
||||
margin: 0.5*$pad 0;
|
||||
color: $color_sub;
|
||||
.icon{
|
||||
position: relative;
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.gray {
|
||||
|
|
@ -242,9 +245,6 @@ nav .category {
|
|||
a:last-child{
|
||||
padding-left: 5px;
|
||||
}
|
||||
a:hover svg{
|
||||
fill: $color_sub;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -308,6 +308,7 @@ time {
|
|||
}
|
||||
}
|
||||
|
||||
//article thumbnail images on listings
|
||||
.featured-img {
|
||||
margin: $pad 0;
|
||||
width: 100%;
|
||||
|
|
@ -444,21 +445,22 @@ ARTICLE TYPOGRAPHY
|
|||
font-style: normal;
|
||||
padding-right: $pad;
|
||||
}
|
||||
}
|
||||
|
||||
.tags a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
.entry-content a, .tags a, footer#content-info a, p.summary a{
|
||||
text-decoration: underline;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
h2,
|
||||
h3,
|
||||
ol,
|
||||
h4,
|
||||
h5,
|
||||
p,
|
||||
ol,
|
||||
ul {
|
||||
max-width: 33rem;
|
||||
width: 80%;
|
||||
|
|
@ -478,14 +480,6 @@ ARTICLE TYPOGRAPHY
|
|||
margin: 2*$pad auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
margin: 2*$pad auto;
|
||||
|
|
@ -493,11 +487,10 @@ ARTICLE TYPOGRAPHY
|
|||
}
|
||||
|
||||
p.img {
|
||||
font-size: $font_s;
|
||||
font-style: normal;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
mix-blend-mode: multiply;
|
||||
margin-bottom: 0.5*$pad;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
@ -506,9 +499,11 @@ ARTICLE TYPOGRAPHY
|
|||
}
|
||||
|
||||
.caption{
|
||||
width:100%;
|
||||
max-width:none;
|
||||
display: block;
|
||||
background: white;
|
||||
padding: $pad 0;
|
||||
font-size: $font_s;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -639,6 +634,31 @@ a.footnote-ref {
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
COMMENTS
|
||||
*/
|
||||
|
||||
#comment-list{
|
||||
font-size: .75rem;
|
||||
font-family: monospace;
|
||||
counter-reset: comments;
|
||||
a{
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
h5{
|
||||
margin: auto;
|
||||
font-size: .75rem;
|
||||
border-top: 2px solid black;
|
||||
padding-top: $pad;
|
||||
&::before {
|
||||
counter-increment: comments;
|
||||
content: counter(comments) ")";
|
||||
padding-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
padding: $pad;
|
||||
|
|
@ -652,6 +672,9 @@ a.footnote-ref {
|
|||
color: $color_sub;
|
||||
border-color: $color_sub;
|
||||
}
|
||||
.icon{
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
footer#content-info {
|
||||
|
|
@ -663,10 +686,7 @@ footer#content-info {
|
|||
border-top: 2px solid $color;
|
||||
padding: $pad 0;
|
||||
overflow: auto;
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:hover, h2 a{
|
||||
h2 a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -722,9 +742,6 @@ footer{
|
|||
}
|
||||
}
|
||||
}
|
||||
#charge_icon svg{
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
img.weather{
|
||||
display: inline;
|
||||
|
|
@ -747,7 +764,6 @@ footer .weather_text {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
|
||||
// Server Stats
|
||||
dl {
|
||||
margin-bottom:50px;
|
||||
|
|
@ -755,7 +771,7 @@ dl {
|
|||
|
||||
dt, dd {
|
||||
padding: $pad 0;
|
||||
border-bottom: 2px solid #000;
|
||||
border-bottom: 2px solid $color;
|
||||
}
|
||||
|
||||
dt {
|
||||
|
|
@ -764,20 +780,18 @@ dt {
|
|||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
MEDIA QUERIES
|
||||
*/
|
||||
@media screen and (max-width: 1100px) {
|
||||
|
||||
|
||||
.cols li {
|
||||
max-width: 50%;
|
||||
&:nth-child(2n){
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.cover li:nth-child(2){
|
||||
flex: 1;
|
||||
}
|
||||
|
|
@ -788,7 +802,7 @@ MEDIA QUERIES
|
|||
background-size: auto 140%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.featured-img{
|
||||
background-size: 120%;
|
||||
}
|
||||
|
|
@ -811,12 +825,15 @@ MEDIA QUERIES
|
|||
overflow: hidden;
|
||||
transition: height 300ms ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
#menu-list.show{
|
||||
height: 280px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
|
||||
#menu {
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
margin: $pad 0;
|
||||
|
|
@ -828,71 +845,61 @@ MEDIA QUERIES
|
|||
margin-left: -.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
footer .cols li{
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 890px) {
|
||||
#menu ul {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 620px) {
|
||||
@media screen and (max-width: 666px) {
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.top h1{
|
||||
font-size:2rem;
|
||||
}
|
||||
|
||||
|
||||
.cols.cover{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
|
||||
.cover li, .cover li:nth-child(2){
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
.cols li {
|
||||
max-width: 100%;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
|
||||
footer .cols li{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.button{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.entry-content {
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
p {
|
||||
width: 100%;
|
||||
h3 {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ol {
|
||||
p, ul, ol, h5{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.footnote {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
#archive {
|
||||
li:hover{
|
||||
border-color: transparent;
|
||||
|
|
@ -907,19 +914,104 @@ MEDIA QUERIES
|
|||
float: none;
|
||||
width: 100%;
|
||||
padding-right: 0;
|
||||
margin: 5px 0;
|
||||
}
|
||||
.category {
|
||||
time, .category {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dt, dd{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
dt {
|
||||
border-bottom: 0;
|
||||
width: 100%;
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media print {
|
||||
html {
|
||||
font-size: 10.5pt;
|
||||
}
|
||||
body{
|
||||
background: none;
|
||||
}
|
||||
h1, footer h2 {
|
||||
font-size: 1.2rem;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
.subtitle{
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
.icon{
|
||||
height: 1rem;
|
||||
}
|
||||
}
|
||||
#content h1.entry-title {
|
||||
font-size: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
p.summary {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.entry-content {
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
p.img {
|
||||
max-width: none;
|
||||
margin: 1rem auto 0.5rem auto;
|
||||
background-color: white !important;
|
||||
mix-blend-mode: normal !important;
|
||||
page-break-inside: avoid;
|
||||
img{
|
||||
max-width: 100%;
|
||||
mix-blend-mode: normal !important;
|
||||
}
|
||||
}
|
||||
p.caption {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
h2, h3, p, .footnote{
|
||||
max-width: none;
|
||||
width: 100%;
|
||||
}
|
||||
p{
|
||||
margin: 0;
|
||||
line-height: 1.2;
|
||||
text-indent: 2rem;
|
||||
}
|
||||
h2+p, p.caption, p.caption+p, .footnote p{
|
||||
text-indent: 0;
|
||||
}
|
||||
blockquote p {
|
||||
line-height: 1.1;
|
||||
text-indent: 0;
|
||||
margin: 1rem 0;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
columns: 2;
|
||||
column-gap: 20pt;
|
||||
}
|
||||
#bat_data{
|
||||
display: none;
|
||||
}
|
||||
nav, #battery, #comment-list, #related, #post-nav, ul.cols .featured-img, footer .dashboard{
|
||||
display: none;
|
||||
}
|
||||
ul.cols {
|
||||
li {
|
||||
max-width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -38,47 +38,11 @@
|
|||
|
||||
<!-- LIST SORTING-------------->
|
||||
|
||||
<script
|
||||
src="https://code.jquery.com/jquery-3.3.1.min.js"
|
||||
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
|
||||
crossorigin="anonymous"></script>
|
||||
|
||||
<script
|
||||
src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/tinysort.min.js"></script>
|
||||
|
||||
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/FileSaver.min.js"></script>
|
||||
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/jszip.min.js"></script>
|
||||
|
||||
<script>
|
||||
var listElements = document.querySelectorAll('#archive ul li');
|
||||
var filters = document.getElementsByClassName('filter');
|
||||
|
||||
for (var i = 0; i < filters.length; i++) {
|
||||
filters[i].addEventListener('click', sort, false);
|
||||
}
|
||||
|
||||
function sort() {
|
||||
for (var j = 0; j < filters.length; j++) {
|
||||
filters[j].classList.remove('active');
|
||||
}
|
||||
this.classList.add('active');
|
||||
this.classList.toggle('desc');
|
||||
this.classList.toggle('asc');
|
||||
|
||||
var type = (this).id;
|
||||
switch (type) {
|
||||
case "title":
|
||||
tinysort(listElements,{selector:'.entry-title',order:(this.isAsc=!this.isAsc)?'asc':'desc'});
|
||||
break;
|
||||
case "date":
|
||||
tinysort(listElements,{selector:'time',attr:'datetime',order:(this.isAsc=!this.isAsc)?'asc':'desc'});
|
||||
break;
|
||||
case "cat":
|
||||
tinysort(listElements,{selector:'.category',order:(this.isAsc=!this.isAsc)?'asc':'desc'});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
var listElements = document.querySelectorAll('#archive ul li'); var filters = document.getElementsByClassName('filter'); for (var i = 0; i < filters.length; i++) { filters[i].addEventListener('click', sort, false); } function sort() { for (var j = 0; j < filters.length; j++) { filters[j].classList.remove('active'); } this.classList.add('active'); this.classList.toggle('desc'); this.classList.toggle('asc'); var type = (this).id; switch (type) { case "title": tinysort(listElements,{selector:'.entry-title',order:(this.isAsc=!this.isAsc)?'asc':'desc'}); break; case "date": tinysort(listElements,{selector:'time',attr:'datetime',order:(this.isAsc=!this.isAsc)?'asc':'desc'}); break; case "cat": tinysort(listElements,{selector:'.category',order:(this.isAsc=!this.isAsc)?'asc':'desc'}); break; } }
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ article.title }} | {{ SITENAME }}{% endblock title %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
{% if article.description %}
|
||||
|
|
@ -32,8 +34,8 @@
|
|||
<div class="entry-content">
|
||||
{{ article.content }}
|
||||
</div><!-- /.entry-content -->
|
||||
<!-- <div id="send-comment">
|
||||
<a href="mailto:kris@lowtechmagazine.com?subject=comments on {{ article.title }}" class="button" title="Comment">Send a letter to the editor</a>
|
||||
<!-- <div id="send-comment">
|
||||
<a href="mailto:solar@lowtechmagazine.com?subject=comments on {{ article.title }}" class="button" title="Comment">Send a letter to the editor <svg viewBox="0 0 80 80" class="icon"><title>email</title><path d="M4.95,13.14v55H74.33v-55Zm54.34,8.12L39.64,39.74,20,21.26ZM13.07,60V25.91l26.56,25,26.57-25V60Z"></path></svg></a>
|
||||
</div> -->
|
||||
<div class="post-info gray">
|
||||
<time class="published" datetime="{{ article.date.isoformat() }}">
|
||||
|
|
@ -64,6 +66,7 @@
|
|||
|
||||
</section>
|
||||
{% if article.related_posts %}
|
||||
<section id="related">
|
||||
<h3 class="related">Related Articles</h3>
|
||||
<div class="post-info gray">
|
||||
{% include 'taglist.html' %}
|
||||
|
|
@ -88,7 +91,7 @@
|
|||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
</section>
|
||||
<ul id="post-nav">
|
||||
{% if article.next_article %}
|
||||
<li class="newer">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<title>{% block title %}{{ SITENAME }}{% endblock title %}</title>
|
||||
|
||||
{% assets filters="libsass,cssmin", output="css/style.min.css", "css/style.scss" %}
|
||||
<link rel="stylesheet" href="/{{ ASSET_URL }}"> {% endassets %} {% from 'syndication.html' import syndication with context %} {{ syndication(article) }} {% if FEED_ALL_ATOM %}
|
||||
<link rel="stylesheet" href="{{ SITEURL }}/{{ ASSET_URL }}"> {% endassets %} {% from 'syndication.html' import syndication with context %} {{ syndication(article) }} {% if FEED_ALL_ATOM %}
|
||||
|
||||
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_ATOM }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Full Atom Feed" /> {% endif %} {% if FEED_ALL_RSS %}
|
||||
<link href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Full RSS Feed" /> {% endif %} {% if FEED_ATOM %}
|
||||
|
|
@ -18,12 +18,15 @@
|
|||
<link href="{{ FEED_DOMAIN }}/{{ CATEGORY_FEED_RSS|format(category.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Categories RSS Feed" /> {% endif %} {% if TAG_FEED_ATOM and tag %}
|
||||
<link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_ATOM|format(tag.slug) }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} Tags Atom Feed" /> {% endif %} {% if TAG_FEED_RSS and tag %}
|
||||
<link href="{{ FEED_DOMAIN }}/{{ TAG_FEED_RSS|format(tag.slug) }}" type="application/rss+xml" rel="alternate" title="{{ SITENAME }} Tags RSS Feed" /> {% endif %} {% endblock head %}
|
||||
|
||||
</head>
|
||||
|
||||
{% block body_class %} {% endblock body_class %}
|
||||
{% block body_class %}
|
||||
<body>
|
||||
{% endblock body_class %}
|
||||
<div id="bat_data" class="bat_status">
|
||||
<a href="{{ SITEURL }}/weather/" title="Battery Status"><span id="level">0%</span></a>
|
||||
<a href="{{ SITEURL }}/power.html" title="Battery Capacity">
|
||||
<span id="charge_icon"></span>
|
||||
<span id="level">0%</span></a>
|
||||
</div>
|
||||
<div id="battery">
|
||||
</div>
|
||||
|
|
@ -31,20 +34,19 @@
|
|||
<header class="top">
|
||||
<h1><a href="{{ SITEURL }}/">{{ SITENAME }}</a></h1>
|
||||
<div class="subtitle">
|
||||
{{ SITESUBTITLE }}
|
||||
<a href="{{ SITEURL }}/power.html">{{ SITESUBTITLE }} <svg class="icon" viewBox="0 0 500 500"><title>Solar</title><circle class="svg_fill" cx="248.48" cy="252.55" r="97.03"/><rect class="svg_fill" x="234.53" y="17.45" width="27.9" height="112.39"/><rect class="svg_fill" x="234.53" y="375.25" width="27.9" height="112.39"/><rect class="svg_fill" x="413.42" y="196.35" width="27.9" height="112.39" transform="translate(679.92 -174.83) rotate(90)"/><rect class="svg_fill" x="55.63" y="196.35" width="27.9" height="112.39" transform="translate(322.12 182.97) rotate(90)"/><rect class="svg_fill" x="361.03" y="69.85" width="27.9" height="112.39" transform="translate(198.96 -228.23) rotate(45)"/><rect class="svg_fill" x="108.03" y="322.85" width="27.9" height="112.39" transform="translate(303.75 24.77) rotate(45)"/><rect class="svg_fill" x="361.03" y="322.85" width="27.9" height="112.39" transform="translate(908.15 381.93) rotate(135)"/><rect class="svg_fill" x="108.03" y="69.85" width="27.9" height="112.39" transform="translate(297.35 128.93) rotate(135)"/></svg></a>
|
||||
</div>
|
||||
<nav id="menu">
|
||||
<div id="menu-s">
|
||||
menu
|
||||
</div>
|
||||
<ul id="menu-list">
|
||||
<li><a href="{{ SITEURL }}/about/">About</a></li>
|
||||
<li class="low"><a class="category" href="{{ SITEURL }}/category/low-tech-solutions.html">Low-tech Solutions</a></li>
|
||||
<li class="hig"><a class="category" href="{{ SITEURL }}/category/high-tech-problems.html">High-tech Problems</a></li>
|
||||
<li class="obs"><a class="category" href="{{ SITEURL }}/category/obsolete-technology.html">Obsolete Technology</a></li>
|
||||
<li><a href="{{ SITEURL }}/about.html">About</a></li>
|
||||
<li class="low"><a class="category" href="{{ SITEURL }}/low-tech-solutions.html">Low-tech Solutions</a></li>
|
||||
<li class="hig"><a class="category" href="{{ SITEURL }}/high-tech-problems.html">High-tech Problems</a></li>
|
||||
<li class="obs"><a class="category" href="{{ SITEURL }}/obsolete-technology.html">Obsolete Technology</a></li>
|
||||
<li><a href="{{ SITEURL }}/archives.html">Archive</a></li>
|
||||
<li><a href="{{ SITEURL }}/weather/">Weather</a></li>
|
||||
<li><a href="{{ SITEURL }}/donate/">Donate</a></li>
|
||||
<li><a href="{{ SITEURL }}/donate.html">Donate</a></li>
|
||||
<li class="social"><a href="{{ FEED_DOMAIN }}/{{ FEED_ALL_RSS }}" type="application/rss+xml" rel="alternate" target="_blank"><svg viewBox="0 0 80 80" class="icon"><title>rss</title><circle cx="19.91" cy="58.23" r="6.86"/><path d="M67.89,65.72H55.7A41.86,41.86,0,0,0,13.89,23.91V11.73A54.06,54.06,0,0,1,67.89,65.72Z"/><path d="M48.93,65.72H36.75A22.88,22.88,0,0,0,13.89,42.87V30.68A35.08,35.08,0,0,1,48.93,65.72Z"/></svg></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
@ -61,29 +63,28 @@
|
|||
<ul class="cols">
|
||||
<li>
|
||||
<h3>Server Stats</h3>
|
||||
<p>
|
||||
Location: Barcelona<br>
|
||||
Time: <span id="time">Local Time</span><br>
|
||||
Battery Status: <div class="bat_status">
|
||||
<!-- <svg class="bat_icon" viewBox="0 0 495.7 600"><title>Battery Icon</title><g><polygon class="svg_bat_icon" points="332.89 144.34 332.89 76.16 162.8 76.16 162.8 144.34 99.33 144.34 99.33 523.84 396.36 523.84 396.36 144.34 332.89 144.34"/></g></svg> -->
|
||||
<span class="bat_status" id="dashboard_level">Battery Capacity</span>
|
||||
<span id="charge_text">Charging / Draining</span></div><br>
|
||||
Power Used: <span id="power">Power Usage</span><br>
|
||||
Server: <span id="uptime">Uptime</span><br>
|
||||
Battery Status:
|
||||
<span class="bat_status" id="dashboard_level">battery capacity</span> capacity, <span id="charge_text">chargin / draining</span><br>
|
||||
Power Used: <span id="power">power usage</span><br>
|
||||
Uptime: <span id="uptime">up since</span><br>
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Forecast</h3>
|
||||
<div class="forecast"></div>
|
||||
<a href="{{ SITEURL }}/weather/">more</a>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Info</h3>
|
||||
<p>
|
||||
<a href="/about/">About the site</a><br>
|
||||
Support us at: <a href="https://www.paypal.me/lowtechmagazine">PayPal</a>,
|
||||
<a href="https://www.patreon.com/lowtechmagazine">Patreon</a>, or
|
||||
<a href="https://liberapay.com/lowtechmagazine/">LiberaPay</a>
|
||||
<a href="{{ SITEURL }}/about.html">About the site</a><br>
|
||||
<a href="{{ SITEURL }}/power.html">Power</a><br>
|
||||
<a href="{{ SITEURL }}/colophon.html">Colophon</a><br>
|
||||
<a href="{{ SITEURL }}/donate.html">Donate</a>
|
||||
</p>
|
||||
<p><a href="{{ SITEURL }}/privacy/">Privacy Policy</a></p>
|
||||
<p><a href="{{ SITEURL }}/privacy.html">Privacy Policy</a></p>
|
||||
</li>
|
||||
<li>
|
||||
<h3>Contact</h3>
|
||||
|
|
@ -103,11 +104,11 @@
|
|||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- /#contentinfo -->
|
||||
<!-- /#contentinfo -->
|
||||
</main>
|
||||
|
||||
<script>
|
||||
var url = "{{ SITEURL }}/api/stats.json";
|
||||
var url = "https://solar.lowtechmagazine.com/api/stats.json";
|
||||
var data;
|
||||
var solar_stats = [];
|
||||
var battery_stats = [];
|
||||
|
|
@ -118,12 +119,15 @@ var weather_data = ["today", "tomorrow", "day_after_t"];
|
|||
var weather_days = ["today", "tomorrow", "day after tomorrow"];
|
||||
var forecast = "";
|
||||
|
||||
var battery_icon = '<svg class="icon" viewBox="0 0 500 500"><title>Battery used</title><g id="bat_used" data-name="Layer 5"><title>Battery used</title><polygon class="svg_stroke" points="327.01 127.16 327.01 47.31 172.99 47.31 172.99 127.16 115.52 127.16 115.52 452.69 384.48 452.69 384.48 127.16 327.01 127.16"/><polygon class="svg_fill" points="357.64 408.86 158.26 408.86 158.26 209.49 357.64 408.86"/></svg>';
|
||||
var solar_icon = '<svg class="icon" viewBox="0 0 500 500"><title>Solar used, battery charging</title><circle class="svg_fill" cx="248.48" cy="252.55" r="97.03"/><rect class="svg_fill" x="234.53" y="17.45" width="27.9" height="112.39"/><rect class="svg_fill" x="234.53" y="375.25" width="27.9" height="112.39"/><rect class="svg_fill" x="413.42" y="196.35" width="27.9" height="112.39" transform="translate(679.92 -174.83) rotate(90)"/><rect class="svg_fill" x="55.63" y="196.35" width="27.9" height="112.39" transform="translate(322.12 182.97) rotate(90)"/><rect class="svg_fill" x="361.03" y="69.85" width="27.9" height="112.39" transform="translate(198.96 -228.23) rotate(45)"/><rect class="svg_fill" x="108.03" y="322.85" width="27.9" height="112.39" transform="translate(303.75 24.77) rotate(45)"/><rect class="svg_fill" x="361.03" y="322.85" width="27.9" height="112.39" transform="translate(908.15 381.93) rotate(135)"/><rect class="svg_fill" x="108.03" y="69.85" width="27.9" height="112.39" transform="translate(297.35 128.93) rotate(135)"/></svg>';
|
||||
|
||||
function getServerData() {
|
||||
var request = new XMLHttpRequest();
|
||||
|
||||
request.open('GET', url, true);
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
if (request.readyState == 4 && request.status == 200) {
|
||||
data = JSON.parse(request.responseText);
|
||||
solar_stats = [
|
||||
["Power usage from solar", data.ac_power],
|
||||
|
|
@ -146,24 +150,20 @@ function getServerData() {
|
|||
["Battery capacity", data.bat_capacity]
|
||||
];
|
||||
var level = data.bat_capacity;
|
||||
document.querySelector('#battery').style.height = level;
|
||||
document.querySelector('#bat_data').style.top = 100 - parseInt(level.slice(0, -1)) + "vh";
|
||||
document.getElementById('battery').style.height = level;
|
||||
document.getElementById('bat_data').style.top = 100 - parseInt(level.slice(0, -1)) + "vh";
|
||||
|
||||
var bat_status = document.querySelectorAll('.bat_status');
|
||||
var power = "";
|
||||
var bat_text = "draining";
|
||||
var bat_text = "using battery";
|
||||
|
||||
if (data.ac_power == "0W") {
|
||||
power = data.bat_power;
|
||||
[].forEach.call(bat_status, function(target) {
|
||||
target.classList.remove('charging');
|
||||
});
|
||||
charge_icon = battery_icon;
|
||||
} else {
|
||||
power = data.ac_power;
|
||||
bat_text = "charging";
|
||||
[].forEach.call(bat_status, function(target) {
|
||||
target.classList.add('charging');
|
||||
});
|
||||
charge_icon = solar_icon;
|
||||
bat_text = "charging battery";
|
||||
}
|
||||
|
||||
for (i = 0; i < weather_data.length; i++) {
|
||||
|
|
@ -190,6 +190,7 @@ function getServerData() {
|
|||
['level', level],
|
||||
['dashboard_level', level],
|
||||
['power', power],
|
||||
['charge_icon', charge_icon],
|
||||
['charge_text', bat_text],
|
||||
['uptime', data.uptime],
|
||||
['time', data.local_time]
|
||||
|
|
@ -198,8 +199,9 @@ function getServerData() {
|
|||
document.getElementById(data_content[i][0]).innerHTML = data_content[i][1];
|
||||
}
|
||||
}
|
||||
if (document.title=="Full Server Stats"){
|
||||
if (window.location.href.indexOf('power.html') > -1) {
|
||||
populateData();
|
||||
console.log('reload stats');
|
||||
}
|
||||
};
|
||||
request.send();
|
||||
|
|
@ -210,6 +212,31 @@ document.getElementById('menu-s').addEventListener('click', function() {
|
|||
document.getElementById('menu-list').classList.toggle("show");
|
||||
});
|
||||
|
||||
//Remove TYPOGRIFY NBSP;s in headers
|
||||
var headings = document.querySelectorAll('h1');
|
||||
[].forEach.call(headings, function(target) {
|
||||
target.innerHTML = target.innerHTML.replace(/ /g, ' ');
|
||||
});
|
||||
|
||||
function populateData() {
|
||||
var stats = [];
|
||||
function pushData(arr) {
|
||||
for (i = 0; i < arr.length; i++) {
|
||||
stats.push("<dt>" + arr[i][0] + "</dt><dd>" + arr[i][1] + "</dd>");
|
||||
}
|
||||
}
|
||||
pushData(general_stats);
|
||||
if (data.ac_used == "no") {
|
||||
pushData(battery_stats);
|
||||
} else {
|
||||
pushData(solar_stats);
|
||||
}
|
||||
var dl = document.createElement('dl');
|
||||
dl.classList.add('server');
|
||||
dl.innerHTML = stats.join("");
|
||||
document.getElementById('data').appendChild(dl);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends "index.html" %}
|
||||
{% block title %}{{ category }} | {{ SITENAME }}{% endblock title %}
|
||||
{% block body_class %}
|
||||
<body class = "category-page {{category|lower|truncate(3,True, '')}}">
|
||||
{% endblock body_class %}
|
||||
|
|
@ -24,7 +25,7 @@
|
|||
<div class="featured-img" style="background-image: url('{{ SITEURL }}{{ article.featured_image }}')">
|
||||
</div>
|
||||
{% endif %}
|
||||
<h2 class="entry-title">{{ article.title }}</h2></a>
|
||||
<h2 class="entry-title">{{ article.title }}</h2></a>
|
||||
{% if article.summary %}
|
||||
<p class="index-summary">{{ article.summary }}</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
{% extends "base.html" %} {% block body_class %}
|
||||
|
||||
{% extends "base.html" %}
|
||||
{% block body_class %}
|
||||
<body class="index{{ articles_page.number }}">
|
||||
{% endblock body_class %} {% block content %}
|
||||
{% endblock body_class %}
|
||||
{% block content %}
|
||||
<section id="content">
|
||||
{% block content_title %}{% endblock %}
|
||||
<ul class="cols cover {{articles_page.object_list[0].category|lower|truncate(3,True, '')}}">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% extends "base.html" %}
|
||||
{% block title %}{{ page.title }}{%endblock%}
|
||||
{% block title %}{{ page.title }} | {{ SITENAME }}{% endblock title %}
|
||||
{% block content %}
|
||||
<section id="content" class="page">
|
||||
<header>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue