vuepress-theme-system
Version:
90 lines (67 loc) • 2.19 kB
CSS
/* system.css / settings
-------------------------------
http://francoisromain.github.io/postcss-structure
*/
:root {
/* Colors ------------------------------- */
--color-text: #666;
--color-bg: white;
--color-transparent: rgba(248, 247, 243, 0);
--color-inverse: #3d3d35;
--color-neutral: #bcb9af;
--color-alt: #f0f0e8;
--color-highlight: rgb(255, 0, 98);
--color-brand: rgb(255, 95, 0);
--color-error: #e82239;
--color-warning: #ff891c;
--color-info: #5798aa;
--color-success: #6ea040;
/* Base units ------------------------------- */
/* font-size: 1rem = 16 px */
--base-font-size: 1rem;
/* base: 1.5rem = 24 px */
--unit: 1.5rem;
/* line: 0.0625rem = 1px */
--unit-line: calc(var(--unit) / 24);
/* xxs: 0.1875rem = 3px */
--unit-xxs: calc(var(--unit) / 8);
/* xs: 0.375rem = 6px */
--unit-xs: calc(var(--unit) / 4);
/* s: 0.75rem = 12px */
--unit-s: calc(var(--unit) / 2);
/* m: 1.125rem = 18px */
--unit-m: calc(var(--unit) * 3 / 4);
/* l: 2.25rem = 36 px */
--unit-l: calc(var(--unit) * 3 / 2);
/* xl: 3rem = 48px */
--unit-xl: calc(var(--unit) * 2);
/* xxl: 3.75rem = 60 px */
--unit-xxl: calc(var(--unit) * 2.5);
/* */
--unit-infinity: 9999px;
/* Lists ------------------------------- */
--list-postfix: ',';
--list-prefix: '―';
/* Grid ------------------------------- */
/*
postcss-grid-system configuration
https://github.com/francoisromain/postcss-grid-system#configuration
*/
/* width of a single bloc in rem */
--col-width: 20.5rem;
/* width of the gutter in rem */
--gutter: var(--unit-l);
/* padding of the main container in rem */
--container-padding: var(--unit-l);
/* transition */
--transition: opacity 0.5s, background-color 0.5s, border 0.5s,
box-shadow 0.5s, fill 0.5s;
/* hr */
--border-color: var(--color-alt);
--border-width: var(--unit-line);
}
/* media queries: x * col-width + gutter */
@custom-media --viewport-mobile (min-width: 22em);
@custom-media --viewport-tablet (min-width: 47.75em);
@custom-media --viewport-desktop (min-width: 70.5em);
@custom-media --viewport-large (min-width: 93.25em);