From 3dfd592e1168abfd7f0735cff01016a8d359dcc3 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 28 Jul 2020 11:07:11 -0400 Subject: [PATCH 01/11] add button css --- public/css/buttons.css | 236 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 236 insertions(+) create mode 100644 public/css/buttons.css diff --git a/public/css/buttons.css b/public/css/buttons.css new file mode 100644 index 0000000..9206a96 --- /dev/null +++ b/public/css/buttons.css @@ -0,0 +1,236 @@ +/* from https://codepen.io/ben_jammin/pen/syaCq */ + +.button::-moz-focus-inner{ + border: 0; + padding: 0; +} + +.button{ + display: inline-block; + *display: inline; + zoom: 1; + padding: 6px 20px; + margin: 0; + cursor: pointer; + border: 1px solid #bbb; + overflow: visible; + font: bold 13px arial, helvetica, sans-serif; + text-decoration: none; + white-space: nowrap; + color: #555; + + background-color: #ddd; + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0))); + background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); + background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); + background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); + background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); + background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0)); + + -webkit-transition: background-color .2s ease-out; + -moz-transition: background-color .2s ease-out; + -ms-transition: background-color .2s ease-out; + -o-transition: background-color .2s ease-out; + transition: background-color .2s ease-out; + background-clip: padding-box; /* Fix bleeding */ + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; + box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset; + text-shadow: 0 1px 0 rgba(255,255,255, .9); + + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.button:hover{ + background-color: #eee; + color: #555; +} + +.button:active{ + background: #e9e9e9; + position: relative; + top: 1px; + text-shadow: none; + -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; + box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset; +} + +.button[disabled], .button[disabled]:hover, .button[disabled]:active{ + border-color: #eaeaea; + background: #fafafa; + cursor: default; + position: static; + color: #999; + /* Usually, !important should be avoided but here it's really needed :) */ + -moz-box-shadow: none !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: none !important; +} + +/* Smaller buttons styles */ + +.button.small{ + padding: 4px 12px; +} + +/* Larger buttons styles */ + +.button.large{ + padding: 12px 30px; + text-transform: uppercase; +} + +.button.large:active{ + top: 2px; +} + +/* Colored buttons styles */ + +.button.green, .button.red, .button.blue { + color: #fff; + text-shadow: 0 1px 0 rgba(0,0,0,.2); + + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0))); + background-image: -webkit-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); + background-image: -moz-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); + background-image: -ms-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); + background-image: -o-linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); + background-image: linear-gradient(top, rgba(255,255,255,.3), rgba(255,255,255,0)); +} + +/* */ + +.button.green{ + background-color: #57a957; + border-color: #57a957; +} + +.button.green:hover{ + background-color: #62c462; +} + +.button.green:active{ + background: #57a957; +} + +/* */ + +.button.red{ + background-color: #ca3535; + border-color: #c43c35; +} + +.button.red:hover{ + background-color: #ee5f5b; +} + +.button.red:active{ + background: #c43c35; +} + +/* */ + +.button.blue{ + background-color: #269CE9; + border-color: #269CE9; +} + +.button.blue:hover{ + background-color: #70B9E8; +} + +.button.blue:active{ + background: #269CE9; +} + +/* */ + +.green[disabled], .green[disabled]:hover, .green[disabled]:active{ + border-color: #57A957; + background: #57A957; + color: #D2FFD2; +} + +.red[disabled], .red[disabled]:hover, .red[disabled]:active{ + border-color: #C43C35; + background: #C43C35; + color: #FFD3D3; +} + +.blue[disabled], .blue[disabled]:hover, .blue[disabled]:active{ + border-color: #269CE9; + background: #269CE9; + color: #93D5FF; +} + +/* Group buttons */ + +.button-group, +.button-group li{ + display: inline-block; + *display: inline; + zoom: 1; +} + +.button-group{ + font-size: 0; /* Inline block elements gap - fix */ + margin: 0; + padding: 0; + background: rgba(0, 0, 0, .1); + border-bottom: 1px solid rgba(0, 0, 0, .1); + padding: 7px; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + border-radius: 7px; +} + +.button-group li{ + margin-right: -1px; /* Overlap each right button border */ +} + +.button-group .button{ + font-size: 13px; /* Set the font size, different from inherited 0 */ + -moz-border-radius: 0; + -webkit-border-radius: 0; + border-radius: 0; +} + +.button-group .button:active{ + -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; + box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; +} + +.button-group li:first-child .button{ + -moz-border-radius: 3px 0 0 3px; + -webkit-border-radius: 3px 0 0 3px; + border-radius: 3px 0 0 3px; +} + +.button-group li:first-child .button:active{ + -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; + box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, -5px 0 5px -3px rgba(0, 0, 0, .2) inset; +} + +.button-group li:last-child .button{ + -moz-border-radius: 0 3px 3px 0; + -webkit-border-radius: 0 3px 3px 0; + border-radius: 0 3px 3px 0; +} + +.button-group li:last-child .button:active{ + -moz-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; + -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; + box-shadow: 0 0 1px rgba(0, 0, 0, .2) inset, 5px 0 5px -3px rgba(0, 0, 0, .2) inset; +} From 2678a9522e56a71064d4cd0465661ee090e194e2 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 28 Jul 2020 11:48:15 -0400 Subject: [PATCH 02/11] header of the page --- public/favicon.png | Bin 0 -> 3127 bytes public/fonts/faktos.css | 5 ++ public/global.css | 19 ++++-- public/index.html | 2 + src/App.svelte | 114 ---------------------------------- src/components/App.svelte | 127 ++++++++++++++++++++++++++++++++++++++ src/main.js | 2 +- 7 files changed, 148 insertions(+), 121 deletions(-) create mode 100644 public/favicon.png create mode 100644 public/fonts/faktos.css delete mode 100644 src/App.svelte create mode 100644 src/components/App.svelte diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..7e6f5eb5a2f1f1c882d265cf479de25caa925645 GIT binary patch literal 3127 zcmV-749N3|P)i z7)}s4L53SJCkR}iVi00SFk;`MXX*#X*kkwKs@nFGS}c;=?XFjU|G$3t^5sjIVS2G+ zw)WGF83CpoGXhLGW(1gW%uV|X7>1P6VhCX=Ux)Lb!*DZ%@I3!{Gsf7d?gtIQ%nQiK z3%(LUSkBji;C5Rfgd6$VsF@H`Pk@xtY6t<>FNR-pD}=C~$?)9pdm3XZ36N5PNWYjb z$xd$yNQR9N!dfj-Vd@BwQo^FIIWPPmT&sZyQ$v81(sCBV=PGy{0wltEjB%~h157*t zvbe_!{=I_783x!0t1-r#-d{Y?ae$Q4N_Nd^Ui^@y(%)Gjou6y<3^XJdu{rmUf-Me?)zZ>9OR&6U5H*cK; z$gUlB{g0O4gN0sLSO|Of?hU(l?;h(jA3uH!Z{EBKuV23ouU@^Y6#%v+QG;>e*E}%?wlu-NT4DG zs)z)7WbLr)vGAu(ohrKc^em@OpO&f~6_>E61n_e0_V3@{U3^O;j{`^mNCJUj_>;7v zsMs6Hu3g7+@v+lSo;=yTYFqq}jZmQ-BK8K{C4kqi_i*jBaQE(Au0607V-zKeT;EPg zX(`vrn=L+e74+-Tqeok@_`tDa$G9I|$nTU5H*2V8@y()n*zqM?J1G!-1aX;CfDC9B zTnJ#j_%*n8Qb1)re*Bno7g0RG{Eb;IK14irJYJp$5Z6ac9~b_P?+5t~95~SRG$g?1 znFJ7p$xV&GZ18m~79TGRdfsc-BcX$9yXTR*n)mPD@1~O(_?cT$ZvFPucRmGlq&se0 zKrcUf^k}4hM*biEJOWKzz!qQe;CB_ZtSOO9Owg#lZAc=s65^rb{fZe(TYu_rk!wKkEf}RIt=#Om( zR8mN`DM<^xj~59euMMspBolVN zAPTr8sSDI104orIAdmL$uOXn*6hga1G+0WD0E?UtabxC#VC~vf3|10|phW;yQ3CY8 z2CM=)ErF;xq-YJ5G|um}>*1#E+O_Mu|Nr#qQ&G1P-NMq@f?@*XUcSbV?tX=)ilM-Q zBZP|!Bpv0V;#ojKcpc7$=eqO;#Uy~#?^kNI{vSZfLx&DEt~LTmaKWXcx=joubklI<*Aw z>LtMaQ7DR<1I2LkWvwyu#Rwn~;ezT}_g(@5l3h?W%-a86Y-t#O1PubP+z<%?V5D(U zy57A6{h+{?kOZp7&WKZR+=sznMJ}+Dnpo=C_0%R_x_t~J5T?E_{+))l5v1%52>)d-`iiZyx|5!%M2Fb2dU zW3~MwwpEH9Rhue+k$UIOoo($Ds!NbOyMR36fRHu;*15(YcA7siIZk#%JWz>P!qX1?IUojG&nKR>^gArBt2 zit(ETyZ=@V&7mv_Fi4bABcnwP+jzQuHcfU&BrAV91u-rFvEi7y-KnWsvHH=d2 zgAk(GKm_S8RcTJ>2N3~&Hbwp{Z3NF_Xeh}g4Eke)V&dY{W(3&b1j9t4yK_aYJisZZ{1rcU5- z;eD>K;ndPq&B-8yA_S0F!4ThA&{1{x)H<#?k9a#6Pc6L?V^s0``ynL&D;p(!Nmx`Y zFkHex{4p!Ggm^@DlehW}iHHVi}~u=$&N? z(NEBLQ#UxxAkdW>X9LnqUr#t4Lu0=9L8&o>JsqTtT5|%gb3QA~hr0pED71+iFFr)dZ=Q=E6ng{NE{Z~0)C?deO#?Aj zSDQ$z#TeC2T^|=}6GBo-&$;E{HL3!q3Z-szuf)O=G#zDjin4SSP%o%6+2IT#sLjQa ziyxFFz~LMjWY+_a5H!U6%a<=b7QVP^ z*90a62;bVq{?@)P6^DWd^Yilq4|YTV2Nw!Yu;a1lPI-sxR)rf@Fe5DhDP7FH zZZ%4S*1C30P;|O+jB!1;m|rXT90Sm5*RBbQN`PKu+hDD*S^yE(CdtSfg=z>u$cIj> z + + diff --git a/src/App.svelte b/src/App.svelte deleted file mode 100644 index 646fef4..0000000 --- a/src/App.svelte +++ /dev/null @@ -1,114 +0,0 @@ - - -
- - - - - - - - - - - -
- - - - - - - {#each weapons as weapon (weapon.id)} - - {/each} - - -
- -
- - -
- - - -
- - diff --git a/src/components/App.svelte b/src/components/App.svelte new file mode 100644 index 0000000..9007ce6 --- /dev/null +++ b/src/components/App.svelte @@ -0,0 +1,127 @@ +
+

The Shipyard a Full Thrust ship builder

+
+ +
+ + + + + + + + + + +
+ + + + + + + {#each weapons as weapon (weapon.id)} + + {/each} + +
+ +
+ + +
+ + + +
+ + + + diff --git a/src/main.js b/src/main.js index 2c27a25..929b403 100644 --- a/src/main.js +++ b/src/main.js @@ -1,4 +1,4 @@ -import App from './App.svelte'; +import App from './components/App.svelte'; const app = new App({ target: document.body From debf73157773d89641a49c55ec097bd9bb7d012d Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 28 Jul 2020 12:13:04 -0400 Subject: [PATCH 03/11] layout --- public/global.css | 11 +++++++++++ src/components/App.svelte | 15 ++------------- src/components/Header.svelte | 23 +++++++++++++++++++++++ 3 files changed, 36 insertions(+), 13 deletions(-) create mode 100644 src/components/Header.svelte diff --git a/public/global.css b/public/global.css index b2626b3..a3e05ce 100644 --- a/public/global.css +++ b/public/global.css @@ -6,11 +6,21 @@ --font-scale-13: 2.369rem; --font-scale-14: 3.157rem; --font-scale-15: 4.209rem; + + --oxford-blue: hsla(226, 60%, 10%, 1); + --royal-blue-dark: hsla(218, 100%, 16%, 1); + --indigo-dye: hsla(209, 95%, 24%, 1); + --cg-blue: hsla(193, 80%, 35%, 1); + --white: hsla(20, 60%, 99%, 1); + + --main-width: 60em; } small {font-size: var(--font-scale-9); } h1 { + margin: 0px; + padding: 0px; font-size: var(--font-scale-14); } @@ -22,6 +32,7 @@ html, body { } body { + background-color: var(--white); color: #333; margin: 0; padding: 8px; diff --git a/src/components/App.svelte b/src/components/App.svelte index 9007ce6..5c72f98 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -1,8 +1,4 @@ -
-

The Shipyard a Full Thrust ship builder

-
- +
@@ -52,6 +48,7 @@ - - diff --git a/src/components/Identification.svelte b/src/components/ShipSpecs/Identification.svelte similarity index 85% rename from src/components/Identification.svelte rename to src/components/ShipSpecs/Identification.svelte index b02b1ea..b050eb8 100644 --- a/src/components/Identification.svelte +++ b/src/components/ShipSpecs/Identification.svelte @@ -1,5 +1,4 @@ -
- +
@@ -10,13 +9,12 @@ {/each} -
diff --git a/src/components/ShipSpecs/ShipCost.svelte b/src/components/ShipSpecs/ShipCost.svelte new file mode 100644 index 0000000..a5f0360 --- /dev/null +++ b/src/components/ShipSpecs/ShipCost.svelte @@ -0,0 +1,73 @@ +
+ + + + +
+ {#if within_budget} + mass unused: {mass_unused} + {:else}excessive mass: {-mass_unused}{/if} +
+ +
+ +
+ + {$ship.general.cost} +
+ + + + diff --git a/src/components/ShipSpecs/index.svelte b/src/components/ShipSpecs/index.svelte new file mode 100644 index 0000000..87d0d57 --- /dev/null +++ b/src/components/ShipSpecs/index.svelte @@ -0,0 +1,16 @@ + + + + + + + + From afe2c3bef57739c2de10f07d88c5724e157aaa50 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 28 Jul 2020 14:38:40 -0400 Subject: [PATCH 08/11] prettifying --- src/components/App.svelte | 3 ++- src/components/Field/index.svelte | 6 ++++++ src/components/Section/index.svelte | 23 +++++++++++++++++++---- src/components/ShipItem/index.svelte | 13 +++++++++---- src/components/ShipSpecs/ShipCost.svelte | 4 ++++ 5 files changed, 40 insertions(+), 9 deletions(-) diff --git a/src/components/App.svelte b/src/components/App.svelte index 0742f09..46df1e5 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -3,6 +3,7 @@ + diff --git a/src/components/ShipItem/index.svelte b/src/components/ShipItem/index.svelte index 36f781e..53c2fdb 100644 --- a/src/components/ShipItem/index.svelte +++ b/src/components/ShipItem/index.svelte @@ -1,9 +1,7 @@ -
- +
{ mass }
{ cost }
-
diff --git a/src/components/Firecons.svelte b/src/components/Firecons.svelte index bbe1ac1..c80715c 100644 --- a/src/components/Firecons.svelte +++ b/src/components/Firecons.svelte @@ -1,6 +1,6 @@ - + @@ -12,7 +12,7 @@ import Field from '~C/Field'; export let nbr, cost, mass = (0,0,0); const dispatch = createEventDispatcher(); - $: dispatch( 'change_firecons', nbr); + $: dispatch( 'change_firecons', nbr); diff --git a/src/components/Armour/Layer/index.svelte b/src/components/Hull/Armour/Layer/index.svelte similarity index 85% rename from src/components/Armour/Layer/index.svelte rename to src/components/Hull/Armour/Layer/index.svelte index 3ffdc62..ef8fca8 100644 --- a/src/components/Armour/Layer/index.svelte +++ b/src/components/Hull/Armour/Layer/index.svelte @@ -16,8 +16,14 @@ const dispatch = createEventDispatcher(); - $: dispatch( 'ship_change', + $: dispatch( 'ship_change', dux.actions.set_armour_layer({layer,rating}) ); + + diff --git a/src/components/Armour/index.svelte b/src/components/Hull/Armour/index.svelte similarity index 96% rename from src/components/Armour/index.svelte rename to src/components/Hull/Armour/index.svelte index 9338cc7..95a5b7f 100644 --- a/src/components/Armour/index.svelte +++ b/src/components/Hull/Armour/index.svelte @@ -46,7 +46,11 @@ diff --git a/src/components/Armour/stories.js b/src/components/Hull/Armour/stories.js similarity index 100% rename from src/components/Armour/stories.js rename to src/components/Hull/Armour/stories.js diff --git a/src/components/Screens/index.svelte b/src/components/Hull/Screens/index.svelte similarity index 92% rename from src/components/Screens/index.svelte rename to src/components/Hull/Screens/index.svelte index 9ad509d..00c69fe 100644 --- a/src/components/Screens/index.svelte +++ b/src/components/Hull/Screens/index.svelte @@ -1,5 +1,5 @@ - +
@@ -8,6 +8,7 @@ +
 @@ -34,4 +35,8 @@ input { width: 3em; } + div { + display: flex; + gap: 2em; + } diff --git a/src/components/Hull.svelte b/src/components/Hull/index.svelte similarity index 97% rename from src/components/Hull.svelte rename to src/components/Hull/index.svelte index 07c6366..4d34136 100644 --- a/src/components/Hull.svelte +++ b/src/components/Hull/index.svelte @@ -39,4 +39,5 @@ const dispatch = createEventDispatcher(); diff --git a/src/components/Propulsion/index.svelte b/src/components/Propulsion/index.svelte index ee84b36..20a2a08 100644 --- a/src/components/Propulsion/index.svelte +++ b/src/components/Propulsion/index.svelte @@ -1,10 +1,10 @@
- - + +
- - + $: ship_change(dux.actions.set_adfc(rating)); + From 5dabcc7072da0b80d764352d5884b44fe4cf88b9 Mon Sep 17 00:00:00 2001 From: Yanick Champoux Date: Tue, 28 Jul 2020 15:42:20 -0400 Subject: [PATCH 10/11] first pass of the new look --- src/components/App.svelte | 14 ++++++-------- src/components/{ => Hull}/Cargo/index.svelte | 0 .../{ => Hull}/Streamlining/index.svelte | 13 ++++++++++--- src/components/Hull/index.svelte | 8 ++++++++ src/components/Weapon/index.svelte | 12 +++--------- src/components/Weaponry/AddWeapon/index.svelte | 2 +- src/components/Weapons/Add.svelte | 10 +++++----- 7 files changed, 33 insertions(+), 26 deletions(-) rename src/components/{ => Hull}/Cargo/index.svelte (100%) rename src/components/{ => Hull}/Streamlining/index.svelte (85%) diff --git a/src/components/App.svelte b/src/components/App.svelte index f2159b6..2a011de 100644 --- a/src/components/App.svelte +++ b/src/components/App.svelte @@ -1,6 +1,8 @@
- + @@ -17,6 +19,9 @@ screens={$ship.structure.screens} armour={$ship.structure.armour} on:set_screens={set_screens} + cargo={$ship.cargo} + streamlining={$ship.streamlining} + on:set_cargo={ship_dispatch} on:ship_change={ship_dispatch} />
@@ -34,11 +39,6 @@
-
- - -
-
@@ -57,8 +57,6 @@ import Propulsion from "./Propulsion/index.svelte"; import Section from "~C/Section"; import Weapon from "~C/Weapon"; - import Cargo from "~C/Cargo/index.svelte"; - import Streamlining from "~C/Streamlining/index.svelte"; import Carrier from "~C/Carrier"; import ADFC from "~C/Weaponry/ADFC"; import AddWeapon from "~C/Weaponry/AddWeapon"; diff --git a/src/components/Cargo/index.svelte b/src/components/Hull/Cargo/index.svelte similarity index 100% rename from src/components/Cargo/index.svelte rename to src/components/Hull/Cargo/index.svelte diff --git a/src/components/Streamlining/index.svelte b/src/components/Hull/Streamlining/index.svelte similarity index 85% rename from src/components/Streamlining/index.svelte rename to src/components/Hull/Streamlining/index.svelte index 3f386d5..8fec36b 100644 --- a/src/components/Streamlining/index.svelte +++ b/src/components/Hull/Streamlining/index.svelte @@ -1,12 +1,16 @@
+ + +
@@ -30,4 +34,7 @@ diff --git a/src/components/Hull/index.svelte b/src/components/Hull/index.svelte index 4d34136..17c4ad0 100644 --- a/src/components/Hull/index.svelte +++ b/src/components/Hull/index.svelte @@ -13,6 +13,9 @@ + + +