new layout

b-lack · Jul 18, 2023 · 2c22503 · 2c22503
1 parent 1450a60
commit 2c22503
Show file tree

Hide file tree

Showing 8 changed files with 93 additions and 62 deletions.
diff --git a/docs/_includes/filter.html b/docs/_includes/filter.html
@@ -6,20 +6,13 @@
             <div class="pf-treasure pf-row">
                 <div id="pf-treasure-stack"></div>
                 <span id="pf-treasure-counter"></span>
-                <div>
+                <div class="pf-hidden-small">
                     <span>My Treasure Chest</span>
                 </div>
             </div>
         </a>
     </div>
-    <div id="pf-feed-toggle">
-        <a id="pf-toggle-feed" class="pf-birdy pf-row pf-nowrap pf-row-bottom">
-            <img style="max-width:50px;" src="/assets/birdy.svg" alt="Birdy">
-            <div class="pf-row-bottom">
-                Feed me!
-            </div>
-        </a>
-    </div>
+
     <!--<div id="gf-to-list"> birdy.svg
         <a href="/">
             <div class="pf-treasure pf-row">

diff --git a/docs/_includes/mastodon-feed.html b/docs/_includes/mastodon-feed.html
@@ -1,4 +1,5 @@
 <div id="pf-feed" class="scroll-wrapper">
+    <div id="pf-backdrop"></div>
     <div id="mt-body" class="mt-body" role="feed">
         <div class="loading-spinner"></div>
     </div>

diff --git a/docs/_includes/the-pirate-forest.html b/docs/_includes/the-pirate-forest.html
@@ -0,0 +1,9 @@
+<header class="text-center">
+    <div class="pf-ad">
+        <div id="pf-night-sky" data-stars="{{stargazers_count}}" data-owner="b-lack" data-repo="ThePirateForest"></div>
+        <h1 class="pf-title">The Pirate Forests</h1>
+        <p class="pf-under-title">
+            Discover Treasures of Forest-related<br/> Open Source Software.
+        </p>
+    </div>
+</header>
diff --git a/docs/_layouts/basic.html b/docs/_layouts/basic.html
@@ -1,6 +1,6 @@
 {% include html-header.html %}
 
-{% include mastodon-feed.html %}
+
 
 
 <div class="pf-main {{ page.type }}">
@@ -11,15 +11,21 @@
                     <img src="{{ site.baseurl }}/assets/Export.svg" alt="The Pirate Forest" width="100%">
                 </a>
             </div>
-            <div class="pf-grow pf-hidden-big"></div>
+
+            <div class="pf-grow">
+                {% include the-pirate-forest.html %}
+            </div>
             <div>
                 {% include filter.html %}
             </div>
         </div>
+        <div>
+
+        </div>
 
-        <main class="pf-column pf-grow">
-            {{ content }}
-        </main>
     </div>
+    <main class="pf-column pf-grow">
+        {{ content }}
+    </main>
 </div>
 {% include html-footer.html %}
diff --git a/docs/_sass/mastodon-feed.scss b/docs/_sass/mastodon-feed.scss
@@ -10,29 +10,30 @@ body{
     overflow: scroll;
     width: fit-content;
     overflow: scroll;
-    position:fixed;
-    left: -350px;
-    width: 350px;
+
+    width: 100%;
     top: 0;
     bottom: 0;
-    height: 100vh;
+    height: 350px;
     z-index: 1;
     transition: left .2s ease-in-out;
-    background-color: #222;
+    display: flex;
+    flex-direction: row;
+    border-radius: 10px;
 
     a{
         text-decoration: underline;
     }
 
     article{
-        background-color: rgba(0,0,0,.3);
+        background-color: rgba(50,50,50,7);
         border-radius: 10px;
         padding: 10px;
         margin: 10px;
         display: flex;
         flex-direction: column;
         justify-content: center;
-        overflow-x: hidden;
+        min-width: 500px;
     }
     .mt-avatar, .mt-user{
         display: none;
@@ -41,6 +42,14 @@ body{
         //aspect-ratio: 16/9;
         overflow: hidden;
     }
+    .toot-date{
+        font-size: 0.8em;
+        color: rgba(255,255,255,0.5);
+        text-decoration: none;
+    }
+    .toot-media{
+        aspect-ratio: 16/9;
+    }
 }
 
 .pf-feed-active{
@@ -49,8 +58,9 @@ body{
     }
     .pf-main{
         position: relative;
-        left: 350px;
+        //left: 350px;
     }
     overflow-x: hidden;
     width: 100%;
-}
+
+}
diff --git a/docs/assets/app.js b/docs/assets/app.js
@@ -566,6 +566,11 @@ function initData(){
         toggleFeedBtn.addEventListener("click", toggleFeed);
     }
 
+    const backDrop = document.getElementById("pf-backdrop");
+    if(backDrop){
+        backDrop.addEventListener("click", toggleFeed);
+    }
+
     fetch('/assets/repositories.json')
         .then(response => response.json())
         .then(extData => {

diff --git a/docs/css/styles.scss b/docs/css/styles.scss
@@ -37,7 +37,7 @@ h1.pf-title{
   margin-bottom: 100px;
 }
 .pf-skelleton-img{
-  min-width: 100px;
+  min-width: 400px;
 }
 .pf-hidden{
   display: none;
@@ -51,8 +51,7 @@ body{
   margin: 0;
 }
 main{
-  margin: 0 10px;
-  max-width: 700px;
+  margin: 0px;
 }
 a, .pf-clickable{
   color: inherit;
@@ -117,6 +116,10 @@ header{
 .pf-ship p{
   margin: 0.2em 0 0.2em;
 }
+.pf-ship-list{
+  margin: 0 auto;
+  max-width: 700px;
+}
 .pf-ship-list > *:last-child .pf-ship{
   border-bottom: none;
 }
@@ -588,6 +591,27 @@ footer > *{
 .pf-ad{
   margin: 50px 0;
 }
+.pf-flag{
+  flex-direction: column;
+  margin-right: 0;
+}
+.pf-flag > *:first-child{
+  width: 100%;
+  flex-direction: row;
+  .pf-filter-col{
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+    & > *{
+      margin: 10px 10px;
+    }
+  }
+}
+.pf-feed-line{
+  position: relative;
+  left: 30px;
+  top: 20px;
+}
 @media only screen and (max-width: 800px) {
   .pf-hidden-big{
     display: block;
@@ -598,22 +622,8 @@ footer > *{
   .pf-ad{
     display: none;
   }
-  .pf-flag{
-    flex-direction: column;
-    margin-right: 0;
-  }
-  .pf-flag > *:first-child{
-    width: 100%;
-    flex-direction: row;
-    .pf-filter-col{
-      margin: 0;
-      display: flex;
-      flex-direction: row;
-      & > *{
-        margin: 10px 10px;
-      }
-    }
-  }
+
+
   .pf-small-column{
     flex-direction: column;
   }

diff --git a/docs/index.markdown b/docs/index.markdown
@@ -7,29 +7,26 @@ title: The Pirate Forest
 filter: true
 type: pf-type-index
 ---
-
-<header class="text-center">
-    <div class="pf-ad">
-        <div id="pf-night-sky" data-stars="{{stargazers_count}}" data-owner="b-lack" data-repo="ThePirateForest"></div>
-        <h1 class="pf-title">The Pirate Forests</h1>
-        <p class="pf-under-title">
-            Discover Treasures of Forest-related<br/> Open Source Software.
-        </p>
+<div class="pf-">
+    <div class="pf-row pf-feed-line">
+        <div><img style="max-width:50px;" src="/assets/birdy.svg" alt="Birdy"></div>
+        <div class="pf-row-bottom"><a rel="me" href="https://mastodon.social/@ThePirateForest" target="_blank"><small>more</small></a></div>
+        <div class="pf-grow"></div>
     </div>
+    {% include mastodon-feed.html %}
+</div>
 
-    <div class="h4">Filter by Topic</div>
-    <div id="pf-tag-men" class="pf-inline-men"></div>
+<div class="h4">Filter by Topic</div>
+<div id="pf-tag-men" class="pf-inline-men"></div>
 
-    <div id="gf-sorting" class="pf-column">
-        <div class="h4">
-            Sort by
-        </div>
-        <div class="pf-grow pf-inline-men">
-            <a class="m-2 pf-meta-timeglass" title="Filter By Time added" onclick="setSorting('time'); return false;" >Time Added</a>
-            <a class="m-2 pf-meta-star" title="Filter By Stars" onclick="setSorting('stars'); return false;" >Stars</a>
-        </div>
-        
+<div id="gf-sorting" class="pf-column">
+    <div class="h4">
+        Sort by
+    </div>
+    <div class="pf-grow pf-inline-men">
+        <a class="m-2 pf-meta-timeglass" title="Filter By Time added" onclick="setSorting('time'); return false;" >Time Added</a>
+        <a class="m-2 pf-meta-star" title="Filter By Stars" onclick="setSorting('stars'); return false;" >Stars</a>
     </div>
-</header>
+</div>
 
 {% include list.html %}