diff options
Diffstat (limited to 'style.css')
-rw-r--r-- | style.css | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/style.css b/style.css new file mode 100644 index 0000000..fd07289 --- /dev/null +++ b/style.css | |||
@@ -0,0 +1,112 @@ | |||
1 | :root { | ||
2 | --cyan: #00FECA; | ||
3 | --pink: #FF2079; | ||
4 | --black: #212121; | ||
5 | --light-black: #535353; | ||
6 | --white: #ffffff; | ||
7 | --dark-white: #d4d4d4; | ||
8 | } | ||
9 | |||
10 | body { | ||
11 | font-family: sans; | ||
12 | background-color: var(--white); | ||
13 | color: var(--black); | ||
14 | font-size: 18px; | ||
15 | padding: 0; | ||
16 | padding-top: 2rem; | ||
17 | text-align: center; | ||
18 | } | ||
19 | |||
20 | .posts { | ||
21 | text-align: left; | ||
22 | display: inline-block; | ||
23 | width: 100%; | ||
24 | } | ||
25 | |||
26 | @media only screen and (min-width: 1000px) { | ||
27 | .posts { | ||
28 | text-align: left; | ||
29 | display: inline-block; | ||
30 | width: 60%; | ||
31 | } | ||
32 | } | ||
33 | |||
34 | |||
35 | .post { | ||
36 | margin: 2rem; | ||
37 | } | ||
38 | |||
39 | hr { | ||
40 | color: var(--light-black); | ||
41 | } | ||
42 | |||
43 | .date { | ||
44 | font-weight: 400; | ||
45 | font-size: 0.8rem; | ||
46 | color: var(--light-black); | ||
47 | } | ||
48 | |||
49 | .separator { | ||
50 | margin: 0; | ||
51 | margin-top: 1rem; | ||
52 | margin-bottom: 1rem; | ||
53 | border-top: 1px solid var(--dark-white); | ||
54 | } | ||
55 | |||
56 | .black-circle { | ||
57 | margin:0 auto; | ||
58 | width: 10rem; | ||
59 | height: 10rem; | ||
60 | border: 0px solid transparent; | ||
61 | border-radius: 50%; | ||
62 | background-color: var(--black); | ||
63 | } | ||
64 | |||
65 | .heading { | ||
66 | margin:0 auto; | ||
67 | color: var(--white); | ||
68 | text-align: center; | ||
69 | font-size: 120px; | ||
70 | font-family: 'Iosevka Term', sans-serif; | ||
71 | text-shadow: 0.25rem 0rem var(--cyan), -0.25rem 0rem var(--pink); | ||
72 | line-height: 8.5rem; | ||
73 | font-style: italic; | ||
74 | } | ||
75 | |||
76 | a, a:hover, a:visited, a:active { | ||
77 | text-decoration: none; | ||
78 | transition: ease 0.2s; | ||
79 | } | ||
80 | |||
81 | a:hover, a:active { | ||
82 | background-color: var(--dark-white); | ||
83 | } | ||
84 | |||
85 | .post-link { | ||
86 | color: var(--black); | ||
87 | font-family: sans-serif; | ||
88 | font-weight: 600; | ||
89 | font-size: 1rem; | ||
90 | text-decoration: none; | ||
91 | text-decoration-skip: objects edges box-decoration; | ||
92 | } | ||
93 | |||
94 | .post-end-link, .post-end-link:hover, .post-end-link:visited, .post-end-link:active { | ||
95 | text-decoration: none; | ||
96 | color: var(--light-black); | ||
97 | text-shadow: none; | ||
98 | } | ||
99 | |||
100 | .post-text { | ||
101 | font-size: 14px; | ||
102 | } | ||
103 | |||
104 | pre, code { | ||
105 | background-color: var(--dark-white); | ||
106 | color: var(--black); | ||
107 | } | ||
108 | |||
109 | pre { | ||
110 | padding: 1rem; | ||
111 | overflow: auto; | ||
112 | } | ||