varia/homebrewserver.club
14
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

added support for markdown attr_lists to add classes to images

Browse Source
This commit is contained in:
rra 2019-08-17 00:00:56 +02:00
parent 56cacd01c3
commit 3d0a328839
4 changed files with 24 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/fundamentals/hardware.md
View File

@ -31,7 +31,7 @@ In general there are a few things you want to take in consideration when determi
All computers use power, but some use more than others. The function of the server is to be on-line and on the network 24/7 ([although that is not always necessary](https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html)). That means power usage is an important consideration, not only because it will cost you money but also because it will have an environmental impact.
![]({attach}images/dontturnoffthisisaserv.svg)
![]({attach}images/dontturnoffthisisaserv.svg){: class="img-right"}
You can get an approximation of power usage of a machine by looking at the power rating on the power supply or AC adapter. This value is usually expressed in Watt (or W). That number represents the theoretical *maximum* draw of that system, it might use less but not more. The laptop this article is written on is rated 65W but average consumption is about 10W

8
content/lowtech/solarlowtech.md
View File

@ -39,21 +39,21 @@ You can find the source code for 'solar', the Pelican theme we developed [here](
One of the main challenges was to reduce the overall size of the website. Particularly to try and reduce the size of each page to something less than 1MB . Since a large part of both the appeal and the weight of the magazine comes from the fact it is richly illustrated, this presented us with a particular challenge.
![Image from the blog showing 19th century telephone switchboard operators, 159.5KB]({attach}images/international-switchboard.jpg)Image from the blog showing 20th century telephone switchboard operators([original source](https://commons.wikimedia.org/wiki/File:Bell_System_switchboard.jpg)), 159.5KB
![Image from the blog showing 19th century telephone switchboard operators, 159.5KB]({attach}images/international-switchboard.jpg){: class="img-center"}Image from the blog showing 20th century telephone switchboard operators([original source](https://commons.wikimedia.org/wiki/File:Bell_System_switchboard.jpg)), 159.5KB
In order to reduce the size of the images, without diminishing their role in the design and the blog itself, we reverted to a technique called dithering:
![The same image but dithered with a 3 color palette]({attach}images/international-switchboard3.png)The same image but dithered with a 3 color palette, 36.5KB
![The same image but dithered with a 3 color palette]({attach}images/international-switchboard3.png){: class="img-center"}The same image but dithered with a 3 color palette, 36.5KB
This is a technique 'to create the illusion of "color depth" in images with a limited color palette'[^illusion]. It based on the print reproduction technique called [halftoning](https://en.wikipedia.org/wiki/Halftone). Dithering, or digital half-toning[^digitalhalftone], was widely used in video games and pixel art at a time when a limited amount of video memory constrained the available colors. In essence dithering relies on optical illusions to simulate more colors. These optical illusions are broken however by the distinct and visible patterns that the dithering algorithms generate.
![Dithered with a six tone palette]({attach}images/international-switchboard6.png)Dithered with a six tone palette, 76KB
![Dithered with a six tone palette]({attach}images/international-switchboard6.png){: class="img-center"}Dithered with a six tone palette, 76KB
As a consequence most of the effort and literature on dithering is around limiting the 'banding' or visual artifacts by employing increasingly complex dithering algorithms[^dithering].
Our design instead celebrates the visible patterns introduced by the technique, this to stress the fact that it is a 'different' website. Coincidentally, the 'Bayesian Ordered Dithering' algorithm that we use not only introduces these distinct visible patterns, but it is also quite a simple and fast algorithm.
![Dithered with an eleven tone color palette]({attach}images/international-switchboard11.png)Dithered with an eleven tone palette, 110KB
![Dithered with an eleven tone color palette]({attach}images/international-switchboard11.png){: class="img-center"}Dithered with an eleven tone palette, 110KB
We chose dithering not only for the compression but also for the aesthetic and reading experience. Converting the images to grayscale and then dithering them allows us to scale them in a visually attractive way to 100% of the view port, despite their small sizes. This gives each article a visual consistency and provides the reader with pauses in the long articles.

3
pelicanconf.py
View File

@ -41,7 +41,8 @@ MARKDOWN = {'extensions':
['markdown.extensions.codehilite',
'markdown.extensions.extra',
'markdown.extensions.smarty',
'markdown.extensions.toc'],
'markdown.extensions.toc',
'markdown.extensions.attr_list'],
'extension_configs':
{'markdown.extensions.toc':{
'title':'Table Of Contents'}

19
themes/homebrewtheme/static/css/main.css
View File

@ -305,8 +305,23 @@ code {
}
.entry-content img{
max-height:100%;
max-width: 100%;
max-height:600px;
max-width: 30%;
float:left;
margin:2em;
}
img.img-center {
max-width: 100%;
float:none;
}
img.img-left {
float:left;
}
img.img-right {
float:right;
}
.entry-content ul{