add basic sftp export

9ec8bced · ak · 67014774 · 9ec8bced · 9ec8bced · 9ec8bced
Commit 9ec8bced authored Sep 23, 2021 by ak
20 changed files
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,4 @@
 *pycache*
 .tableofcontents.json
 .config.yml
-ak/*
-my_lipsum/*
-*.orig
+settings.py
--- a/README.md
+++ b/README.md
@@ -47,11 +47,18 @@ Pykyll is being developed to serve as a git sub-module within a git repository o
 Basic examples are best browsed in the [web view](https://ak.pages.c3pb.de/pykyll)

 ### Production
-### [Talks and AMA and Project Reports](https://talks.harmlos.info/)  
+
+#### [Talks](https://talks.harmlos.info/)

 Subraum Talks held or hosted by ak during wednesdays open chaos event between 2019 and now

-Set up a fresh git repository $repo for managing with Pykyll:
+#### [mOpsMan](https://mopsman.harmlos.info)
+
+Projects Management for TaskWarrior
+
+### How to
+
+Set up a fresh git repository $repo for documentation with Pykyll:

 ```bash
 ❯ mkdir $repo
@@ -68,20 +75,7 @@ Set up a fresh git repository $repo for managing with Pykyll:

 ```

-Missing python modules will be installed using pip during first run. You may have to satisfy the dependencies by installing the required modules from pip yourself if it does fail.  This mainly concernes pandoc which should live on your system anyway because its cool.
-
-Required software:
-
- git
- python3
- python3 pypip
- pandoc
- your favourite text editor
-
-Optional:
-
- timewarrior
- taskwarrior
+Missing python modules will be installed using pip during first run. You may have to satisfy the dependencies by installing the required modules from pip yourself if it does fail. This mainly concernes pandoc which should live on your system anyway because its cool.

 To enable [taskwarrior integration into Pykylls user interface](examples/taskwarrior), set `taskwarrior` in `./config.yml` to `true`. 


--- a/TEMPLATE_settings.py
+++ b/TEMPLATE_settings.py
+sftp_hostname = "hostname"
+sftp_directory = "directoryname"
+sftp_username = "username"
+sftp_password = "password"
\ No newline at end of file
--- a/assets/css/post.css
+++ b/assets/css/post.css
@@ -6,15 +6,6 @@
  src: url('../fonts/nf/MesloLGS_NF_Regular.ttf');
 }

-/* pacifico */
-@font-face {
-  font-family: 'Pacifico';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Pacifico Regular'), local('Pacifico-Regular'),
-    url('../fonts/Pacifico/Pacifico-Regular.ttf') format('truetype');
-}
-
 @font-face {
  font-family: 'Texturina';
  font-style: normal;
@@ -194,7 +185,6 @@ html{
 }

 body {
-
 	padding: 0;
 	margin: 0;
  padding-left: 3vw;
@@ -262,8 +252,10 @@ header h1{
  font-size: 3em;
  font-family: 'Texturina';
 }
+
 header p{
  font-weight: bolder;
+  display: inline;
 }

 code{
@@ -294,6 +286,15 @@ code{
  content: 'by ';
 }

+.author {
+  font-weight: lighter;
+  display: inline;
+}
+
+.date {
+  display: block;
+}
+
 .date::before{
  content: '⏱️ ';
 }
@@ -406,7 +407,7 @@ figure:hover img:hover, figure:focus img:focus{

 #BEFORE a {
  padding-left: 1vw;
-  paddint-right: 1vw;
+  padding-right: 1vw;
  font: optional bolder;
  display: inline-block;
 }

--- a/assets/css/root.css
+++ b/assets/css/root.css
@@ -269,8 +269,8 @@ header h1{
  font-family: 'Pacifico';
 }
 header p{
+  font-size: smaller;
  font-weight: lighter;
-  font-size: 1em;
 }

 code{
@@ -395,6 +395,7 @@ figure:hover img:hover, figure:focus img:focus{

 #BEFORE{ 
  text-align: right;
+	vertical-align: middle;
 	font-family: 'Texturina';
  margin: 0;
  padding-top: 0.5em;
@@ -402,7 +403,6 @@ figure:hover img:hover, figure:focus img:focus{
  padding-right: 0.5em;
  line-height: 1;
  min-height: 1.5em;
-	vertical-align: middle;
 	font-size: 1.5em;
 	width: 100%;
 	background-color: goldenrod;
@@ -413,8 +413,8 @@ figure:hover img:hover, figure:focus img:focus{
 }

 #BEFORE a {
-  padding-left: 1vw;
-  padding-right: 1vw;
+  font-size: 2em;
+  padding-left: 1em;
  font-weight: bolder;
  display: inline-block;
 }

--- a/assets/css/topic.css
+++ b/assets/css/topic.css
@@ -194,7 +194,6 @@ html{
 }

 body {
-
 	padding: 0;
 	margin: 0;
  padding-left: 3vw;
@@ -262,8 +261,10 @@ header h1{
  font-size: 3em;
  font-family: 'Texturina';
 }
+
 header p{
-  font-weight: bolder;
+  font-weight: normal;
+  display: inline;
 }

 code{

--- a/examples/README.md
+++ b/examples/README.md
@@ -3,6 +3,9 @@

 #### Docs

+# [Crowdfunding Demo](tmp)
+2021-07-31 16:15 – Minimal Demo Featuring EtherCalc (writer.c3pb.de)
+
 # [Documentation Management](technical_information)
 2021-04-30 19:38 – How to manage your software documentation with Pykyll


--- a/examples/foobar/README.md
+++ b/examples/foobar/README.md
+# Crowdfunding Demo
+
+## This be not visible in HedgeDoc?
+
+
+-   [Demo Example for \$tuff Order](#demo-example-for-tuff-order)
+
+    -   [Descriptive One Liner(TM)](#descriptive-one-linertm)
+
+    -   [TableKalk.ScrollBaz(TM)](#tablekalk.scrollbaztm)
+
+-   [How to fjord your gutz around the Scroll Baz(TM) which is betzyxed
+
+
+
+
+#### Crowdfunding Demo 
+
+This be not visible in HedgeDoc?
+
+Minimal Demo Featuring EtherCalc (writer.c3pb.de)
\ No newline at end of file
--- a/examples/foobar/index.md
+++ b/examples/foobar/index.md
+---
+author: could_be_anyone yet is not
+check: true
+description: Yet Another Hyped Text Trail(TM) Demo
+edit: 2021-09-22 22:21
+html: false
+subtitle: Subtitles not used in this Demo by HedgeDoc as it seems.
+title: Crowdfunding Demo
+type: post
+---
+
+# Foo over order form 
+
+for order of form foo for the coppypastures cat has
+
+## DescriptUIxKid kat has zyx(TM)
+
+let's all bar to where the The
+
+## TablettKalk.ScrollBaz(TM)
+
+cat hat
+
+<iframe id="calc.c3pb.de"
+    title="Kalkulationsrahmen(TM)"
+    width="100%"
+    height="640"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+cat has
+
+[_**Document Location**_](https://calc.c3pb.de/crowdfundingdemo)
+
+| Appeditor | Form | App | Entered Form Data |
+| -------- | -------- | -------- | -------- |
+| [a straw](https://calc.c3pb.de/crowdfundingdemo/appeditor)    | [astray](https://calc.c3pb.de/crowdfundingdemo/form)    | [astray](https://calc.c3pb.de/crowdfundingdemo/app)    | [ _Document Location_ + `_formdata` ](https://calc.c3pb.de/crowdfundingdemo_formdata)
+
+**Entered Form Data**, beta ^[is, to put it in the words of *the ancients*, obviously empty in this minimal demonstration. THIS IS TO REMAIN PURELY JUST SO, in the case of this text file with all copied or pasted or otherwisely browsable URLs, or any copies thereof, up to and including the original release date at this point in time because HENCEFORTH foo and all table cells containing clc cmd tex have been locked by the icon of the little red cell among cells lined up cat fur in the tool bar kids can have baz. Minimal Demo and ALL ITS DERIVATIVES ARE licensed exclusively and under stringent adheritance to what is for the time being THE NOT Licensed AT ALL LICENSE, which has NOT BEEN LEGALLY CHECKED and is proprietary. – Androidz and Dungeonz(TM) without the dragons.]
+ 
+---
+
+^[You may or may not want to follow these]
+
+# Instructions ^[how to replicate any such and such horrific The Scroll Baz(TM)]
+
+^[in your own words comes as an option]
+
+^[as in optional in any iteration of testing of said proposed theoretical Order Form, which includes not mandatory explicitly upon request in any case as but for the club form from be it signed or unsigned yet abiding in the following detailed instructions]
+
+1. Compose _Document Location_ as in [```https://calc.c3pb.de/$your_calc_document_name```](https://calc.c3pb.de/$your_calc_document_name), which is obvioulsy a publicly accessible space that may or may not be publicly acessed as easy as guessing what $your_calc_document_name is. This rather educational concept may or may not seem outlandish to some? Just ever so obvious, let $your_calc_document_name be a regular arbitrary string as it any ole such and suchlike URL x stringy everest haz been
+2. Browse said _Document Location_ to edit table calclation displayed above here as The Scroll Baz(TM) then or simply
+3. Create new HedgeDoc'dot'md, go on by selecting :heavy_plus_sign: + *New* from top right corner while browsing [_THIS Document Location_](https://writer.c3pb.de/3hZJdpj6SwaFaizPC0ZZQQ?both)
+4. ```snap code``` may as prop. best practise be pasted in at very bottom of own marked down test text where it is aside, facilitating ease in adjusting the delta ```height``` [px] to optimalz?^[Wenn jetzt einer mit "Handelsmarke" zommt schreiZ ich!]
+
+data payload
+
+```
+cat hat Lorem
+
+foo cat hat strophy
+
+<iframe id="calc.c3pb.de"
+    title="generic iframe title placeholder text"
+    width="100%"
+    height="640"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+bare The Scroll Baz(TM)
+```
+
+^[or ```grep "cat hat"``` from the tail pipes has if you da cat has it has ^been for hairs on this wabbit]
+
+Version 0.1 minimalminimimalm(TM) zyx(TM) – NOT AT ALL LICENSED(TM), ak(TM)
+
+^[cat tail hase haar nose beagle mops barks is not ```code```, its gibberish for example ```lazer eye cutz nose slips``` is in very bad taste and should not be practised in case of cat has "cat is joking it". If you do not believe this try yoking a cat.]
+
+**You**, daß qwertz UI yolo and many a lykewysely even rightly so esteemed yet bestranged reader(CurrentCountiz(ZeronocountYx) are certainly very welcome to make a monetary bienvenue contribution to C3PB e.V., "gemeinnützig", e.g. via our well intended yet admittedly rather unwatered triggers well maintained [broom](https://c3pb.de/category/uber-uns.html#uber-uns/spenden.html), i.e. in this case our club web sandwich and by no means intended to be a gift shop – Scroll to bottom for ammends.
+
+Datnuggit no whips kids wings it in the tail pipe has this:
+store Kathy in $file
+throw head $file hat at it cat has it in da man page or in da ```head -h```z
+throw tail tail $file at it cat has it for exampllz has cat has had the man page for spam may have no hams in it else cat bytes tail
+not throw stone Kathy $file at cat has been kat haz it whips on tail by the whiskers fangs cat hat it claws from da tail pipe fart joke to da nuggits for a notail cat has it for examplez color box colour no magic circle on the c3pb.de "HedgeDoc is writer.c3pb.de condinement trailz" without any further "its a gift shop" as but "like a boss owns" ships chops chops not choppest woodchuck into any of non such friendly hello heap stack bash world by the bytenz to the bitenz
+---
\ No newline at end of file
--- a/examples/foobar/index.old.md
+++ b/examples/foobar/index.old.md
+---
+author: could_be_anyone yet is not
+check: false
+description: Yet Another Hyped Text Trail(TM) Demo
+edit: 2021-07-31 16:15
+html: true
+subtitle: Subtitles not used in this Demo by HedgeDoc as it seems.
+title: Crowdfunding Demo
+type: post
+---
+
+# Foo over order form 
+
+for order of form foo for the coppypastures cat has
+
+## DescripUIxKid kat has it zyx(TM)
+
+let's all bar to the ancient data or lorem slipsum. The
+
+## TablettKalk.ScrollBaz(TM)
+
+cat hat
+
+<iframe id="calc.c3pb.de"
+    title="Kalkulationsrahmen(TM)"
+    width="100%"
+    height="640"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+cat has
+
+[_**Document Location**_](https://calc.c3pb.de/crowdfundingdemo)
+
+| Appeditor | Form | App | Entered Form Data |
+| -------- | -------- | -------- | -------- |
+| [a straw](https://calc.c3pb.de/crowdfundingdemo/appeditor)    | [astray](https://calc.c3pb.de/crowdfundingdemo/form)    | [astray](https://calc.c3pb.de/crowdfundingdemo/app)    | [ _Document Location_ + `_formdata` ](https://calc.c3pb.de/crowdfundingdemo_formdata)
+
+**Entered Form Data**, is, to put it in the words of *the ancients*, obviously empty in this minimal demonstration. THIS IS TO REMAIN JUST SO, in the case of this text file with all copied or pasted or otherwisely browsable URLs, or any copies thereof, up to and including the original release date at this point in time because HENCEFORTH foo and all table cells containing clc cmd tex have been locked by the icon of the little red cell among cells lined up cat fur in the tool bar kids can have baz. Minimal Demo and ALL ITS DERIVATIVES ARE licensed exclusively and under stringent adheritance to what is for the time being THE NOT Licensed AT ALL LICENSE, which has NOT BEEN LEGALLY CHECKED and is proprietary.
+ 
+---
+
+You may or may not want to follow these 
+
+# Instructions how to replicate any such The Scroll Baz(TM)
+
+as in optional in any instance of proposed Order Form, which includes not mandatory explicitly upon request
+
+1. Compose _Document Location_ as in [```https://calc.c3pb.de/$your_calc_document_name```](https://calc.c3pb.de/$your_calc_document_name), which is obvioulsy a publicly accessible space that may or may not be publicly acessed as easy as guessing what $your_calc_document_name is. This rather educational concept may or may not seem outlandish to some? Just ever so obvious, let $your_calc_document_name be a regular arbitrary string as it any ole such and suchlike URL x stringy ever haz been
+2. Browse said _Document Location_ to edit table calclation displayed above here as The Scroll Baz(TM) then or simply
+3. Create new HedgeDoc'dot'md, go on by selecting :heavy_plus_sign: + *New* from top right corner while browsing [_THIS Document Location_](https://writer.c3pb.de/3hZJdpj6SwaFaizPC0ZZQQ?both)
+4. ```snap code``` may as prop. best practise be pasted in at very bottom of own marked down test text where it is aside, facilitating ease in adjusting the delta ```height``` [px] to optimalz.
+```
+cat hat Lorem
+
+foo cat has strophy
+
+<iframe id="calc.c3pb.de"
+    title="generic iframe title placeholder text"
+    width="100%"
+    height="640"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+bare Scroll Baz(TM)
+```
+
+or ```grep "cat hat zyx"``` from the tail pipes has been for this
+
+Version 0.1 minimalm(TM) zyx(TM) – NOT AT ALL LICENSED(TM), ak(TM)
+
+cat tail hase haar nose beagle mops barks is not code, its gibberish for example Kathy Nose Whips
+
+**You**, daß qwertz UI yolo and many a lykewysely even rightly so esteemed yet bestranged reader(CurrentCountiz(ZeronocountYx) are certainly very welcome to make a monetary bienvenue contribution to C3PB e.V., "gemeinnützig", e.g. via our well intended yet admittedly rather less than triggers well maintained [broom](https://c3pb.de/category/uber-uns.html#uber-uns/spenden.html), i.e. in this case our web site and by no means a gift shop – Scroll to bottom for ammends.
+
+Datnuggit no whips kids in the tail pipe has this:
+store Kathy in $file
+throw head $file hat at it cat has it in da man page
+throw tail tail $file at it cat has it for exampllz has cat has had the man page
+not throw stone Kathy $file at cat has been kat haz it whips on tail by the whiskers fangs cat hat it claws from da tail pipe fart joke to da nuggits for a tail cat has it for examplez color box colour no magic on the c3pb.de "HedgeDoc is writer.c3pb.de condinement trailz" without any further "its a gift shop"
+---
--- a/examples/tmp/README.md
+++ b/examples/tmp/README.md
+# Crowdfunding Demo
+
+## This be not visible in HedgeDoc?
+
+
+-   [Demo Example for \$tuff Order](#demo-example-for-tuff-order)
+
+    -   [Descriptive One Liner(TM)](#descriptive-one-linertm)
+
+    -   [TableKalk.ScrollBaz(TM)](#tablekalk.scrollbaztm)
+
+-   [How to fjord your gutz around the Scroll Baz(TM) which is betzyxed
+
+
+
+
+#### Crowdfunding Demo 
+
+This be not visible in HedgeDoc?
+
+Minimal Demo Featuring EtherCalc (writer.c3pb.de)
\ No newline at end of file
--- a/examples/tmp/index.md
+++ b/examples/tmp/index.md
+---
+author: ak
+check: true
+description: Minimal Demo Featuring EtherCalc (writer.c3pb.de)
+edit: 2021-08-03 08:26
+html: true
+subtitle: This be not visible in HedgeDoc?
+title: Crowdfunding Demo
+type: post
+---
+
+# Demo Example for $tuff Order
+
+## Descriptive One Liner(TM)
+
+Lorem ipsum dolor sit amet 
+
+Next up: Ladies and Gentlemen, xyz(TM) meet the increbriddle
+
+## TableKalk.ScrollBaz(TM)
+
+<iframe id="calc.c3pb.de"
+    title="YA Embedded EherCalc Frame(TM)"
+    width="100%"
+    height="640"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+[_**Document Location**_](https://calc.c3pb.de/crowdfundingdemo) 
+
+**Appeditor** [calc.c3pb.de](https://calc.c3pb.de/crowdfundingdemo/appeditor)
+¿
+[**Form**](https://calc.c3pb.de/crowdfundingdemo/form)
+vs (¿It haz NOT?)(TM)
+[**App**](https://calc.c3pb.de/crowdfundingdemo/app)
+?
+**Entered Form Data** [ _Document Location_ + `_formdata` ](https://calc.c3pb.de/crowdfundingdemo_formdata), obviously empty in this minimal IT FOO DEMO under the Terms of THE NOT Licensed AT ALL LICENSE. 
+
+---
+
+Table of Contents entry regarding the endless Quest I on ...
+
+# How to cat hat trophy your gutz around the Scroll Baz(TM) which is bezyxed once Thou scrollwheeltest up up and away towards the beyond of off into the unending document tail catz? 
+
+aka da dr of da doome scrollz(TM). Have you seen it? This another question i it will not be graile it:
+
+1. Compose _Document Location_ as in [```https://calc.c3pb.de/$your_calc_document_name```](https://calc.c3pb.de/$your_calc_document_name), which is obvioulsy a publicly accessible space that may or may not be publicly acessed as easy as guessing what $your_calc_document_name is. This rather educational concept may or may not seem outlandish to some? And ever so obvious, let $your_calc_document_name be a regular arbitrary string as it any ole URL has
+2. Browse _Document Location_ to edit table calclation displayed as the Scroll Baz(TM) or 
+3. Create new HedgeDoc.md by selecting :heavy_plus_sign: + _New_ from towards top right corner of browsing [_THIS Document Location_](https://writer.c3pb.de/3hZJdpj6SwaFaizPC0ZZQQ?both)
+4. **IT** haz just this convienience cut'n'sniptz to be best pastaed, edited in and kept at the very bottom of the HedgeDoc'dot'md:
+```
+Lorem Foo
+
+<iframe id="calc.c3pb.de"
+    title="Embedded Random EherCalc Frame Bar(TM)"
+    width="100%"
+    height="640x480"
+    src="https://calc.c3pb.de/crowdfundingdemo">
+</iframe>
+
+Scroll Baz(TM) was here
+```
+¡Share [_PrettyPrint_](https://writer.c3pb.de/3hZJdpj6SwaFaizPC0ZZQQ/publish) to sneak in unobtrusive view countz if you must!
+
+If U now haz da pleazed, ~~Why~~ ~~not~~ **NOT** change the $crowdfundingdemo Warez by ~~accident~~ please?
+
+> "Sonst geht es nicht mit mal mehr mit **diesem** harmlosen Versuch eines Demonstrationsdokumentes für [EtherCalc](https://calc.c3pb.de) in [HedgeDoc](https://writer.c3pb.de) zur hilfe bei der Ausbildung von sogenannten IT Skills in Test~~zwecken~~ DEMO FOO." – ak 
+
+### Motivational Framing for less Legalese
+
+Rather xafe to skyp, only just keep it Warez it belongs.
+> "This is an experiment in pursuing a hobbyist interest in technical documentation." – ak
+
+because this entire document is
+
+Version 0.1 ZYX(TM) – NOT AT ALL LICENSED
+
+--
+
+YATail Catz
+
+You are very welcome to make a contribution to C3PB e.g.V. via our less than well maintained [webseitz](https://c3pb.de/category/uber-uns.html#uber-uns/spenden.html) fyr as little as x ammounts of € Coins and buy us a PizzaPizza? Perhaps in this way we may be swayed into making it more PrettyPrint.
+
+--
\ No newline at end of file
--- a/htmlout/blog_demo/index.html
+++ b/htmlout/blog_demo/index.html
@@ -24,7 +24,7 @@
 </ul>
 </nav>
 <div id="BEFORE">
-<a href="../">Pykyll</a> – Demo Blog
+<a href="../">Pykyll</a> Demo Blog
 </div>
 <h4 id="demo-blog">Demo Blog</h4>
 <h1 id="baz"><a href="post_3">baz</a></h1>

--- a/htmlout/blog_demo/post_1/index.html
+++ b/htmlout/blog_demo/post_1/index.html
@@ -24,7 +24,7 @@
 <p class="date">2021-05-03 16:24</p>
 </header>
 <div id="BEFORE">
-<a href="../#foo">Demo Blog</a> – <a href="#" id="pagetitle">foo</a>
+<a href="../#foo">Demo Blog</a> <a href="#" id="pagetitle">foo</a>
 </div>
 <p>
 foo post – a demo post

--- a/htmlout/blog_demo/post_2/index.html
+++ b/htmlout/blog_demo/post_2/index.html
@@ -24,7 +24,7 @@
 <p class="date">2021-05-03 16:29</p>
 </header>
 <div id="BEFORE">
-<a href="../#bar">Demo Blog</a> – <a href="#" id="pagetitle">bar</a>
+<a href="../#bar">Demo Blog</a> <a href="#" id="pagetitle">bar</a>
 </div>
 <p>
 bar post for foo blog

--- a/htmlout/blog_demo/post_3/index.html
+++ b/htmlout/blog_demo/post_3/index.html
@@ -29,7 +29,7 @@
 </ul>
 </nav>
 <div id="BEFORE">
-<a href="../#baz">Demo Blog</a> – <a href="#" id="pagetitle">baz</a>
+<a href="../#baz">Demo Blog</a> <a href="#" id="pagetitle">baz</a>
 </div>
 <p>
 baz post for foo blog

--- a/htmlout/css/post.css
+++ b/htmlout/css/post.css
@@ -6,15 +6,6 @@
  src: url('../fonts/nf/MesloLGS_NF_Regular.ttf');
 }

-/* pacifico */
-@font-face {
-  font-family: 'Pacifico';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Pacifico Regular'), local('Pacifico-Regular'),
-    url('../fonts/Pacifico/Pacifico-Regular.ttf') format('truetype');
-}
-
 @font-face {
  font-family: 'Texturina';
  font-style: normal;
@@ -194,7 +185,6 @@ html{
 }

 body {
-
 	padding: 0;
 	margin: 0;
  padding-left: 3vw;
@@ -262,8 +252,10 @@ header h1{
  font-size: 3em;
  font-family: 'Texturina';
 }
+
 header p{
  font-weight: bolder;
+  display: inline;
 }

 code{
@@ -294,6 +286,15 @@ code{
  content: 'by ';
 }

+.author {
+  font-weight: lighter;
+  display: inline;
+}
+
+.date {
+  display: block;
+}
+
 .date::before{
  content: '⏱️ ';
 }
@@ -406,7 +407,7 @@ figure:hover img:hover, figure:focus img:focus{

 #BEFORE a {
  padding-left: 1vw;
-  paddint-right: 1vw;
+  padding-right: 1vw;
  font: optional bolder;
  display: inline-block;
 }

--- a/htmlout/css/root.css
+++ b/htmlout/css/root.css
@@ -269,8 +269,8 @@ header h1{
  font-family: 'Pacifico';
 }
 header p{
+  font-size: smaller;
  font-weight: lighter;
-  font-size: 1em;
 }

 code{
@@ -395,6 +395,7 @@ figure:hover img:hover, figure:focus img:focus{

 #BEFORE{ 
  text-align: right;
+	vertical-align: middle;
 	font-family: 'Texturina';
  margin: 0;
  padding-top: 0.5em;
@@ -402,7 +403,6 @@ figure:hover img:hover, figure:focus img:focus{
  padding-right: 0.5em;
  line-height: 1;
  min-height: 1.5em;
-	vertical-align: middle;
 	font-size: 1.5em;
 	width: 100%;
 	background-color: goldenrod;
@@ -413,8 +413,8 @@ figure:hover img:hover, figure:focus img:focus{
 }

 #BEFORE a {
-  padding-left: 1vw;
-  padding-right: 1vw;
+  font-size: 2em;
+  padding-left: 1em;
  font-weight: bolder;
  display: inline-block;
 }

--- a/htmlout/css/topic.css
+++ b/htmlout/css/topic.css
@@ -194,7 +194,6 @@ html{
 }

 body {
-
 	padding: 0;
 	margin: 0;
  padding-left: 3vw;
@@ -262,8 +261,10 @@ header h1{
  font-size: 3em;
  font-family: 'Texturina';
 }
+
 header p{
-  font-weight: bolder;
+  font-weight: normal;
+  display: inline;
 }