From fd3299ba6241159ac6ca041b90bab131bc541239 Mon Sep 17 00:00:00 2001
From: marston <marston@jackallabs.io>
Date: Wed, 14 Feb 2024 15:27:48 -0500
Subject: [PATCH] fixing dumb styling stuff

---
 index.html                        |  2 +-
 src/assets/css/style.css          |  2 ++
 src/components/DraftDocuments.vue |  4 +--
 src/views/DraftEditor.vue         |  8 ++---
 src/views/HomePage.vue            | 53 ++++++++++++++++++++++++-------
 src/views/UserPage.vue            | 18 ++++-------
 6 files changed, 58 insertions(+), 29 deletions(-)
diff --git a/index.html b/index.html
index dde16aa..8165974 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue + TS</title>
+    <title>Beacon</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 2509458..41da8f7 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -59,6 +59,8 @@ button:focus-visible {
   padding: 2em;
 }
 
+
+
 #app {
   margin: 0;
   padding: 0;
diff --git a/src/components/DraftDocuments.vue b/src/components/DraftDocuments.vue
index e24c4ee..bf7cd7d 100644
--- a/src/components/DraftDocuments.vue
+++ b/src/components/DraftDocuments.vue
@@ -30,8 +30,8 @@
 <div class="draft-docs">
   <h2>Drafts</h2>
   <div class="action-buttons">
-    <button class="add-button" @click="openSaveDraft">+</button>
-    <button class="public-button" @click="openPubDraft">P</button>
+    <button class="add-button" @click="openSaveDraft">Save</button>
+    <button class="public-button" @click="openPubDraft">Pub.</button>
   </div>
   <ul class="files">
     <li v-for="item in files">
diff --git a/src/views/DraftEditor.vue b/src/views/DraftEditor.vue
index 8437725..ae947ff 100644
--- a/src/views/DraftEditor.vue
+++ b/src/views/DraftEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="template-container">
+  <div id="editor-temp" class="template-container">
     <div class="connect-buttons">
       <button @click="connectWallet"  v-if=!walletInit>Connect Wallet</button>
       <router-link v-else :to="`/` + address">
@@ -13,7 +13,7 @@
     </div>
     <div class="main-container" >
       <h1>Beacon Editor</h1>
-      <main v-if="walletInit">
+      <main id="editor-main" v-if="walletInit">
         <section>
           <CKE id="editor" :editor="CustomCKEditor" v-model="editorData" :config="{}" />
         </section>
@@ -64,14 +64,14 @@
 </script>
 
 <style lang="scss">
-  main {
+  #editor-main {
     display: grid;
     grid-template-columns: auto 200px;
     grid-template-rows: 1fr;
     padding: 0rem 4rem;
   }
 
-  .template-container {
+  #editor-temp {
     display: flex;
     flex-direction: column;
     //height: 100%;
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index c4a5314..911969f 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -11,16 +11,16 @@
         </div>
           <div id="hero-art"></div>
       </div>
-      <main v-else>
-        <section>
-          <div ref="shell" >
+      <main v-else id="home-main">
+        <section id="article-section">
+          <div id="article" ref="shell" >
             <span class="loader"></span>
           </div>
         </section>
-        <aside>
-<!--          // people here -->
-          <div ref="peoples" />
-        </aside>
+<!--        <aside>-->
+<!--&lt;!&ndash;          // people here &ndash;&gt;-->
+<!--          <div ref="peoples" />-->
+<!--        </aside>-->
       </main>
     </div>
   </div>
@@ -53,11 +53,18 @@
 </script>
 
 <style lang="scss">
-  main {
-    display: grid;
-    grid-template-columns: auto 300px;
-    grid-template-rows: 1fr;
+  #home-main {
     padding: 0rem 4rem;
+    height: 100%;
+  }
+  .main-container {
+    height: 100%;
+    flex-grow: 1;
+    margin-top: 0px;
+  }
+  .template-container {
+    flex-grow: 1;
+    background-color: #fafafa;
   }
   .loader {
     width: 48px;
@@ -94,6 +101,30 @@
     background-color: lightblue;
   }
 
+  #article-section {
+    width: 50%;
+    margin: 0px auto;
+    border-left: gray solid 1px;
+    border-right: gray solid 1px;
+    padding: 0px 60px;
+    height: 100%;
+    background-color: #fff;
+  }
+
+  #article {
+    text-align: left;
+    padding-top: 40px;
+
+    img {
+      width: 100% !important;
+      height: auto !important;
+    }
+
+    h1 {
+      margin-top: 0px;
+    }
+  }
+
 
   .hero {
     height: 80vh;
diff --git a/src/views/UserPage.vue b/src/views/UserPage.vue
index f3d252d..8f5ee6f 100644
--- a/src/views/UserPage.vue
+++ b/src/views/UserPage.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="template-container">
     <div class="main-container">
-      <main>
-        <section>
+      <main id="user-main">
+<!--        <section>-->
           <div>
             <span v-if="!worx.length" class="loader"></span>
             <div v-else>
@@ -18,11 +18,6 @@
               </ul>
             </div>
           </div>
-        </section>
-        <aside>
-<!--          // people here -->
-          <div ref="peoples" />
-        </aside>
       </main>
     </div>
   </div>
@@ -68,11 +63,11 @@
 </script>
 
 <style lang="scss">
-  main {
-    display: grid;
-    grid-template-columns: auto 300px;
-    grid-template-rows: 1fr;
+  #user-main {
     padding: 0rem 4rem;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
   }
   .loader {
     width: 48px;
@@ -108,6 +103,7 @@
     flex-direction: column;
     max-width: 30vw;
     margin: 0px auto;
+    padding-bottom: 40px;
   }
 
   .work-item {
