-
Notifications
You must be signed in to change notification settings - Fork 0
/
theme.css
119 lines (100 loc) · 3.19 KB
/
theme.css
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
112
113
114
115
116
117
118
119
/* base variables */
/* Edit the CSS properties in this file to create a custom
Distill theme. Only edit values in the right column
for each row; values shown are the CSS defaults.
To return any property to the default,
you may set its value to: unset
All rows must end with a semi-colon. */
/* Optional: embed custom fonts here with `@import` */
/* This must remain at the top of this file. */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab');
@import url('https://fonts.googleapis.com/css2?family=Roboto');
<script type="text/plain" src="animation.js"></script>
html {
/*-- Main font sizes --*/
--title-size: 50px;
--body-size: 1.075rem;
--code-size: 14px;
--aside-size: 12px;
--fig-cap-size: 13px;
/*-- Main font colors --*/
--title-color: #000000;
--header-color: rgba(0, 0, 0, 0.8);
--body-color: rgba(0, 0, 0, 0.8);
--aside-color: rgba(0, 0, 0, 0.6);
--fig-cap-color: rgba(0, 0, 0, 0.6);
/*-- Specify custom fonts ~~~ must be imported above --*/
--heading-font: "Roboto Slab", serif;
--mono-font: monospace;
--body-font: "Roboto", serif;
--navbar-font: "Roboto Slab", serif; /* websites + blogs only */
}
/*-- ARTICLE METADATA --*/
d-byline {
--heading-size: 0.6rem;
--heading-color: rgba(0, 0, 0, 0.5);
--body-size: 0.8rem;
--body-color: rgba(0, 0, 0, 0.8);
}
/*-- ARTICLE TABLE OF CONTENTS --*/
.d-contents {
--heading-size: 18px;
--contents-size: 13px;
}
/*-- ARTICLE APPENDIX --*/
d-appendix {
--heading-size: 15px;
--heading-color: rgba(0, 0, 0, 0.65);
--text-size: 0.8em;
--text-color: rgba(0, 0, 0, 0.5);
}
/*-- WEBSITE HEADER + FOOTER --*/
/* These properties only apply to Distill sites and blogs */
.distill-site-header {
--title-size: 18px;
--text-color: #000; /* edited */
--text-size: 18px;
--font-weight: 500;
--hover-color: #000; /* edited */
--bkgd-color: #fff; /* edited */
}
.distill-site-footer {
--text-color: #000;
--text-size: 12px;
--hover-color: #000;
--bkgd-color: #F8F9FA;
}
/*-- Additional custom styles --*/
/* Add any additional CSS rules below */
p a:hover {
background-color: #ffd89b;
background-size: 100%;
background-image:linear-gradient(45deg, #ffd89b, #FF9D00);
/* -webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent ;
text-decoration: underline;--*/
}
.distill-site-header a:hover {
border-bottom: 3px solid transparent;
border-image: linear-gradient(45deg, #ffd89b, #FF9D00);
border-image-slice: 1;
}
.ball {
position: absolute;
border-radius: 100%;
opacity: 0.5;
z-index: 0;
}
d-article a {
border-bottom: 3px solid transparent;
border-image: linear-gradient(45deg, #ffd89b, #FF9D00);
border-image-slice: 1;
width: 100%;
}
.distill-site-header a, .distill-site-header .title {
display: inline-block;
text-align: center;
padding: 14px 10px 1px 10px;
}