Skip to content
This repository was archived by the owner on Dec 5, 2024. It is now read-only.

Commit de5ec67

Browse files
hiroppyhiroppy
committed
feat(client): get rid of webslides
1 parent 6418a94 commit de5ec67

File tree

20 files changed

+1546
-4732
lines changed

20 files changed

+1546
-4732
lines changed

‎packages/client/assets/style/code.css

+2-1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ pre[class*='language-'] {
3030
@media screen and (min-width: 768px) {
3131
pre > code[class*='language-'],
3232
pre[class*='language-'] {
33-
font-size: 2rem !important;
33+
font-size: 1.8rem !important;
34+
width: min-content;
3435
}
3536
}

‎packages/client/assets/style/common.css

+177-20
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,62 @@
1-
@import './variable';
1+
@import 'swiper/swiper-bundle.css';
2+
@import 'modern-normalize/modern-normalize.css';
3+
@import './variable.css';
4+
@import './customize.css';
25
@import './sidebar.css';
6+
@import './grid.css';
37

48
html {
9+
color: var(--color-black);
510
font-size: 62.5%;
611
}
712

813
body {
914
font-size: 2.4rem;
1015
}
1116

17+
html,
18+
body {
19+
font-family: 'Roboto', 'San Francisco', helvetica, arial, sans-serif;
20+
font-weight: 300;
21+
line-height: 1;
22+
text-rendering: optimizeLegibility;
23+
}
24+
25+
h1,
26+
h2,
27+
h3,
28+
h4,
29+
h5,
30+
h6 {
31+
font-weight: inherit;
32+
margin: 0;
33+
}
34+
35+
a,
36+
a:active,
37+
a:focus,
38+
a:visited,
39+
input:focus,
40+
textarea:focus,
41+
button {
42+
text-decoration: none;
43+
-webkit-transition: all 0.3s ease-out;
44+
transition: all 0.3s ease-out;
45+
}
46+
1247
a {
1348
padding-left: 0;
1449
}
1550

51+
a:hover {
52+
color: #3af;
53+
}
54+
55+
p a:active {
56+
position: relative;
57+
top: 2px;
58+
}
59+
1660
p {
1761
margin: 0;
1862
}
@@ -30,35 +74,148 @@ img {
3074
margin: 0 auto;
3175
}
3276

33-
.fa-hatena:before {
34-
content: 'B!';
35-
font-family: Verdana;
36-
font-weight: bold;
77+
ol {
78+
padding-left: 0;
3779
}
3880

39-
.toc {
40-
background: transparent;
81+
p,
82+
li,
83+
dt,
84+
dd,
85+
table,
86+
textarea,
87+
label {
88+
line-height: 3.2rem;
4189
}
4290

43-
#root {
44-
display: flex;
91+
li,
92+
p:last-child {
93+
margin-bottom: 0;
4594
}
4695

47-
#webslides {
48-
flex: 1;
96+
ul > li,
97+
ol > li {
98+
margin-left: 3.2rem;
4999
}
50100

51-
#webslides-zoomed {
52-
position: absolute;
53-
width: 100%;
101+
li li {
102+
font-size: 100%;
54103
}
55104

56-
.katex-html {
57-
display: none;
105+
h1 {
106+
font-size: 4rem;
107+
line-height: 5.6rem;
58108
}
59109

60-
.qr {
61-
width: 320px;
62-
height: 320px;
63-
margin: 0 auto;
110+
@media (min-width: 768px) {
111+
h1 {
112+
font-size: 5.6rem;
113+
line-height: 7.2rem;
114+
}
115+
}
116+
117+
@media (min-width: 850px) {
118+
.slide-box {
119+
margin: auto 24px;
120+
}
121+
}
122+
123+
h1 span {
124+
font-style: italic;
125+
}
126+
127+
h2 {
128+
font-size: 3.2rem;
129+
line-height: 4.8rem;
130+
}
131+
@media (min-width: 768px) {
132+
h2 {
133+
font-size: 4.8rem;
134+
line-height: 6.4rem;
135+
}
136+
}
137+
138+
h3 {
139+
font-size: 2.4rem;
140+
line-height: 4rem;
141+
}
142+
@media (min-width: 768px) {
143+
h3 {
144+
font-size: 4rem;
145+
line-height: 5.6rem;
146+
}
147+
}
148+
149+
h4 {
150+
font-size: 2.2rem;
151+
line-height: 4rem;
152+
}
153+
@media (min-width: 768px) {
154+
h4 {
155+
font-size: 3.2rem;
156+
line-height: 4.8rem;
157+
}
158+
}
159+
160+
h5 {
161+
font-size: 2rem;
162+
font-weight: 600;
163+
line-height: 3.2rem;
164+
}
165+
166+
h6 {
167+
font-size: 1.8rem;
168+
font-weight: 600;
169+
line-height: 3.2rem;
170+
}
171+
172+
hr {
173+
background: radial-gradient(
174+
ellipse at center,
175+
rgba(0, 20, 80, 0.2) 0,
176+
rgba(255, 255, 255, 0) 75%
177+
);
178+
}
179+
180+
hr:after {
181+
background-color: rgba(255, 255, 255, 0.8);
182+
color: #333;
183+
}
184+
185+
pre {
186+
background: #fff;
187+
border: 1px solid rgba(0, 20, 80, 0.1);
188+
-webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
189+
box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
190+
}
191+
192+
nav ul {
193+
display: -webkit-box;
194+
display: -ms-flexbox;
195+
display: flex;
196+
-ms-flex-wrap: wrap;
197+
flex-wrap: wrap;
198+
/*====align left====*/
199+
-webkit-box-pack: start;
200+
-ms-flex-pack: start;
201+
justify-content: flex-start;
202+
/* ==== align center ====*/
203+
/*justify-content: center; */
204+
/*====align right====*/
205+
/* justify-content: flex-end; */
206+
/*====separated columns li a====*/
207+
/* justify-content: space-between; */
208+
/*====separated columns centered li a====*/
209+
/*justify-content: space-around;*/
210+
}
211+
nav ul li {
212+
float: left;
213+
list-style: none;
214+
position: relative;
215+
}
216+
217+
ul {
218+
list-style: square;
219+
text-indent: inherit;
220+
padding-left: 0;
64221
}

‎packages/client/assets/style/customize.css

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
#root {
2+
display: flex;
3+
}
4+
5+
.katex-html {
6+
display: none;
7+
}
8+
9+
.fa-hatena:before {
10+
content: 'B!';
11+
font-family: Verdana;
12+
font-weight: bold;
13+
}
14+
15+
.qr {
16+
width: 320px;
17+
height: 320px;
18+
margin: 0 auto;
19+
}
20+
21+
.swiper-container {
22+
height: 100vh;
23+
}
24+
25+
.swiper-slide {
26+
display: flex;
27+
align-items: center;
28+
justify-content: center;
29+
overflow-y: auto;
30+
}
31+
32+
.slide-box {
33+
padding: 16px 0;
34+
text-align: center;
35+
max-width: 100%;
36+
margin: auto;
37+
min-width: 320px;
38+
}

‎packages/client/assets/style/grid.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
.grid {
2+
clear: both;
3+
display: flex;
4+
flex-wrap: wrap;
5+
margin-left: auto;
6+
margin-right: auto;
7+
}
8+
9+
.grid:after {
10+
clear: both;
11+
}
12+
13+
.grid:before {
14+
content: '';
15+
display: table;
16+
}
17+
18+
.grid > .column {
19+
display: flex;
20+
flex: auto;
21+
flex-direction: column;
22+
padding: 2.4rem;
23+
position: relative;
24+
transition: 0.3s;
25+
width: 100%;
26+
}
27+
28+
.grid.vertical-align .column {
29+
justify-content: center;
30+
}
31+
32+
@media (min-width: 768px) {
33+
.grid > .column {
34+
width: 25%;
35+
}
36+
.grid.sm .column:nth-child(1) {
37+
width: 30%;
38+
}
39+
.grid.sm .column:nth-child(2) {
40+
width: 70%;
41+
}
42+
.grid.ms .column:nth-child(1) {
43+
width: 70%;
44+
}
45+
.grid.ms .column:nth-child(2) {
46+
width: 30%;
47+
}
48+
.grid.sms .column:nth-child(2) {
49+
width: 50%;
50+
}
51+
}

‎packages/client/assets/style/table.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
table {
2+
margin-bottom: 3.2rem;
3+
margin-top: 3.2rem;
4+
}
5+
6+
td,
7+
th,
8+
thead {
9+
border-spacing: 0;
10+
padding: 0.7rem 2.4rem;
11+
}
12+
13+
thead th,
14+
th {
15+
cursor: default;
16+
font-weight: 600;
17+
text-align: left;
18+
text-transform: uppercase;
19+
white-space: nowrap;
20+
}
21+
22+
thead,
23+
td.goals {
24+
font-weight: 600;
25+
text-shadow: none;
26+
}
27+
28+
tr > td {
29+
font-weight: 400;
30+
}
31+
32+
table td,
33+
th,
34+
thead {
35+
border: 1px solid rgba(0, 0, 0, 0.5);
36+
}
37+
38+
thead {
39+
background-color: rgba(0, 0, 0, 0.3);
40+
}
41+
42+
tr:nth-child(even) > td {
43+
background: rgba(0, 0, 0, 0.1);
44+
}
45+
46+
tr > td {
47+
border-top: 1px solid rgba(0, 0, 0, 0.5);
48+
}
49+
50+
td:hover,
51+
tr:nth-child(even) > td:hover {
52+
background-color: rgba(255, 255, 255, 0.5);
53+
}

‎packages/client/assets/style/variable.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
--color-orange: #ff874d;
44
--color-white: #f5f5f5;
55
--color-gray: #b7b8b7;
6-
--color-black: #222;
6+
--color-black: #333;
77
}

0 commit comments

Comments
 (0)