Diese Seite benötigt einen modernen Browser

Web-Styleguide

rendered TailwindCSS and WP Styles

Basics from «tailwind.config.php»

make sure it is up-to-date! run sync: npm run tw
Paragraph:

Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks oder Handgloves, um Schriften zu testen. Manchmal Sätze, die alle Buchstaben des Alphabets enthalten – man nennt diese Sätze »Pangrams«. Sehr bekannt ist dieser: The quick brown fox jumps over the lazy old dog. Oft werden in Typoblindtexte auch fremdsprachige Satzteile eingebaut (AVAIL® and Wefox™ are testing aussi la Kerning), um die Wirkung in anderen Sprachen zu testen. In Lateinisch sieht zum Beispiel fast jede Schrift gut aus. Quod erat demonstrandum. Seit 1975 fehlen in den meisten Testtexten die Zahlen, weswegen nach TypoGb. 204 § ab dem Jahr 2034 Zahlen in 86 der Texte zur Pflicht werden. Nichteinhaltung wird mit bis zu 245 € oder 368 $ bestraft. Genauso wichtig in sind mittlerweile auch Âçcèñtë, die in neueren Schriften aber fast immer enthalten sind. Ein wichtiges aber schwierig zu integrierendes Feld sind OpenType-Funktionalitäten. Je nach Software und Voreinstellungen können eingebaute Kapitälchen, Kerning oder Ligaturen (sehr pfiffig) nicht richtig dargestellt werden.Dies ist ein Typoblindtext. An ihm kann man sehen, ob alle Buchstaben da sind und wie sie aussehen. Manchmal benutzt man Worte wie Hamburgefonts, Rafgenduks...

Ein Pangramm (von altgriechisch πᾶν γράμμα pan gramma, deutsch ‚jeder Buchstabe‘) oder holoalphabetischer Satz ist ein Satz, der alle Buchstaben des Alphabets enthält. Als echt werden Pangramme bezeichnet, in denen jeder Buchstabe genau einmal vorkommt, die also gleichzeitig Isogramme [1] sind. Echte Pangramme mit den 26 lateinischen Buchstaben sind sehr schwer zu erzielen, weil darin nur fünf (oder mit Y sechs) Vokale enthalten sind. Es gibt keine Sprache, für die eines bekannt ist, das nur aus Wörtern des tatsächlichen Sprachgebrauchs ohne Abkürzungen besteht.

Панграмма (с греч. — «все буквы»), или разнобуквица — короткий текст, использующий все или почти все буквы алфавита, по возможности не повторяя их.

Colors:
*-green
#47BE61
#47BE61
*-blue
#1990FD
#1990FD
*-rose
#FAE4E9
#FAE4E9
*-red
#FC5555
#FC5555
*-yellow
#FDEC51
#FDEC51
*-smoke
#ececec
#ececec
*-white
#FFFFFF
#FFFFFF
*-transparent
transparent
transparent
*-black
#000000
#000000
*-gray
-100 #F3F4F6
-200 #E5E7EB
-300 #D1D5DB
-400 #9CA3AF
-500 #6B7280
-600 #4B5563
-700 #374151
-800 #1F2937
-900 #111827

#F3F4F6
#E5E7EB
#D1D5DB
#9CA3AF
#6B7280
#4B5563
#374151
#1F2937
#111827
LineHeight:
leading-1
3rem
/ 48px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-2
3rem
/ 48px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-3
3rem
/ 48px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-4
3rem
/ 48px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-5
3rem
/ 48px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-6
1.5rem
/ 24px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-none
1
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-tight
1.045
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-snug
1.1
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-normal
1.2
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-relaxed
1.3
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-loose
1.7
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
FontSize:
text-xxs
.75rem
/ 12px
hamburg­efonts
text-xs
.875rem
/ 14px
hamburg­efonts
text-sm
1.0625rem
/ 17px
hamburg­efonts
text-default
1rem
/ 16px
hamburg­efonts
text-base
1.125rem
/ 18px
hamburg­efonts
text-lg
1.5rem
/ 24px
hamburg­efonts
text-sxl
1.75rem
/ 28px
hamburg­efonts
text-xl
2.25rem
/ 36px
hamburg­efonts
text-2xl
3rem
/ 48px
hamburg­efonts
text-3xl
0
hamburg­efonts
text-4xl
4rem
/ 64px
hamburg­efonts
text-5xl
4.75rem
/ 76px
hamburg­efonts
text-6xl
6rem
/ 96px
hamburg­efonts
LetterSpacing:
tracking-tightest
-.075em
Hamburgefonstiv
tracking-tighter
-.05em
Hamburgefonstiv
tracking-tight
-.025em
Hamburgefonstiv
tracking-normal
0
Hamburgefonstiv
tracking-wide
.01em
Hamburgefonstiv
tracking-wider
.02em
Hamburgefonstiv
tracking-widest
.1em
Hamburgefonstiv
FontFamily:
font-serif
-0 Noe Text
-1 Georgia
-2 Cambria
-3 "Times New Roman"
-4 Times
-5 serif

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
font-display
-0 Noe Display
-1 Georgia
-2 Cambria
-3 "Times New Roman"
-4 Times
-5 serif

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
font-sans
-0 Silka
-1 Arial
-2 Helvetica
-3 sans-serif

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
font-mono
-0 Menlo
-1 Monaco
-2 Consolas
-3 "Liberation Mono"
-4 "Courier New"
-5 monospace

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
Screens:
*-sm
640px
640px
*-md
768px
768px
*-lg
960px
960px
*-xl
1600px
1600px
*-portrait
-raw (orientation: portrait)

(orientation: portrait)
Spacing:
*-0
0
*-1
0.25rem
/ 4px
1 rem
*-2
0.5rem
/ 8px
2 rem
*-3
0.75rem
/ 12px
3 rem
*-4
1rem
/ 16px
4 rem
*-5
1.25rem
/ 20px
5 rem
*-6
1.5rem
/ 24px
6 rem
*-8
2rem
/ 32px
8 rem
*-10
2.5rem
/ 40px
10 rem
*-12
3rem
/ 48px
12 rem
*-16
4rem
/ 64px
16 rem
*-20
5rem
/ 80px
20 rem
*-24
6rem
/ 96px
24 rem
*-32
8rem
/ 128px
32 rem
*-40
10rem
/ 160px
40 rem
*-48
12rem
/ 192px
48 rem
*-56
14rem
/ 224px
56 rem
*-64
16rem
/ 256px
64 rem
*-px
1px
px rem
BorderRadius:
rounded-none
0
none
rounded-sm
0.125rem
/ 2px
sm
rounded-default
0.25rem
/ 4px
default
rounded-md
0.375rem
/ 6px
md
rounded-lg
0.5rem
/ 8px
lg
rounded-xl
0.75rem
/ 12px
xl
rounded-2xl
1rem
/ 16px
2xl
rounded-3xl
1.5rem
/ 24px
3xl
rounded-full
9999px
full
BorderWidth:
border-0
0
0
border-2
2px
2
border-4
4px
4
border-8
8px
8
border-default
1px
default
BoxShadow:
shadow-xs
0 0 0 1px rgba(0, 0, 0, 0.05)
xs
shadow-sm
0 1px 2px 0 rgba(0, 0, 0, 0.05)
sm
shadow-default
2px 2px 4px 0 rgba(0, 0, 0, 0.25)
default
shadow-md
0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
md
shadow-lg
0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
lg
shadow-xl
0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
xl
shadow-2xl
0 25px 50px -12px rgba(0, 0, 0, 0.25)
2xl
shadow-inner
inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)
inner
shadow-outline
0 0 0 3px rgba(66, 153, 225, 0.5)
outline
shadow-none
none
none
shadow-col
-10px 0 10px 0 rgba(0, 0, 0, 0.25)
col
shadow-focus
0.0625rem 0.0625rem 0 #fdec51, -0.0625rem -0.0625rem 0 #fdec51
/ 1px
focus

Components:

H1 Was versteht Rosa unter Freiheit?

H2 Reform und Revolution

H3 Zwischenüberschrift gilt

H4 Zwischenüberschrift

H5 Zwischenüberschrift
H6 Zwischenüberschrift

Bodytext Big für Into, Kurzzusammenfassung und Zitate. Ach, Sonitschka, ich habe hier einen scharfen Schmerz erlebt, auf dem Hof, wo ich spaziere, kommen oft Wagen vom Militär, voll bepackt mit Säcken oder alten Soldatenröcken und -hemden, oft mit Blutflecken …, die werden hier abgeladen, in die Zellen verteilt, geflickt, dann wieder aufgeladen und ans Militär abgeliefert.

Bodytext für Into, Kurzzusammenfassung und Zitate. Ach, Sonitschka, ich habe hier einen scharfen Schmerz erlebt, auf dem Hof, wo ich spaziere, kommen oft Wagen vom Militär, voll bepackt mit Säcken oder alten Soldatenröcken und -hemden, oft mit Blutflecken …, die werden hier abgeladen, in die Zellen verteilt, geflickt, dann wieder aufgeladen und ans Militär abgeliefert.

» Zitate im Bodytext werden einfach mit Anführungszeichen gekennzeichnet. Ach, Sonitschka, ich habe hier einen scharfen Schmerz erlebt, auf dem Hof, wo ich spaziere, kommen oft Wagen vom Militär, voll bepackt mit Säcken oder alten Soldatenröcken und -hemden, oft mit Blutflecken …, die werden hier abgeladen, in die Zellen verteilt, geflickt, dann wieder aufgeladen und ans Militär abgeliefert.

Rosa Luxemburg: Die Revolution in Russland [Januar 1905], in: GW, Bd. 1/2, S. 479.

Bodytext-Comment und für Stationentexte. …Ach, Sonitschka, ich habe hier einen scharfen Schmerz erlebt, auf dem Hof, wo ich spaziere, kommen oft Wagen vom Militär, voll bepackt mit Säcken oder alten Soldatenröcken und -hemden, oft mit Blutflecken …, die werden hier abgeladen, in die Zellen verteilt, geflickt, dann wieder aufgeladen und ans Militär abgeliefert.

XS: Fußnote/Endnote: Die Tiere zogen schließlich an und kamen über den Berg, aber eins blutete … Sonitschka, die Büffelhaut ist sprichwörtlich an Dicke und Zähigkeit, und die war zerrissen. Die Tiere standen dann beim Abladen ganz still und erschöpft, und eins, das, welches blutete, schaute dabei vor sich hin mit einem Ausdruck in dem schwarzen Gesicht und den sanften schwarzen Augen wie ein verweintes Kind. In Gesammelte Werke erschienen.

XS: Caption: Rosa Luxemburg im Gefängnis Barnimstraße war immechon ein Frauengefängnis. Rosa Luxemburg im Gefängnis Barnimstraße war immechon ein Frauengefängnis

Fußnoten

  1. Rosa Luxemburg: Was will der Spartakusbund? [Dezember 1918], in: dies.: Gesammelte Werke, Bd. 4, Berlin 1974, S. 443.
  2. Rosa Luxemburg: Das belgische Experiment, in: dies.: Gesammelte Werke, Bd. 3, Berlin 1973, S. 204

Bodytext mit Inline Bild

Bodytext mit Inline-Image für Into, Kurzzusammenfassung und Zitate. Ach, Sonitschka https://www.google.de | ein Beispielsbild mit popOver ich habe hier einen scharfen Schmerz erlebt, auf dem Hof, wo ich spaziere, kommen oft Wagen vom Militär, voll bepackt mit Säcken https://8grad.de | eine weitere Instanz oder alten Soldatenröcken und -hemden, oft mit Blutflecken …, die werden hier abgeladen, in die Zellen verteilt, geflickt, dann wieder aufgeladen und ans Militär abgeliefert.

„Petersburger Hängung“

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet exercitation ullamco Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet exercitation ullamco 500 Z
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet exercitation ullamco Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet exercitation ullamco 500 Z
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum Lorem ipsum dolor sit amet exercitation ullamco 500 Z
Eine YouTube Video Embed Beschriftung

Soundcloud Player Pro: