Quick and dirty landing page for libre.is

Template from ardacarofficial
2024-09-04 13:07:12 -06:00 · 2024-09-04 12:44:46 -06:00
5 changed files with 586 additions and 16 deletions
--- a/README.md
+++ b/README.md
@ -14,6 +14,17 @@ Template based on this repo, under MIT license.
 Replaced main bits, logo, etc.


+# Build
+Thusly.
+
+```
+git clone https://code.libre.is/libre/libre-is
+cd libre-is/
+# Edit pages, images.
+# Sync to make live:
+rsync -ultav --exclude="*.swp" html/ libre-is:/var/www/html/
+```
+
 # License
 Contents are available under the Apache 2.0 license.

--- a/html/css/reset.css
+++ b/html/css/reset.css
@ -0,0 +1,51 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+* {
+  box-sizing: border-box;
+}
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, button, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
--- a/html/css/style.css
+++ b/html/css/style.css
@ -0,0 +1,275 @@
+/* From the :root element you can easily change the colors of the design, its size and so on. */
+:root {
+
+  /* You can change the font family in the whole design here. (You need to add the font family to the codes.) */
+  --font_family: 'Inter', sans-serif;
+
+  /* You can change the font size here, is proportional to all texts. */
+  --font_size: 16px;
+
+  /* You can change the background color by typing the color code. (If you do not enter a background-image image, the background-color will be active.) */
+  --background_color: #000;
+  --background_image: url("../img/wallpaper.jpg");
+
+  /* You can change the frame thickness and color of the picture by typing the number of pixels and the color code. */
+  --image_border_color: #000;
+  --image_border_px: 3px;
+
+  /* You can change the width and size of the picture by typing the number of pixels. */
+  --image_width: 140px;
+  --image_height: 140px;
+
+  /* You can change the colors of the title and description section by typing the color codes. */
+  --title_color: #fff;
+  --description_color: #f1c40f;
+
+  /* You can change the colors of social media icons by changing the color code. */
+  --svg_color: #fff;
+
+  /* You can change the background, text color and active color of the menu by changing the color codes. */
+  --menu_background_color: #0e0e0e;
+  --menu_text_color: #fff;
+  --menu_active_text_color: #f1c40f;
+
+  /* You can change the button's background, text color and active color by changing the color codes. */
+  --button_background_color: #0e0e0e;
+  --button_text_color: #fff;
+  --button_text_hover_color: #f1c40f;
+
+  /* You can change the background, text color and active color of the text field by changing the color codes. */
+  --textarea_background_color: #0e0e0e;
+  --textarea_text_color: #fff;
+  --textarea_link_text_color: #f1c40f;
+
+  /* You can change the background, text color and active color of the footer area by changing the color codes. */
+  --footer_background_color: #0e0e0e;
+  --footer_text_color: #fff;
+  --footer_link_text_color: #f1c40f;
+}
+
+/* Basic Codes */
+
+body {
+  font: var(--font_size) var(--font_family);
+  font-weight: 400;
+  line-height: 1.5;
+  background: var(--background_color) var(--background_image) no-repeat center;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+}
+
+.flex_column_center {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex_row_center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.flex_no_wrap_row_center {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Logo, Title and Description Codes */
+
+.header_img {
+  padding-top: 1em;
+}
+
+.header_img img {
+  height: var(--image_height);
+  width: var(--image_width);
+  border: var(--image_border_px) solid var(--image_border_color);
+  border-radius: 50%;
+  margin-bottom: 0.5em;
+}
+
+.header_text h1 {
+  color: var(--title_color);
+  font-size: 2em;
+}
+
+.header_text h2 {
+  color: var(--description_color);
+  font-size: 1.5em;
+}
+
+/* Social Media Icons Codes */
+
+.header_svg_list {
+  padding-top: 1em;
+}
+
+.header_svg_item {
+  width: 2.1em;
+  height: 2.1em;
+  cursor: pointer;
+}
+
+.header_svg_item:hover {
+  transform: scale(1.10);
+  transition: 0.10s ease;
+}
+
+.header_svg_item + .header_svg_item {
+  margin-left: 1em;
+}
+
+.header_svg_item svg {
+  fill: var(--svg_color);
+}
+
+/* Menu Codes */
+
+#header_nav_menu_item_1 {
+  color: var(--menu_active_text_color);
+}
+
+#header_nav_menu_item_2,
+#header_nav_menu_item_3 {
+  color: var(--menu_text_color);
+}
+
+
+.header_nav_menu_list {
+  padding-top: 1em;
+  margin-left: 1em;
+  margin-right: 1em;
+}
+
+.header_nav_menu_item {
+  color: var(--menu_text_color);
+  background-color: var(--menu_background_color);
+  text-align: center;
+  list-style-type: none;
+  cursor: pointer;
+  padding: 0.5em;
+  border-radius: 0.3em;
+  cursor: pointer;
+  transition: 0.10s ease;
+  font-size: 1.1em;
+}
+
+.header_nav_menu_item + .header_nav_menu_item {
+  margin-left: 0.4em;
+}
+
+/* Menu Container Codes */
+
+main {
+  margin-bottom: auto;
+}
+
+#main_section_container_2, #main_section_container_3 {
+ display: none;
+}
+
+.main_a_item {
+  margin-top: 1em;
+  text-decoration: none;
+}
+
+.main_text_item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: 41em;
+  margin-top: 1em;
+  padding: 0.8em;
+  border-radius: 0.3em;
+  min-height: 3.7em;
+  text-align: center;
+}
+
+.main_button_item {
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: 41em;
+  border-radius: 1em;
+  min-height: 3.7em;
+  text-align: center;
+  cursor: pointer;
+}
+
+.main_small_button_list {
+  display: flex;
+  flex-direction: row;
+}
+
+.main_small_a_item {
+  margin-top: 1em;
+  text-decoration: none;
+}
+
+.main_small_a_item + .main_small_a_item {
+  margin-left: 10px;
+}
+
+.main_small_button_item:hover,
+.main_button_item:hover {
+  color: var(--button_text_hover_color);
+  transform: scale(1.02);
+  transition: 0.10s ease;
+}
+
+.main_small_button_item {
+  color: var(--button_text_color);
+  background-color: var(--button_background_color);
+  width: calc(41em / 2 - 5px);
+  border-radius: 1em;
+  min-height: 3.7em;
+  text-align: center;
+  cursor: pointer;
+}
+
+/* Footer Codes */
+
+.footer_div_item {
+  color: var(--footer_text_color);
+  background: var(--footer_background_color);
+  padding: 1em;
+  margin-top: 1.5em;
+}
+
+.footer_a_item {
+  color: var(--footer_link_text_color);
+  text-decoration: none;
+}
+
+/* Responsive Codes */
+
+@media (max-width: 768px) { 
+  .main_text_item {
+    width: 92vw;
+  }
+
+  .main_small_button_item {
+    width: calc(92vw / 2 - 5px);;
+  }
+
+  .main_button_item {
+    width: 92vw;
+  }
+  
+  .header_h_item {
+    width: 92vw;
+    text-align: center;
+  }
+  
+}
--- a/html/index.html
+++ b/html/index.html
@ -1,17 +1,235 @@
-<HTML>
-<HEAD>
-<TITLE>Libre Sites</TITLE>
-</HEAD>
-<BODY>
-Sites for Libre folks.
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Libre Humans</title>
+    <meta name="description" content="Libre Users and Developers">
+<!--    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400&amp;display=swap"> -->
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/style.css">
+  </head>
+  <body>

-<UL>
-  <LI><A HREF="https://libre.is/">libre.is</A>
-  <LI><A HREF="https://code.libre.is/libre/libre/issues">Libre Issue Tracking</A>
-  <LI><A HREF="https://code.libre.is/">Libre Code Server</A>
-  <LI><A HREF="https://dev.libre.is/">Libre Developer and System Administration Documentation</A>
-  <LI><A HREF="https://docs.libre.is/">Libre User Documentation</A>
-  <LI><A HREF="https://forms.libre.is/">Libre Form Server</A>
-</UL>
-</BODY>
-</HTML>
+    <header>
+    <!-- Logo, Title and Description Codes Start -->
+      <div class="header_img flex_column_center">
+        <img src="img/logo.png" alt="Logo" />
+      </div>
+      <div class="header_text flex_column_center">
+<!--
+        <h1 class="header_h_item">Sites for Libre Folks</h1>
+        <h2 class="header_h_item">Documentation and Code for Libre Organizations</h2>
+-->
+        <h1 class="header_h_item">Documentation and Code for Liberty Organizations</h2>
+      </div>
+    <!-- Logo, Title and Description Codes End -->  
+
+    <!-- Social Media Icons Codes Start -->
+<!--
+      <div class="header_svg_list flex_row_center">
+-->
+        <!-- Icon 1 Codes -->
+<!--
+        <div class="header_svg_item">
+          <a href="#link" target="_blank" rel="nofollow">
+            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24" >
+              <path d="M18,10.561a.494.494,0,0,1-.245-.065,15.2,15.2,0,0,0-10.95-1.55.5.5,0,0,1-.232-.973A16.2,16.2,0,0,1,18.25,9.626a.5.5,0,0,1-.247.935Z"></path><path d="M16.646,13.632a.5.5,0,0,1-.249-.066,12.459,12.459,0,0,0-9.121-1.292.5.5,0,1,1-.237-.971A13.458,13.458,0,0,1,16.9,12.7a.5.5,0,0,1-.25.933Z"></path><path d="M15.312,16.583a.5.5,0,0,1-.251-.068,9.777,9.777,0,0,0-7.295-1.033.5.5,0,0,1-.245-.97,10.768,10.768,0,0,1,8.043,1.139.5.5,0,0,1-.252.932Z"></path><path d="M12,23A11,11,0,1,1,23,12,11.013,11.013,0,0,1,12,23ZM12,2A10,10,0,1,0,22,12,10.011,10.011,0,0,0,12,2Z"></path>
+            </svg>
+          </a>
+        </div>
+-->
+        <!-- Icon 2 Codes -->
+<!--
+        <div class="header_svg_item">
+          <a href="#link" target="_blank" rel="nofollow">
+            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24">
+              <path d="m2.538 3 7.425 9.928L2 21h1.5l7.033-7.067L16 21h5.232l-7.662-9.995 6.955-7.514h-1.5L13 10 7.77 3H2.538Zm1.994 1h2.645l12.087 16h-2.525L4.532 4Z"></path>
+            </svg>
+          </a>
+        </div>
+-->
+        <!-- Icon 3 Codes -->
+<!--
+        <div class="header_svg_item">
+          <a href="#link" target="_blank" rel="nofollow">
+            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24">
+              <path d="M21.938,7.71a7.329,7.329,0,0,0-.456-2.394,4.615,4.615,0,0,0-1.1-1.694,4.61,4.61,0,0,0-1.7-1.1,7.318,7.318,0,0,0-2.393-.456C15.185,2.012,14.817,2,12,2s-3.185.012-4.29.062a7.329,7.329,0,0,0-2.394.456,4.615,4.615,0,0,0-1.694,1.1,4.61,4.61,0,0,0-1.1,1.7A7.318,7.318,0,0,0,2.062,7.71C2.012,8.814,2,9.182,2,12s.012,3.186.062,4.29a7.329,7.329,0,0,0,.456,2.394,4.615,4.615,0,0,0,1.1,1.694,4.61,4.61,0,0,0,1.7,1.1,7.318,7.318,0,0,0,2.393.456c1.1.05,1.472.062,4.29.062s3.186-.012,4.29-.062a7.329,7.329,0,0,0,2.394-.456,4.9,4.9,0,0,0,2.8-2.8,7.318,7.318,0,0,0,.456-2.393c.05-1.1.062-1.472.062-4.29S21.988,8.814,21.938,7.71Zm-1,8.534a6.351,6.351,0,0,1-.388,2.077,3.9,3.9,0,0,1-2.228,2.229,6.363,6.363,0,0,1-2.078.388C15.159,20.988,14.8,21,12,21s-3.159-.012-4.244-.062a6.351,6.351,0,0,1-2.077-.388,3.627,3.627,0,0,1-1.35-.879,3.631,3.631,0,0,1-.879-1.349,6.363,6.363,0,0,1-.388-2.078C3.012,15.159,3,14.8,3,12s.012-3.159.062-4.244A6.351,6.351,0,0,1,3.45,5.679a3.627,3.627,0,0,1,.879-1.35A3.631,3.631,0,0,1,5.678,3.45a6.363,6.363,0,0,1,2.078-.388C8.842,3.012,9.205,3,12,3s3.158.012,4.244.062a6.351,6.351,0,0,1,2.077.388,3.627,3.627,0,0,1,1.35.879,3.631,3.631,0,0,1,.879,1.349,6.363,6.363,0,0,1,.388,2.078C20.988,8.841,21,9.2,21,12S20.988,15.159,20.938,16.244Z"></path>
+              <path d="M17.581,5.467a.953.953,0,1,0,.952.952A.954.954,0,0,0,17.581,5.467Z"></path>
+              <path d="M12,7.073A4.927,4.927,0,1,0,16.927,12,4.932,4.932,0,0,0,12,7.073Zm0,8.854A3.927,3.927,0,1,1,15.927,12,3.932,3.932,0,0,1,12,15.927Z"></path>
+            </svg>
+          </a>
+        </div>
+-->
+        <!-- Icon 4 Codes -->
+<!--
+        <div class="header_svg_item">
+          <a href="#link" target="_blank" rel="nofollow">
+            <svg enable-background="new 0 0 24 24" viewBox="0 0 24 24">
+              <path d="M7.285,23.5a.493.493,0,0,1-.191-.038A.5.5,0,0,1,6.785,23V19.571H2.572a.5.5,0,0,1-.5-.5V4.929a.5.5,0,0,1,.146-.354L6.147.646A.5.5,0,0,1,6.5.5H21.429a.5.5,0,0,1,.5.5V12a.5.5,0,0,1-.147.354L14.71,19.425a.5.5,0,0,1-.353.146H11.421L7.639,23.354A.5.5,0,0,1,7.285,23.5ZM3.072,18.571H7.285a.5.5,0,0,1,.5.5v2.722l3.076-3.075a.5.5,0,0,1,.353-.147H14.15l6.779-6.778V1.5H6.707L3.072,5.136Z"></path><path d="M10.822,17.607a.494.494,0,0,1-.192-.038.5.5,0,0,1-.308-.462v-2.25H7.285a.5.5,0,0,1-.5-.5V3.571a.5.5,0,0,1,.5-.5H18.857a.5.5,0,0,1,.5.5v7.643a.5.5,0,0,1-.147.354L16.068,14.71a.5.5,0,0,1-.354.147H13.779l-2.6,2.6A.5.5,0,0,1,10.822,17.607Zm-3.037-3.75h3.037a.5.5,0,0,1,.5.5V15.9l1.9-1.9a.5.5,0,0,1,.354-.146h1.935l2.85-2.85V4.071H7.785Z"></path>
+              <path d="M15.857,10.386a.5.5,0,0,1-.5-.5V6.072a.5.5,0,1,1,1,0V9.886A.5.5,0,0,1,15.857,10.386Z"></path>
+              <path d="M12.357,10.386a.5.5,0,0,1-.5-.5V6.072a.5.5,0,1,1,1,0V9.886A.5.5,0,0,1,12.357,10.386Z"></path>
+            </svg>
+          </a>
+        </div>
+      </div>
+-->
+    <!-- Social Media Icons Codes End -->
+
+    <!-- Menu Codes Start -->
+<!--
+      <nav>
+        <ul class="header_nav_menu_list flex_no_wrap_row_center">
+          <li data-target="#main_section_container_1" id="header_nav_menu_item_1" class="header_nav_menu_item" href="">Menu 1</li>
+          <li data-target="#main_section_container_2" id="header_nav_menu_item_2" class="header_nav_menu_item" href="">Menu 2</li>
+          <li data-target="#main_section_container_3" id="header_nav_menu_item_3" class="header_nav_menu_item" href="">Menu 3</li>
+        </ul>
+      </nav>
+-->
+    <!-- Menu Codes End -->
+
+    </header>
+    <main>
+      <!-- Menu Container 1 Codes Start -->
+      <section id="main_section_container_1" class="flex_column_center">
+        <!-- Menu Text Item -->
+        <div class="main_text_item">
+          <p>HOWTO deploy technology for privacy, security, and autonomy for your organization.</p>
+        </div>
+        <!-- Menu Small Item -->
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="https://docs.libre.is/" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">User Documentation</button>
+          </a>
+          <a class="main_small_a_item" href="https://dev.libre.is/" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Developer Documentation</button>
+          </a>
+        </div>
+        <!-- Menu Small Item -->
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="https://code.libre.is/libre/libre/issues" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Issue and Suggestion Tracking</button>
+          </a>
+          <a class="main_small_a_item" href="https://forms.libre.is/" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Take the Survey!</button>
+          </a>
+        </div>
+        <!-- Menu Item -->
+<!--
+        <a class="main_a_item" href="https://github.com/ardacarofficial" target="_blank" rel="nofollow">
+          <button class="main_button_item">Project Creator</button>
+        </a>
+-->
+        <!-- Menu Item -->
+        <a class="main_a_item" href="https://code.libre.is/libre" target="_blank" rel="nofollow">
+          <button class="main_button_item">Source Code</button>
+        </a>
+      </section>
+      <!-- Menu Container 1 Codes End -->
+
+      <!-- Menu Container 2 Codes Start -->
+      <section id="main_section_container_2" class="flex_column_center">
+        <!-- Menu Text Item -->
+<!--
+        <div class="main_text_item">
+          <p>Menu 2 text Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi molestiae nesciunt, exercitationem quaerat maxime non!</p>
+        </div>
+-->
+        <!-- Menu Small Item -->
+<!--
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 2 Small Item</button>
+          </a>
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 2 Small Item</button>
+          </a>
+        </div>
+-->
+        <!-- Menu Small Item -->
+<!--
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 2 Small Item</button>
+          </a>
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 2 Small Item</button>
+          </a>
+        </div>
+-->
+        <!-- Menu Item -->
+<!--
+        <a class="main_a_item" href="#link" target="_blank" rel="nofollow">
+          <button class="main_button_item">Menu 2 Item</button>
+        </a>
+-->
+        <!-- Menu Item -->
+<!--
+        <a class="main_a_item" href="#link" target="_blank" rel="nofollow">
+          <button class="main_button_item">Menu 2 Item</button>
+        </a>
+      </section>
+-->
+      <!-- Menu Container 2 Codes End -->
+
+      <!-- Menu Container 3 Codes Start -->
+<!--
+      <section id="main_section_container_3" class="flex_column_center">
+-->
+        <!-- Menu Text Item -->
+<!--
+        <div class="main_text_item">
+          <p>Menu 3 text Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi molestiae nesciunt, exercitationem quaerat maxime non!</p>
+        </div>
+-->
+        <!-- Menu Small Item -->
+<!--
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 3 Small Item</button>
+          </a>
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 3 Small Item</button>
+          </a>
+        </div>
+-->
+        <!-- Menu Small Item -->
+<!--
+        <div class="main_small_button_list">
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 3 Small Item</button>
+          </a>
+          <a class="main_small_a_item" href="#link" target="_blank" rel="nofollow">
+            <button class="main_small_button_item">Menu 3 Small Item</button>
+          </a>
+        </div>
+-->
+        <!-- Menu Item -->
+<!--
+        <a class="main_a_item" href="#link" target="_blank" rel="nofollow">
+          <button class="main_button_item">Menu 3 Item</button>
+        </a>
+-->
+        <!-- Menu Item -->
+<!--
+        <a class="main_a_item" href="#link" target="_blank" rel="nofollow">
+          <button class="main_button_item">Menu 3 Item</button>
+        </a>
+      </section>
+-->
+      <!-- Menu Container 3 Codes End -->
+    </main>
+    <footer>
+      <!-- Footer Codes Start -->
+      <div class="footer_div_item flex_row_center">
+<!--
+        <a class="footer_a_item" href="#link">Libre Developers</a>&nbsp;| Copyright 2024
+-->
+        Libre Developers &nbsp;| &nbsp; <A CLASS="footer_a_item" HREF="https://code.libre.is/libre/libre-is/src/branch/main/LICENSE-apache.txt">&copy; 2024</A>
+      </div>
+    </footer>
+      <!-- Footer Codes End -->
+    <script src="js/main.js"></script>
+  </body>
+</html>
--- a/html/js/main.js
+++ b/html/js/main.js
@ -0,0 +1,15 @@
+/* Menu Active Codes */
+
+let targets = document.querySelectorAll('[data-target]')
+targets.forEach(element => {
+  element.addEventListener('click', () => {
+    var target = document.querySelector(element.dataset.target)
+    targets.forEach(element2 => {
+      var target2 = document.querySelector(element2.dataset.target)
+      element2.style.color = 'var(--menu_text_color)'
+      target2.style.display = 'none'
+    });
+    element.style.color = 'var(--menu_active_text_color)'
+    target.style.display= 'flex'
+  })
+})
Author	SHA1	Message	Date
Jeff Moe	d63db7b525	Quick and dirty landing page for libre.is	2024-09-04 13:07:12 -06:00
Jeff Moe	cdcf496097	Template from ardacarofficial	2024-09-04 12:44:46 -06:00