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

Commit 537edc7

Browse files
author
Glisten**STAR**
committed
feat: finish responsive(APIguide, backend, OpenSource)
1 parent 6cdf7ee commit 537edc7

File tree

5 files changed

+181
-16
lines changed

5 files changed

+181
-16
lines changed

‎src/assets/global.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,3 +84,13 @@ body,
8484
.spectre .menu:not(.menu-nav) {
8585
box-shadow: none !important;
8686
}
87+
88+
@media (max-width: 620px) {
89+
.column.col-12 {
90+
width: 100%;
91+
}
92+
93+
.backend button {
94+
width: 100%;
95+
}
96+
}

‎src/layouts/ApiGuide.svelte‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,4 +62,17 @@
6262
.api_body img {
6363
border: 20px solid #5755d9;
6464
}
65+
@media (max-width: 1024px) {
66+
.api_header {
67+
font-size: 24px;
68+
}
69+
}
70+
@media (max-width: 620px) {
71+
.api_header {
72+
font-size: 18px;
73+
}
74+
.api_body {
75+
padding-top: 40px;
76+
}
77+
}
6578
</style>

‎src/layouts/Backend.svelte‎

Lines changed: 109 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,31 @@
11
<div class="backend" id="metis-backend">
22
<Grid stack>
3-
<Col col="10">
4-
<div class="backend_title">scientific backend</div>
5-
<div class="backend_text">
6-
The scientific backend is written in Python and able to manage complex multi-level simulation workflows via the AiiDA workflow manager. It
7-
orchestrates scientific codes TOPAS, FullProf, VASP, Quantum Espresso, CRYSTAL, etc. in the clouds of well-known commodity providers.
8-
</div>
9-
</Col>
10-
<Col col="2">
11-
<img class="backend_code_img" src="assets/img/code.webp" alt="code" />
12-
</Col>
3+
{#if !$media.sm}
4+
<Col col="10">
5+
<div class="backend_title">scientific backend</div>
6+
<div class="backend_text">
7+
The scientific backend is written in Python and able to manage complex multi-level simulation workflows via the AiiDA workflow manager. It
8+
orchestrates scientific codes TOPAS, FullProf, VASP, Quantum Espresso, CRYSTAL, etc. in the clouds of well-known commodity providers.
9+
</div>
10+
</Col>
11+
<Col col="2">
12+
<img class="backend_code_img" src="assets/img/code.webp" alt="code" />
13+
</Col>
14+
{:else}
15+
<Col col="12">
16+
<img class="backend_code_img" src="assets/img/code.webp" alt="code" />
17+
</Col>
18+
<Col col="12">
19+
<div class="backend_title">scientific backend</div>
20+
<div class="backend_text">
21+
The scientific backend is written in Python and able to manage complex multi-level simulation workflows via the AiiDA workflow manager. It
22+
orchestrates scientific codes TOPAS, FullProf, VASP, Quantum Espresso, CRYSTAL, etc. in the clouds of well-known commodity providers.
23+
</div>
24+
</Col>
25+
{/if}
1326
</Grid>
1427
<Grid stack>
15-
<Col col="6">
28+
<Col col={!$media.sm ? '6' : '12'}>
1629
<div class="backend_techs">
1730
<div class="backend_row">
1831
<img src="assets/img/backend/tech1.svg" alt="tech_stack" />
@@ -28,7 +41,7 @@
2841
</div>
2942
</div>
3043
</Col>
31-
<Col col="6">
44+
<Col col={!$media.sm ? '6' : '12'}>
3245
<div class="backend_bottom">
3346
<div class="backend_description">
3447
The scientific backend supports Microsoft Azure, Hetzner, Upcloud, and Google Cloud. All the scientific logic is encapsulated here. Download
@@ -42,6 +55,7 @@
4255

4356
<script lang="ts" context="module">
4457
import { Grid, Col, Button } from 'svelte-spectre';
58+
import { media } from '@/stores/media';
4559
</script>
4660

4761
<style lang="scss">
@@ -82,6 +96,7 @@
8296
padding: 54px 0 54px 50px;
8397
justify-content: flex-end;
8498
border-bottom: 1px solid #adadad;
99+
height: 150px;
85100
}
86101
.backend_row img + img {
87102
margin-left: 72px;
@@ -104,4 +119,86 @@
104119
font-size: 28px;
105120
line-height: 136%;
106121
}
122+
@media (max-width: 1770px) {
123+
.backend_text {
124+
width: 94%;
125+
}
126+
}
127+
@media (max-width: 1440px) {
128+
.backend_techs {
129+
margin-right: 20px;
130+
}
131+
.backend_row img + img {
132+
margin-left: 20px;
133+
}
134+
.backend_row:nth-child(2) img {
135+
width: 50%;
136+
height: 100%;
137+
}
138+
.backend_row:last-child {
139+
justify-content: flex-end;
140+
}
141+
.backend_row:nth-child(3) img {
142+
width: 50%;
143+
height: 100%;
144+
}
145+
}
146+
@media (max-width: 1160px) {
147+
.backend_text {
148+
margin-top: 10px;
149+
text-indent: 180px;
150+
font-size: 24px;
151+
width: 80%;
152+
}
153+
.backend_code_img {
154+
right: -400px;
155+
}
156+
}
157+
@media (max-width: 1024px) {
158+
.backend_row:nth-child(2) img {
159+
width: 50%;
160+
height: 80%;
161+
}
162+
.backend_row:nth-child(3) img {
163+
width: 50%;
164+
height: 80%;
165+
}
166+
.backend_bottom {
167+
margin-left: 40px;
168+
}
169+
}
170+
@media (max-width: 620px) {
171+
.backend {
172+
padding-top: 0px;
173+
}
174+
.backend_code_img {
175+
position: relative;
176+
top: 0;
177+
right: -300px;
178+
height: 354px;
179+
width: auto;
180+
object-fit: contain;
181+
z-index: 1;
182+
}
183+
.backend_title {
184+
position: relative;
185+
top: 0;
186+
left: 0;
187+
margin-top: 40px;
188+
}
189+
.backend_text {
190+
margin-top: 10px;
191+
text-indent: 0;
192+
width: 100%;
193+
}
194+
.backend_techs {
195+
margin-left: -20px;
196+
margin-right: -20px;
197+
}
198+
.backend_bottom {
199+
margin-top: 30px;
200+
margin-left: -20px;
201+
margin-right: -20px;
202+
}
203+
}
107204
</style>

‎src/layouts/Goal.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@
3939
4040
const activeTab = (index) => {
4141
active_tab = index;
42-
//console.log(active_tab);
4342
};
4443
</script>
4544

‎src/layouts/OpenSource.svelte‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<div class="open_source">
22
<img src="assets/img/dots.png" alt="dots" />
33
<Grid stack>
4-
<Col col="9">
5-
<span class="highlight">Metis is free and fully open source.</span>
4+
<Col col={!$media.md ? '9' : '12'}>
5+
{#if !$media.sm}
6+
<span class="highlight">Metis is free and fully open source.</span>
7+
{:else}
8+
<span class="highlight">Metis is free and fully</span><br />
9+
<span class="highlight">open source.</span>
10+
{/if}
611
<h1 class="text-black">We advocate this code for our partner organizations, synchrotrons, XRPD, and materials science community in general.</h1>
712
</Col>
813
<div class="p-centered">
9-
<Col col="3">
14+
<Col col={!$media.md ? '3' : '12'}>
1015
<Button variant="secondary" size="xl">Download now</Button>
1116
</Col>
1217
</div>
@@ -15,6 +20,7 @@
1520

1621
<script lang="ts" context="module">
1722
import { Grid, Col, Button } from 'svelte-spectre';
23+
import { media } from '@/stores/media';
1824
</script>
1925

2026
<style lang="scss">
@@ -55,4 +61,44 @@
5561
padding-top: 10px;
5662
margin-left: -20px;
5763
}
64+
@media (max-width: 1590px) {
65+
.open_source span,
66+
.open_source h1 {
67+
font-size: 42px;
68+
}
69+
}
70+
@media (max-width: 1048px) {
71+
.open_source span,
72+
.open_source h1 {
73+
font-size: 28px;
74+
}
75+
}
76+
@media (max-width: 840px) {
77+
.open_source {
78+
padding: 160px 20px;
79+
}
80+
.open_source span,
81+
.open_source h1 {
82+
font-size: 32px;
83+
}
84+
.open_source .p-centered {
85+
margin-top: 30px;
86+
}
87+
}
88+
@media (max-width: 620px) {
89+
.open_source {
90+
padding: 80px 20px;
91+
}
92+
.open_source img {
93+
position: absolute;
94+
z-index: -1;
95+
top: -69px;
96+
left: 0;
97+
height: 100px;
98+
width: 250px;
99+
}
100+
span.highlight {
101+
line-height: 136%;
102+
}
103+
}
58104
</style>

0 commit comments

Comments
 (0)