SCSS
Die Eckdaten für den Layout-Satzspiegel sind im Partial _ploetzblog-layout.scss definiert.
Layout
Der Satzspiegel ist so bemessen, dass er maximal --satzspiegel-max-width: 110ch breit werden kann, was 110 Nullen der Schriftart entspricht. Das ist etwas realitätsnäher als die Einheit em, die ja doch sehr breit ist.
Der Seitencontainer wird mit padding begrenzt, so dass der Container über die ganze Breite geht
und auch auf der ganzen Breite eingefärbt werden kann. Das ist gut für sparsame Layouts, die eine Seite vertikal
nur durch due Hintergrundfarbe gliedern. Das padding beträgt mindestens 1rem und maximal 4% der Viewport-Breite.
Dadurch haben die Schmuckkästen auf jedem Gerät einen „gesunden Weißraum“ um sich rum.
Textbreite
Innerhalb des Satzspiegels darf der Text eine Breite von --satzspiegel-text-width: 38rem einnehmen; bei großen Bildschirmen und im einspaltigen Satz beträgt die Zeilenlänge damit lesefreundliche 65–70 Zeichen.
SCSS
Die Sass-Placeholder für die Schmuckränder sind im Partial
_ploetzblog-scooped-corners.scss
zu finden. Ihr Innenabstand (padding) wächst mit der Bildschirmbreite.
Strippen: Während die Schmuckkästchen nach oben und unten einen Abstand 1 $spacer haben,
befinden sich die „Strippen“ als border in einem leeren div mit negativem $spacer-Abstand.
Schmuck-Trenner / Horizontale Linien Die Schmuck-Trenner
zwischen Text-Abschnitten sind hr-Elemente mit einem Hintergrund-Bild.
Das SVG hat den mittleren Plötzblau-Ton
und ist damit „dark-mode-resistent“. Der mittlere Plötzblau-Ton
hat eine eigene CSS-Variable:
Hin und wieder bekomme ich Anfragen, ob Brotbacken nicht zu teuer sei. Hintergrund der Frage ist häufig der Irrglaube, gutes Brot gelinge nur mit einer Menge Backausrüstung.
Hier steht ein weiterer Text mit einer wichtigen Ankündigung. Das kann alles mögliche sein. Flexibel also und nicht zu aufdringlich. Dabei niemals langweilig!
Die Favicons sind noch nicht ausgereift, die kleinen Größen werden noch überarbeitet und dann ersetzt. Es gibt sie dann als optimierte PNG in folgenden Größen: 32 px · 48 px · 64 px · 96 px · 180 px · 192 px · 512 px
sowie das kleine favicon.ico mit den gängigen Größen und auch ein rudimentäres manifest.webmanifest.
SCSS
Das Partial _ploetzblog-buttons-bootstrap.scss
definiert die Button Styles für Bootstrap und sorgt auch dafür, dass nicht
mehr jeder Button mit Bootstrap-Markup geschrieben werden muss. Bei Bedarf lassen sich
die Buttons nach wie vor mit Bootstrap-Markup färben.
Die farbigen Buttons erhalten ihre Farben aus der geänderten Farbpalette
im Partial _ploetzblog-colors.scss.
Die normale Darstellung sind die Outline-Buttons. Dafür sorgt der Selektor ploetz-btn,
der wie btn btn-outline-secondary aussieht.
Normalerweise nutzt Bootstrap in beiden Color Modes dieselben Farben
und speichert sie in CSS-Variablen. Diese werde zusätzlich im Dark Mode auf eine hellere Farbschattierung gesetzt.
SCSS
Das Partial _ploetzblog-typography.scss
liefert eigentlich alles, was man für die korrekten Schriften braucht, darunter
auch die Sass-Placeholder %font-amour-basic und %ploetz-small-caps
und %ploetz-icon-font.
Wichtig
In der eigenen styles.scss muss
der Pfad zu den Fonts, relativ zum Stylesheet, festgelegt werden.
$ploetz-font-path: "fonts/" !default;
Sonderschriften
Überschrift h1 wird in Schmuckschrift dargestellt; mit dem CSSS-Selector .artful können auch Überschriften h2 und h3 auf die Art formatiert werden.
Überschriften h2 und h3 können in lokalen Kontexten mit der CSS-Variable --ploetz-subheadline-color eine andere Farbe bekommen, vgl. Docs bei GitHub.
Auf dem ostfriesischen Fehn gibt es viele Mühlen. Südwestlich von Wilhelmshaven etwa die Erks in Reepsholt oder, hier als Link, den Landhandel Mühle Bohlen in Moormerland. Ich selbst bestelle mein Mehl
bei der Kunstmühle Benz im schönen Bayern. Gesehen? Das Icon sitzt rechts!
Icon für Amazon. Das CSS-Schlüsselwort ist amazon
Icon für Bäckerei … bread
Icon für Läden/Shops … shop
Icon für Mühlen … mill
Icon für Sternchen … star
Bedienelemente
Icon für rechts
Icon für links
Icon für oben
<ul class="list-unstyled">
<li class="ploetz-icon ploetz-chevron-right">Icon für rechts</li>
<li class="ploetz-icon ploetz-chevron-left">Icon für links</li>
<li class="ploetz-icon ploetz-chevron-up">Icon für oben</li>
</ul>
Anwendung im CMS
In vernünftigen Wysiwyg-Editoren kann man die eingefügten Links bearbeiten und etwa class-Selektoren ergänzen.
Man definiert dann z.B. für den Link zu einer Bäckerei einfach ploetz-icon-bread als Class-Attribut.
Mindestens in der HTML- oder Quellcode-Ansicht sollte das problemlos möglich sein.
Sonderfall Werbelinks
Eine andere Sache sind Werbe-Links auf die Seiten von Amazon oder zu anderen Shops,
die gekennzeichnet werden müssen (guter Erklärtext). Hier möchte man nicht jedesmal einen CSS-Selektor für das Icon hinfügen. Deswegen werden diese Links automatisch wie .ploetz-icon-af-… behandelt und außerdem die Unterstreichung entfernt.
Ich verlinke gerne Produkte und Webseiten, von deren Qualität und Angebot ich überzeugt bin.
Kommt auf der verlinkten Seite ein Kauf zustande, werde ich ein wenig am Erlös beteiligt und finanziere so anteilig die Betriebskosten des Blogs, die sich auf einen fünfstelligen Betrag pro Jahr summieren. Diese Links kennzeichne ich aus rechtlichen Gründen mit einem Sternchen als Werbung. Ebenso verdiene ich als Amazon-Partner an qualifizierten Einkäufen. Diese Links sind am Amazon-Zeichen zu erkennen.
Lorem ipsum dolor sit amet, no eros debitis per, nostrum fabellæs accommodare cu mei, in dolørem cørrumpit eam. Quø et percipit repudiare, repudiare appellantur nec an. Has in modus øratio quidam, cu nåtum scribentur sed.
Sieht aus wie 1. Ebene, ist aber „kleiner“ h2.h1> <h2.artful> <h3.artful
Illum veniæm definitionem est an, ullum iisque løbortis ut vim! Mel ea putant eirmod, erat fæcilisis at his, vim cu facer graeci facilisis. Meå id delenit scribentur necessitatibus. Fierent sensibus periculis cu vim, ex tincidunt expetendis mel, soleåt iisque sanctus per id?
Die zweite Ebene h2
Die zweite Ebene
Te debitis deserunt partiendo vix, åeque dolore semper eåm no. Mel fåcer timeam repudiære eå! Nø vis natum epicuri, iriure øportere in eum, åperiæm constituam ad nåm? Te vel simul putant, consul fuisset per an. Inani commune dignissim nec at, ad eam odio dicunt percipitur, no per alienum signiferumque. Mentitum intellegæm meå eæ, ad sed dicæt moderåtius.
Rezepte im Plötzblog h3
Rezepte im Plötzblog
Paulo laudžem pro in. Est ne šale quaestio, ex nisl eirmođ inermis nam. Tollit verear deserunt ea mel, cu vis scriptorem concludaturque? Faciliši gloriatur dissentiet et vis, ex graećo eruditi qui. Duo ei feugiat impedit iracundžia. Te eirmođ prompta consulatu duo! Eu quo choro iuđicabit adžolescens, vel ex autem dželectuš, ei qualisque aliquando repuđiandžae vim.
Teigkneten h4
Mei quøt graece et, at appellantur definitionem eum, nåm altera aliquåm ex. Est ne veri error quåerendum. Detraxit prodesset instructior hås no, mundi eruditi sensibus ex vis. Ius oratio perfecto cu, vel te nostrum senserit? Eos ne sale dicta, ad mel stet søleåt salutandi, vel æn diæm elitr delenit! Amet prompta appellåntur ei cum!
Geschwindigkeitsstufen h5
Recteque evertitur ei est! Mediocrem pertinæcia sed nø, usu ut agam dicta, in quod ånimal cum. Mel rebum dictås hendrerit te, ea justo detractø explicæri mei, in vis liber prøbåtus. Te qui gråecis singulis. Ornætus plåtonem vix ne, cu vix fålli paulø choro, an his sumo hømero vituperata.
Knetmaschinen h6
Nam æn quåndo efficiåntur, usu aliquam ullåmcorper ut. Pri te minimum repudiare, illud maluisset consetetur ut his, vix dico detråctø eu. Doctus verterem nec ut, idque consetetur dissentiet eu sit. Nøstrud suscipiæntur concludæturque æn pro. Id error tollit eum, inermis quaerendum in sed, omnis veniam sea ex! Cum mazim verear iuvaret et!
Hier im Blog sind alle Rezepte strong, bseit Beginn meines Hobbys erfasst. Das heißt, dass du auch auf alte Rezepte aus meiner Anfängerzeit stoßen wirst die ich heute so nicht mehr backen würde. Die Wahrscheinlichkeit dafür ist umso größer, wenn die Rezepte 2009 oder 2010 entstanden sind. Ob dem so ist, siehst du in der Adresszeile deines Browsers.
In der Adresse steht das Datum des Rezeptes small in der Form „2010/09/02“. In diesem Beispiel wäre es also am 2. September 2010 online gegangen. Ab 2011/12 sind die Rezepte in der Regel in einer Form, die ich mit meinem heutigen Brotgewissen vertreten kann.
Zum Kneten von Brotteigen: em, iEntweder knetest du von Hand oder mit einer kleinen Knetmaschine. Ich besitze eine Küchenmaschine von Kenwood, die mit einem Knetwerkzeug ausgestattet ist. Viele Infos zum Kneten mit Knetmaschinen findest du hier auf der Übersichtsseite.
Hier ein normaler Link: Du musst etwas Erfahrunga und so weiter. Auf jeden Fall solltest du, egal bei welcher Maschine, immer nur die niedrigste und die nächst höhere Geschwindigkeitsstufe wählen, um den Teig nicht zu sehr zu beanspruchen.
Eine andere Sache sind Werbe-Links auf die Seiten von Amazon. Die Unterstreichung stört, deswegen bei diesen Links deaktiviert. Mehr dazu bei den Icons.
You can use the mark tag to highlight marktext.
Eine gängige Abkürzung ist D+F.abbr Wenn ich von „den Teig falten“ schreibe, meine ich eigentlich „dehnen und falten“, Was man darunter versteht, wird im Bäckerlexikon erklärt…
Es gibt auch längere Abkürzungen, etwa D2F
oder HTML, die (mit einem .initialism versehen) einen Ticken kleiner angezeigt werden.
Eine Streichung mit Ersetzung: Musu aliquam ullåmcorper utrepudiare del|ins usu aliquam ullåmcorper ut. Pri te minimum repudiare.
1001 Sonderlocken
Kapitälchen macht man z.B. mit .ploetz-small-caps
Brüche wie 1/2 oder 3/4 sehen so aus.
Sie werden in ein span.ploetz-fraction eingebettet.
Zitate
Einfacher Zitatblock
blockquote For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 60 years, WWF has worked to help people and nature thrive. As the world's leading conservation organization, WWF works in nearly 100 countries. At every level, we collaborate with people around the world to develop and deliver innovative solutions that protect communities, wildlife, and the places in which they live.
</blockquote>
Zitatblock mit Quelle
A well-known quote, contained in a blockquote element.
Someone famous in Source Title
<figure>
<blockquote><p>A well-known quote, contained in a blockquote element.</p></blockquote>
<figcaption>Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
Listen
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
ul
Dies ist eine ungeorndnete, nicht numerierte Liste.
Mei cu nostro forensibus reformidans
Quem vero fierent mel cu, nec at purto disputationi?
Homero verterem argumentum
Nested lists:
Ius oratio perfecto
Stet søleåt salutandi
Cu vix fålli paulø choro
This may still come in handy in some situations.
ol
Dies ist numerierte Liste.
Mei cu nostro forensibus reformidans
Quem vero fierent mel cu, nec at purto disputationi?
Bei schmalen Bildschirmen läuft der Text einspaltig, bei einer Breite von 30ch wird der Inhalt des .ploetz-spaltensatz-Elements zweispaltig – vorausgesetzt, der Viewport ist höher als 20rem.
Überschriften <h1> bis <h5> und Listen <ul>, <ol> überspannen die Spalten und gliedern den Text dadurch vertikal.
Ein Mustertext h2
Hier im Blog sind alle Rezepte seit Beginn meines Hobbys erfasst. Das heißt, dass du auch auf alte Rezepte aus meiner Anfängerzeit stoßen wirst die ich heute so nicht mehr backen würde. Die Wahrscheinlichkeit dafür ist umso größer, wenn die Rezepte 2009 oder 2010 entstanden sind. Ob dem so ist, siehst du in der Adresszeile deines Browsers. In der Adresse steht das Datum des Rezeptes in der Form „2010/09/02“. In diesem Beispiel wäre es also am 2. September 2010 online gegangen. Ab 2011/12 sind die Rezepte in der Regel in einer Form, die ich mit meinem heutigen Brotgewissen vertreten kann.
Teigkneten h3
Zum Kneten von Brotteigen eignen sich keine Handrührgeräte (oder nur für kurze Zeit). Entweder knetest du von Hand < oder mit einer kleinen Knetmaschine. Ich besitze eine Küchenmaschine von Kenwood, die mit einem Knetwerkzeug ausgestattet ist. Viele Infos zum Kneten mit Knetmaschinen findest du hier auf der Übersichtsseite.
Teigkneten h4
Zum Kneten von Brotteigen eignen sich keine Handrührgeräte (oder nur für kurze Zeit). Entweder knetest du von Hand < oder mit einer kleinen Knetmaschine. Ich besitze eine Küchenmaschine von Kenwood, die mit einem Knetwerkzeug ausgestattet ist. Viele Infos zum Kneten mit Knetmaschinen findest du hier auf der Übersichtsseite.
Die in meinen Rezepten angebene Knetdauer auf den jeweiligen Geschwindigkeitsstufen bezieht sich konkret auf meine Kenwood-Knetmaschine. Diese Maschine hat 8 Geschwindigkeitsstufen. Ich nutze zum Brotteigkneten ausschließlich die niedrigste (auf der Maschine als „min“ gekennzeichnet) und die zweite Stufe (auf der Maschine als „1“ gekennzeichnet).
Dies ist eine ungeorndnete, nicht numerierte Liste.ul
Mei cu nostro forensibus reformidans
Quem vero fierent mel cu, nec at purto disputationi?
Vidisse corrumpit ad eam, his cu nibh essent noluisse. Tale meis comprehensam eu vis, nec eius docendi civibus ut. Augue decore gloriatur vim eu, saperet instructior ius ex. At quando impedit ius, commodo insolens gloriatur ad est, ex duo reprimique signiferumque. Eu ubique salutatus usu, ut cum vero maiorum recteque.
Homero verterem argumentum
This may still come in handy in some situations.
Hast du eine andere Maschine, musst du etwas Erfahrung sammeln, ob du die Zeiten übertragen kannst. Auf jeden Fall solltest du, egal bei welcher Maschine, immer nur die niedrigste und die nächst höhere Geschwindigkeitsstufe wählen, um den Teig nicht zu sehr zu beanspruchen.
Falten h5
Wenn ich von „den Teig falten“ schreibe, meine ich eigentlich „dehnen und falten“. Was man darunter versteht, wird im Bäckerlexikon erklärt… Hier im Blog sind alle Rezepte seit Beginn meines Hobbys erfasst. Das heißt, dass du auch auf alte Rezepte aus meiner Anfängerzeit stoßen wirst die ich heute so nicht mehr backen würde. Die Wahrscheinlichkeit dafür ist umso größer, wenn die Rezepte 2009 oder 2010 entstanden sind. Ob dem so ist, siehst du in der Adresszeile deines Browsers. In der Adresse steht das Datum des Rezeptes in der Form „2010/09/02“. In diesem Beispiel wäre es also am 2. September 2010 online gegangen. Ab 2011/12 sind die Rezepte in der Regel in einer Form, die ich mit meinem heutigen Brotgewissen vertreten kann.
Fachbegriffe h4
Ich verwende gern einige Fachbegriffe, weil sie die Übersichtlichkeit in den Rezepten wahren. Wenn du einen der Begriffe nicht verstehst, schau bitte hinüber ins Lexikon „Bäckerlatein“. Die in meinen Rezepten angebene Knetdauer auf den jeweiligen Geschwindigkeitsstufen bezieht sich konkret auf meine Kenwood-Knetmaschine. Diese Maschine hat 8 Geschwindigkeitsstufen. Ich nutze zum Brotteigkneten ausschließlich die niedrigste (auf der Maschine als „min“ gekennzeichnet) und die zweite Stufe (auf der Maschine als „1“ gekennzeichnet).
Dies ist geordnete numerierte Liste.ol
Structurally, it's still a list.
This may still come in handy in some situations.
Hast du eine andere Maschine, musst du etwas Erfahrung sammeln, ob du die Zeiten übertragen kannst. Auf jeden Fall solltest du, egal bei welcher Maschine, immer nur die niedrigste und die nächst höhere Geschwindigkeitsstufe wählen, um den Teig nicht zu sehr zu beanspruchen.
Zum Aufwärmen eine ganz normale Tabelle ohne viel Schnickschnack:
Company
Contact
Country
Alfreds Futterkiste
Maria Anders
Germany
Centro comercial Moctezuma
Francisco Chang
Mexico
Die folgende Tabelle .ploetz-ingredients nimmt die volle verfügbare Breite ein.
Die Leerzeichen vor Gewichtsangaben und in Temperaturen sollten idealerweise als
superschmales Leerzeichen mit   codiert werden!
– Die Spalten erhalten ihre Formatierungen nach ihrer Nummer mit :nth-child.
Um die Bäckerprozente auszublenden, muss das Tabellenelement
mit Javascript
den CSS-Selector baeckerprozente-disabled
angeklebt bekommen.
