Sorry, this site requires a modern browser.

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:
*-blue
#0e26fc
#0e26fc
*-yellow
#FFE81D
#FFE81D
*-red
#FF5858
#FF5858
*-purple
#C738B8
#C738B8
*-green
#56E6A1
#56E6A1
*-white
#FFFFFF
#FFFFFF
*-transparent
transparent
transparent
*-black
#1D1D1D
#1D1D1D
*-text
#383e42
#383e42
*-gray
-100 #F3F4F6
-200 #E5E7EB
-300 #D1D5DB
-400 #9CA3AF
-500 #6B7280
-600 #4B5563
-700 #383e42
-800 #1F2937
-900 #111827

#F3F4F6
#E5E7EB
#D1D5DB
#9CA3AF
#6B7280
#4B5563
#383e42
#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
/ 16px
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.4
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
/ 0px
hamburg­efonts
text-xs
0.75rem
/ 0px
hamburg­efonts
text-sm
0.875rem
/ 0px
hamburg­efonts
text-base
1rem
/ 16px
hamburg­efonts
text-lg
1.125rem
/ 16px
hamburg­efonts
text-xl
1.25rem
/ 16px
hamburg­efonts
text-2xl
1.5rem
/ 16px
hamburg­efonts
text-3xl
1.875rem
/ 16px
hamburg­efonts
text-4xl
2.25rem
/ 32px
hamburg­efonts
text-5xl
2.5rem
/ 32px
hamburg­efonts
text-6xl
3rem
/ 48px
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 "My Font Name"
-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 "FuturaBT-Bold"
-1 Impact
-2 Helvetica
-3 Arial
-4 sans-serif

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

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

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

Hillimillihirtzi­heftpflaster­Entferner­
!"#$%&'()*+,-./0123456789:;
<=>?@ABC DEF GHI JKL MNOP QRST UVWXYZ[\] ^ _`abcdefgh
Screens:
*-sm
640px
640px
*-md
768px
768px
*-lg
1024px
1024px
*-xl
1440px
1440px
*-xxl
1536px
1536px
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-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
0px 4px 4px 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

Components:

Styleguide

THIS IS OUR STYLEGUIDE