update about and articles

assets/style/components/heading.css

@@ -1,15 +1,25 @@
 .heading {
   padding: 4rem 1.2rem 2rem 1.2rem;
 
+  h1,
+  h2,
+  h3 {
+    font-weight: 700;
+    margin: 1.25rem 0;
+  }
+
   h2 {
     font-size: 2.5rem;
-    font-weight: 700;
     line-height: 3.25rem;
-    margin: 2rem 0;
+  }
+
+  h3 {
+    font-size: 2rem;
+    line-height: 2.75rem;
   }
 
   p {
-    font-size: 1.25rem;
+    font-size: 1.35rem;
     font-weight: 300;
     line-height: 1.75rem;
     margin: 0 0 0 .1rem;

assets/style/pages/about/heading.css

@@ -1,7 +0,0 @@
-.about .heading {
-  padding: 4rem 1.15rem;
-
-  p {
-    margin: 0 14rem 0 0.05rem;
-  }
-}

assets/style/pages/about/partners.css

@@ -1,4 +1,4 @@
-.partners {
+.about .partners {
   .categories {
     padding: 1rem;
     
@@ -67,7 +67,7 @@
 }
 
 @media only screen and (--viewport-4) {
-  .partners {
+  .about .partners {
     .categories {
       padding: 1rem 2rem 2rem 2.1rem;
     }

assets/style/pages/about/values.css

@@ -1,30 +0,0 @@
-.about .values {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-gap: 0 4rem;
-  padding: 4rem 1.2rem 6rem 1.2rem;
-  margin: 0 auto;
-
-  h2 {
-    grid-column: 1/3;
-    font-size: 2rem;
-    font-weight: 600;
-    margin: .5rem 0;
-  }
-
-  .value {
-    h3 {
-      font-size: 1.5rem;
-      font-weight: 400;
-      margin: 2rem 0 .5rem 0;
-    }
-
-    p {
-      font-size: 1.15rem;
-      font-weight: 300;
-      line-height: 1.85rem;
-      padding: .5rem 0;
-      margin: 0;
-    }
-  }
-}

assets/style/pages/article/cards.css

@@ -80,8 +80,14 @@
       a {
         display: block;
 
-        .meta .date {
+        .meta {
-          display: none;
+          .desc {
+            margin: .5rem 0;
+          }
+
+          .date {
+            display: none;
+          }
         }
       }
     }

assets/style/pages/index/notified.css

@@ -1,5 +1,5 @@
 .index {
-  .journal {
+  .notified {
     /* background-image: linear-gradient(0deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(0, 0, 0, .03) 25%, rgba(0, 0, 0, .03) 26%, transparent 27%, transparent 74%, rgba(0, 0, 0, .03) 75%, rgba(0, 0, 0, .03) 76%, transparent 77%, transparent); */
     /* background-size: 3.35rem 3.35rem; */
     padding: 7rem 0 4rem 0;
@@ -34,6 +34,7 @@
       width: 100%;
 
       .scroll {
+        display: none;
         position: absolute;
         right: calc((100% - 48rem) / 2);
         top: -1.5rem;
@@ -180,19 +181,19 @@
 }
 
 @media only screen and (--viewport-13) {
-  .index .journal .cards-container .cards .card:last-of-type {
+  .index .notified .cards-container .cards .card:last-of-type {
     margin: 2rem 20vw 2rem 0;
   }
 }
 
 @media only screen and (--viewport-10) {
-  .index .journal .cards-container .cards .card:last-of-type {
+  .index .notified .cards-container .cards .card:last-of-type {
     margin: 2rem 12vw 2rem 0;
   }
 }
 
 @media only screen and (--viewport-4) {
-  .index .journal {
+  .index .notified {
     padding: 4rem 2.25rem;
 
     .msg {
@@ -235,7 +236,7 @@
 }
 
 @media only screen and (--viewport-3) {
-  .index .journal {
+  .index .notified {
     padding: 3rem 1.5rem;
   }
 }

assets/style/style.css

@@ -19,7 +19,7 @@
 @import 'pages/index/hero';
 @import 'pages/index/stats';
 @import 'pages/index/principles';
-@import 'pages/index/journal';
+@import 'pages/index/notified';
 
 /* Projects */
 @import 'pages/projects/cards';
@@ -29,11 +29,9 @@
 
 /* Resources */
 @import 'pages/resources/index';
-@import 'pages/resources/partners';
 
 /* About */
-@import 'pages/about/heading';
+@import 'pages/about/partners';
-@import 'pages/about/values';
 
 /* Article */
 @import 'pages/article/cards';

components/about/Hero.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="heading center">
+    <h2>About us</h2>
+    <!-- <p>We're on a mission to create a more decentralized web.</p> -->
+    <p>Working towards a more free & decentralized web.</p>
+  </div>
+</template>

components/about/Partners.vue

@@ -1,19 +1,8 @@
 <script setup>
-  useHead({
-    title: 'Inspin Digital | Partners',
-    meta: [
-      { 
-        name: 'description', 
-        content: `See the software Inspin Digital uses and the people we support.` 
-      },      
-    ],
-  })
-
   const route = useRoute()
 
   const software = await queryContent('software').sort({ priority: 1 }).find()
   const companies = await queryContent('companies').sort({ priority: 1 }).find()  
-
 </script>
 
 <template>
@@ -22,24 +11,24 @@
     <!-- Hero -->
     <div class="heading">
       <div class="msg">
-        <h2>Partners</h2>
+        <h3>Our partners</h3>
         <p>See the software we use and people we support.</p>
       </div>
     </div>
 
     <!-- Categories -->
     <div class="categories">
-      <NuxtLink to="/partners/#software" :class="route.hash === '#software' || route.hash === '' ? 'selected' : ''">Software</NuxtLink>
+      <NuxtLink to="/about/#software" :class="route.hash === '#software' || route.hash === '' ? 'selected' : ''">Software</NuxtLink>
-      <NuxtLink to="/partners/#companies" :class="route.hash === '#companies' ? 'selected' : ''">Companies</NuxtLink>
+      <NuxtLink to="/about/#companies" :class="route.hash === '#companies' ? 'selected' : ''">Companies</NuxtLink>
     </div>
 
     <!-- Content -->
     <div class="lists">
       <div v-if="route.hash === '#software' || route.hash === ''" class="links">
-        <PartnersCard :sites="software" />
+        <AboutCard :sites="software" />
       </div>
       <div v-if="route.hash === '#companies'" class="links">
-        <PartnersCard :sites="companies" />
+        <AboutCard :sites="companies" />
       </div>
     </div>
 

components/index/Notified.vue

@@ -19,7 +19,7 @@
 </script>
 
 <template>
-  <div class="journal">
+  <div class="notified">
     <div class="msg">
       <h2><span>Get.Notified</span><br> by Inspin Digital</h2>
       <p>An epic chronicle of the decentralized web, <br v-if="isDesktopOrTablet">libre software, and community updates.</p>

nuxt.config.ts

@@ -26,7 +26,7 @@ export default defineNuxtConfig({
     token: process.env.DIRECTUS_TOKEN,
     autoFetch: true,
   },
-  
+
   css: [
     "~/assets/style/style.css",
   ],
@@ -40,5 +40,6 @@ export default defineNuxtConfig({
     }
   },
 
-  telemetry: false
+  telemetry: false,
+  compatibilityDate: '2024-08-15'
 })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "inspin",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Creating a more decentralized web.",
   "license": "GPL-3.0-only",
   "homepage": "https://inspin.io",

pages/about.vue

@@ -12,8 +12,8 @@
 
 <template>
   <div class="about">
-    <div class="heading center">
+    <AboutHero />
-      <h2>Will be updated this soon.</h2>
+
-    </div>
+    <AboutPartners />
   </div>
 </template>

pages/index.vue

@@ -20,7 +20,7 @@
     <IndexPrinciples />
 
     <!-- Articles -->
-    <IndexJournal />
+    <IndexNotified/>
 
   </div>
 </template>

pages/resources.vue

@@ -28,7 +28,7 @@
       <ul>
         <li><h3>Company</h3></li>
         <li><NuxtLink to="/about">About us</NuxtLink></li>
-        <li><NuxtLink to="/partners">Partners</NuxtLink></li>
+        <li><NuxtLink to="/articles">Get Notified</NuxtLink></li>
         <li><NuxtLink to="https://git.inspin.io/inspin/" target="_BLANK">Gitea (git)</NuxtLink></li>
       </ul>
 
@@ -42,15 +42,15 @@
       <ul>
         <li><h3>Support</h3></li>
         <li><NuxtLink to="/help">Help Center</NuxtLink></li>
-        <li><NuxtLink to="/contact">Contact form</NuxtLink></li>
+        <li><NuxtLink to="/contact">Contact Form</NuxtLink></li>
         <li><NuxtLink to="https://discuss.inspin.io/" target="_BLANK">Community</NuxtLink></li>
       </ul>
 
       <ul>
         <li><h3>Social media</h3></li>
-        <li><NuxtLink to="https://x.com/InspinHQ" target="_BLANK">X</NuxtLink></li>
+        <li><NuxtLink to="https://x.com/InspinHQ" target="_BLANK">X (Twitter)</NuxtLink></li>
-        <!--<li><NuxtLink to="https://gab.com/InspinHQ" target="_BLANK">Gab</NuxtLink></li>-->
+        <li><NuxtLink to="https://gab.com/InspinHQ" target="_BLANK">Gab</NuxtLink></li>
-        <li><NuxtLink to="https://njump.me/inspin.io" target="_BLANK">Nostr</NuxtLink></li>
+        <li><NuxtLink to="https://njump.me/npub1nvdr4aeamnswzzm7a5w2w9a0jfy3qqhqa7dy9jhxlyzg0yjq58wsftqtlh" target="_BLANK">Nostr</NuxtLink></li>
         <li><NuxtLink to="https://dribbble.com/inspin" target="_BLANK">Dribbble</NuxtLink></li>
       </ul>
     </div>