~kl/systemstack

ref: 7f69cc76011277bfb9b448af5f2d18e1091a9aac systemstack/assets/style/helpers/_mixins.scss -rw-r--r-- 2.0 KiB
7f69cc76Kevin Lipe move <head> to partial 3 months ago
                                                                                
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
100
101
102
103
104
105
106
107
108
109
110
111
/* ==========================================================================
   Mixins
   ========================================================================== */

// Clearfix
@mixin clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

// Font families
@mixin ff--serif($font-weight: normal) {
    font-family: 'Source Serif Pro', Georgia, serif;
    font-weight: $font-weight;
}

@mixin ff--sans-serif($font-weight: normal) {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: $font-weight;
}

@mixin ff--title($font-weight: normal) {
    font-family: 'Oi', Georgia, serif;
}

@mixin ff--code {
    font-family: 'Source Code Pro', monospace;
}

// Font sizing
@mixin fs--title {
    line-height: 1.5;
    font-size: 4.8rem; // 48px
}

@mixin fs--article-title {
    @include ff--sans-serif;
    line-height: 1.5;
    font-size: 3.6rem; // 36px
}

@mixin fs--heading-1 {
    @include ff--sans-serif;
    line-height: 1.5;
    font-size: 3.2rem; // 32px
    font-weight: bold;
}

@mixin fs--heading-2 {
    @include ff--sans-serif;
    line-height: 1.5;
    font-size: 2.8rem; // 30px
 //   font-weight: 600;
}

@mixin fs--heading-3 {
    @include ff--sans-serif;
    line-height: 1.5;
    font-size: 2.2rem; // 22px
}

@mixin fs--heading-4 {
    @include ff--serif;
    line-height: 1.6;
    font-size: 1.8rem; // 18px
}

@mixin fs--body {
    @include ff--serif;
    line-height: 1.5;
    font-size: 2rem; // 18px
}

@mixin fs--footer {
    line-height: 1.5;
    font-size: 1.8rem; // 16px
}

@mixin fs--meta {
    line-height: 1;
    font-size: 2rem; // 18px
}

@mixin fs--caption {
    line-height: 1;
    font-size: 1.8rem; // 16px
}

@mixin fs--code {
    font-size: 1.4rem;
    line-height: 1.5;
}

// Visually hide content
@mixin visually-hidden {
    position: absolute;
    margin: -1px;
    border: 0;
    padding: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}