feat: app descriptions

Thanks roel!

Closes #2.

members_lumbung_space/static/css/lumbung.css

@@ -1,7 +1,7 @@
 
 @font-face {
   font-family: "Gudea";
-  src: 
+  src:
     url("/static/fonts/Gudea-Regular.ttf") format("ttf"),
     url("/static/fonts/Gudea-Regular.woff2") format("woff2");
   font-weight: 400;
@@ -9,7 +9,7 @@
 
 @font-face {
   font-family: "Gudea";
-  src: 
+  src:
     url("/static/fonts/Gudea-Italic.ttf") format("ttf"),
     url("/static/fonts/Gudea-Italic.woff2") format("woff2");
   font-weight: 400;
@@ -18,7 +18,7 @@
 
 @font-face {
   font-family: "Gudea";
-  src: 
+  src:
     url("/static/fonts/Gudea-Bold.ttf") format("ttf"),
     url("/static/fonts/Gudea-Bold.woff2") format("woff2");
   font-weight: 700;
@@ -28,7 +28,6 @@ body {
   font-family: "Gudea", "sans-serif";
   color: #333;
   margin: 0;
-
 }
 
 body {
@@ -78,7 +77,6 @@ input:invalid:focus {
   .logo {
     margin: 60px 0 !important;
   }
-
 }
 
 .logo {
@@ -135,13 +133,13 @@ nav strong{
 }
 
 footer {
-  background-color: #AFAFAF !important; 
+  background-color: #AFAFAF !important;
   padding: 1rem 1.5rem !important;
 }
 
 footer .content span {
   padding-right: 0.5rem;
-} 
+}
 
 .container {
   padding-bottom: 2rem !important;
@@ -167,7 +165,6 @@ footer .content span {
     margin: auto;
     margin-top: 4em;
   }
-
 }
 
 @media all and (min-width: 1216px) {
@@ -177,7 +174,6 @@ footer .content span {
   }
 }
 
-
 .signup-form-box {
   margin: auto;
   margin-top: 4em;
@@ -215,4 +211,23 @@ footer .content span {
 /* grey out sounds.lumbung.space since it's not working yet */
 [href="https://sounds.lumbung.space"] {
   opacity: 0.5;
-}
+}
+
+.app_icon:hover {
+  transform: rotate(-15deg);
+}
+
+.app_name{
+  font-weight: bold;
+  font-size: 18px;
+  margin-bottom: 0.2em;
+}
+
+.app_name:hover{
+  text-decoration: underline;
+}
+
+.app_description{
+  font-size: 14px;
+  padding: 8px;
+}

members_lumbung_space/templates/admin.html

@@ -7,17 +7,70 @@
     <img src="{{ url_for('static', path='svg/lumbung_space_logo.svg') }}" alt="lumbung.space logo">
   </a>
 </div>
-{% set site_list = ("tv","social","cloud","pen", "books", "panduan", "nongkrong", "sounds") %}
-{% set site_urls= ("https://tv.lumbung.space/plugins/auth-openid-connect/0.0.7/auth/openid-connect","https://social.lumbung.space","https://cloud.lumbung.space","https://pen.lumbung.space/wp-admin", "https://books.lumbung.space/link/generic", "https://panduan.lumbung.space/", "https://nongkrong.lumbung.space/", "https://sounds.lumbung.space") %}
 <div class="columns is-multiline is-gapless is-mobile is-centered">
-  {% for i, u in site_list|zip(site_urls) %}
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
-    <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://tv.lumbung.space/plugins/auth-openid-connect/0.0.5/auth/openid-connect">
-      <a href="{{u}}">
+      <img class="app_icon" src="{{ url_for('static', path='svg/tv_lumbung.svg') }}" alt="lumbung.tv">
-        <img src="{{ url_for('static', path='svg/' ~ i ~'_lumbung.svg') }}" alt="lumbung.{{i}}">
+      <p class="app_name">tv.lumbung.space</p>
-        <p>{{i}}.lumbung.space</p>
+    </a>
-      </a>
+    <p class="app_description">Video archive. Watch or upload videos or start a livestream!</p>
-    </div>
+  </div>
-  {% endfor %}
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://social.lumbung.space">
+      <img class="app_icon" src="{{ url_for('static', path='svg/social_lumbung.svg') }}" alt="lumbung.social">
+      <p class="app_name">social.lumbung.space</p>
+    </a>
+    <p class="app_description">Like twitter but for us! Jokes, announcements, chitchat!</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://cloud.lumbung.space">
+      <img class="app_icon" src="{{ url_for('static', path='svg/cloud_lumbung.svg') }}" alt="lumbung.cloud">
+      <p class="app_name">cloud.lumbung.space</p>
+    </a>
+    <p class="app_description">Share and organize files.</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://pen.lumbung.space/wp-admin">
+      <img class="app_icon" src="{{ url_for('static', path='svg/pen_lumbung.svg') }}" alt="lumbung.pen">
+      <p class="app_name">pen.lumbung.space</p>
+    </a>
+    <p class="app_description">Write and publish longer texts.</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://books.lumbung.space/link/generic">
+      <img class="app_icon" src="{{ url_for('static', path='svg/books_lumbung.svg') }}" alt="lumbung.books">
+      <p class="app_name">books.lumbung.space</p>
+    </a>
+    <p class="app_description">Archive of publications. Share, read or download PDFs and ebooks!</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://panduan.lumbung.space/">
+      <img class="app_icon" src="{{ url_for('static', path='svg/panduan_lumbung.svg') }}" alt="lumbung.panduan">
+      <p class="app_name">panduan.lumbung.space</p>
+    </a>
+    <p class="app_description">Our collectively written knowledge base, FAQs, manuals and more!</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://nongkrong.lumbung.space/">
+      <img class="app_icon" src="{{ url_for('static', path='svg/nongkrong_lumbung.svg') }}" alt="lumbung.nongkrong">
+      <p class="app_name">nongkrong.lumbung.space</p>
+    </a>
+    <p class="app_description">Chatrooms, 1-1 chat, video calls. Come and nongkrong :)</p>
+  </div>
+
+  <div class="column site is-one-third-tablet is-one-quarter-desktop is-one-half-mobile">
+    <a href="https://sounds.lumbung.space/">
+      <img class="app_icon" src="{{ url_for('static', path='svg/sounds_lumbung.svg') }}" alt="lumbung.sounds">
+      <p class="app_name">sounds.lumbung.space</p>
+    </a>
+    <p class="app_description">Sharing music, streams, audio archiving and more.</p>
+  </div>
 </div>
 </div>
 {% endblock %}