new version 2.0

docsproj/src/App.svelte

@@ -1,6 +1,7 @@
 <script>
   import SS_Header from "./components/SS_Header.svelte";
   import SS_Main from "./components/SS_Main.svelte";
+  import SS_Footer from "./components/SS_Footer.svelte";
   import { loadStores } from "./js/stores/index.js";
   import { appStore } from "./js/stores";
 
@@ -17,19 +18,18 @@
     <main>
       <SS_Main />
     </main>
+    <footer>
+      <SS_Footer />
+    </footer>
   {/await}
 </div>
 
 <style>
   .ss-app {
     position: relative;
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-areas:
-      "header"
-      "main";
     min-height: 100vh;
     transition: all 0.3s ease-in-out;
+    overflow: hidden;
   }
 
   .ss-loading {

docsproj/src/app.css

@@ -15,11 +15,12 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: #fca728;
   text-decoration: inherit;
+  transition: all 0.2s ease-in-out;
 }
 a:hover {
-  color: #535bf2;
+  color: #a06a19;
 }
 
 html #app {

docsproj/src/components/SS_Footer.svelte

@@ -0,0 +1,33 @@
+<script>
+</script>
+
+<div>
+  <div class="ss-footer">
+    <b>
+      <a href="https://github.com/arthurgermano/spa-storage" target="_blank"
+        >Github</a
+      >
+    </b>
+    <b>
+      <a href="https://www.npmjs.com/package/spa-storage" target="_blank">NPM</a
+      >
+    </b>
+  </div>
+</div>
+
+<style>
+  .ss-footer {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+    border: 1px solid #fca728;
+    display: grid;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem 0;
+    font-size: 1.4rem;
+    text-align: center;
+    color: #fca728;
+    row-gap: 1rem;
+  }
+</style>

docsproj/src/components/SS_Header.svelte

@@ -31,7 +31,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    height: 100px;
+    padding: 2rem 0;
     font-size: 2rem;
     text-align: center;
     color: #fca728;

docsproj/src/components/SS_Main.svelte

@@ -5,7 +5,7 @@
   $: if (exampleField) {
     appStore.setTextSample(exampleField);
   } else {
-    appStore.setTextSample("Hello World! =)");
+    appStore.setTextSample("Hello World! =) - We will fill this field for you.");
   }
 </script>
 
@@ -14,28 +14,62 @@
     SPA Storage is a Plugin for Svelte and Pinia Stores that allows you to store
     data in Local Storage or IndexedDB.
     <br /><br />
-    The default storage is IndexedDB - since it can be use to store a lot of information
+    The default storage is <b>IndexedDB</b> - since it can be use to store a lot of information
     - more than Local Storage.
   </p>
+  <div class="ss-img">
+    <span>
+      <a href="https://svelte.dev/tutorial/writable-stores" target="_blank">
+        <img src="./img/svelte.png" alt="svelte.png" height="200" width="169" />
+      </a>
+    </span>
+    <span>
+      <a href="https://pinia.vuejs.org/core-concepts/" target="_blank">
+        <img src="./img/pinia.png" alt="pinia.png" height="200" width="134" />
+      </a>
+    </span>
+  </div>
+  <br />
+  <hr width="100%" />
 
   <div class="ss-sample">
     <label for="ss-sample">Testing - Sample Text</label>
     <input type="text" id="ss-sample" bind:value={exampleField} />
-    <small><i>write some text in the field and reload the page - the same text must appear</i></small>
+    <small
+      ><i
+        >write some text in the field and reload the page - the same text must
+        appear</i
+      ></small
+    >
   </div>
 </div>
 
 <style>
-  .ss-main {
+  .ss-main,
+  .ss-sample,
+  .ss-img {
+    position: relative;
     display: grid;
     justify-content: center;
     align-content: center;
+    overflow: hidden;
   }
 
-  .ss-sample {
-    display: grid;
-    justify-content: center;
-    align-content: center;
+  .ss-img {
+    grid-template-columns: 1fr 1fr;
+    text-align: center;
+    height: 300px;
+  }
+
+  img {
+    display: inline-block;
+    position: relative;
+    transition: all 0.3s ease-in-out;
+  }
+
+  img:hover {
+    transform: scale(1.1);
+    filter: drop-shadow(0 0 2rem #fca728);
   }
 
   p {
@@ -44,14 +78,17 @@
     padding: 0 3rem;
   }
 
-  input[type=text] {
-  width: 100%;
-  padding: 12px 20px;
-  margin: 8px 0;
-  display: inline-block;
-  border: 1px solid #fca728;
-  border-radius: 4px;
-  box-sizing: border-box;
-}
-  
+  label {
+    margin-top: 1rem;
+  }
+
+  input[type="text"] {
+    width: 100%;
+    padding: 12px 20px;
+    margin: 0.5rem 0;
+    display: inline-block;
+    border: 1px solid #fca728;
+    border-radius: 4px;
+    box-sizing: border-box;
+  }
 </style>