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 top: 7%;
80 left: 25%;
81 width: 50%;
82}
83
84.logo {
85 width: 250px;
86}
87
88.footer {
89 color: white;
90 bottom: 20px;
91 font-size: 14px;
92 position: absolute;
93 width: 100%;
94 text-align: center;
95 margin-bottom: 20px;
96}
97
98.footer a {
99 color: white;
100 margin: 0;
101 transition: all 200ms;
102}
103
104.footer a:hover {
105 color: cyan;
106}
107
108.header {
109 color: white;
110 top: 20px;
111 font-size: 14px;
112 position: absolute;
113 width: 100%;
114 text-align: center;
115 margin-top: 20px;
116}
117
118.header a {
119 color: white;
120 margin: 0;
121 transition: all 200ms;
122}
123
124.header a:hover {
125 color: cyan;
126}
127
128.left {
129 display: inline-block;
130 margin-bottom: 30px;
131 margin-left: 0;
132 margin-right: 30px;
133}
134
135.right {
136 display: inline-block;
137}
138
139.right a {
140 display: inline-block;
141 margin-right: 30px;
142}
143
144@media only screen and (max-width: 40em) {
145 .left {
146 display: block;
147 margin-right: 0;
148 }
149 .right {
150 display: block;
151 }
152 .right a:last-child {
153 margin-right: 0;
154 }
155 .content {
156 left: 15%;
157 width: 70%;
158 }
159}