// Both of these should probably die and become variables as well $spacing-vertical: 2rem; $spacing-width: 36px; $medium-breakpoint: 1279px; $large-breakpoint: 1921px; :root { // Width & spacing --page-max-width: 1200px; --mobile: 600px; --side-nav-width: 170px; --font-size-subtext-multiple: 0.92; --spacing-miniscule: calc(2rem / 5); --spacing-tiny: calc(2rem / 4); --spacing-small: calc(2rem / 3); --spacing-medium: calc(2rem / 2); --spacing-large: 2rem; --spacing-xlarge: 3rem; --spacing-main-padding: var(--spacing-xlarge); --file-page-max-width: 1787px; --file-max-height: 788px; --file-max-width: 1400px; --video-aspect-ratio: 56.25%; // 9 x 16 // Color --color-background: #270f34; // Text --text-max-width: 660px; --text-link-padding: 4px; // Tabs --tab-indicator-size: 0.5rem; --tab-header-size: 1.5rem; // Needs to be static so the animated styling always works // Input --input-border-size: 1px; --input-border-radius: 2px; // Select --select-height: 30px; // Button --button-radius: 2.6rem; --button-height: 2.6rem; // Header --header-height: 6rem; // Card --card-radius: 5px; --card-max-width: 1000px; --card-box-shadow: 0px 0px 30px 2px; // Modal --modal-width: 440px; // Animation :) --animation-duration: 0.2s; --animation-style: ease-in-out; // Image --thumbnail-preview-height: 100px; --thumbnail-preview-width: 177px; --cover-photo-height: 300px; --channel-thumbnail-width: 10rem; --file-list-thumbnail-width: 10rem; }