|
|
|
@ -1,11 +1,4 @@
|
|
|
|
|
:root {
|
|
|
|
|
--theme-color: #660e5c;
|
|
|
|
|
--theme-color--light: #a887b8;
|
|
|
|
|
|
|
|
|
|
--theme-gray-light: #d4d4d4;
|
|
|
|
|
--theme-gray-lighten: #f2f2f2;
|
|
|
|
|
--theme-gray-lighter: #fafafa;
|
|
|
|
|
|
|
|
|
|
--border-color: #cfcfcf;
|
|
|
|
|
--border-color--dark: #ccc;
|
|
|
|
|
--table-heading-bg: #f6f6f6;
|
|
|
|
@ -13,28 +6,9 @@
|
|
|
|
|
|
|
|
|
|
--link-color: #91548c;
|
|
|
|
|
--link-color--hover: #6d446a;
|
|
|
|
|
|
|
|
|
|
--container-width: 1400px;
|
|
|
|
|
|
|
|
|
|
/* 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));
|
|
|
|
|
}
|
|
|
|
|
* {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
}
|
|
|
|
|
html {
|
|
|
|
|
accent-color: var(--theme-color);
|
|
|
|
@ -82,6 +56,8 @@ a:focus {
|
|
|
|
|
max-width: var(--container-width);
|
|
|
|
|
width: 100%;
|
|
|
|
|
margin: auto;
|
|
|
|
|
padding-left: var(--spacing-md);
|
|
|
|
|
padding-right: var(--spacing-md);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.header {
|
|
|
|
|