Fixed nav and frontpage for smaller viewports, added partners page and other edits

themes/openalt/_config.yml

@@ -26,6 +26,9 @@ social:
   - url: https://matrix.to/#/#OpenAltRO:matrix.org
     icon: fab fa-hashtag
     enable: true
+  - url: https://gitlab.com/oss-bashynx/openalt_ro
+    icon: fab fa-gitlab
+    enable: true
 
 # Topbar menu configuration (add more / remove as needed)
 topbar_menu:
@@ -39,6 +42,6 @@ topbar_menu:
     name: Contact
     url: /p/Contact/Contact.html
   - enable: true
-    name: OpenAlt
-    url: https://openalt.org
+    name: Partners
+    url: /p/Partners/Partners.html
     

themes/openalt/layout/_partial/index_partners.ejs

@@ -5,10 +5,17 @@
 </div>
 
 <div class="partners">
-    <% site.data.partners.forEach(function(partner) { %>
-        <a href="<%= partner.url %>">
-            <img src="<%= partner.logo %>" alt="<%= partner.name %>">
-        </a>
-    <% }); %>
+<% site.data.partners.forEach(function(type) { 
+    counter = 0 %>
+    <% type.list.forEach(function(partner) { %>
+        <% if ( (counter == 0) && (partner.enable) ) { 
+            counter = counter + 1 } %>
+        <% if (partner.enable) { %>
+            <a href="<%= partner.url %>">
+                <img src="<%= partner.logo %>" alt="<%= partner.name %>">
+            </a>
+        <% } %> 
+    <% }); %> 
+<% }); %> 
 </div>
 </section>

themes/openalt/layout/_partial/members.ejs

@@ -8,8 +8,8 @@ site.data.members.forEach(function(member) { %>
         <% } %>
         <div class="page-text">
             <h1><%= member.name %></h1>
-            <p>Role: <%= member.role %></br>
-            <snap class="smoll">Since <%= member.join_date %></snap></br>
+            <h2><%= member.role %></h2>
+            <p><i>Since <%= member.join_date %></i></br>
             <%= member.bio %></p>
             <span class="member-social">
                 <% member.contact.forEach(function(social) { %> 
@@ -32,4 +32,4 @@ site.data.members.forEach(function(member) { %>
         <% } %>
     </div>
 <% counter = counter + 1
-}); %>
+}); %> 

themes/openalt/layout/_partial/partners.ejs

@@ -0,0 +1,25 @@
+<% site.data.partners.forEach(function(type) { 
+    counter = 0 %>
+    <% type.list.forEach(function(partner) { %>
+        <% if ( (counter == 0) && (partner.enable) ) { 
+            counter = counter + 1%>
+            <div class="title">
+                <h2><%= type.title %></h2>
+            </div>
+        <% } %>
+        <% if (partner.enable) { %>
+            <div class="partner">
+                    <div class="page-img">
+                        <img src="<%= partner.logo %>" alt="<%= partner.name %>">
+                    </div>
+                <div class="page-text">
+                    <h3><%= partner.name %>
+                    <a href="<%= partner.url %>" target="_blank">
+                        <i class="fa-solid fa-link" aria-hidden="true"></i>
+                    </a></h3>
+                    <p><%= partner.bio %></p>
+                </div>
+            </div>
+        <% } %> 
+    <% }); %> 
+<% }); %> 

themes/openalt/layout/layout.ejs

@@ -20,6 +20,8 @@
 
     <script src="<%= url_for(theme.fontawesome) %>" crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap"> 
+
     <title><%= config.title %></title>
     <link rel="stylesheet" href="<%= url_for('/css/style.css') %>">
 
@@ -34,20 +36,22 @@
         <header class="topbar">
             <nav>
                 <!-- Avatar -->
-                <a href="/">
+                <a href="/" class="topbar-avatar">
                     <div class="topbar-header">
                         <img src="<%= url_for(theme.banner) %>" alt="<%= config.author %>">
                     </div>
                 </a>
 
-                <!-- Topbar Menu -->
-                <% theme.topbar_menu.forEach(function(menu) { %> 
-                    <% if (menu.enable) { %>
-                        <a href="<%= menu.url %>">
-                            <%= menu.name %>
-                        </a>
-                    <% } %>
-                <% }); %>
+                <span class="menu">
+                    <!-- Topbar Menu -->
+                    <% theme.topbar_menu.forEach(function(menu) { %> 
+                        <% if (menu.enable) { %>
+                            <a href="<%= menu.url %>">
+                                <%= menu.name %>
+                            </a>
+                        <% } %>
+                    <% }); %>
+                </span>
 
                 <span class="social">
                     <% theme.social.forEach(function(social) { %> 

themes/openalt/layout/page.ejs

@@ -17,6 +17,10 @@
     </div>
 </div>
 
-<% if (page.title === "Get in Touch") {%>
+<% if (page.type === "Contact") {%>
     <%- include("_partial/members", { page: page })%>
+<% }%>
+
+<% if (page.type === "Partners") {%>
+    <%- include("_partial/partners", { page: page })%>
 <% }%>

themes/openalt/source/css/style.css

@@ -88,13 +88,16 @@ nav {
   padding: 0;
 }
 
-nav a {
+nav a,
+nav .menu,
+.menu a {
   padding: 15px 10px;
   font-size: 15px;
   align-content: center;
   color: #dcdcdf;
 }
 
+
 /* Topbar - Social */
 .social {
     justify-content: center;
@@ -204,7 +207,7 @@ iframe {
     margin-bottom: 20px;
 }
 
-.post img{
+.post-page img{
     border-radius: 5px;
 }
 
@@ -288,7 +291,7 @@ section {
 }
 
 
-/* Partners */
+/* Partners (homepage) */
 .partners {
   display: flex;
   flex-wrap: wrap;
@@ -323,7 +326,7 @@ section {
 
 
 /* Page - Members */
-.member {
+.member, .partner {
     display: flex !important;
     flex-wrap: nowrap !important;
     align-items: center;
@@ -340,20 +343,26 @@ section {
 .member .page-img  img {
     border-radius: 250px;
     border: 2px solid #ce1126; 
+}
+
+.member .page-img  img, 
+.partner .page-img  img {
     width: 125px;
     height: auto;
     margin: auto;
     display: block;
 }
 
-.member .page-img {
+.member .page-img, 
+.partner .page-img {
     flex: 0 0 125px;
     display: flex;
     align-items: center;
     justify-content: center;
 }
 
-.member .page-text {
+.member .page-text, 
+.partner .page-text {
     flex: 0 0 370px; 
     border-radius: 5px;
     margin: 0 auto;
@@ -363,9 +372,76 @@ section {
     justify-content: center;
 }
 
+.member h1 {
+    margin-bottom: 5px !important;
+}
+
+.member h2, 
+.title h2 {
+    text-align: center;
+}
+
+.member p {
+    margin-top: 5px !important;
+}
+
 
 /* page settings */
 .page{
-    width: 50%;
+    width: 75%;
     margin: 0 auto;
+}
+
+
+
+@media (max-width: 1250px) {
+    #minifeed {
+        flex-direction: column;
+    }
+
+    #minifeed .post {
+        width: 100%;
+    }
+
+    .post-home .post-with-image {
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: row;
+        align-items: stretch;
+        gap: 0;   
+    }
+
+    .post-home .post-with-image img {
+        border-radius: 5px 0 0 5px;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    .post-home .post-with-image .post-cover {
+        width: 35% !important;
+        display: flex;
+    }
+
+    .post-home .post-with-image .post-blerp {
+        border-radius: 0 5px 5px 0;
+        width: 65% !important;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .topbar-avatar {
+        display:none;
+    }
+}
+
+@media (max-width: 900px) {
+    nav {
+        flex-direction: column;
+    }
+
+    .social,
+    .menu{
+        justify-content: center;
+        margin: 0 auto;
+    }
 }