Simple style changes

Client/index.html

@@ -12,13 +12,14 @@
             <img x-bind:src="Alpine.store('data')['image']">
             <h1 x-text="Alpine.store('data')['name']"></h1>
         </div>
-        <hr>
         <h2>Content:</h2>
         <div id="interverse-resources">
             <template x-for="resource in Alpine.store('data')['resources']">
                 <a x-bind:href="resource['location']">
                 <div class="interverse-resource">
-                    <img class="interverse-resource-icon" x-bind:src="resource['icon']">
+                    <template x-if="resource['icon'] !=''">
+                        <img class="interverse-resource-icon" x-bind:src="resource['icon']">
+                    </template>
                     <h2 x-text="resource['label']"></h2>
                     <p x-text="resource['description']"></p>
                 </div>
@@ -32,7 +33,9 @@
                     <template x-if="Alpine.store(connection)['version'] >=0">
                         <div x-on:click="initialize(connection+'/.well-known/interverse')">
                             <h3 x-text="Alpine.store(connection)['name']"></h3>
-                            <img x-bind:src="Alpine.store(connection)['image']">
+                            <template x-if="Alpine.store(connection)['image']!=''">
+                                <img x-bind:src="Alpine.store(connection)['image']">
+                            </template>
                         </div>
                     
                     </template>

Client/theme.css

@@ -1,4 +1,3 @@
-
 body{
     --theme-primary-color:white;
     --theme-secondary-color:black;
@@ -8,7 +7,7 @@ body{
     margin:0;
     display:flex;
     flex-direction: column;
-    font-size:185%;
+    font-size:100%;
 
 }
 @media screen and (min-width:1000px) {
@@ -17,28 +16,9 @@ body{
     }
     
 }
-table {
+img {
-    border-spacing:0;
+    max-width:15rem;
-    
-}
-
-th,td {
-    padding:0.5rem;
-    border:2px solid var(--theme-secondary-color);
-}
-
-a{
-    color:var(--theme-secondary-color)
-}
-
-
-a {
-    text-decoration: none;
 }
-
-    
-
-
 .inververse{
     display:flex;
     flex-direction: row;
@@ -54,14 +34,15 @@ a {
 }
 
 #interverse-resources{
-    justify-content: space-evenly;
     flex-wrap: wrap;
     display:flex;
     flex-direction: row;
     
 }
 .interverse-resource{
+    padding:2rem;
 }
+
 .interverse-resource-icon{
     height:3rem;
     width:3rem;
@@ -70,13 +51,12 @@ a {
     display:flex;
     flex-wrap: wrap;
     flex-direction: row;
-    justify-content: space-evenly;
     align-items: flex-start;
 }
 .interverse-connection{
     width:fit-content;
     border: 1px solid var(--theme-secondary-color);
-    padding:0.5rem;
+    padding:1rem;
     margin:0.25rem;
 }
 

Docs/index.html

@@ -10,7 +10,7 @@
         <div>
             <h2>What is the interverse?</h2>
                 <p>
-                    Interverse is a <a href="https://web0.small-web.org/">web0</a> search engine powered by trust and relationships. <br>
+                    <a href="/Interverse">Interverse</a> is a <a href="https://web0.small-web.org/">web0</a> search engine powered by trust and relationships. <br>
                     
                 </p>
             <h2>What are the Benefits?</h2>