You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

110 lines
5.4 KiB

:root {
/* Typography */
--font-primary: 'Source Sans Pro', Helvetica, Arial, sans-serif;
--font-secondary: 'Source Sans Pro', Helvetica, Arial, sans-serif;
--font-monospace: 'Source Code Pro', monospace;
--line-height--primary: 1.6;
--letter-spacing--primary: .05rem;
--text-base-size: 1em;
--text-scale-ratio: 1.2;
--text-xxs: calc(var(--text-base-size) / var(--text-scale-ratio) / var(--text-scale-ratio) / var(--text-scale-ratio));
--text-xs: calc(var(--text-base-size) / var(--text-scale-ratio) / var(--text-scale-ratio));
--text-sm: calc(var(--text-base-size) / var(--text-scale-ratio));
--text-md: var(--text-base-size);
--text-lg: calc(var(--text-base-size) * var(--text-scale-ratio));
--text-xl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
--text-xxxxxl: calc(var(--text-base-size) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio) * var(--text-scale-ratio));
/* Colors */
--primary-color-hue: 96;
--primary-color-saturation: 57%;
--primary-color: hsl(var(--primary-color-hue), var(--primary-color-saturation), 60%);
--primary-color-darken: hsl(var(--primary-color-hue), var(--primary-color-saturation), 40%);
--primary-color-darker: hsl(var(--primary-color-hue), var(--primary-color-saturation), 20%);
--primary-color-darkest: hsl(var(--primary-color-hue), var(--primary-color-saturation), 10%);
--primary-color-lighten: hsl(var(--primary-color-hue), var(--primary-color-saturation), 80%);
--primary-color-lighter: hsl(var(--primary-color-hue), var(--primary-color-saturation), 99%);
--dark-gray: #d1d1d1;
--light-gray: #f0f0f0;
--text-color: var(--primary-color-darkest);
--header-height: var(--spacing-xxxxl);
--header-bg-color: var(--primary-color);
--code-background-color: var(--primary-color-lighter);
--code-border-color: --primary-color-lighten;
--button-border-color: var(--primary-color-darken);
--button-color: transparent;
--button-color-primary: var(--primary-color);
--button-text-color: #555;
--button-text-color-primary: white;
--popover-background-color: rgba(255, 255, 255, 0.75);
--link-color-primary: var(--primary-color-darken);
--link-hover-color-primary: var(--primary-color-darker);
--form-field-border-color: var(--dark-gray);
--form-field-color: #fff;
--admonition-success-color: var(--primary-color);
--admonition-border-color: silver;
--table-separator-color: var(--primary-color-lighten);
--title-text-color: var(--primary-color);
--sidebar-border-color: var(--primary-color-lighten);
/* Grid */
--container-width: 1400px;
/* Spacing */
--spacing-base-size: 1rem;
--spacing-scale-ratio: 1.5;
--spacing-xxxs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
--spacing-xxs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
--spacing-xs: calc(var(--spacing-base-size) / var(--spacing-scale-ratio) / var(--spacing-scale-ratio));
--spacing-sm: calc(var(--spacing-base-size) / var(--spacing-scale-ratio));
--spacing-md: var(--spacing-base-size);
--spacing-lg: calc(var(--spacing-base-size) * var(--spacing-scale-ratio));
--spacing-xl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
--spacing-xxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
--spacing-xxxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
--spacing-xxxxl: calc(var(--spacing-base-size) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio) * var(--spacing-scale-ratio));
--border-radius-base-size: 3px;
}
/* Custom vars */
:root {
/* #7a4482; hsl(292, 31%, 39%); */
--spip-primary-color: #7a4482;
--primary-color-hue: 292;
--primary-color-saturation: 31%;
--primary-color-lighter: hsl(var(--primary-color-hue), var(--primary-color-saturation), 98%);
--spip-name-color: #e05a00;
--spip-type-color: #5a852a;
--spip-visibility-color: #0d73bc;
--spip-argument-color: #93347f;
--spip-argument-value-color: #637986;
--spip-dark-color: hsl(var(--primary-color-hue), 20%, 45%);
--spip-tag-color: var(--spip-dark-color);
--spip-padding-x: 1rem;
--spip-padding-y: 1rem;
--spip-padding-x-neg: calc(-1 * var(--spip-padding-x));
--spip-padding-y-neg: calc(-1 * var(--spip-padding-y));
--spip-border-size: 3px;
--spip-border-radius: 10px;
/* header */
--theme-color: #660e5c;
--theme-color--light: #a887b8;
--theme-gray-light: #d4d4d4;
--theme-gray-lighten: #f2f2f2;
--theme-gray-lighter: #fafafa;
}