/* Theme Name: Theme Description: Website Theme for elbinselguide Author: SITEDOCK Author URI: https://sitedock.de Version: 0.4.0 Text Domain: theme */ :root { --base-color-text: #6d6d6e; --base-color-accent: #f8ba16; --base-color-light: #f2f3f3; --base-color-background: #fff; --base-root-font-size: 16px; --base-font-family: "Mulish", sans-serif; --base-font-weight: normal; --base-line-height: 1.4; --base-font-size: 24rem; --base-font-size-small: 20rem; --base-font-size-large: 30rem; --base-headings-font-family: "Oswald", sans-serif; --base-headings-font-weight: bold; --base-headings-line-height: 1.25; --base-headings-font-size-1: 120rem; --base-headings-font-size-2: 68rem; --base-headings-font-size-3: 30rem; --base-headings-font-size-4: 24rem; --base-layout-width: 100%; --base-content-width: 1590rem; --base-content-width-small: 912rem; --base-content-width-wide: 1590rem; --base-content-width-full: 100%; --base-offset: 80rem; --base-offset-vertical: 80rem; --base-space: 30rem; --base-gap: calc(var(--base-space) * 2); --theme-design-layout-width: 1920; /* the base layout screen width of respective design without unit */ --theme-root-font-size: calc( calc(100 / var(--theme-design-layout-width)) * 1vw ); /* set font-size to this value and use rem unites based on design pixel-sizes everywhere: example: h2 font-size: 26rem */ --theme-color-background-soft: #fef2d1; font-size: var(--theme-root-font-size); } html { } @media (max-width: 599px) { :root { --theme-design-layout-width: 390; --base-content-width: 370; --base-headings-font-size-1: 48rem; --base-headings-font-size-2: 40rem; --base-headings-font-size-3: 28rem; --base-headings-font-size-4: 20rem; --base-font-size: 16rem; --base-font-size-medium: 20rem; --base-font-size-small: 14rem; --base-offset: 30rem; --base-offset-vertical: 34rem; --base-space: 20rem; --base-gap: 30rem; --button-padding: 8rem 12rem; --button-border-radius: 0 12rem 0 12rem; --button-font-size: 16rem; } } @media (min-width: 600px) { :root { --theme-design-layout-width: 820; --base-headings-font-size-1: 88rem; --base-headings-font-size-2: 58rem; --base-headings-font-size-3: 28rem; --base-headings-font-size-4: 20rem; --base-font-size: 23rem; --base-font-size-medium: 28rem; --base-offset: 54rem; --base-offset-vertical: 72rem; --base-space: 20rem; --base-gap: 40rem; } } @media (min-width: 1300px) { :root { --theme-design-layout-width: 1920; } } @media (min-width: 1600px) { :root { --theme-design-layout-width: 1920; } } @media (min-width: 1900px) { :root { --theme-design-layout-width: 1920; --base-font-size: 24rem; --base-font-size-small: 20rem; --base-font-size-large: 30rem; --base-headings-font-size-1: 120rem; --base-headings-font-size-2: 68rem; --base-headings-font-size-3: 30rem; --base-headings-font-size-4: 24rem; --base-offset: 63rem; --base-offset-vertical: 92rem; --base-space: 35rem; --base-gap: 40rem; --base-content-width-small: 912rem; } } /* @media (min-width: 2200px) { :root { --theme-design-layout-width: 2700; } } */