fix: style improvements
- fix style - effect color palette - fix navbar setup - add borgar - "Join" on discord button
This commit is contained in:
Sheldon Cooper
parent
4f05c3e671
commit
ddac56a693
14 changed files with 21778 additions and 123 deletions
|
|
@ -11,7 +11,7 @@
|
|||
"trailingComma": "all",
|
||||
"bracketSpacing": true,
|
||||
"objectWrap": "collapse",
|
||||
"bracketSameLine": false,
|
||||
"bracketSameLine": true,
|
||||
"arrowParens": "always",
|
||||
"endOfLine": "lf"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,14 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="en" class="has-navbar-fixed-top">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/viossa_circle.svg"/>
|
||||
<link href='https://cdn.boxicons.com/fonts/basic/boxicons.min.css' rel='stylesheet'>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Viossa.net</title>
|
||||
</head>
|
||||
<body class="has-background-primary-dark">
|
||||
<body class="has-background-black">
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
|
|
|
|||
26
src/App.vue
26
src/App.vue
|
|
@ -1,15 +1,28 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex flex-col "><!-- Main application wrapper -->
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
|
||||
|
||||
<div class="navbar-brand">
|
||||
<RouterLink class="navbar-item has-text-weight-bold" to="/">Viossa.net</RouterLink>
|
||||
<RouterLink class="navbar-item has-text-weight-bold" to="/"><img src="@/assets/ViossaFlagRect.svg" alt=""/></RouterLink>
|
||||
|
||||
<div class="navbar-item">
|
||||
<button
|
||||
type="button"
|
||||
@click="toggleBurger()"
|
||||
:class="`button is-link is-hoverable is-hidden-desktop ${burgerOpen ? 'is-active' : ''}`" aria-label="menu"
|
||||
:aria-expanded="`${burgerOpen ? 'true' : 'false'}`">
|
||||
<span class="bx bx-burger"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
</div>
|
||||
|
||||
<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
|
||||
<div class="navbar-start">
|
||||
<RouterLink class="navbar-item" to="/">What is Viossa?</RouterLink>
|
||||
<RouterLink class="navbar-item" to="/resources">Resources</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</nav>
|
||||
<RouterView />
|
||||
</div>
|
||||
|
|
@ -17,4 +30,11 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import './assets/style.scss'
|
||||
import { ref, type Ref } from 'vue'
|
||||
|
||||
const burgerOpen: Ref<Boolean> = ref<Boolean>(false);
|
||||
|
||||
function toggleBurger(): void {
|
||||
burgerOpen.value = !burgerOpen.value;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
75
src/assets/ViossaFlagCirc3_2ratio.svg
Normal file
75
src/assets/ViossaFlagCirc3_2ratio.svg
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="360mm"
|
||||
height="360mm"
|
||||
viewBox="0 0 360 360"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||
sodipodi:docname="viossaFlag.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.7299663"
|
||||
inkscape:cx="86.126161"
|
||||
inkscape:cy="613.87795"
|
||||
inkscape:window-width="2400"
|
||||
inkscape:window-height="1411"
|
||||
inkscape:window-x="2391"
|
||||
inkscape:window-y="-9"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer2"><inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid302" /></sodipodi:namedview><defs
|
||||
id="defs2" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Layer 2"
|
||||
transform="translate(134.0933,87.179113)"><path
|
||||
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.0289973;stroke-miterlimit:22.2;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="path6216"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="45.906708"
|
||||
sodipodi:cy="92.820892"
|
||||
sodipodi:rx="180"
|
||||
sodipodi:ry="180"
|
||||
sodipodi:start="4.6934522"
|
||||
sodipodi:end="4.6302294"
|
||||
sodipodi:open="true"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 42.498291,-87.146834 A 180,180 0 0 1 225.79809,86.568504 180,180 0 0 1 55.001506,272.59098 180,180 0 0 1 -133.69718,104.75583 180,180 0 0 1 31.134615,-86.571932"
|
||||
inkscape:export-filename="..\Finished\ViossaFlagCirc3_2ratio.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96" /><g
|
||||
id="g5819"
|
||||
transform="matrix(0.93405356,0,0,0.93405356,-53.016663,-34.779538)"><path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.399354;stroke-miterlimit:22.2"
|
||||
id="path385"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="105.9076"
|
||||
sodipodi:cy="136.60933"
|
||||
sodipodi:rx="128.47229"
|
||||
sodipodi:ry="128.47374"
|
||||
sodipodi:start="4.6934522"
|
||||
sodipodi:end="4.6302294"
|
||||
sodipodi:open="true"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 103.47489,8.1586244 A 128.47229,128.47374 0 0 1 234.30236,132.14673 128.47229,128.47374 0 0 1 112.39888,264.91897 128.47229,128.47374 0 0 1 -22.281972,145.12781 128.47229,128.47374 0 0 1 95.364242,8.5689572" /><path
|
||||
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.029;stroke-miterlimit:22.2;stroke-dasharray:none"
|
||||
d="m 117.05457,164.17654 c 8.03452,-0.0462 8.49627,-1.08512 8.49627,-1.08512 9.82856,-19.81483 22.21219,-26.80177 41.97341,-36.29385 8.34356,-3.68297 19.0164,-10.96258 27.61288,-17.13106 6.26354,-4.49445 12.05177,-10.297107 20.17864,-13.621734 8.53145,-3.490137 -10.80504,12.328824 -10.80504,12.328824 -9.0042,8.12686 -14.95674,11.81852 -22.02565,15.97668 -10.7129,6.30168 -14.31359,8.34425 -19.30131,12.14412 -5.80492,4.42245 -9.88634,7.92764 -13.66791,10.29711 -7.29571,4.57136 -9.28125,7.66511 -10.11241,8.77332 -0.83116,1.10821 -3.97108,5.95663 -3.97108,5.95663 1.66231,-0.50793 4.94076,-1.01586 4.94076,-1.01586 0.0462,2.40112 -5.49486,6.7416 -5.49486,6.7416 -2.77053,1.89319 -5.77193,4.47901 -5.77193,4.47901 1.20056,11.49767 -5.58722,18.0084 -5.58722,18.0084 -9.28124,10.20475 -18.3427,0.76386 -20.22481,-4.20196 -3.17843,-8.38609 -13.802587,-15.78912 -23.687967,-17.82369 -11.028807,-2.26991 -14.129558,-1.84483 -21.05597,-3.46315 -19.763059,-4.61754 -25.561421,-6.75206 -38.510261,-9.37361 -7.526586,-1.52379 -13.8064366,-4.20196 -13.8064366,-4.20196 0,0 -10.8973881,-4.84841 -13.5293844,-8.35774 -2.6319962,-3.50933 7.20335825,-0.3694 7.20335825,-0.3694 0,0 5.60046125,2.09797 8.49626865,2.81669 19.1627801,4.75607 27.5461821,6.95957 33.8465491,7.24953 6.300367,0.29001 17.394868,0.27841 17.394868,0.27841 17.211282,0.25025 32.426083,4.51346 41.247855,12.11969 1.92916,1.66334 3.41698,1.73157 4.42129,1.92782 3.28987,0.10945 8.16149,-1.974 11.74009,-2.1587 z"
|
||||
id="path455"
|
||||
sodipodi:nodetypes="cczccscccsscccccsssscssccscc" /></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
70
src/assets/ViossaFlagRect.svg
Normal file
70
src/assets/ViossaFlagRect.svg
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="508mm"
|
||||
height="341.04791mm"
|
||||
viewBox="0 0 508 341.04791"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
xml:space="preserve"
|
||||
inkscape:version="1.2.2 (732a01da63, 2022-12-09)"
|
||||
sodipodi:docname="viossaFlag.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.7299663"
|
||||
inkscape:cx="86.126161"
|
||||
inkscape:cy="613.87795"
|
||||
inkscape:window-width="2400"
|
||||
inkscape:window-height="1411"
|
||||
inkscape:window-x="2391"
|
||||
inkscape:window-y="-9"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer2"><inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid302" /></sodipodi:namedview><defs
|
||||
id="defs2" /><g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="Layer 2"
|
||||
transform="translate(150.306,34.583659)"><g
|
||||
id="g5950"
|
||||
inkscape:export-filename="..\Finished\ViossaFlagFullSize.svg"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"><rect
|
||||
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.0615961;stroke-miterlimit:22.2;stroke-dasharray:none;stroke-opacity:1"
|
||||
id="rect5873"
|
||||
width="508"
|
||||
height="341.04791"
|
||||
x="-150.306"
|
||||
y="-34.58366" /><g
|
||||
id="g5819"
|
||||
transform="translate(-2.2136002,-0.66903305)"><path
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.399354;stroke-miterlimit:22.2"
|
||||
id="path385"
|
||||
sodipodi:type="arc"
|
||||
sodipodi:cx="105.9076"
|
||||
sodipodi:cy="136.60933"
|
||||
sodipodi:rx="128.47229"
|
||||
sodipodi:ry="128.47374"
|
||||
sodipodi:start="4.6934522"
|
||||
sodipodi:end="4.6302294"
|
||||
sodipodi:open="true"
|
||||
sodipodi:arc-type="arc"
|
||||
d="M 103.47489,8.1586244 A 128.47229,128.47374 0 0 1 234.30236,132.14673 128.47229,128.47374 0 0 1 112.39888,264.91897 128.47229,128.47374 0 0 1 -22.281972,145.12781 128.47229,128.47374 0 0 1 95.364242,8.5689572" /><path
|
||||
style="fill:#00bbff;fill-opacity:1;stroke:none;stroke-width:0.029;stroke-miterlimit:22.2;stroke-dasharray:none"
|
||||
d="m 117.05457,164.17654 c 8.03452,-0.0462 8.49627,-1.08512 8.49627,-1.08512 9.82856,-19.81483 22.21219,-26.80177 41.97341,-36.29385 8.34356,-3.68297 19.0164,-10.96258 27.61288,-17.13106 6.26354,-4.49445 12.05177,-10.297107 20.17864,-13.621734 8.53145,-3.490137 -10.80504,12.328824 -10.80504,12.328824 -9.0042,8.12686 -14.95674,11.81852 -22.02565,15.97668 -10.7129,6.30168 -14.31359,8.34425 -19.30131,12.14412 -5.80492,4.42245 -9.88634,7.92764 -13.66791,10.29711 -7.29571,4.57136 -9.28125,7.66511 -10.11241,8.77332 -0.83116,1.10821 -3.97108,5.95663 -3.97108,5.95663 1.66231,-0.50793 4.94076,-1.01586 4.94076,-1.01586 0.0462,2.40112 -5.49486,6.7416 -5.49486,6.7416 -2.77053,1.89319 -5.77193,4.47901 -5.77193,4.47901 1.20056,11.49767 -5.58722,18.0084 -5.58722,18.0084 -9.28124,10.20475 -18.3427,0.76386 -20.22481,-4.20196 -3.17843,-8.38609 -13.802587,-15.78912 -23.687967,-17.82369 -11.028807,-2.26991 -14.129558,-1.84483 -21.05597,-3.46315 -19.763059,-4.61754 -25.561421,-6.75206 -38.510261,-9.37361 -7.526586,-1.52379 -13.8064366,-4.20196 -13.8064366,-4.20196 0,0 -10.8973881,-4.84841 -13.5293844,-8.35774 -2.6319962,-3.50933 7.20335825,-0.3694 7.20335825,-0.3694 0,0 5.60046125,2.09797 8.49626865,2.81669 19.1627801,4.75607 27.5461821,6.95957 33.8465491,7.24953 6.300367,0.29001 17.394868,0.27841 17.394868,0.27841 17.211282,0.25025 32.426083,4.51346 41.247855,12.11969 1.92916,1.66334 3.41698,1.73157 4.42129,1.92782 3.28987,0.10945 8.16149,-1.974 11.74009,-2.1587 z"
|
||||
id="path455"
|
||||
sodipodi:nodetypes="cczccscccsscccccsssscssccscc" /></g></g></g></svg>
|
||||
|
After Width: | Height: | Size: 4.2 KiB |
21564
src/assets/bulma.css
vendored
Normal file
21564
src/assets/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,26 +1,26 @@
|
|||
@use "bulma";
|
||||
@use "./bulma.css";
|
||||
|
||||
* {
|
||||
--bulma-primary-h: 196deg;
|
||||
--bulma-primary-l: 50%;
|
||||
--bulma-primary-s: 100%;
|
||||
|
||||
--bulma-link-h: 293deg;
|
||||
--bulma-link-l: 50%;
|
||||
--bulma-link-s: 45%;
|
||||
|
||||
--bulma-warning-h: 31deg;
|
||||
--bulma-warning-l: 75%;
|
||||
--bulma-warning-s: 100%;
|
||||
|
||||
--bulma-info-h: 90deg;
|
||||
--bulma-info-l: 50%;
|
||||
--bulma-info-s: 45%;
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--bulma-primary-h: 195deg;
|
||||
--bulma-primary-l: 65%;
|
||||
--bulma-scheme-h: 195;
|
||||
--bulma-family-primary: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
--bulma-family-secondary: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
--bulma-burger-h: 195deg;
|
||||
--bulma-body-family: Nunito,Inter,SF Pro,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Helvetica,Arial,sans-serif;
|
||||
};
|
||||
|
||||
//$viossa-blue: #65b7f9;
|
||||
|
||||
// body {
|
||||
// background-color: $viossa-blue;
|
||||
// font:
|
||||
// normal Verdana,
|
||||
// Arial,
|
||||
// sans-serif;
|
||||
// color: black;
|
||||
// }
|
||||
|
||||
// h1 {
|
||||
// font-size: 48px;
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</div>
|
||||
<div class="column is-one-quarter" v-if="image">
|
||||
<figure class="image">
|
||||
<img :src="image" :alt="alt" />
|
||||
<img :src="image" :alt="alt" :title="alt" />
|
||||
</figure>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<template v-else>
|
||||
<div class="column is-one-quarter" v-if="image">
|
||||
<figure class="image">
|
||||
<img :src="image" :alt="alt" />
|
||||
<img :src="image" :alt="alt" :title="alt" />
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
<template>
|
||||
<div class="box m-3 p-3 columns is-vcentered">
|
||||
<div class="box columns is-vcentered">
|
||||
<div class="column is-one-quarter" v-if="image">
|
||||
<figure class="image is-128x128">
|
||||
<img :src="image" :alt="alt" />
|
||||
<figure class="image">
|
||||
<img :src="image" :alt="alt" :title="alt"/>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h4 class="title">{{ title }}</h4>
|
||||
<p class="has-text-white is-size-5 mb-3">{{ desc }}</p>
|
||||
<p class="">{{ desc }}</p>
|
||||
<a
|
||||
:href="link"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer nofollow"
|
||||
class="button is-link is-medium has-text-white"
|
||||
>
|
||||
{{ link }}
|
||||
class="button is-link is-medium"
|
||||
:text="linkText">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -25,6 +24,7 @@ defineProps({
|
|||
title: String,
|
||||
desc: String,
|
||||
link: String,
|
||||
linkText: String,
|
||||
image: { type: String, required: false },
|
||||
alt: { type: String, required: false },
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex flex-col">
|
||||
<!-- Main application wrapper -->
|
||||
<section class="section">
|
||||
<h1 class="title has-text-black p-3">BRÅTULA VIOSSA.NET MÅDE</h1>
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="title">BRÅTULA VIOSSA.NET MÅDE</div>
|
||||
<div class="subtitle">Hadjiplas per lera para Viossa – glossa fu vi</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="min-h-screen flex flex-col" style="gap: 4rem">
|
||||
<!-- Main application wrapper -->
|
||||
<section class="section">
|
||||
<h1 class="title has-text-black p-3">Learning Resources</h1>
|
||||
<h1 class="title">Learning Resources</h1>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
|
|
@ -14,6 +14,7 @@
|
|||
:link="resource.link"
|
||||
:image="resource.image"
|
||||
:alt="resource.alt"
|
||||
:linkText="resource.linkText"
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,8 @@ export default {
|
|||
"desc": "This is where most of the action happens! Hop on in!",
|
||||
"link": "https://discord.gg/g3mG2gYjZD",
|
||||
"image": "discord.png",
|
||||
"alt": "Discord logo"
|
||||
"alt": "Discord logo",
|
||||
"linkText": "Join"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import { createApp } from "vue";
|
||||
import "./style.css";
|
||||
import App from "./App.vue";
|
||||
import router from "./routes"
|
||||
import i18n from './i18n'
|
||||
|
|
|
|||
|
|
@ -1,79 +0,0 @@
|
|||
:root {
|
||||
font-family: 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue