static/style.css (view raw)
1html,
2body {
3 background: #021012;
4}
5
6a {
7 color: #00ffff;
8 display: inline-block;
9 /* margin: 0 20px; */
10 position: relative;
11 text-decoration: none;
12}
13
14a:after {
15 content: "";
16 height: 1px;
17 background: white;
18 position: absolute;
19 pointer-events: none;
20 bottom: -5px;
21 left: 0;
22 right: 0;
23 opacity: 0;
24 transform: scale(0, 1);
25 transition: all 200ms;
26}
27
28a:hover:after {
29 opacity: 1;
30 transform: scale(1, 1);
31}
32
33code {
34 background: #222;
35 padding: 5px;
36}
37
38.container {
39 position: absolute;
40 /* overflow: hidden; */
41 top: 0;
42 bottom: 0;
43 left: 0;
44 right: 0;
45 color: white;
46 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
47
48 -webkit-animation: fadein 3s;
49 -moz-animation: fadein 3s;
50 -ms-animation: fadein 3s;
51 -o-animation: fadein 3s;
52 animation: fadein 3s;
53}
54
55@keyframes fadein {
56 from { opacity: 0; }
57 to { opacity: 1; }
58}
59
60@-moz-keyframes fadein {
61 from { opacity: 0; }
62 to { opacity: 1; }
63}
64
65@-webkit-keyframes fadein {
66 from { opacity: 0; }
67 to { opacity: 1; }
68}
69
70.introduction {
71 position: absolute;
72 top: 50%;
73 transform: translateY(-50%);
74 width: 100%;
75}
76
77.content {
78 position: absolute;
79 left: 25%;
80 width: 50%;
81}
82
83.logo {
84 width: 250px;
85}
86
87.footer {
88 color: #666;
89 bottom: 20px;
90 font-size: 14px;
91 position: absolute;
92 width: 100%;
93 text-align: center;
94 margin-bottom: 20px;
95}
96
97.footer a {
98 color: #666;
99 margin: 0;
100 transition: all 200ms;
101}
102
103.footer a:hover {
104 color: white;
105}
106
107.header {
108 color: #666;
109 top: 20px;
110 font-size: 14px;
111 position: absolute;
112 width: 100%;
113 text-align: center;
114 margin-top: 20px;
115}
116
117.header a {
118 color: #666;
119 margin: 0;
120 transition: all 200ms;
121}
122
123.header a:hover {
124 color: white;
125}
126
127.left {
128 display: inline-block;
129 margin-bottom: 30px;
130 margin-left: 0;
131 margin-right: 30px;
132}
133
134.right {
135 display: inline-block;
136}
137
138.right a {
139 display: inline-block;
140 margin-right: 30px;
141}
142
143@media only screen and (max-width: 40em) {
144 .left {
145 display: block;
146 margin-right: 0;
147 }
148 .right {
149 display: block;
150 }
151 .right a:last-child {
152 margin-right: 0;
153 }
154 .content {
155 left: 15%;
156 width: 70%;
157 }
158}