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

Commit b6bf6ae

Browse files
author
Glisten**STAR**
committed
feat: finish mobile responsive(backend, bff, ready, crystal, visualize, footer, xray)
1 parent 537edc7 commit b6bf6ae

File tree

8 files changed

+393
-51
lines changed

8 files changed

+393
-51
lines changed

‎src/assets/global.css‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,20 +77,45 @@ body,
7777
color: #999 !important;
7878
}
7979

80+
.codejar-wrap .token.operator {
81+
color: #999 !important;
82+
}
83+
8084
/* .codejar-wrap .token.property, .codejar-wrap .token.selector {
8185
color: #25292E!important
8286
} */
8387

84-
.spectre .menu:not(.menu-nav) {
85-
box-shadow: none !important;
88+
@media (max-width: 1292px) {
89+
.codejar-linenumbers {
90+
font-size: 18px !important;
91+
}
92+
93+
.codejar-wrap code[class*='language-'],
94+
.codejar-wrap pre[class*='language-'] {
95+
font-size: 18px !important;
96+
}
8697
}
8798

8899
@media (max-width: 620px) {
100+
.codejar-wrap {
101+
margin-top: 60px;
102+
}
103+
89104
.column.col-12 {
90105
width: 100%;
91106
}
92107

93108
.backend button {
94109
width: 100%;
95110
}
111+
}
112+
113+
.spectre .menu:not(.menu-nav) {
114+
box-shadow: none !important;
115+
}
116+
117+
@media (max-width: 425px) {
118+
footer .form-switch i {
119+
margin-top: 10px !important
120+
}
96121
}

‎src/layouts/BFF.svelte‎

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="bff">
22
<Grid stack>
3-
<Col col="6">
3+
<Col col={!$media.sm ? '6' : '12'}>
44
<div class="bff_box">
55
<div class="bff_title">backend-for-frontend</div>
66
<div class="bff_content">
@@ -16,7 +16,7 @@
1616
</div>
1717
</div>
1818
</Col>
19-
<Col col="6">
19+
<Col col={!$media.sm ? '6' : '12'}>
2020
<CodeEditor {code} lang="js" loc {...$$restProps} />
2121
</Col>
2222
</Grid>
@@ -26,6 +26,7 @@
2626
import { Grid, Col, Button } from 'svelte-spectre';
2727
import { Logo } from '@/components/index';
2828
import CodeEditor from 'svelte-code-editor';
29+
import { media } from '@/stores/media';
2930
3031
let code = `/**
3132
* @api {post} /v0/calculations Submit a new calculation
@@ -88,4 +89,45 @@ async function post(req, res, next) {
8889
height: 40px;
8990
margin-right: 70px;
9091
}
92+
@media (max-width: 1440px) {
93+
.bff_content {
94+
font-size: 28px;
95+
}
96+
}
97+
@media (max-width: 1280px) {
98+
.bff_content {
99+
text-indent: 230px;
100+
}
101+
.bff_bottom {
102+
width: 80%;
103+
margin-right: 20px;
104+
}
105+
}
106+
@media (max-width: 1024px) {
107+
.bff_bottom_box {
108+
align-items: center;
109+
flex-direction: column;
110+
}
111+
.bff_bottom {
112+
margin-bottom: 40px;
113+
}
114+
}
115+
@media (max-width: 768px) {
116+
.bff_bottom img {
117+
margin-right: 10px;
118+
}
119+
.bff_content {
120+
font-size: 24px;
121+
padding-top: 6px;
122+
}
123+
}
124+
@media (max-width: 425px) {
125+
.bff_title {
126+
position: relative;
127+
margin-bottom: 20px;
128+
}
129+
.bff_content {
130+
text-indent: 0;
131+
}
132+
}
91133
</style>

‎src/layouts/Backend.svelte‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,5 +200,8 @@
200200
margin-left: -20px;
201201
margin-right: -20px;
202202
}
203+
.backend_description {
204+
font-size: 22px;
205+
}
203206
}
204207
</style>

‎src/layouts/Crystalline.svelte‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,31 @@
6161
bottom: 0;
6262
left: 0;
6363
}
64+
@media (max-width: 1440px) {
65+
.crystalline .content {
66+
font-size: 32px;
67+
padding-top: 6px;
68+
}
69+
.bottom_content {
70+
font-size: 24px;
71+
}
72+
}
73+
@media (max-width: 620px) {
74+
.crystalline .title {
75+
position: relative;
76+
top: 0;
77+
left: 0;
78+
margin-bottom: 40px;
79+
font-size: 14px;
80+
}
81+
.crystalline .content {
82+
text-indent: 0px;
83+
width: 100%;
84+
font-size: 22px;
85+
}
86+
.bottom_content {
87+
width: 100%;
88+
font-size: 18px;
89+
}
90+
}
6491
</style>

‎src/layouts/Ready.svelte‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,34 @@
5353
font-size: 36px;
5454
margin-bottom: 60px;
5555
}
56+
@media (max-width: 1200px) {
57+
.ready_content {
58+
padding: 200px 0 142px;
59+
}
60+
.ready_content h1 {
61+
font-size: 80px;
62+
}
63+
.ready_content h1.detail {
64+
font-size: 48px;
65+
}
66+
}
67+
@media (max-width: 1200px) {
68+
.ready_content h1 {
69+
font-size: 60px;
70+
}
71+
.ready_content h1.detail {
72+
font-size: 28px;
73+
}
74+
}
75+
@media (max-width: 620px) {
76+
.ready_content h1 {
77+
font-size: 30px;
78+
}
79+
.ready_content h1.detail {
80+
font-size: 18px;
81+
}
82+
.ready_content {
83+
padding: 80px 0 72px;
84+
}
85+
}
5686
</style>

‎src/layouts/Visualize.svelte‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="visualize">
22
<Grid stack>
3-
<Col col="5">
3+
<Col col={!$media.sm ? '5' : '12'}>
44
<Slidy
55
{slides}
66
{index}
@@ -19,7 +19,7 @@
1919
</figure>
2020
</Slidy>
2121
</Col>
22-
<Col col="7">
22+
<Col col={!$media.sm ? '7' : '12'}>
2323
<div class="visualize_text">
2424
<div class="visualize_box">
2525
<div class="title">online GUI app</div>
@@ -46,14 +46,15 @@
4646
import { Grid, Col, Button } from 'svelte-spectre';
4747
import { Slidy, type Slide } from '@slidy/svelte';
4848
import { Logo } from '@/components/index';
49+
import { media } from '@/stores/media';
4950
5051
const slides: Slide[] = [
51-
{ src: 'assets/img/stable_diffusion/db1dcbd0-440f-46c5-aa91-fc0e60d8d265.webp', width: 450, height: 800 },
52-
{ src: 'assets/img/stable_diffusion/ce62dfd6-6735-43bc-9e57-214f3fd8a6e5.webp', width: 450, height: 800 },
53-
{ src: 'assets/img/stable_diffusion/c98769d8-ba7a-4ce9-bf48-f9109868bddb.webp', width: 450, height: 800 },
54-
{ src: 'assets/img/stable_diffusion/266f65d5-7d12-4642-8cc2-0cd16e925367.webp', width: 450, height: 800 },
55-
{ src: 'assets/img/stable_diffusion/4aa1edac-bc4b-4e06-9183-ff10cad4fedc.webp', width: 450, height: 800 },
56-
{ src: 'assets/img/stable_diffusion/2a4d23ad-5470-4f59-8dbe-a869ef5df317.webp', width: 450, height: 800 },
52+
{ src: 'assets/img/stable_diffusion/db1dcbd0-440f-46c5-aa91-fc0e60d8d265.webp', width: 420, height: 800 },
53+
{ src: 'assets/img/stable_diffusion/ce62dfd6-6735-43bc-9e57-214f3fd8a6e5.webp', width: 420, height: 800 },
54+
{ src: 'assets/img/stable_diffusion/c98769d8-ba7a-4ce9-bf48-f9109868bddb.webp', width: 420, height: 800 },
55+
{ src: 'assets/img/stable_diffusion/266f65d5-7d12-4642-8cc2-0cd16e925367.webp', width: 420, height: 800 },
56+
{ src: 'assets/img/stable_diffusion/4aa1edac-bc4b-4e06-9183-ff10cad4fedc.webp', width: 420, height: 800 },
57+
{ src: 'assets/img/stable_diffusion/2a4d23ad-5470-4f59-8dbe-a869ef5df317.webp', width: 420, height: 800 },
5758
];
5859
let index: number = Math.floor(Math.random() * slides.length);
5960
</script>
@@ -127,4 +128,37 @@
127128
height: 169px;
128129
width: 351px;
129130
}
131+
@media (max-width: 1264px) {
132+
.visualize_bottom {
133+
width: 80%;
134+
margin-right: 20px;
135+
}
136+
.visualize_text .context {
137+
text-indent: 140px;
138+
font-size: 28px;
139+
}
140+
}
141+
@media (max-width: 1024px) {
142+
.visualize_text {
143+
padding-left: 60px;
144+
padding-right: 40px;
145+
}
146+
.visualize_bottom_box {
147+
align-items: center;
148+
flex-direction: column;
149+
}
150+
.visualize_bottom {
151+
margin-bottom: 40px;
152+
}
153+
}
154+
@media (max-width: 425px) {
155+
.visualize_box .title {
156+
position: relative;
157+
top: 0;
158+
margin-bottom: 20px;
159+
}
160+
.visualize_box .context {
161+
text-indent: 0px;
162+
}
163+
}
130164
</style>

0 commit comments

Comments
 (0)