vinet/viossa.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix: style improvements

Browse source 
- fix style
- effect color palette
- fix navbar setup
- add borgar
- "Join" on discord button
This commit is contained in:
Sheldon Cooper 2025-06-05 22:42:28 -04:00
parent 4f05c3e671
commit ddac56a693
14 changed files with 21778 additions and 123 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.prettierrc
View file

@ -11,7 +11,7 @@
"trailingComma": "all", "trailingComma": "all",
"bracketSpacing": true, "bracketSpacing": true,
"objectWrap": "collapse", "objectWrap": "collapse",
"bracketSameLine": false, "bracketSameLine": true,
"arrowParens": "always", "arrowParens": "always",
"endOfLine": "lf" "endOfLine": "lf"
} }

7
index.html
View file

@ -1,13 +1,14 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="has-navbar-fixed-top">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/viossa_circle.svg" /> <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" /> <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" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Viossa.net</title> <title>Viossa.net</title>
</head> </head>
<body class="has-background-primary-dark"> <body class="has-background-black">
<div id="app"></div> <div id="app"></div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

28
src/App.vue
View file

@ -1,15 +1,28 @@
<template> <template>
<div class="min-h-screen flex flex-col"><!-- Main application wrapper --> <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"> <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> </div>
<div class="navbar-menu">
<div :class="`navbar-menu ${burgerOpen ? 'is-active' : ''}`">
<div class="navbar-start"> <div class="navbar-start">
<RouterLink class="navbar-item" to="/">What is Viossa?</RouterLink> <RouterLink class="navbar-item" to="/">What is Viossa?</RouterLink>
<RouterLink class="navbar-item" to="/resources">Resources</RouterLink> <RouterLink class="navbar-item" to="/resources">Resources</RouterLink>
</div> </div>
</div> </div>
</nav> </nav>
<RouterView /> <RouterView />
</div> </div>
@ -17,4 +30,11 @@
<script setup lang="ts"> <script setup lang="ts">
import './assets/style.scss' 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> </script>

75
src/assets/ViossaFlagCirc3_2ratio.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 4.5 KiB

70
src/assets/ViossaFlagRect.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

21564
src/assets/bulma.css vendored Normal file
View file

File diff suppressed because it is too large Load diff

42
src/assets/style.scss
View file

@ -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-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-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; --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;
// }

4
src/components/molecules/HomeSectionWrapper.vue
View file

@ -8,7 +8,7 @@
</div> </div>
<div class="column is-one-quarter" v-if="image"> <div class="column is-one-quarter" v-if="image">
<figure class="image"> <figure class="image">
<img :src="image" :alt="alt" /> <img :src="image" :alt="alt" :title="alt" />
</figure> </figure>
</div> </div>
</template> </template>
@ -16,7 +16,7 @@
<template v-else> <template v-else>
<div class="column is-one-quarter" v-if="image"> <div class="column is-one-quarter" v-if="image">
<figure class="image"> <figure class="image">
<img :src="image" :alt="alt" /> <img :src="image" :alt="alt" :title="alt" />
</figure> </figure>
</div> </div>
<div class="column"> <div class="column">

14
src/components/molecules/LearningResourceWrapper.vue
View file

@ -1,20 +1,19 @@
<template> <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"> <div class="column is-one-quarter" v-if="image">
<figure class="image is-128x128"> <figure class="image">
<img :src="image" :alt="alt" /> <img :src="image" :alt="alt" :title="alt"/>
</figure> </figure>
</div> </div>
<div class="column"> <div class="column">
<h4 class="title">{{ title }}</h4> <h4 class="title">{{ title }}</h4>
<p class="has-text-white is-size-5 mb-3">{{ desc }}</p> <p class="">{{ desc }}</p>
<a <a
:href="link" :href="link"
target="_blank" target="_blank"
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
class="button is-link is-medium has-text-white" class="button is-link is-medium"
> :text="linkText">
{{ link }}
</a> </a>
</div> </div>
</div> </div>
@ -25,6 +24,7 @@ defineProps({
title: String, title: String,
desc: String, desc: String,
link: String, link: String,
linkText: String,
image: { type: String, required: false }, image: { type: String, required: false },
alt: { type: String, required: false }, alt: { type: String, required: false },
}) })

7
src/components/pages/HomePage.vue
View file

@ -1,8 +1,11 @@
<template> <template>
<div class="min-h-screen flex flex-col"> <div class="min-h-screen flex flex-col">
<!-- Main application wrapper --> <!-- Main application wrapper -->
<section class="section"> <section class="hero is-primary">
<h1 class="title has-text-black p-3">BRÅTULA VIOSSA.NET MÅDE</h1> <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>
<section class="section"> <section class="section">

3
src/components/pages/ResourcesPage.vue
View file

@ -2,7 +2,7 @@
<div class="min-h-screen flex flex-col" style="gap: 4rem"> <div class="min-h-screen flex flex-col" style="gap: 4rem">
<!-- Main application wrapper --> <!-- Main application wrapper -->
<section class="section"> <section class="section">
<h1 class="title has-text-black p-3">Learning Resources</h1> <h1 class="title">Learning Resources</h1>
</section> </section>
<section class="section"> <section class="section">
@ -14,6 +14,7 @@
:link="resource.link" :link="resource.link"
:image="resource.image" :image="resource.image"
:alt="resource.alt" :alt="resource.alt"
:linkText="resource.linkText"
/> />
</section> </section>
</div> </div>

3
src/locales/en_US.ts
View file

@ -23,7 +23,8 @@ export default {
"desc": "This is where most of the action happens! Hop on in!", "desc": "This is where most of the action happens! Hop on in!",
"link": "https://discord.gg/g3mG2gYjZD", "link": "https://discord.gg/g3mG2gYjZD",
"image": "discord.png", "image": "discord.png",
"alt": "Discord logo" "alt": "Discord logo",
"linkText": "Join"
} }
] ]
} }

1
src/main.ts
View file

@ -1,5 +1,4 @@
import { createApp } from "vue"; import { createApp } from "vue";
import "./style.css";
import App from "./App.vue"; import App from "./App.vue";
import router from "./routes" import router from "./routes"
import i18n from './i18n' import i18n from './i18n'

79
src/style.css
View file

@ -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;
}
}