Diese Webseite benötigt einen modernen Browser

Geschützt: Styleguide

Basics from «tailwind.config.php»

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

TailwindCSS controls a great piece of styles of this website. Make sure, you develop along this configuration.

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 (Großkatzenimpfbuch) [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
green-100
green-200
green-600

#f0f1ee
#dfe1da
#6D7556
*-red
#941612
#941612
*-white
#FFFFFF
#FFFFFF
*-transparent
transparent
transparent
*-black
#000000
#000000
*-gray
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900

#F3F4F6
#E5E7EB
#EFF0ED
#B2B2B2
#6B7280
#4B5563
#374151
#1F2937
#111827
*-primary
#ae1008
#ae1008
*-secondary
#f0f1ee
#f0f1ee
Screens:
*-sm
320px
320px
*-md
960px
960px
*-md-narrow
md-narrow-0

(max-height: 600px) AND (min-width: 1280px)
*-lg
1200px
1200px
*-xl
1440px
1440px
LineHeight:
leading-1
1rem
/ 16px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-2
2rem
/ 32px
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
4rem
/ 64px
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
leading-5
5rem
/ 80px
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.5
Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
FontSize:
text-28
1.75em
hamburg­efonts
text-xxs
0.75em
hamburg­efonts
text-xs
0.75em
hamburg­efonts
text-sm
0.875em
hamburg­efonts
text-base
1em
hamburg­efonts
text-lg
1.125em
hamburg­efonts
text-xl
1.25em
hamburg­efonts
text-2xl
1.5em
hamburg­efonts
text-3xl
1.875em
hamburg­efonts
text-4xl
2em
hamburg­efonts
text-5xl
3em
hamburg­efonts
text-6xl
3.75rem
/ 48px
hamburg­efonts
text-7xl
4.5rem
/ 64px
hamburg­efonts
text-8xl
6rem
/ 96px
hamburg­efonts
text-9xl
8rem
/ 128px
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
serif-0
serif-1
serif-2
serif-3
serif-4

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

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

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

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

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

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
Spacing:
*-0
0
*-1
0.25rem
/ 0px
1 rem
*-2
0.5rem
/ 0px
2 rem
*-3
0.75rem
/ 0px
3 rem
*-4
1rem
/ 16px
4 rem
*-5
1.25rem
/ 16px
5 rem
*-6
1.5rem
/ 16px
6 rem
*-8
2rem
/ 32px
8 rem
*-10
2.5rem
/ 32px
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
/ 0px
sm
rounded-default
0.25rem
/ 0px
default
rounded-md
0.375rem
/ 0px
md
rounded-lg
0.5rem
/ 0px
lg
rounded-xl
0.75rem
/ 0px
xl
rounded-2xl
1rem
/ 16px
2xl
rounded-3xl
1.5rem
/ 16px
3xl
rounded-full
9999px
full
BorderWidth:
border-0
0
0
border-2
2px
2
border-3
0.18rem
/ 0px
3
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
0 2px 4px 0 rgba(0, 0, 0, 0.5)
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-focus
0.0625rem 0.0625rem 4px rgba(174, 16,8, 0.3), -0.0625rem -0.0625rem 4px rgba(174, 16,8, 0.3)
/ 0px
focus

Page Block Components