Minor cosmetic changes

Client/index.html

@@ -13,9 +13,16 @@
     <div class="interverse" x-data x-if="Alpine.store('data')">
         <div id="interverse-details">
             <img x-bind:src="Alpine.store('data')['image']">
+            <div id="interverse-contact">
                 <h1 x-text="Alpine.store('data')['name']"></h1>
+                <template x-for="key in Object.keys(Alpine.store('data')['contact'])">
+                    <p>
+                        <strong x-text="key"></strong>
+                        <span x-text="Alpine.store('data')['contact'][key]"></span>
+                    </p>             
+                </template>
+            </div>
         </div>
-        <h2>Content:</h2>
         <div id="interverse-resources">
             <template x-for="resource in Alpine.store('data')['resources']">
                 <a x-bind:href="resource['location']">

Client/theme.css

@@ -1,6 +1,7 @@
 body {
     --theme-primary-color: white;
     --theme-secondary-color: black;
+    --theme-accent-color: rgb(9, 120, 194);
     background-color: var(--theme-primary-color);
     color: var(--theme-secondary-color);
     overflow-x: hidden;
@@ -8,67 +9,89 @@ body{
     display: flex;
     flex-direction: column;
     font-size: 100%;
-
-}
-@media screen and (min-width:1000px) {
-    body{
-        font-size:100%;
 }
 
-}
 img {
     max-width: 15rem;
 }
-.inververse{
-    display:flex;
-    flex-direction: row;
-    flex-wrap: wrap;
 
+.interverse {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100vw;
+    font-size: 1.5rem;
 }
 
 #interverse-details {
     display: flex;
     flex-direction: row;
     align-items: center;
+}
 
+#interverse-details * {
+    margin: 0.25rem;
+}
+
+#interverse-contact {
+    word-wrap: break-word;
+}
+
+#interverse-details img {
+    max-width: 15rem;
+    max-height: 15rem;
 }
 
 #interverse-resources {
     flex-wrap: wrap;
     display: flex;
     flex-direction: row;
-    
+    align-items: flex-end;
 }
+
 .interverse-resource {
     padding: 2rem;
+    max-width: 15rem;
 }
 
 .interverse-resource-icon {
     height: 3rem;
     width: 3rem;
 }
+
 #interverse-groups {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
 }
+
 .interverse-group {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
+
 #interverse-connections {
     display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: flex-start;
+    justify-content: space-evenly;
 }
+
+#interverse-groups,
+#interverse-connections {
+    margin-left: 10vw;
+    margin-right: 10vw;
+}
+
 .interverse-connection {
     width: fit-content;
-    border: 1px solid var(--theme-secondary-color);
+    border: 0.15rem solid var(--theme-accent-color);
     padding: 1rem;
     margin: 0.25rem;
 }
+
 .interverse-connection-preview {
     display: flex;
     flex-direction: column;

Client/widget.html

@@ -0,0 +1 @@
+<! not sure how to slim it down yet>