/***************************************************************************
* Calc Size
*
* Beispiel – Alle Elemente Proporional größer darstellen:
* @media screen and (min-width:100em){
* :root {
* --typo-calc-size: 1.125;
* }
* }
****************************************************************************/
:root {
--typo-calc-size: 1;
}
@media screen and (min-width: 75em){
:root {
--typo-calc-size: 1.125;
}
}
@media screen and (min-width:90em){
:root {
--typo-calc-size: 1.25;
}
}
@media screen and (min-width:120em){
:root {
--typo-calc-size: 1.375;
}
}
/***************************************************************************
* Colors
****************************************************************************/
:root {
--typo-color-text: #0a0a0a;
--typo-color-light-grey: #F1F1F1;
--typo-color-blue-light: #E8F4FB;
--typo-color-blue: #1B94D5;
--typo-color-green: #ACCC6E;
}
/***************************************************************************
* Basics
****************************************************************************/
:root {
--typo-border-radius: calc(var(--typo-calc-size) * 1rem);
--typo-border-radius-big: calc(var(--typo-calc-size) * 3rem);
--typo-svg-arrow-right: url('data:image/svg+xml;utf8,');
--typo-svg-arrow-left: url('data:image/svg+xml;utf8,');
--typo-svg-arrow-right-white: url('data:image/svg+xml;utf8,');
--typo-svg-arrow-left-white: url('data:image/svg+xml;utf8,');
}
/***************************************************************************
* Gaps
****************************************************************************/
:root {
--typo-gap: calc(var(--typo-calc-size) * 1rem);
--typo-half-gap: calc(var(--typo-calc-size) * 0.5rem);
--typo-double-gap: calc(var(--typo-calc-size) * 2rem);
--typo-section-gap: calc(var(--typo-calc-size) * 3rem);
}
@media screen and (min-width:40em){
:root {
--typo-section-gap: calc(var(--typo-calc-size) * 4rem);
}
}
@media screen and (min-width:64em){
:root {
--typo-section-gap: calc(var(--typo-calc-size) * 6rem);
}
}
/*
@media screen and (min-width:90em){
:root {
--typo-section-gap: calc(var(--typo-calc-size) * 8rem);
}
}
*/
/***************************************************************************
* Font-Sizes
h1: 84
h2: 64
quote: 54
h3: 44
h4: 29
p: 23
****************************************************************************/
:root {
--typo-font-size-default: calc(var(--typo-calc-size) * 1rem);
--typo-font-size-h1: calc(var(--typo-calc-size) * 2rem);
--typo-font-size-h2: calc(var(--typo-calc-size) * 1.875rem);
--typo-font-size-quote: calc(var(--typo-calc-size) * 1.5rem);
--typo-font-size-h3: calc(var(--typo-calc-size) * 1.375rem);
--typo-font-size-h3-small: calc(var(--typo-calc-size) * 1.25rem);
--typo-font-size-h4: calc(var(--typo-calc-size) * 1.125rem);
--typo-font-size-small: calc(var(--typo-calc-size) * 0.875rem);
--typo-font-size-very-small: calc(var(--typo-calc-size) * 0.75rem);
}
@media screen and (min-width:40em){
:root {
--typo-font-size-h1: calc(var(--typo-calc-size) * 2.875rem);
--typo-font-size-h2: calc(var(--typo-calc-size) * 2.325rem);
--typo-font-size-quote: calc(var(--typo-calc-size) * 2rem);
--typo-font-size-h3: calc(var(--typo-calc-size) * 1.5rem);
--typo-font-size-h3-small: calc(var(--typo-calc-size) * 1.375rem);
--typo-font-size-h4: calc(var(--typo-calc-size) * 1.125rem);
}
}
@media screen and (min-width:64em){
:root {
--typo-font-size-h1: calc(var(--typo-calc-size) * 3.625rem);
--typo-font-size-h2: calc(var(--typo-calc-size) * 2.875rem);
--typo-font-size-quote: calc(var(--typo-calc-size) * 2.325rem);
--typo-font-size-h3: calc(var(--typo-calc-size) * 1.9375rem);
--typo-font-size-h3-small: calc(var(--typo-calc-size) * 1.675rem);
--typo-font-size-h4: calc(var(--typo-calc-size) * 1.25rem);
}
}
@media screen and (min-width:90em){
:root {
--typo-font-size-very-small: calc(var(--typo-calc-size) * 0.625rem);
}
}