blog/styles-dark.scss at master · michaelgicheru/blog · GitHub

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
/*-- scss:defaults --*/

// Colors
$cream: #fffbf2;
$light-blue: #c0d6df;
$darker-blue: #121021;
$main-blue: #27548a;
$dark-blue: #171733;
$sand: #dda853;
$neon-green: #00ee00;
$lilac: #f6f2ff;
$primary: $cream !default;

// Main Colors
$body-bg: $darker-blue;
$body-color: $lilac;
$link-color: $light-blue;
$navbar-bg: $darker-blue;
$navbar-fg: $cream;
$navbar-hl: $light-blue;

// Inline code
$code-bg: darken($darker-blue, 5%);
$code-color: $neon-green;
$code-block-bg: $dark-blue;
$code-block-color: $neon-green;

// fonts
h1, h2, h3, h4, h5, h6, p, a {
  font-family: "Alegreya", cursive;
  font-size: 110% !important;
}

// div font
div {
  font-family: "Alegreya", cursive;
  font-size: 100%;
}

// table font
table, th, td {
  font-family: "Alegreya", cursive;
  font-size: 105% !important;
}

// font for Code
pre, code, .sourceCode pre, .sourceCode code, .highlight code {
  font-family: "Fira Code", monospace !important;
}

// navbar font
.navbar-brand {
  font-family: "Alegreya", cursive;
  font-size: 110%;
}

// navbar body font
nav.navbar .navbar-nav .nav-link {
  font-family: "Alegreya", cursive;
  font-size: 110% !important;
}

.nav-footer-center a {
  font-family: "Alegreya";
  font-size: 110% !important;
}

/* Add cursor after navbar brand */
.navbar-brand::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background-color: $primary;
    margin-left: 0.2em;
    vertical-align: text-bottom;
    animation: none;
}

/* Blink cursor only on hover */
.navbar-brand:hover::after {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 50% {
        opacity: 1;
    }
    50.01%, 100% {
        opacity: 0;
    }
}