/
GlobalStyle.js
131 lines (110 loc) · 2.61 KB
/
GlobalStyle.js
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
120
121
122
123
124
125
126
127
128
129
130
import { createGlobalStyle, keyframes } from 'styled-components';
export const GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'Permanent Marker';
src: local('Permanent Marker'), local('PermanentMarker'),
url('/fonts/PermanentMarker-Regular.ttf') format('truetype');
}
@font-face {
font-family: 'Roboto Mono';
src: local('Roboto Mono'), local('RobotoMono'),
url('/fonts/RobotoMono.ttf') format('truetype');
}
@font-face {
font-family: 'Share Tech Mono';
src: local('Share Tech Mono'), local('ShareTechMono'),
url('./fonts/ShareTechMono.ttf') format('truetype');
}
* {
scroll-behavior: smooth;
}
body {
}
body {
font-family: 'Roboto Mono', 'Helvetica Neue Light', 'Helvetica Neue',
Helvetica, Arial, 'Lucida Grande', sans-serif;
font-weight: 300;
font-size: calc(11px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
line-height: calc(2em + (1.3 - 1.0) * ((100vw - 300px)/(1600 - 300)));
margin: 0;
padding: 0;
background: #000;
color: #fff;
}
a {
text-decoration: none;
color: #108db8;
font-weight: bold;
}
img {
max-width: 100%;
}
nav {
width: 100%;
background: #108db8;
}
nav a {
color: white;
padding: 1rem;
display: inline-block;
}
.content {
position:relative;
padding: 0;
margin: 0;
height: 100vh;
}
@keyframes cycle {
from { background-position: 0% 0; }
to { background-position: 200% 0; }
}
.wow-pink{
font-family: "Share Tech Mono";
letter-spacing: 0.04em;
margin: 1.5em 0 0.5em;
background-image: linear-gradient(to right, #ccaabb 0%, #dd99aa 25%, #aa6699 50%,#dd99aa 75%, #ccaabb 100%);
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: cycle 6s linear infinite;
}
.wow-horiz{
background-size: 200% auto;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: cycle 6s linear infinite;
background-image: linear-gradient(to right, rgba(252,176,69,1) 0%, rgba(253,75,41,1) 20%, rgba(233,72,63,1) 33%, rgba(131,58,180,1) 45%, rgba(225,36,64,1) 59%, rgba(253,29,29,1) 71%, rgba(252,176,69,1) 100%)
}
h1, h2, h3, h4 {
font-family: "Permanent Marker";
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.65em;
}
h4 {
font-size: 1.35em;
}
p {
}
code, pre.prism-code {
font-size: 0.75em;
padding: 0.5em;
background-image: linear-gradient(to right, #222 0%, #171717 20%, #111 80%, #171717 100%);
line-height: 1.37em;
letter-spacing: 0.04em;
font-family: 'monospace';
}
ul {
list-style-type: line ;
}
`