mirror of
https://github.com/philomena-dev/philomena.git
synced 2024-11-24 12:37:58 +01:00
111 lines
2.8 KiB
CSS
111 lines
2.8 KiB
CSS
$min-desktop-width: 1280px;
|
|
$max-phone-width: 700px;
|
|
$narrow-layout-width: 960px;
|
|
$medium-layout-width: $min-desktop-width;
|
|
$font-family-base: verdana, arial, helvetica, sans-serif;
|
|
$font-family-monospace: "Droid Sans Mono", monospace;
|
|
|
|
:root {
|
|
/* Paddings */
|
|
--padding-tiny: 0.3rem;
|
|
--padding-small: 0.4rem;
|
|
--padding-normal: 0.75rem;
|
|
--padding-large: 1.5rem;
|
|
|
|
/* Common line heights */
|
|
--default-line-height: 1.15;
|
|
--readable-line-height: 1.35rem;
|
|
|
|
/* Header height */
|
|
--block-header-height: 2rem;
|
|
|
|
/* Navbar */
|
|
--navbar-size: 4rem;
|
|
--navbar-secondary-size: 2.5rem;
|
|
--navbar-input-size: 2rem;
|
|
--navbar-input-width: 18vw;
|
|
--navbar-input-max-width: 22rem;
|
|
|
|
/* Avatars */
|
|
--avatar-navbar-size: 2.5rem;
|
|
--avatar-small-size: 6rem;
|
|
--avatar-large-size: 8rem;
|
|
|
|
/* Buttons */
|
|
--button-height: 2rem;
|
|
--button-group-height: 2rem;
|
|
--button-group-tall-height: 2.5rem;
|
|
--button-group-small-height: 1.5rem;
|
|
|
|
/* Checkboxes */
|
|
--checkbox-width: 3rem;
|
|
--checkbox-height: 1.5rem;
|
|
--checkbox-border-width: 2px;
|
|
|
|
/* Separators */
|
|
--separator-vertical-size: 1.3em;
|
|
|
|
/* Tags */
|
|
--tag-height: 2em;
|
|
--tag-border-width: 0;
|
|
|
|
/* Homepage left column width on desktop */
|
|
--column-left-width: 360px;
|
|
|
|
/* Borders and rounding */
|
|
--border-radius-outer: 0.35rem;
|
|
--border-radius-inner: 0.25rem;
|
|
--border-radius-tag: 0.2rem;
|
|
--border-radius-avatar: 100%;
|
|
--border-radius-checkbox: 1rem;
|
|
|
|
/* Images and media */
|
|
--media-container-width: 225px;
|
|
--media-tiny-container-width: 50px;
|
|
--media-small-container-width: 150px;
|
|
--media-medium-container-width: 250px;
|
|
--media-large-container-width: 500px;
|
|
--media-full-container-width: 100%;
|
|
--media-featured-width: 358px;
|
|
--media-header-height: 2rem;
|
|
--media-small-header-height: 1rem;
|
|
|
|
/* Badges */
|
|
--badge-small-size: 1.1rem;
|
|
--badge-normal-size: 2rem;
|
|
|
|
/* Counter badges (the "red notification badge") */
|
|
--number-badge-size: 0.6rem;
|
|
--number-badge-padding: 0.1rem;
|
|
--number-badge-border: 2px;
|
|
--number-badge-lower-offset: 0.7rem;
|
|
--number-badge-upper-offset: 0.7rem;
|
|
|
|
/* Fonts */
|
|
--font-family: $font-family-base;
|
|
--font-family-monospace: $font-family-monospace;
|
|
--font-size: 14px;
|
|
--font-tiny-size: 12px;
|
|
--font-micro-size: 10px;
|
|
--font-header-size: 16px;
|
|
--font-icon-size: 2rem;
|
|
--font-h1-size: 1.75rem;
|
|
--font-h2-size: 1.5rem;
|
|
--font-h3-size: 1.35rem;
|
|
--font-h4-size: 1.2rem;
|
|
--font-h5-size: 1.1rem;
|
|
--font-h6-size: 1rem;
|
|
|
|
/* Inputs */
|
|
--input-text-height: 9rem;
|
|
|
|
/* Layout sizes */
|
|
--min-desktop-width: $min-desktop-width;
|
|
--max-phone-width: $max-phone-width;
|
|
--medium-layout-width: $medium-layout-width;
|
|
--narrow-layout-width: $narrow-layout-width;
|
|
|
|
/* Animations */
|
|
--transition-animation-duration: 0.15s;
|
|
--transition-long-animation-duration: 0.3s;
|
|
}
|