Skip to content

Commit 41dc267

Browse files
mrjvsmrjvs
authored
Merge pull request #395 from PretendoNetwork/nuxt-refactor-homepage
Nuxt refactor homepage
2 parents c51cec3 + e6af4df commit 41dc267

File tree

7 files changed

+1833
-317
lines changed

7 files changed

+1833
-317
lines changed

‎eslint.config.mjs

+4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import pluginVue from 'eslint-plugin-vue';
22
import eslintConfig from '@pretendonetwork/eslint-config';
3+
import globals from 'globals';
34
import { withNuxt } from './.nuxt/eslint.config.mjs';
45

56
export default withNuxt([
@@ -10,6 +11,9 @@ export default withNuxt([
1011
languageOptions: {
1112
parserOptions: {
1213
parser: '@typescript-eslint/parser'
14+
},
15+
globals: {
16+
...globals.browser
1317
}
1418
},
1519
rules: {

‎src/assets/css/main.css

+209-5
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,198 @@ code {
5858
color: var(--text-shade-2);
5959
}
6060

61-
button {
62-
all: unset;
63-
font: inherit;
64-
cursor: pointer;
61+
/* BUTTONS */
62+
63+
button,
64+
.button {
65+
appearance: none;
66+
-webkit-appearance: none;
67+
border: 0;
68+
border-radius: 6px;
69+
font-family: Poppins, Arial, Helvetica, sans-serif;
70+
font-size: 1rem;
71+
color: var(--text-shade-3);
72+
padding: 12px 48px;
73+
background: var(--bg-shade-3);
74+
cursor: pointer;
75+
display: block;
76+
text-align: center;
77+
}
78+
button:hover,
79+
.button:hover {
80+
background: var(--bg-shade-4);
81+
}
82+
button.inactive {
83+
pointer-events: none;
84+
}
85+
button.primary,
86+
.button.primary {
87+
background: var(--accent-shade-0);
88+
}
89+
button.primary:hover,
90+
.button.primary:hover {
91+
background: var(--accent-shade-1);
92+
}
93+
94+
button.secondary.icon-btn,
95+
.button.secondary.icon-btn {
96+
width: 50px;
97+
height: 50px;
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
}
102+
button svg,
103+
.button svg {
104+
width: 30px;
105+
height: 30px;
106+
display: block;
107+
}
108+
109+
/* MODALS */
110+
111+
body.modal-open {
112+
overflow: hidden;
113+
}
114+
115+
div.modal-wrapper {
116+
position: fixed;
117+
top: 0;
118+
left: 0;
119+
width: 100%;
120+
height: 100vh;
121+
122+
display: flex;
123+
justify-content: center;
124+
align-items: center;
125+
background: rgba(0, 0, 0, 0.6);
126+
127+
z-index: 10;
128+
}
129+
div.modal-wrapper.hidden {
130+
display: none;
131+
}
132+
div.modal {
133+
background: var(--bg-shade-3);
134+
padding: 48px;
135+
border-radius: 8px;
136+
text-align: left;
137+
width: min(660px, 90%);
138+
box-sizing: border-box;
139+
}
140+
141+
div.modal h1 {
142+
margin-top: 0;
143+
}
144+
p.modal-caption {
145+
color: var(--text-shade-1);
146+
}
147+
p.modal-caption span,
148+
p.switch-tier-modal-caption span {
149+
color: var(--text-shade-3);
150+
}
151+
152+
.modal-button-wrapper {
153+
margin-top: 24px;
154+
display: flex;
155+
justify-content: flex-end;
156+
}
157+
.modal-button-wrapper button {
158+
margin-left: 12px;
159+
width: fit-content;
160+
}
161+
.modal-button-wrapper button.cancel {
162+
background: none;
163+
}
164+
.modal-button-wrapper button {
165+
padding: 12px 24px;
166+
}
167+
168+
@media screen and (max-width: 600px) {
169+
div.modal {
170+
padding: 24px;
171+
}
65172
}
66173

174+
/* MISC FORM COMPONENTS */
175+
176+
input[type="checkbox"] {
177+
appearance: none;
178+
-webkit-appearance: none;
179+
background: var(--bg-shade-3);
180+
padding: 12px;
181+
margin: 4px;
182+
margin-left: 0;
183+
border-radius: 4px;
184+
vertical-align: -65%;
185+
width: fit-content;
186+
cursor: pointer;
187+
}
188+
input[type="checkbox"]:checked {
189+
background: no-repeat center/contain url(../images/check.svg), var(--accent-shade-0);
190+
}
191+
192+
input {
193+
appearance: none;
194+
-webkit-appearance: none;
195+
display: block;
196+
font-family: Poppins, Arial, Helvetica, sans-serif;
197+
font-size: 1rem;
198+
background-color: var(--bg-shade-3);
199+
border: none;
200+
border-radius: 4px;
201+
padding: 12px;
202+
color: var(--text-shade-3);
203+
width: calc(100% - 24px);
204+
}
205+
input:focus {
206+
background-color: var(--bg-shade-4);
207+
outline: none;
208+
transition: 150ms;
209+
}
210+
input[type="range"] {
211+
background: transparent;
212+
cursor: pointer;
213+
width: 100%;
214+
box-sizing: border-box;
215+
}
216+
input[type="range"]::-webkit-slider-runnable-track {
217+
background: var(--bg-shade-3);
218+
height: 1rem;
219+
border-radius: 1rem;
220+
}
221+
input[type="range"]::-moz-range-track {
222+
background: var(--bg-shade-3);
223+
border-radius: 1rem;
224+
height: 1rem;
225+
}
226+
input[type="range"]::-webkit-slider-thumb {
227+
appearance: none;
228+
-webkit-appearance: none;
229+
width: 1.5rem;
230+
height: 3rem;
231+
margin-top: -1rem;
232+
background-color: var(--accent-shade-1);
233+
border-radius: 0.5rem;
234+
}
235+
input[type="range"]::-moz-range-thumb {
236+
width: 1.5rem;
237+
height: 3rem;
238+
border: none;
239+
border-radius: 0.5rem;
240+
background-color: var(--accent-shade-1);
241+
}
242+
input[type="range"]:focus {
243+
outline: none;
244+
}
245+
input[type="range"]:focus::-webkit-slider-thumb {
246+
background-color: var(--accent-shade-3);
247+
}
248+
input[type="range"]:focus::-moz-range-thumb {
249+
background-color: var(--accent-shade-3);
250+
}
251+
252+
67253
.wrapper {
68254
width: 95%;
69255
max-width: 1590px;
@@ -78,7 +264,7 @@ button {
78264
.wrapper {
79265
width: 90%;
80266
}
81-
267+
82268
.hide-on-mobile {
83269
display: none !important;
84270
}
@@ -87,3 +273,21 @@ button {
87273
display: unset !important;
88274
}
89275
}
276+
277+
/* Scrollbar styling 'cause it's fancy */
278+
html::-webkit-scrollbar {
279+
width: 12px;
280+
height: 12px;
281+
}
282+
html::-webkit-scrollbar-track {
283+
background: var(--bg-shade-1);
284+
}
285+
html::-webkit-scrollbar-thumb {
286+
background-color: var(--text-shade-0);
287+
border-radius: 24px;
288+
border: 3px solid var(--bg-shade-1);
289+
}
290+
html {
291+
scrollbar-width: thin;
292+
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
293+
}

‎src/components/Footer/Footer.vue

+4-18
Original file line numberDiff line numberDiff line change
@@ -139,24 +139,10 @@ function bandwidthClickHandler() {
139139
<h1>{{ $t("footer.widget.captions[0]") }}</h1>
140140
<h2>{{ $t("footer.widget.captions[1]") }}</h2>
141141
<a href="https://discord.gg/pretendo">
142-
<svg
143-
xmlns="http://www.w3.org/2000/svg"
144-
viewBox="0 0 24 24"
145-
fill="none"
146-
stroke="currentColor"
147-
stroke-width="2"
148-
stroke-linecap="round"
149-
stroke-linejoin="round"
150-
class="feather feather-arrow-right"
151-
>
152-
<line
153-
x1="5"
154-
y1="12"
155-
x2="19"
156-
y2="12"
157-
/>
158-
<polyline points="12 5 19 12 12 19" />
159-
</svg>
142+
<Icon
143+
name="ph:arrow-right"
144+
size="24"
145+
/>
160146
{{ $t("footer.widget.button") }}
161147
</a>
162148
</div>

0 commit comments

Comments
 (0)