You've already forked snikket-web-portal
256 lines
6.9 KiB
SCSS
256 lines
6.9 KiB
SCSS
$colours: (
|
||
"gray": [
|
||
#1f1b17,
|
||
#3d3833,
|
||
#4e4a46,
|
||
#706965,
|
||
#8f8983,
|
||
#b1aca6,
|
||
#cac3bd,
|
||
#e3e1df,
|
||
#f6f5f4
|
||
],
|
||
"blue": [
|
||
#062243,
|
||
#0f3462,
|
||
#0e4276,
|
||
#225994,
|
||
#4182c7,
|
||
#72a7e3,
|
||
#9dc4f0,
|
||
#b5d2f3,
|
||
#e4f0fd
|
||
],
|
||
"red": [
|
||
#340e03,
|
||
#681f0b,
|
||
#883017,
|
||
#a33d21,
|
||
#c95e40,
|
||
#ed947c,
|
||
#f2ac99,
|
||
#fbc2b3,
|
||
#fef1ed
|
||
],
|
||
"yellow": [
|
||
#302100,
|
||
#563600,
|
||
#795b00,
|
||
#a07501,
|
||
#c79b0e,
|
||
#f4ce3f,
|
||
#fee577,
|
||
#fef1c1,
|
||
#fff8e8
|
||
],
|
||
"green": [
|
||
#172f03,
|
||
#244608,
|
||
#407713,
|
||
#548f19,
|
||
#7fc644,
|
||
#a1e06e,
|
||
#c0ed9c,
|
||
#dbf6c5,
|
||
#effbe6
|
||
]
|
||
);
|
||
|
||
$box-types: (
|
||
"primary": "blue",
|
||
"accent": "yellow",
|
||
"alert": "red",
|
||
"warning": "yellow",
|
||
"success": "green",
|
||
"hint": "blue"
|
||
);
|
||
|
||
$gray-100: nth(map-get($colours, "gray"), 1);
|
||
$gray-200: nth(map-get($colours, "gray"), 2);
|
||
$gray-300: nth(map-get($colours, "gray"), 3);
|
||
$gray-400: nth(map-get($colours, "gray"), 4);
|
||
$gray-500: nth(map-get($colours, "gray"), 5);
|
||
$gray-600: nth(map-get($colours, "gray"), 6);
|
||
$gray-700: nth(map-get($colours, "gray"), 7);
|
||
$gray-800: nth(map-get($colours, "gray"), 8);
|
||
$gray-900: nth(map-get($colours, "gray"), 9);
|
||
|
||
$primary-100: nth(map-get($colours, "blue"), 1);
|
||
$primary-200: nth(map-get($colours, "blue"), 2);
|
||
$primary-300: nth(map-get($colours, "blue"), 3);
|
||
$primary-400: nth(map-get($colours, "blue"), 4);
|
||
$primary-500: nth(map-get($colours, "blue"), 5);
|
||
$primary-600: nth(map-get($colours, "blue"), 6);
|
||
$primary-700: nth(map-get($colours, "blue"), 7);
|
||
$primary-800: nth(map-get($colours, "blue"), 8);
|
||
$primary-900: nth(map-get($colours, "blue"), 9);
|
||
|
||
$alert-100: nth(map-get($colours, "red"), 1);
|
||
$alert-200: nth(map-get($colours, "red"), 2);
|
||
$alert-300: nth(map-get($colours, "red"), 3);
|
||
$alert-400: nth(map-get($colours, "red"), 4);
|
||
$alert-500: nth(map-get($colours, "red"), 5);
|
||
$alert-600: nth(map-get($colours, "red"), 6);
|
||
$alert-700: nth(map-get($colours, "red"), 7);
|
||
$alert-800: nth(map-get($colours, "red"), 8);
|
||
$alert-900: nth(map-get($colours, "red"), 9);
|
||
|
||
$accent-100: nth(map-get($colours, "yellow"), 1);
|
||
$accent-200: nth(map-get($colours, "yellow"), 2);
|
||
$accent-300: nth(map-get($colours, "yellow"), 3);
|
||
$accent-400: nth(map-get($colours, "yellow"), 4);
|
||
$accent-500: nth(map-get($colours, "yellow"), 5);
|
||
$accent-600: nth(map-get($colours, "yellow"), 6);
|
||
$accent-700: nth(map-get($colours, "yellow"), 7);
|
||
$accent-800: nth(map-get($colours, "yellow"), 8);
|
||
$accent-900: nth(map-get($colours, "yellow"), 9);
|
||
|
||
$success-100: nth(map-get($colours, "green"), 1);
|
||
$success-200: nth(map-get($colours, "green"), 2);
|
||
$success-300: nth(map-get($colours, "green"), 3);
|
||
$success-400: nth(map-get($colours, "green"), 4);
|
||
$success-500: nth(map-get($colours, "green"), 5);
|
||
$success-600: nth(map-get($colours, "green"), 6);
|
||
$success-700: nth(map-get($colours, "green"), 7);
|
||
$success-800: nth(map-get($colours, "green"), 8);
|
||
$success-900: nth(map-get($colours, "green"), 9);
|
||
|
||
/*
|
||
$primary-100: $gray-100;
|
||
$primary-200: $gray-200;
|
||
$primary-300: $gray-300;
|
||
$primary-400: $gray-400;
|
||
$primary-500: $gray-500;
|
||
$primary-600: $gray-600;
|
||
$primary-700: $gray-700;
|
||
$primary-800: $gray-800;
|
||
$primary-900: $gray-900;
|
||
|
||
$alert-100: $gray-100;
|
||
$alert-200: $gray-200;
|
||
$alert-300: $gray-300;
|
||
$alert-400: $gray-400;
|
||
$alert-500: $gray-500;
|
||
$alert-600: $gray-600;
|
||
$alert-700: $gray-700;
|
||
$alert-800: $gray-800;
|
||
$alert-900: $gray-900;
|
||
|
||
$accent-100: $gray-100;
|
||
$accent-200: $gray-200;
|
||
$accent-300: $gray-300;
|
||
$accent-400: $gray-400;
|
||
$accent-500: $gray-500;
|
||
$accent-600: $gray-600;
|
||
$accent-700: $gray-700;
|
||
$accent-800: $gray-800;
|
||
$accent-900: $gray-900;
|
||
|
||
$success-100: $gray-100;
|
||
$success-200: $gray-200;
|
||
$success-300: $gray-300;
|
||
$success-400: $gray-400;
|
||
$success-500: $gray-500;
|
||
$success-600: $gray-600;
|
||
$success-700: $gray-700;
|
||
$success-800: $gray-800;
|
||
$success-900: $gray-900;
|
||
*/
|
||
|
||
|
||
$w-s5: 0.0625rem;
|
||
$w-s4: 0.125rem;
|
||
$w-s3: 0.25rem;
|
||
$w-s2: 0.5rem;
|
||
$w-s1: 0.75rem;
|
||
$w-0: 1rem;
|
||
$w-l1: 1.5rem;
|
||
$w-l2: 2rem;
|
||
$w-l3: 3rem;
|
||
$w-l4: 4rem;
|
||
$w-l5: 6rem;
|
||
$w-l6: 8rem;
|
||
$w-l7: 12rem;
|
||
$w-l8: 16rem;
|
||
|
||
$font-sans: "Noto Sans", sans-serif;
|
||
$font-serif: serif;
|
||
$font-monospace: monospace;
|
||
|
||
$font-heading: $font-sans;
|
||
$font-bulk: $font-sans;
|
||
$font-code: $font-monospace;
|
||
|
||
/**
|
||
* On the scaling of the headers. I’m a nerd, so here we go.
|
||
*
|
||
* I tried to determine a good scale a priori. It was clear to me that the
|
||
* observed difference between a 48px and 64px font is much smaller than the
|
||
* perceived difference between a 8px and 16px font size.
|
||
*
|
||
* Thus, the perception is *not* linear in the font size.
|
||
*
|
||
* I set the edge points to 200% and 100% (the h6 would get a bold font face)
|
||
* to compensate.
|
||
*
|
||
* The first attempt to get a visually appealing header size scale was thus to
|
||
* generate a logarithmic scale:
|
||
*
|
||
* numpy.logspace(np.log10(200), 2, 6, base=10)
|
||
*
|
||
* This leads to the following sizes:
|
||
*
|
||
* $_h-sizes: [200%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100%];
|
||
*
|
||
* This scale has too large differences between the larger font sizes, and too
|
||
* small differences between the smaller font sizes. Thus, I tried to invert
|
||
* this:
|
||
*
|
||
* 200 - numpy.logspace(2, np.log10(200), 6, base=10) + 100
|
||
*
|
||
* This leads to the following sizes:
|
||
*
|
||
* $_h-sizes: [200.0%, 185.13016450029647%, 168.0492089227105%, 148.42834334896025%, 125.88988734077518%, 100%];
|
||
*
|
||
* While this was better, it still didn’t look quite right yet. The next
|
||
* attempt was to go about a square function instead of log. The idea behind
|
||
* this is that the font size is essentially one edge of a rectangle, where the
|
||
* second edge depends on the first. A square function should thus generate a
|
||
* nicely appealing sequence:
|
||
*
|
||
* Again, we want the large differences to be on the large scales, too:
|
||
*
|
||
* xs = numpy.linspace(5, 0, 6); 4*xs*xs + 100
|
||
*
|
||
* This leads to the following sizes:
|
||
*
|
||
* $_h-sizes: [200.0%, 164.0%, 136.0%, 116.0%, 104.0%, 100.0%];
|
||
*
|
||
* While the first three headings looked nice with that, the others did not.
|
||
* Further research has shown me that others use an exponential scale (instead
|
||
* of a log scale), but with a rather small base (<1.6).
|
||
*
|
||
* Instead of taking one of the well-known factors (like golden ratio or major
|
||
* second), I opted for choosing a factor which gives me a clean 200%-100%
|
||
* range:
|
||
*
|
||
* numpy.power(math.pow(2, 1/5), numpy.linspace(5, 0, 6)) * 100
|
||
*
|
||
* The result (rounded to 8 digits) is:
|
||
*
|
||
* $_h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100.0%];
|
||
*
|
||
* And... This is the first logspace range. Derp. So why did I discard it in
|
||
* the first place? Now that I look at it, it looks amazing. Brains are weird.
|
||
*/
|
||
$h-sizes: [200.0%, 174.11011266%, 151.57165665%, 131.95079108%, 114.8698355%, 100.0%];
|
||
|
||
/**
|
||
* And for mobile devices, we want an even less aggressive scale. Let’s try
|
||
* 150%-100%.
|
||
*/
|
||
$h-small-sizes: [150.0%, 138.31618672%, 127.54245006%, 117.60790225%, 108.44717712%, 100.0%];
|
||
$small-screen-threshold: 40rem;
|
||
$medium-screen-threshold: 60rem;
|
||
$large-screen-threshold: 80rem;
|