From 8fe5a1cf652fd4bd0b737bd18605a8d4c4028407 Mon Sep 17 00:00:00 2001
From: julian laplace <julescarbon@gmail.com>
Date: Wed, 26 Oct 2022 15:50:25 +0200
Subject: update padding still lol hi :)

---
 views/partials/hootstream.ejs | 306 +++---------------------------------------
 1 file changed, 17 insertions(+), 289 deletions(-)

(limited to 'views/partials/hootstream.ejs')

diff --git a/views/partials/hootstream.ejs b/views/partials/hootstream.ejs
index 755f83c..dfc1ee6 100644
--- a/views/partials/hootstream.ejs
+++ b/views/partials/hootstream.ejs
@@ -21,6 +21,22 @@
       </div>
     </script>
 
+    <script class="threadTemplate" type="text/html">
+      <div class="{{className}}">
+        <a class="userLink" href="/profile/{{username}}" style="opacity: {{age_opacity}}">
+          {{username}}
+        </a>
+        <a class="avatarLink" href="/profile/{{username}}" style="opacity: {{age_opacity}}">
+          <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
+        </a>
+        <div class="text" style="opacity: {{age_opacity}}">{{hoot}}</div>
+        <div class="keyword">{{keyword_link}}</div>
+        <div class="commentCount date" style="opacity: {{comment_opacity}}">{{comment_count}}</div>
+        <div class="fileCount date" style="opacity: {{file_opacity}}">{{file_count}}</div>
+        <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+      </div>
+    </script>
+
     <script class="lastlogTemplate" type="text/html">
       <div class="{{className}}" style="opacity: {{opacity}}">
         <a class="userLink" href="/profile/{{username}}">
@@ -36,7 +52,7 @@
         <div class="filename" style="opacity: {{age_opacity}}">
           <a href="{{link}}" title="{{id}}" class="file">{{filename}}</a>
         </div>
-        <div class="size {{size_class}}" style="opacity: {{age_opacity}}">
+        <div class="size" style="opacity: {{age_opacity}}">
           {{size}}
         </div>
         <div class="age {{date_class}}" style="opacity: {{age_opacity}}">
@@ -57,291 +73,3 @@
 
   </div>
 </div>
-
-<style>
-  #hootstream {
-    margin-top: 3rem;
-    font-size: 16px;
-  }
-  #hootstream form {
-    display: flex;
-    width: 100%;
-    justify-content: space-between;
-    align-items: center;
-    flex-direction: row;
-    margin-bottom: 0.75rem;
-  }
-  #hootstream form input {
-    flex: 1;
-    font-size: 16px;
-    padding: 0.25rem;
-    margin-bottom: 0;
-  }
-  #hootstream form button {
-    margin: 0;
-    padding: 0.25rem;
-    margin-left: 0.5rem;
-    min-width: 2.5rem;
-  }
-  #hootevents {
-    font-size: 14px;
-    padding-right: 3rem;
-  }
-  #hootevents .hoot {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 0.5rem;
-    width: 100%;
-  }
-  #hootevents .age {
-    width: 40px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: flex-start;
-    text-align: right;
-    margin: 0px 0.75rem 0px 0px;
-  }
-  #hootevents .userLink {
-    color: #118;
-    opacity: 0.8;
-    text-align: right;
-    width: 6rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    margin-right: 0.5rem;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    margin-top: 0.175rem;
-  }
-  #hootevents .avatar {
-    width: 1.5rem;
-    height: 1.5rem;
-    background-size: cover;
-    border-radius: 2px;
-    border: 1px solid #000;
-    margin: 0px 0.5rem 0px 0px;
-    box-shadow: 0 0 1px 1px rgba(128,128,128,0.1);
-    position: relative;
-    top: -0.25rem;
-  }
-  #hootevents .hoot .text {
-    text-align: left;
-    flex: 1;
-    margin: 0px 0.5rem 0px 0px;
-    white-space: pre-wrap;
-    line-height: 1.5;
-  }
-
-  #hootevents .hoot.isRecent .threadLink {
-    font-weight: bold;
-    text-shadow: 0 0 3px #fed;
-  }
-  #hootevents .hoot .threadLink {
-    color: #38f;
-    font-size: 16px;
-  }
-
-  /** DiViDErZ */
-
-  #hootevents .divider {
-    border-top: 0;
-    border-bottom: 1px solid rgba(88,88,88,0.4);
-    margin: 0 auto;
-    width: 80%;
-    height: 0rem;
-    margin-bottom: 1rem;
-  }
-  #hootevents .divider.dark {
-    border-top: 1px solid rgba(88,88,88,0.4);
-    border-bottom: 0;
-    height: 1rem;
-    margin-bottom: 0rem;
-    margin-top: 0rem;
-  }
-  #hootevents .thread {
-    background: linear-gradient(90deg, rgba(127,127,127,0.0), rgba(127,127,127,0.05), rgba(127,127,127,0.0));
-  }
-
-  /** LastLog */
-
-  #hootevents .hoot.streamLastlog {
-    font-size: 13px;
-    margin-bottom: 1rem;
-    align-items: center;
-  }
-  #hootevents .hoot.streamLastlog .userLink {
-    margin-top: 0;
-    margin-right: 0.375rem;
-  }
-  #hootevents .hoot.streamLastlog .text {
-    line-height: 0;
-  }
-  #hootevents .hoot.streamLastlog .age {
-
-  }
-
-  /** Files */
-  #hootevents .fileList {
-    width: calc(100% - 8.25rem + 1px);
-    margin-top: 0.5rem;
-    margin-bottom: 1rem;
-    margin-left: 8rem;
-    margin-bottom: 1rem;
-  }
-  #hootevents .fileRow {
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  #hootevents .fileRow .age {
-    margin-right: 0;
-  }
-  #hootevents .fileRow .filename {
-    flex: 1;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  #hootevents .fileRow div {
-    color: rgba(64,64,64,1.0);
-    background: transparent;
-    padding: 0.5rem;
-    white-space: nowrap;
-    position: relative;
-    transition: opacity 0.1s;
-  }
-  #hootevents .fileRow div::after {
-    content: ''; 
-    width: 100%; 
-    height: 100%;
-    opacity: 0.2; 
-    position: absolute; 
-    top: 0; 
-    left: 0;
-    z-index: -1;
-  }
-  #hootevents .fileRow:nth-child(odd) div::after {
-    background-color: #448;
-  }
-  #hootevents .fileRow:nth-child(even) div::after {
-    background-color: #88b;
-  }
-  #hootevents .fileRow:nth-child(even):hover div::after,
-  #hootevents .fileRow:nth-child(odd):hover div::after {
-    background-color: #bbf;
-  }
-
-  /** Misc */
-  #hootevents code, #hootevents pre {
-    background: rgba(127,127,127,0.2);
-    border: 1px solid rgba(127,127,127,0.2);
-    max-width: calc(100vw - 12.5rem);
-    margin: 0.25rem;
-    padding: 0.5rem;
-  }
-
-  /** HOOT FORM */
-
-  #hootform {
-    margin-bottom: 0.5rem;
-    padding: 0.5rem;
-  }
-  #hootform input[type="text"] {
-    border-top: 0;
-    border-left: 0;
-    border-right: 0;
-    border-bottom: 1px solid rgba(127,127,127,0.5);
-    padding-bottom: 3px;
-    font-size: 14px;
-    font-family: "Trebuchet MS", sans-serif;
-    background: transparent;
-    outline: 0;
-    width: 270px;
-    transition: background 200ms;
-    background: white;
-  }
-  #hootform input[type="text"]:invalid {
-    background: transparent;
-  }
-  #hootform input[type="text"]:focus {
-    border-bottom: 1px solid rgba(40,20,20,0.2);
-    border-radius: 2px 2px 0 0;
-    color: #211;
-  }
-  #hootform input[type="text"]:focus {
-    border-bottom-color: rgba(127,127,127,0.2);
-  }
-  #hootform input[type="text"]:invalid {
-    caret-color: #888;
-  }
-
-  /** MEDIA QUERY: DARK MODE */
-  @media (prefers-color-scheme: dark) {
-    .search_form input[type="text"]:focus {
-      border-bottom-color: rgba(127,127,127,0.2);
-    }
-    .search_form input[type="text"]:invalid {
-      caret-color: #888;
-    }
-    #hootstream .userLink {
-      color: #def;
-    }
-    #hootevents .fileRow div {
-      color: rgba(192,192,192,1.0);
-    }
-    #hootevents .fileRow:nth-child(odd) div::after {
-      background-color: #88b;
-    }
-    #hootevents .fileRow:nth-child(even) div::after {
-      background-color: #448;
-    }
-    #hootevents .fileRow:nth-child(even):hover div::after,
-    #hootevents .fileRow:nth-child(odd):hover div::after {
-      background-color: #bbf;
-    }
-    #hootevents .hoot .threadLink:hover,
-    .desktop a:hover {
-      color: #2bf;
-    }
-  }
-
-  /** MEDIA QUERY: PHONE */
-  @media (max-width: 700px) {
-    html, body {
-      overflow-x: hidden;
-    }
-    #hootform {
-      margin-bottom: 0rem;
-    }
-    #hootstream {
-      padding-right: 0;
-      margin-top: 1rem;
-    }
-    #hootevents .userLink {
-      display: none;
-    }
-    #hootevents .streamLastlog .userLink {
-      display: block;
-      width: auto;
-      margin-left: 2rem;
-    }
-    #hootevents .avatarLink {
-      margin-left: 0.25rem;
-    }
-    #hootevents .fileList {
-      margin-top: 0.5rem;
-      margin-bottom: 1rem;
-      margin-left: 1.75rem;
-      width: calc(100% - 2rem);
-    }
-    #hootevents code, #hootevents pre {
-      max-width: calc(100vw - 5.75rem);
-      margin-right: 0;
-      padding: 0.25rem 0.25rem 0.75rem 0.25rem;
-    }
-  }
-</style>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2