summaryrefslogtreecommitdiffstats
path: root/assets/css/_vars.scss
blob: 0df3a610e79f941b22b279743829748da5f696ad (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
$breakpoints: (
    lg: 1500px,
    md: 900px,
    sm: 600px,
    xs: 400px,
);

$unit-intervals: (
    'px':  1,
    'em':  .01,
    'rem': .01,
    '':    0
);

$responsive-mod-scale: (
    xs: (.8rem, 1.35),
    md: (.8rem, 1.53)
);

$font-fam--text:  'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
$font-fam--large: 'Garet', $font-fam--text;
$font-fam--mono:  'Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
$font-size:       16px;
$line-height:     1.7;
$content--width:  42rem;

$gray0: hsl(220, 7%, 7%);
$gray1: hsl(220, 7%, 11%);
$gray2: hsl(220, 7%, 18%);
$gray3: hsl(220, 7%, 23%);
$gray4: hsl(220, 7%, 38%);
$gray5: hsl(220, 7%, 60%);
$gray6: hsl(220, 7%, 76%);
$gray7: hsl(220, 7%, 100%);

@include store((
    --dims: (
        --outer:  4rem,
        --indent: 2rem,
    ),
    --colors: (
        --bg-hi:  $gray0, // Darker background
        --bg:     $gray1, // Background
        --bg-lo:  $gray2, // Lighter background
    
        --obj-hi: $gray3,
        --obj:    $gray4,
    
        --fg-hi:  $gray5, // Faint text
        --fg:     $gray6, // Text
        --fg-lo:  $gray7, // Strong text

        --accent: (
            --h:     354,
            --s:     84%,
            --l:     55%,
            --color: hsl(var(--colors--accent--h), var(--colors--accent--s), var(--colors--accent--l)),
        ),

        --focus-ring: var(--colors--accent--color),

        --select: (
            --bg:     rgba($gray7, .996),
            --img-bg: rgba($gray7, .5),
            --fg:     $gray0,
        ),

        --link: (
            --idle: var(--colors--fg-lo),
        )
    )
));

@each $breakpoint in map-keys($breakpoints) {
    @include media('<=#{$breakpoint}') {
        @include store((
            --colors: ()
        ), $breakpoint);
    }
}

@include store((
    --dims: (
        --outer: 3.5rem,
    ),
), 'sm');

:root {
    --heading--fg: var(--colors--fg-lo);

    --code--fg: var(--colors--fg-hi);

    --code-block--fg: var(--colors--fg-hi);

    --page--link--idle--fg:    var(--link--idle--fg); // hsl(45, 100%, 70%); // hsl(215, 100%, 80%); // var(--link--idle--fg); // #ffd866;
    --page--link--visited--fg: var(--colors--fg); // hsl(23, 89%, 65%); // hsl(260, 58%, 78%);  // var(--fg-lo); // #f59458;
    --page--link--hover--bg:   var(--page--link--idle--fg);
    --page--link--hover--fg:   #000;
}