1 | html {
|
2 | font-family: sans-serif;
|
3 | font-size: 18px;
|
4 | line-height: 1.5;
|
5 | width: 100%;
|
6 | height: 100%;
|
7 |
|
8 | background: white;
|
9 | color: #33333d;
|
10 |
|
11 | -webkit-user-select: none;
|
12 |
|
13 | @media (max-width: 625px) {
|
14 | font-size: 14px;
|
15 | text-align: justify;
|
16 | }
|
17 | }
|
18 |
|
19 | body {
|
20 | height: 100%;
|
21 | width: 100%;
|
22 | padding: 0;
|
23 | margin: 0;
|
24 | overflow-y: scroll;
|
25 | }
|
26 |
|
27 | a {
|
28 | color: #027AD2;
|
29 | }
|
30 |
|
31 | section {
|
32 | min-height: 50%;
|
33 | padding: 150px 10vw;
|
34 |
|
35 | @media (max-width: 625px) {
|
36 | padding: 25px 15px;
|
37 | }
|
38 |
|
39 | &:nth-child(2n-1) {
|
40 | background: #fbfbfb;
|
41 | box-shadow: inset 0 1px 0 0 white;
|
42 | }
|
43 |
|
44 | &:not(:last-child) {
|
45 | border-bottom: 1px solid #eee;
|
46 | }
|
47 | }
|
48 |
|
49 | pre {
|
50 | background: white;
|
51 | border-top: 1px solid #eee;
|
52 | border-bottom: 1px solid #eee;
|
53 | padding: 25px;
|
54 | font-size: .9rem;
|
55 | text-align: left;
|
56 | overflow-x: auto;
|
57 | }
|
58 |
|
59 | code {
|
60 | font-family: monospace;
|
61 | font-size: .9rem;
|
62 | }
|
63 |
|
64 | h2 {
|
65 | margin-top: 50px;
|
66 | font-size: 2rem;
|
67 | }
|
68 |
|
69 | h3 {
|
70 | margin-top: 80px;
|
71 | font-size: 1.2rem;
|
72 | }
|
73 |
|
74 | h4 {
|
75 | margin-top: 40px;
|
76 | font-size: 1rem;
|
77 | }
|
78 |
|
79 | ul li {
|
80 | font-size: .9rem;
|
81 | }
|
82 |
|
83 | p {
|
84 | text-indent: 2rem;
|
85 | }
|
86 |
|
87 | blockquote p {
|
88 | text-indent: 0;
|
89 | }
|
90 |
|
91 | #title {
|
92 | padding: 0;
|
93 | height: 100%;
|
94 | text-align: center;
|
95 | position: relative;
|
96 |
|
97 | h1 {
|
98 | position: absolute;
|
99 | top: 45%;
|
100 | width: 100%;
|
101 | transform: translateY(-50%);
|
102 | margin: 0;
|
103 |
|
104 | font-family: cursive;
|
105 | font-size: 6rem;
|
106 | font-weight: normal;
|
107 |
|
108 | @media (max-width: 625px) {
|
109 | font-size: 4rem;
|
110 | }
|
111 | }
|
112 | }
|
113 |
|
114 | #nav {
|
115 | position: fixed;
|
116 | top: 35px;
|
117 | right: 30px;
|
118 | z-index: 5;
|
119 |
|
120 | @media (max-width: 625px) {
|
121 | top: 15px;
|
122 | right: 10px;
|
123 | }
|
124 |
|
125 | #nav-icon {
|
126 | position: absolute;
|
127 | top: 0;
|
128 | right: 0;
|
129 | padding: 6px;
|
130 | background: rgba(255,255,255,.9);
|
131 | border-radius: 2px;
|
132 | border: 1px solid transparent;
|
133 | font-size: 0;
|
134 | z-index: 4;
|
135 | }
|
136 |
|
137 | #nav-menu {
|
138 | display: none;
|
139 | position: relative;
|
140 | top: 35px;
|
141 | right: 0;
|
142 | margin: 0;
|
143 | border: 1px solid #efefef;
|
144 | border-bottom: 1px solid #ddd;
|
145 | border-radius: 2px;
|
146 | padding: 25px;
|
147 | background: rgba(255,255,255,.95);
|
148 | box-shadow: 0 1px 3px 0 #eee;
|
149 | z-index: 3;
|
150 |
|
151 | li {
|
152 | list-style: none;
|
153 |
|
154 | a {
|
155 | display: block;
|
156 | text-decoration: none;
|
157 | padding: 3px 0;
|
158 | color: inherit;
|
159 | font-size: 1rem;
|
160 |
|
161 | &:hover {
|
162 | text-decoration: underline;
|
163 | }
|
164 | }
|
165 | }
|
166 | }
|
167 |
|
168 | &:hover {
|
169 | ul {
|
170 | display: block;
|
171 | }
|
172 |
|
173 | #nav-icon {
|
174 | border: 1px solid #efefef;
|
175 | border-bottom: none;
|
176 | }
|
177 |
|
178 | #nav-menu {
|
179 | display: block;
|
180 | }
|
181 | }
|
182 | }
|