replace bulma with shoelace

James-Burgess · Oct 7, 2021 · b7cc3ab · b7cc3ab
1 parent 03a6586
commit b7cc3ab
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 37 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -6,8 +6,11 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Mountain</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/themes/light.css">
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/shoelace.js"></script>
 </head>
 <body>
+
 <script src="/main.js"></script>
 </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "Mountain",
+  "name": "mountain",
   "version": "1.0.0",
   "description": "Alpinejs project",
   "main": "index.js",
@@ -25,7 +25,6 @@
   "dependencies": {
     "@auth0/auth0-spa-js": "^1.16.1",
     "alpinejs": "^3.2.2",
-    "bulma": "^0.9.3",
     "lodash": "^4.17.21",
     "navigo": "^8.11.1",
     "style-loader": "^3.2.1"

diff --git a/src/pages/home/index.html b/src/pages/home/index.html
@@ -1,13 +1,26 @@
-<section x-data="user" x-bind:class="authenticated ? 'hero is-success' : 'hero is-danger'">
-    <div class="hero-body">
-        <p class="title" x-text="authenticated ? 'You are authenticated' : 'You are not logged into the website'">
-        </p>
-        <a x-bind:href="authenticated ? '/about' : '/login'" data-navigo>
-        <button x-bind:class="authenticated ? 'is-success' : 'is-danger'" class="button is-light" x-text="authenticated ? 'Dashboard' : 'Login'">Dashboard</button>
-        </a>
-
-        <button x-show="authenticated" class="button is-light" x-on:click="logout">
-            Logout
-        </button>
-    </div>
-</section>
+<sl-alert x-data="user" x-bind:type="authenticated ? 'success' : 'warning'" open>
+    <sl-icon slot="icon" name="check2-circle"></sl-icon>
+    <strong x-text="authenticated ? 'You are authenticated' : 'You are not logged into the website'"></strong><br>
+    <sl-button size="small" x-show="authenticated" x-on:click="logout" type="neutral">Logout</sl-button>
+    <a href="/login" x-show="!authenticated" data-navigo><sl-button size="small" x-on:click="logout" type="success">Login</sl-button></a>
+</sl-alert>
+
+
+
+<div class="welcome">
+<h1>Welcome to mountain!</h1>
+    <p>
+        A javascript framework based on alpine.js with some extra features to make it a bit easier to use.
+    </p>
+    <ul>
+        <li>Webpack to bundle your shit</li>
+        <li>Navigo to route to pages</li>
+        <li>Auth0 to secure your connection</li>
+        <li>Shoelace to style your components</li>
+        <li>PostCSS so you can write scss</li>
+    </ul>
+</div>
+
+<div>
+    Authenticated users can view the <a href="/about">about page</a>
+</div>
diff --git a/src/styles/main.scss b/src/styles/main.scss
@@ -1,24 +1,2 @@
 @charset "utf-8";
-@import "./node_modules/bulma/bulma.sass";
 
-
-@media(max-width: 500px) {
-  .reverse-columns {
-    flex-direction: column-reverse;
-    display: flex;
-  }
-}
-
-.titled {
-  font-family: 'Merriweather', serif !important;
-  font-size: 58px !important;
-  font-weight: 400 !important;
-  line-height: 64px !important;
-}
-
-.subtitled {
-  font-family: 'Merriweather', serif !important;
-  font-size: 22px !important;
-  font-weight: 400 !important;
-  line-height: 36px !important;
-}