/* Theme Name: Dales.Net Theme Theme URI: https://dales.net Description: A custom theme for GeneratePress Author: Dales.Net Team Author URI: https://dales.net Template: generatepress Version: 1.0 */ /* * previous font scale setup... https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=767&minRatio=1.2&maxFontSize=17&maxWidth=1200&maxRatio=1.25&steps=80%2C90%2C100%2C200%2C300%2C400%2C500%2C600%2C700%2C800&baseStep=100&prefix=fs&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1200 */ /* * current font scale setup * https://www.fluid-type-scale.com/calculate?minFontSize=16&minWidth=767&minRatio=1.067&maxFontSize=17&maxWidth=1200&maxRatio=1.125&steps=80%2C90%2C100%2C200%2C300%2C400%2C500%2C600%2C700%2C800%2C900%2C1000&baseStep=100&prefix=fs&useContainerWidth=false&includeFallbacks=true&useRems=true&remValue=16&decimals=2&previewFont=Inter&previewText=Almost+before+we+knew+it%2C+we+had+left+the+ground&previewWidth=1200 * */ /* ----- Resposive Typography System ----- */ /* For browsers that support clamp */ @supports (font-size: clamp(1rem, 1vi, 1rem)) { :root { --fs-80: clamp(0.88rem, -0.14vi + 0.95rem, 0.84rem); --fs-90: clamp(0.94rem, 0.03vi + 0.92rem, 0.94rem); --fs-100: clamp(1rem, 0.23vi + 0.89rem, 1.06rem); --fs-200: clamp(1.07rem, 0.47vi + 0.84rem, 1.2rem); --fs-300: clamp(1.14rem, 0.76vi + 0.77rem, 1.34rem); --fs-400: clamp(1.21rem, 1.1vi + 0.69rem, 1.51rem); --fs-500: clamp(1.3rem, 1.5vi + 0.58rem, 1.7rem); --fs-600: clamp(1.38rem, 1.96vi + 0.44rem, 1.91rem); --fs-700: clamp(1.48rem, 2.51vi + 0.27rem, 2.15rem); --fs-800: clamp(1.57rem, 3.14vi + 0.07rem, 2.42rem); --fs-900: clamp(1.68rem, 3.87vi + -0.17rem, 2.73rem); --fs-1000: clamp(1.79rem, 4.71vi + -0.46rem, 3.07rem); } } /* For browsers that don't support clamp */ @supports not (font-size: clamp(1rem, 1vi, 1rem)) { :root { --fs-80: 0.88rem; --fs-90: 0.94rem; --fs-100: 1rem; --fs-200: 1.07rem; --fs-300: 1.14rem; --fs-400: 1.21rem; --fs-500: 1.3rem; --fs-600: 1.38rem; --fs-700: 1.48rem; --fs-800: 1.57rem; --fs-900: 1.68rem; --fs-1000: 1.79rem; } @media screen and (min-width: 1200px) { :root { --fs-80: 0.84rem; --fs-90: 0.94rem; --fs-100: 1.06rem; --fs-200: 1.2rem; --fs-300: 1.34rem; --fs-400: 1.51rem; --fs-500: 1.7rem; --fs-600: 1.91rem; --fs-700: 2.15rem; --fs-800: 2.42rem; --fs-900: 2.73rem; --fs-1000: 3.07rem; } } } /* ----- Other Global Variables ----- */ :root { --site-gutter-inline: 2rem; --section-block-spacing-default: 3rem; --button-shadow--hover: 5px 5px 7px -2px rgba(0,0,0,0.1); --card-shadow: 7px 7px 12px -5px rgba(0,0,0,0.1); --card-shadow--hover: 7px 7px 12px -5px rgba(0,0,0,0.2); /* ----- For Placeholder Layout ----- */ /* ----------------------------------------------------------- * Responsive Sizes for Placeholder based on 3840 x 2160 4K sizes * * Logo Size - https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=160&size-max=750&viewport-min=400&viewport-max=2160&viewport-units=vh * * -> Portrait : viewport max = 2160 => max width = 1000px (62.5rem) * viewport min = 400 => max width = 325px (20.3rem) * clamp(20.313rem, 10.724rem + 38.352vw, 62.5rem) * * -> Landscape : viewport max = 2160 => max height = 300px (18.75rem) * viewport mix = 400 => max height = 120px (7.5rem) * clamp(7.5rem, 4.943rem + 10.227vh, 18.75rem) * * H1 Font Size - https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=32&size-max=128&viewport-min=400&viewport-max=2160&viewport-units=vh * -> clamp(2rem, 0.636rem + 5.455vh, 8rem) * * H2 font size - https://chrisburnell.com/clamp-calculator/?font-size-root=16&size-min=24&size-max=72&viewport-min=400&viewport-max=2160&viewport-units=vh * -> clamp(1.5rem, 0.818rem + 2.727vh, 4.5rem) * * * * */ --logo-width--max-portrait: 37.5rem; --logo-width--min-portrait: 12rem; --logo-width--preferred: 30vw; --logo-height--max-landscape: 45rem; --logo-height--min-landscape: 18.75rem; --logo-height--min-landscape: 10rem; --logo-height--preferred: 35vh; --main-head-fs--max: 8rem; --main-head-fs--min: 2.5rem; --main-head-fs-preferred-portrait: 5vw; --main-head-fs-preferred-landscape: 6vh; --sub-head-fs--max: 5rem; --sub-head-fs--min: 1.5rem; --sub-head-fs-preferred-portrait: 3vw; --sub-head-fs-preferred-landscape: 3.5vh; /* --gap-logo-to-txt-to-icons: 2rem; */ --gap-main-sub-head: 0rem; } body:not(.admin-bar) { /* This allows us to use this variable set by wp when logged in with admin access */ --wp-admin--admin-bar--height: 0.01rem; } body { /* setting display as grid make sfooter stick to the page bottom if the content is not filling the screen height */ min-height: calc(100vh - var(--wp-admin--admin-bar--height)); min-height: calc(100dvh - var(--wp-admin--admin-bar--height)); --full-viewport-height: calc(100dvh - var(--wp-admin--admin-bar--height)); @media (max-width: 767px) { --site-gutter-inline: 1rem; } } body:not(.placeholder-page) { display: flex; flex-direction: column; } /* Default body / p font settings */ :root { --headline-font: Inter, sans-serif; /* --body-font: var(--gp-font--be-vietnam-pro-variable), sans-serif; */ /* --body-font: var(--gp-font--fira-sans-variable), sans-serif; */ /* --body-font: var(--gp-font--poppins-variable), sans-serif; */ /*--body-font: var(--gp-font--satoshi-variable), sans-serif; */ /* --body-font: var(--gp-font--switzer-variable), sans-serif; */ --body-font: var(--gp-font--work-sans), sans-serif; } p { font-size: var(--fs-text-m); font-weight: 300; line-height: 1.3; margin-bottom: 1.5rem; font-family: var(--body-font); } /* Default Headings font settings */ h1, h2, h3, h4, h5, h6, .gb-headline-h-xl, .gb-headline-h1, .gb-headline-h2, .gb-headline-h3, .gb-headline-h4, .gb-headline-h5, .gb-headline-h6 { font-family: var(--headline-font); font-weight: 600; margin-bottom: 0.5rem; } h1.entry-title { font-weight: 400; } /* TEXT SIZE UTILITY CLASSES */ /* With suggested line heights (automatically responsive). Feel free to tweak to taste. In Theme Styles > Typography > Body Copy: set the font size variable AND line height the SAME as .text-m here in this code. */ .fs-80, .dnu-fs-80 { font-size: var(--fs-80) !important; } .fs-90, .dnu-fs-90 { font-size: var(--fs-89) !important; } .fs-100, .dnu-fs-100 { font-size: var(--fs-100) !important; } .fs-200, .dnu-fs-200 { font-size: var(--fs-200) !important; } .fs-300, .dnu-fs-300 { font-size: var(--fs-300) !important; } .fs-400, .dnu-fs-400 { font-size: var(--fs-400) !important; } .fs-500, .dnu-fs-500 { font-size: var(--fs-500) !important; } .fs-600, .dnu-fs-600 { font-size: var(--fs-600) !important; } .fs-700, .dnu-fs-700 { font-size: var(--fs-700) !important; } .fs-800, .dnu-fs-800 { font-size: var(--fs-800) !important; } .fs-900, .dnu-fs-900 { font-size: var(--fs-900) !important; } .fs-1000, .dnu-fs-1000 { font-size: var(--fs-1000) !important; } /* line height method from: https://kittygiraudel.com/2020/05/18/using-calc-to-figure-out-optimal-line-height/ */ .fs-80, .fs-90, .fs-100, .fs-200, .fs-300, .fs-400, .fs-500, .fs-600, .fs-700, .fs-800, .fs-900, .fs-1000 { line-height: calc(2px + 2ex + 2px); font-weight: 300; } /* HEADING SIZE UTILITY CLASSES */ /* With suggested line heights (automatically responsive) */ .u-h-xl { font-size: var(--fs-1000); line-height: 1.05; } h1, .dnu-h1 { font-size: var(--fs-900); line-height: 1.1; } h2, .dnu-h2 { font-size: var(--fs-700); line-height: 1.2; } h3, .dnu-h3 { font-size: var(--fs-600); line-height: 1.3; } h4, .dnu-h4 { font-size: var(--fs-500); line-height: 1.4; } h5, .dnu-h5 { font-size: var(--fs-400); line-height: 1.5; } h6, .dnu-h6 { font-size: var(--fs-300); line-height: 1.6; } /* BORDER RADIUS UTILITY CLASSES */ :root { --radius-xs: .125rem; --radius-s: .25rem; --radius-m: .5rem; --radius-l: 1rem; --radius-xl: 1.5rem; --radius-xxl: 2rem; --radius-50: 50%; --radius-circle: 50%; } /* ALLOW CONTAINERS TO BE FILLED BY CONTAINED HYPERLINKS */ .stretch-link{ position: relative; } .stretch-link a::after{ content: ''; position: absolute; inset: 0; } .stretch-link a:is(:focus-visible)::after{ outline: 2px solid; } .stretch-link a:is(:hover, :focus){ outline: none; }