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

Commit b02f723

Browse files
blokhinblokhin
authored
Merge pull request #10 from GlistenSTAR/Marko
Finish Mobile responsive
2 parents a94f651 + fa6c881 commit b02f723

File tree

17 files changed

+870
-143
lines changed

17 files changed

+870
-143
lines changed

‎src/assets/global.css‎

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -77,16 +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) {
89-
.hero_component button {
100+
.codejar-wrap {
101+
margin-top: 60px;
102+
}
103+
104+
.column.col-12 {
105+
width: 100%;
106+
}
107+
108+
.backend button {
90109
width: 100%;
91110
}
92111
}
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+
}
121+
}

‎src/components/Logo.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<span {id} style:--width={size}>
2-
<Icon size="4x" {color}>
2+
<Icon size={!$media.sm ? '4x' : '2x'} {color}>
33
{@html MetisLogo}
44
</Icon>
55
</span>
66

77
<script lang="ts" context="module">
88
import { Icon } from 'svelte-spectre';
99
import MetisLogo from '@/assets/img/metis.svg';
10+
import { media } from '@/stores/media';
1011
</script>
1112

1213
<script lang="ts">

‎src/components/Marquee.svelte‎

Lines changed: 76 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,41 @@
11
<div class="flow">
2-
<div class="flow_wrapper">
3-
<div class="flow_item">
4-
<span class="sign">#</span>
5-
<span>Digital materials lab assistant</span>
6-
</div>
7-
<div class="flow_item">
8-
<span class="sign">#</span>
9-
<span>Free open-source virtual materials environment</span>
10-
</div>
11-
<div class="flow_item">
12-
<span class="sign">#</span>
13-
<span>Highly-scalable cheap scientific simulations in the cloud</span>
14-
</div>
15-
<div class="flow_item">
16-
<span class="sign">#</span>
17-
<span>Modular reusable component-based system</span>
18-
</div>
2+
<div class="marquee">
3+
<ul class="marquee__content">
4+
<div class="flow_item">
5+
<span class="sign">#</span>
6+
<span>Digital materials lab assistant</span>
7+
</div>
8+
<div class="flow_item">
9+
<span class="sign">#</span>
10+
<span>Free open-source virtual materials environment</span>
11+
</div>
12+
<div class="flow_item">
13+
<span class="sign">#</span>
14+
<span>Highly-scalable cheap scientific simulations in the cloud</span>
15+
</div>
16+
<div class="flow_item">
17+
<span class="sign">#</span>
18+
<span>Modular reusable component-based system</span>
19+
</div>
20+
</ul>
21+
<ul aria-hidden="true" class="marquee__content">
22+
<div class="flow_item">
23+
<span class="sign">#</span>
24+
<span>Digital materials lab assistant</span>
25+
</div>
26+
<div class="flow_item">
27+
<span class="sign">#</span>
28+
<span>Free open-source virtual materials environment</span>
29+
</div>
30+
<div class="flow_item">
31+
<span class="sign">#</span>
32+
<span>Highly-scalable cheap scientific simulations in the cloud</span>
33+
</div>
34+
<div class="flow_item">
35+
<span class="sign">#</span>
36+
<span>Modular reusable component-based system</span>
37+
</div>
38+
</ul>
1939
</div>
2040
</div>
2141

@@ -30,31 +50,40 @@
3050
margin-top: -8px;
3151
display: flex;
3252
}
33-
.flow_wrapper {
34-
height: 100%;
35-
width: 200vw;
53+
.flow ul {
54+
margin-top: 0px;
55+
margin-bottom: 0px;
56+
}
57+
.marquee {
58+
--gap: 13rem;
59+
position: relative;
60+
display: flex;
61+
overflow: hidden;
62+
user-select: none;
63+
gap: 0 var(--gap);
64+
}
65+
66+
.marquee__content {
67+
flex-shrink: 0;
3668
display: flex;
37-
animation: running-anim 10s forwards infinite linear;
38-
@keyframes running-anim {
39-
from {
40-
transform: translateX(0);
41-
}
42-
to {
43-
transform: translateX(-39.5vw);
44-
}
69+
gap: 0 var(--gap);
70+
min-width: max-content;
71+
animation: scroll 20s linear infinite;
72+
}
73+
74+
@keyframes scroll {
75+
from {
76+
transform: translateX(0);
4577
}
46-
@media (max-width: 1016px) {
47-
width: 300vw;
78+
to {
79+
transform: translateX(calc(-100% - var(--gap)));
4880
}
4981
}
82+
5083
.flow_item {
5184
display: flex;
5285
align-items: center;
53-
margin-right: 180px;
5486
width: max-content;
55-
@media (max-width: 1556px) {
56-
margin-right: 40px;
57-
}
5887
}
5988
.flow_item span {
6089
font-size: 28px;
@@ -71,13 +100,21 @@
71100
}
72101
}
73102
74-
@media (max-width: 676px) {
103+
@media (max-width: 620px) {
75104
.flow {
76-
padding-top: 30px;
77-
padding-bottom: 30px;
105+
padding-top: 25px;
106+
padding-bottom: 25px;
78107
}
79-
.flow_wrapper {
80-
width: 500vw;
108+
.flow_item span {
109+
font-size: 18px;
110+
}
111+
.marquee__content {
112+
gap: 0 5rem;
113+
}
114+
}
115+
@media (max-width: 475px) {
116+
.flow_item span {
117+
font-size: 14px;
81118
}
82119
}
83120
</style>

‎src/layouts/About.svelte‎

Lines changed: 82 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -92,29 +92,95 @@
9292
.about_content {
9393
width: 100%;
9494
}
95+
}
96+
@media (max-width: 620px) {
97+
.about {
98+
padding: 0;
99+
padding-top: 48px;
100+
}
101+
.about_title {
102+
position: absolute;
103+
height: 19px;
104+
left: 15px;
105+
top: 48px;
106+
font-size: 18px;
107+
}
108+
.about_content {
109+
position: relative;
110+
font-size: 24px;
111+
margin-top: 43px;
112+
padding-left: 15px;
113+
padding-right: 15px;
114+
text-indent: 0px;
115+
line-height: 136%;
116+
}
95117
.about_bottom {
96-
width: 90%;
97-
left: 20px;
98-
right: 20px;
118+
position: relative;
119+
padding-left: 15px;
120+
padding-right: 15px;
121+
margin-top: 60px;
122+
font-size: 18px;
123+
top: 0;
124+
right: 0;
125+
width: 100%;
126+
margin-bottom: 80px;
127+
line-height: 120%;
99128
}
100-
}
101-
@media (max-width: 664px) {
102-
.star_highlight {
103-
display: flex;
104-
max-inline-size: fit-content;
129+
.about_plot {
130+
width: 300px;
131+
height: 100px;
132+
top: 30px;
133+
position: absolute;
134+
right: -150px;
135+
}
136+
.about_plot img {
137+
width: 500px;
138+
height: 280px;
105139
}
106140
}
107-
@media (max-width: 768px) {
108-
.about_plot {
109-
right: -500px;
141+
@media (max-width: 425px) {
142+
.about {
143+
padding: 0;
144+
padding-top: 48px;
145+
}
146+
.about_title {
147+
position: absolute;
148+
height: 19px;
149+
left: 15px;
150+
top: 48px;
151+
font-size: 14px;
152+
}
153+
.about_content {
154+
position: relative;
155+
font-size: 22px;
156+
margin-top: 43px;
157+
padding-left: 15px;
158+
padding-right: 15px;
159+
text-indent: 0px;
160+
line-height: 136%;
110161
}
111162
.about_bottom {
112-
line-height: 1.3;
163+
position: relative;
164+
padding-left: 15px;
165+
padding-right: 15px;
166+
margin-top: 60px;
167+
font-size: 18px;
168+
top: 0;
169+
right: 0;
170+
width: 100%;
171+
margin-bottom: 80px;
172+
line-height: 140%;
113173
}
114-
}
115-
@media (max-width: 572px) {
116-
.star_highlight {
117-
display: initial;
174+
.about_plot {
175+
width: 300px;
176+
height: 100px;
177+
top: 50px;
178+
position: absolute;
179+
right: -100px;
180+
}
181+
.about_plot img {
182+
width: 500px;
183+
height: 280px;
118184
}
119185
}
120186
</style>

‎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>

0 commit comments

Comments
 (0)