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']">
-            <h1 x-text="Alpine.store('data')['name']"></h1>
+            <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,80 +1,103 @@
-body{
-    --theme-primary-color:white;
-    --theme-secondary-color:black;
-    background-color:var(--theme-primary-color);
-    color:var(--theme-secondary-color);
-    overflow-x:hidden;
-    margin:0;
-    display:flex;
+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;
+    margin: 0;
+    display: flex;
     flex-direction: column;
-    font-size:100%;
-
+    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;
-
+    max-width: 15rem;
 }
 
-#interverse-details{
-    display:flex;
+.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-resources{
+#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;
+    display: flex;
     flex-direction: row;
-    
-}
-.interverse-resource{
-    padding:2rem;
+    align-items: flex-end;
 }
 
-.interverse-resource-icon{
-    height:3rem;
-    width:3rem;
+.interverse-resource {
+    padding: 2rem;
+    max-width: 15rem;
 }
-#interverse-groups{
-    display:flex;
+
+.interverse-resource-icon {
+    height: 3rem;
+    width: 3rem;
+}
+
+#interverse-groups {
+    display: flex;
     flex-wrap: wrap;
     flex-direction: row;
 }
-.interverse-group{
-    display:flex;
+
+.interverse-group {
+    display: flex;
     flex-direction: row;
     flex-wrap: wrap;
 }
-#interverse-connections{
-    display:flex;
+
+#interverse-connections {
+    display: flex;
     flex-wrap: wrap;
     flex-direction: row;
     align-items: flex-start;
+    justify-content: space-evenly;
 }
-.interverse-connection{
-    width:fit-content;
-    border: 1px solid var(--theme-secondary-color);
-    padding:1rem;
-    margin:0.25rem;
+
+#interverse-groups,
+#interverse-connections {
+    margin-left: 10vw;
+    margin-right: 10vw;
 }
-.interverse-connection-preview{
-    display:flex;
+
+.interverse-connection {
+    width: fit-content;
+    border: 0.15rem solid var(--theme-accent-color);
+    padding: 1rem;
+    margin: 0.25rem;
+}
+
+.interverse-connection-preview {
+    display: flex;
     flex-direction: column;
 }
 
-.interverse-widget{
-    width:50vw;
-    height:60vh;
+.interverse-widget {
+    width: 50vw;
+    height: 60vh;
 }

Client/widget.html

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