guzsarchives/www-v1
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

refactor: ♻️ 📱 better responsive design

Browse Source
This commit is contained in:
Guz013
2023-06-06 11:05:31 -03:00
parent 67abace641
commit cebf38eaf3
5 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/app.html
View File

@@ -1,12 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" style="background-color: #020202;" class="dark-theme dark">
<div style="display: contents">%sveltekit.body%</div>
</body>
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
<meta name="viewport" content="width=device-width" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" class="dark-theme dark">
%sveltekit.body%
</body>
</html>

7
src/app.scss
View File

@@ -1,4 +1,10 @@
body {
@apply min-h-100vh m-0 grid;
&.dark-theme {
@apply bg-[#020202];
}
@keyframes fade-in {
from {
opacity: 0;
@@ -36,6 +42,7 @@ body {
}
footer {
@apply h-10vh;
--stagger: 15;
}
}

6
src/routes/+layout.svelte
View File

@@ -9,11 +9,9 @@
<main
un-text="gray12"
un-font="sans"
un-w="screen"
un-min-h="screen"
un-p="x-3ch lg:0"
un-top="0"
un-left="0"
un-fixed
un-flex="~ col"
un-justify="center"
un-items="center"
@@ -23,9 +21,7 @@
<footer
un-text="gray5 xs center"
un-font="sans light"
un-fixed
un-flex="~ col"
un-w="screen"
un-justify="center"
un-bottom="5"
>

13
src/routes/+page.svelte
View File

@@ -2,7 +2,7 @@
import socials from '$lib/data/socials.json';
</script>
<section un-max-w="60ch">
<section un-max-w="60ch" un-m="y-auto">
<h1 un-font="cal bold" un-text="7xl">Someone who's trying to improve</h1>
Hello world! I am ~~Gustavo L. de Mello~~ Guz, a software developer and
@@ -28,11 +28,12 @@
Find or support me and my projects on
<div un-grid="~ rows-1 cols-7">
<div un-grid="~ rows-2 cols-1 lg:(rows-1 cols-7)">
<div
un-grid="~ rows-1 col-span-6"
un-col="lg:span-6"
un-grid="~ lg:rows-1 sm:(cols-4 rows-1) rows-2 cols-2"
un-text="lg:sm"
class={`grid-cols-${socials.length}`}
class={`lg:grid-cols-${socials.length}`}
>
{#each socials as socialsGroup}
<ul un-p="0" un-list="none" un-m="0 t-2">
@@ -64,8 +65,8 @@
<figure
un-w="5ch"
un-text="dark:white"
un-justify-self="end"
un-place-self="end"
un-justify-self="lg:end center"
un-place-self="lg:end center"
un-m="0"
>
<figcaption un-hidden>Guz013 Logo</figcaption>

2
unocss.config.ts
View File

@@ -19,7 +19,7 @@ export default defineConfig({
...socials.flat().map(social =>
`i-custom:${social.name.toLowerCase()}`,
),
`grid-cols-${socials.length}`,
`lg:grid-cols-${socials.length}`,
],
include: [
/\.svelte/,