add tailwind to frontend
This commit is contained in:
parent
afbc822882
commit
7aee99ac42
9 changed files with 631 additions and 142 deletions
|
|
@ -12,10 +12,13 @@
|
|||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^2.4.2",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"autoprefixer": "^10.4.15",
|
||||
"postcss": "^8.4.29",
|
||||
"prettier": "^3.0.3",
|
||||
"sass": "^1.66.1",
|
||||
"svelte": "^4.0.5",
|
||||
"svelte-check": "^3.4.6",
|
||||
"tailwindcss": "^3.3.3",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5"
|
||||
|
|
|
|||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
@ -1,64 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import svelteLogo from "./assets/svelte.svg";
|
||||
import viteLogo from "./assets/vite.svg";
|
||||
import Counter from "./lib/Counter.svelte";
|
||||
import type { MeAccount } from "./lib/api/account";
|
||||
|
||||
let account: MeAccount | null = null;
|
||||
|
||||
onMount(() => {
|
||||
const accountData = document.getElementById("accountData");
|
||||
account = JSON.parse(accountData.innerHTML) as MeAccount;
|
||||
});
|
||||
import { meAccount } from "./lib/store";
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
|
||||
<img src={viteLogo} class="logo" alt="Vite Logo" />
|
||||
</a>
|
||||
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
|
||||
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
|
||||
</a>
|
||||
</div>
|
||||
<h1>Vite + Svelte + Go</h1>
|
||||
|
||||
<div class="card">
|
||||
<Counter />
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out <a
|
||||
href="https://github.com/sveltejs/kit#readme"
|
||||
target="_blank"
|
||||
rel="noreferrer">SvelteKit</a
|
||||
>, the official Svelte app framework powered by Vite!
|
||||
Username: {$meAccount.username}, ID: {$meAccount.id}
|
||||
</p>
|
||||
|
||||
{#if account}
|
||||
<p>
|
||||
Username: {account.username}, ID: {account.id}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.svelte:hover {
|
||||
filter: drop-shadow(0 0 2em #ff3e00aa);
|
||||
}
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,3 @@
|
|||
:root {
|
||||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
6
frontend/src/lib/store.ts
Normal file
6
frontend/src/lib/store.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { writable } from "svelte/store";
|
||||
import type { MeAccount } from "./api/account";
|
||||
|
||||
export const meAccount = writable(
|
||||
JSON.parse(document.getElementById("accountData").innerHTML) as MeAccount,
|
||||
);
|
||||
73
frontend/tailwind.config.js
Normal file
73
frontend/tailwind.config.js
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{svelte,js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
textDark: "#ffffff",
|
||||
textLight: "#000000",
|
||||
background: {
|
||||
50: "#fefefe",
|
||||
100: "#fdfdfd",
|
||||
200: "#fbfbfb",
|
||||
300: "#f9f9f9",
|
||||
400: "#f7f7f7",
|
||||
500: "#f5f5f5",
|
||||
600: "#c4c4c4",
|
||||
700: "#939393",
|
||||
800: "#626262",
|
||||
900: "#313131",
|
||||
},
|
||||
primary: {
|
||||
50: "#e6f2f3",
|
||||
100: "#cee5e8",
|
||||
200: "#9ccbd1",
|
||||
300: "#6bb2b9",
|
||||
400: "#3998a2",
|
||||
500: "#087e8b",
|
||||
600: "#06656f",
|
||||
700: "#054c53",
|
||||
800: "#033238",
|
||||
900: "#02191c",
|
||||
},
|
||||
secondary: {
|
||||
50: "#f2f2f3",
|
||||
100: "#e5e5e7",
|
||||
200: "#cbccce",
|
||||
300: "#b0b2b6",
|
||||
400: "#96999d",
|
||||
500: "#7c7f85",
|
||||
600: "#63666a",
|
||||
700: "#4a4c50",
|
||||
800: "#323335",
|
||||
900: "#19191b",
|
||||
},
|
||||
danger: {
|
||||
50: "#ffefef",
|
||||
100: "#ffdedf",
|
||||
200: "#ffbdbf",
|
||||
300: "#ff9c9f",
|
||||
400: "#ff7b7f",
|
||||
500: "#ff5a5f",
|
||||
600: "#cc484c",
|
||||
700: "#993639",
|
||||
800: "#662426",
|
||||
900: "#331213",
|
||||
},
|
||||
success: {
|
||||
50: "#edf6f0",
|
||||
100: "#dbece1",
|
||||
200: "#b8d9c2",
|
||||
300: "#94c7a4",
|
||||
400: "#71b485",
|
||||
500: "#4da167",
|
||||
600: "#3e8152",
|
||||
700: "#2e613e",
|
||||
800: "#1f4029",
|
||||
900: "#0f2015",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue