reprogl

1

2
// main rem font base and rem calc function
3
$rem-base: 16 !default;
4
@function rem-calc($pxWidth) {
5
  @return $pxWidth / $rem-base * 1rem;
6
}
7

8
$row-max-width: rem-calc(1200);
9

10
// font family
11
$main-font: 'DejaVu Sans Mono', monospace;
12
$main-font-weight: 200;
13

14
$headers-font: 'DejaVu Sans', Verdana, sans-serif;
15
$headers-weight: 900;
16
$headers-transform: none;
17

18
// colors
19

20
$color-main-dark: #23222D;
21
$color-main-light: #ffffff;
22
//$color-main-contrast: #FF4D4D;
23
$color-main-contrast: #90A54A;
24
$color-headers: $color-main-dark;
25
$color-comment-header-link: #FFF200;
26
$color-error: #EF3B3A;
27

28
// custom theme mixins
29
// example:
30
// clearfix usage:
31
//  .some-div {
32
//      ...
33
//      @extend %clearfix;
34
//  }
35

36
%clearfix {
37
    &:before,
38
    &:after {
39
        content: "";
40
        display: table;
41
        clear: both;
42
    }
43
}
44

45
@mixin green-button {
46
    display: inline-block;
47
    padding: rem-calc(5) rem-calc(15);
48
    background: $color-main-contrast;
49
    color: $color-main-light;
50
    font-weight: 400;
51
    -webkit-transition: background-color .3s;
52
    transition: background-color .3s;
53
    border-radius: rem-calc(3);
54
    margin-bottom: rem-calc(3);
55
    &:hover {
56
        color: $color-main-light;
57
        background: lighten($color-main-contrast, 5%);
58
    }
59
    &:focus, &:active {
60
        color: $color-main-light;
61
    }
62
}
63

64
@mixin corner-link {
65
    &:after {
66
        // https://www.w3schools.com/charsets/ref_utf_arrows.asp
67
        content: '\21B5';
68
    }
69
    &:hover, &:focus, &:active {
70
        color: darken($color-main-contrast, 10%);
71
    }
72
}
73

74
@mixin avatar-style {
75
    box-sizing: content-box;
76
    border: $color-main-light 3px solid;
77
    background: $color-main-light;
78
    padding: 0;
79
    height: 80px;
80
    width: 80px;
81
    margin-right: 0.6em;
82
    float: left;
83
    border-radius: rem-calc(7);
84
    img {
85
        border-radius: rem-calc(6);
86
    }
87
}
88

89
@mixin read-more-button {
90
    margin-top: rem-calc(10);
91
    margin-bottom: rem-calc(10);
92
    display: inline-block;
93
    padding: rem-calc(10) rem-calc(30);
94
    border: rem-calc(3) solid $color-main-dark;
95
    font-weight: 900;
96
    text-transform: uppercase;
97
    text-align: center;
98
    color: $color-main-dark;
99
    font-size: rem-calc(12);
100
    -webkit-transition: background-color .3s;
101
    transition: background-color .3s;
102
    &:hover {
103
        color: $color-main-light;
104
        background-color: $color-main-dark;
105
        text-decoration: none;
106
    }
107
    &:active, &:focus {
108
        color: $color-main-light;
109
        background-color: $color-main-dark;
110
    }
111
}
112

113
@mixin social-icons {
114
    .icon svg {
115
        height: 2em;
116
        width: auto;
117
        fill: #FFF;
118
        -webkit-transition: fill 0.5s;
119
        transition: fill 0.5s;
120
        &:hover {
121
            fill: $color-main-contrast;
122
        }
123
    }
124
    .icon.icon-telegram svg:hover {
125
        fill: #2AABEE;
126
    }
127
    .icon.icon-rss svg:hover {
128
        fill: #EE802F;
129
    }
130
    .icon.icon-mastodon svg:hover {
131
        fill: #6364FF;
132
    }
133
    .icon.icon-gitverse svg:hover {
134
        fill: #525EE1;
135
    }
136

137
    @media screen and (-ms-high-contrast: none), (-ms-high-contrast: active) {
138
        .icon svg {
139
            width: 2em;
140
        }
141
    }
142
}
143

144
@mixin flash-messages {
145
    .success-flash {
146
        padding: 0 rem-calc(15) rem-calc(15);
147
        .success-flash-content {
148
            background-color: #E3F2C1;
149
            color: $color-main-contrast;
150
            padding: rem-calc(30);
151
        }
152
    }
153
}
154