Uprev deps

Doc -> Wiki
Fix borked url
2022-04-14 16:52:15 +02:00 · 2022-04-14 16:50:41 +02:00 · 2022-01-18 13:38:18 +01:00 · 2022-01-18 13:34:03 +01:00 · 2022-01-18 13:33:20 +01:00 · 2021-12-22 10:51:34 +01:00
26 changed files with 420 additions and 270 deletions
--- a/android-chrome-192x192.png
+++ b/android-chrome-192x192.png
--- a/android-chrome-512x512.png
+++ b/android-chrome-512x512.png
--- a/apple-touch-icon.png
+++ b/apple-touch-icon.png
--- a/browserconfig.xml
+++ b/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png?v=2"/>
+            <TileColor>#da532c</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/css/main.css
+++ b/css/main.css
@ -11,33 +11,37 @@ You probably already know that, otherwise you can visit him here "https://fosc.s
 /*That's all, thank you.*/


-/*NECESSARY FONTS*/
+/*FONTS*/
 /**********************************************************************************/

@font-face {
  font-family: nixiefont;
-  src: url(fonts/NixieOne.ttf);
+  src: url(../fonts/NixieOne.ttf);
+  font-display: swap;
 }

@font-face {
  font-family: AmericanCfont;
-  src: url(fonts/AmericanC.ttf);
+  src: url(../fonts/AmericanC.ttf);
+  font-display: swap;
 }

@font-face {
  font-family: typermfont;
-  src: url(fonts/typewcond.otf);
+  src: url(../fonts/typewcond.otf);
+  font-display: swap;
 }

@font-face {
  font-family: avenirfont;
-  src: url(fonts/AvenirCondensed.ttf);
+  src: url(../fonts/AvenirCondensed.ttf);
+  font-display: swap;
 }

 /*GLOBAL ATTRIBUTES*/
 /**********************************************************************************/

-*{
+* {
  padding: 0;
  margin: 0;
  text-decoration: none;
@ -47,11 +51,10 @@ You probably already know that, otherwise you can visit him here "https://fosc.s

 body, html {
  height: 100%;
-  font-family: "Roboto", Sans-Serif; 
+  font-family: "Fira Sans", Sans-Serif; 
 }

 body {
-  background-image: url(img/coreboot2.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
@ -59,6 +62,14 @@ body {
  background-attachment: fixed;
 }

+.no-webp body {
+  background-image: url(../img/coreboot2.jpg);
+}
+
+.webp body {
+  background-image: url(../img/coreboot2.webp);
+}
+
 img {
  background-image: none;
 }
@ -67,6 +78,21 @@ a {
  color: white
 }

+/* Rainbows */
+@keyframes rainbow {
+  0% {background-color: hsla(0, 70%, 50%, 1);}
+  10% {background-color: hsla(30, 70%, 50%, 1);}
+  20% {background-color: hsla(60, 70%, 50%, 1);}
+  30% {background-color: hsla(90, 70%, 50%, 1);}
+  40% {background-color: hsla(120, 70%, 50%, 1);}
+  50% {background-color: hsla(150, 70%, 50%, 1);}
+  60% {background-color: hsla(180, 70%, 50%, 1);}
+  70% {background-color: hsla(210, 70%, 50%, 1);}
+  80% {background-color: hsla(240, 70%, 50%, 1);}
+  90% {background-color: hsla(270, 70%, 50%, 1);}
+  100% {background-color: hsla(0, 70%, 50%, 1);}
+}
+
 /*TOP NAVBAR*/
 /**********************************************************************************/

@ -75,7 +101,6 @@ a {
  width: 100%;
  position: fixed;
  background: #000;
-  font-family: Roboto;
  font-size: 18px;
  top: 0;
 }
@ -87,7 +112,7 @@ a {
 }

 .brand a, .brand a:visited {
-  color: #ffffff;
+  color: white;
  text-decoration: none;
 }

@ -119,15 +144,15 @@ nav ul li a, nav ul li a:visited {
  display: block;
  padding: 0 20px;
  line-height: 100px;
-  background: #000;
-  color: #ffffff;
+  background: black;
+  color: white;
  text-decoration: none;
  text-transform: uppercase;
 }

 nav ul li a:hover, nav ul li a:visited:hover {
  background: purple !important;
-  color: #ffffff;
+  color: white;
 }

 nav ul li a:not(:only-child):after, nav ul li a:visited:not(:only-child):after {
@ -380,6 +405,7 @@ nav ul li ul li a {
  padding: 50px 0px;
  background-color: #222;
 }
+
 .services {
  background-color: #222;
  padding: 60px 0px 100px 0px;
@ -398,9 +424,8 @@ nav ul li ul li a {
 .services p  {
  margin: 0px 300px;
  font-size: 16px; 
-  text-align: justify;
-  text-transform: uppercase;
-  color: #888;
+  text-align: center;
+  color: lightgray;
 } 

 .tabla {
@ -426,8 +451,6 @@ nav ul li ul li a {
 .column h4 {
  letter-spacing: 2px;
  margin-top: 15px;
-  font-family: Roboto;
-  text-transform: uppercase;
 }

 .column img {
@ -442,24 +465,41 @@ nav ul li ul li a {
 /*5 SECTION, MEMBERS*/
 /**********************************************************************************/

+
 .members {
-  background-image: url(img/flp-dark.jpg);
-  background-position: center;
+  padding-top: 150px;
+  padding-bottom: 150px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
 }

+.no-webp .members {
+  background-image: url(../img/flp-dark.jpg);
+}
+
+.webp .members {
+  background-image: url(../img/flp-dark.webp);
+}
+
+.members h1 {
+  text-align: center;
+  font-size: 60px;
+  font-family: nixiefont;
+  /* text-transform: uppercase; */
+  color: white;
+  margin-bottom: 60px;
+}
+
 .shape {
  display: flex;
+  margin-left: 10%;
 }

 .cmembers {
  flex: 50%;
  margin: 100px 50px 50px 50px;
  color: white;
-  font-family: Roboto;
-  text-transform: uppercase;  
 }

 .cmembers h4 {
@ -485,15 +525,6 @@ nav ul li ul li a {
  background-color: green;
 }

-.mdi-twitter {
-  color: #2196f3;
-}
-
-.mdi-email {
-  color: #f32821;
-}
-
-
 #mapButton {
  background-color: yellow;
  color: black;
@ -512,7 +543,11 @@ nav ul li ul li a {

 #map {
  height: 300px;
-  width: 700px;
+  width: 80%;
+  border: 0;
+  display: block;
+  margin-left: auto;
+  margin-right: auto
 }

 /*FINALLY, FOOTER*/
@ -544,12 +579,12 @@ footer {
 }

 .foot-logo p {
-  color: #444;
+  color: gray;
  margin-top: 10px;
 }

 .foot-logo p a {
-  color: #666;
+  color: lightgray;
  display: inline-block;
  border: none;
  width: auto;
@ -559,7 +594,7 @@ footer {
 /*FIX RESPONSIVE WEB DESIGN*/
 /**********************************************************************************/

-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: 1600px) {

  .hero h1 {
    font-size: 70px;
--- a/favicon-16x16.png
+++ b/favicon-16x16.png
--- a/favicon-32x32.png
+++ b/favicon-32x32.png
--- a/favicon.ico
+++ b/favicon.ico
--- a/icons/analytics.webp
+++ b/icons/analytics.webp
--- a/icons/book.webp
+++ b/icons/book.webp
--- a/icons/chart.webp
+++ b/icons/chart.webp
--- a/icons/cloud-computing.webp
+++ b/icons/cloud-computing.webp
--- a/icons/files.webp
+++ b/icons/files.webp
--- a/icons/gitea.webp
+++ b/icons/gitea.webp
--- a/icons/rss2.webp
+++ b/icons/rss2.webp
--- a/img/app.jpg
+++ b/img/app.jpg
--- a/img/bitup.jpg
+++ b/img/bitup.jpg
--- a/img/coreboot2.webp
+++ b/img/coreboot2.webp
--- a/img/flp-dark.webp
+++ b/img/flp-dark.webp
--- a/img/junction2018-1.jpg
+++ b/img/junction2018-1.jpg
--- a/index.html
+++ b/index.html
@ -1,263 +1,400 @@
 <!DOCTYPE html>
+<html lang="en">

 <!-- ****************************** -->
 <!-- * Ah shit, here we go again. * -->
 <!-- ****************************** -->

-<!-- Hi guys, this document is for the FOSC website. You probably already know that, otherwise you can visit him here "https://fosc.space/"  -->
-<!-- First, I'm sorry if there's any mistake, I'm not an expert yet. -->
-<!-- Second, this document is free, so you can see it, use it and modify it as you wish. -->
-<!-- Finally, the document is divided into parts for better reading. The style pages and scripts are in different documents. The google fonts and others icons are linked in head section. -->
-<!-- That's all, thank you. -->
+<head>
+  <meta charset="utf-8">
+  <title>FOSC - Free Open Source Club</title>

-<html lang="en">
+  <meta name="description" content="FOSC: Hackerspace located at Universidad Politecnica de Cartagena (UPCT)">
+  <meta name="viewport" content="width=device-width, initial-scale=1">

-  <head>
-		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-		<meta name="description" content="FOSC, Hackerspace from Cartagena">
-		<meta name="keywords" content="Open Source, Free Software, Linux, Hackerspace, Foss"> 
-		<meta name="author" content="FOSC">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" type="text/css" href="css/main.css">
+  <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">

-    <link rel="icon" href="img/Logo-invert.png" type="image/gif">
-		<link rel="stylesheet" type="text/css" href="cs.css">
-		<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.0.45/css/materialdesignicons.min.css">
-		<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
-		<title>FOSC - Free Open Source Club</title>
-		<script src="js/main.js"></script>
-  	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  </head>
+  <script src="js/modernizer.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

- <header>   
-  <section class="navigation">
+
+  <!-- Massive amount of favicon related stuff -->
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2">
+  <link rel="manifest" href="/site.webmanifest?v=2">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=2" color="#5bbad5">
+  <link rel="shortcut icon" href="/favicon.ico?v=2">
+  <meta name="apple-mobile-web-app-title" content="FOSC">
+  <meta name="application-name" content="FOSC">
+  <meta name="msapplication-TileColor" content="#da532c">
+  <meta name="theme-color" content="#ffffff">
+
+  <!-- Analytics -->
+  <script async defer data-domain="fosc.space" src="https://plausible.fosc.space/js/plausible.js"></script>
+
+</head>
+
+<body>
+
+  <header>
+    <section class="navigation">
      <div class="nav-container">
        <div class="brand">
          <picture>
-            <source type="image/webp" srcset="img/Logo-invert.webp">
-            <source type="image/jpeg" srcset="img/Logo-invert.png">
-            <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
+            <source type="image/webp" data-srcset="img/Logo-invert.webp">
+            <source type="image/png" data-srcset="img/Logo-invert.png">
+            <img alt="FOSC Logo" class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
          </picture>
-          
        </div>
        <nav>
-          <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
+          <div class="nav-mobile"><span id="nav-toggle" href="#!"><span></span></span></div>
          <ul class="nav-list">
            <li>
-              <a href="https://fosc.space/"><i class="mdi mdi-home"></i>Home</a>
+              <a href="https://blog.fosc.space"><span class="iconify" data-icon="mdi:notebook"></span> Blog</a>
            </li>
            <li>
-              <a href="https://blog.fosc.space"><i class="mdi mdi-notebook"></i>Blog</a>
+              <a href="https://gallery.fosc.space"><span class="iconify" data-icon="mdi:image"></span> Gallery</a>
            </li>
            <li>
-              <a href="#!"><i class="mdi mdi-cogs"></i>Services</a>
+              <a href="https://download.fosc.space"><span class="iconify" data-icon="mdi:download"></span> Downloads</a>
+            </li>
+            <li>
+              <a href="#contact"><span class="iconify" data-icon="mdi:account"></span> Contact</a>
+            </li>
+            <li>
+              <a href="#!"><span class="iconify" data-icon="mdi:cogs"></span> Services</a>
              <ul class="nav-dropdown">
                <li>
-                  <a href="https://cloud.fosc.space">Cloud</a>
+                  <a href="https://cloud.fosc.space"><span class="iconify" data-icon="mdi:cloud"></span> Cloud</a>
                </li>
                <li>
-                  <a href="https://doc.fosc.space">Wiki</a>
+                  <a href="https://wiki.fosc.space"><span class="iconify" data-icon="mdi:text"></span> Wiki</a>
                </li>
                <li>
-                  <a href="https://rss.fosc.space">RSS</a>
-                </li>
-                  <li>
-                  <a href="https://netdata.fosc.space">NetData</a>
+                  <a href="https://rss.fosc.space"><span class="iconify" data-icon="mdi:rss"></span> RSS</a>
                </li>
                <li>
-                  <a href="https://analytics.fosc.space">Analytics</a>
+                  <a href="https://netdata.fosc.space"><span class="iconify" data-icon="mdi:finance"></span> NetData</a>
                </li>
                <li>
-                  <a href="https://git.fosc.space">Stolen Code</a>
+                  <a href="https://plausible.fosc.space"><span class="iconify" data-icon="mdi:google-analytics"></span>
+                    Analytics</a>
+                </li>
+                <li>
+                  <a href="https://git.fosc.space"><span class="iconify" data-icon="mdi:git"></span> Stolen Code</a>
+                </li>
+                <li>
+                  <a href="https://services.fosc.space"><span class="iconify" data-icon="mdi:bookmark-plus"></span>
+                    More</a>
                </li>
              </ul>
            </li>
-            <li>
-              <a href="https://gallery.fosc.space"><i class="mdi mdi-image"></i>Gallery</a>
-            </li>
-            <li>
-              <a href="https://download.fosc.space"><i class="mdi mdi-download"></i>Downloads</a>
-            </li>
-            <li>
-              <a href="#contact"><i class="mdi mdi-account"></i>Contact</a>
-            </li>
          </ul>
        </nav>
      </div>
    </section>

    <script>
-      (function($) { // Begin jQuery
-        $(function() { // DOM ready
+      (function ($) {
+        $(function () { // DOM ready
          // If a link has a dropdown, add sub menu toggle.
-          $('nav ul li a:not(:only-child)').click(function(e) {
+          $('nav ul li a:not(:only-child)').click(function (e) {
            $(this).siblings('.nav-dropdown').toggle();
            // Close one dropdown when selecting another
            $('.nav-dropdown').not($(this).siblings()).hide();
            e.stopPropagation();
          });
          // Clicking away from dropdown will remove the dropdown class
-          $('html').click(function() {
+          $('html').click(function () {
            $('.nav-dropdown').hide();
          });
          // Toggle open and close nav styles on click
-          $('#nav-toggle').click(function() {
+          $('#nav-toggle').click(function () {
            $('nav ul').slideToggle();
          });
          // Hamburger to X toggle
-          $('#nav-toggle').on('click', function() {
+          $('#nav-toggle').on('click', function () {
            this.classList.toggle('active');
          });
        }); // end DOM ready
-      })(jQuery); // end jQuery
+      })(jQuery);
    </script>
  </header>

-  <body>
-    <div class="hero">
-      <h1>Welcome to <span class="color">FOSC</span></h1>
-      <h3>Hackerspace located at Polytechnic University of Cartagena</h3>
-      <hr>
-    </div>
+  <div class="hero">
+    <h1>Welcome to <span class="color">FOSC</span></h1>
+    <h3>Hackerspace located at Polytechnic University of Cartagena</h3>
+    <hr>
+  </div>

-    <div class="fosc">
-      <h1>What is FOSC?</h1>
-      <hr>
-      <h3>We are a student association focused on expanding free software and hacker culture</h3>
-    </div>
+  <div class="fosc">
+    <h1>What is FOSC?</h1>
+    <hr>
+    <h3>We are a student association focused on expanding free software and hacker culture</h3>
+  </div>

-    <div class="bgallery">
-      <div class="gallery">
-        <div class="column-gallery">
-          <img class="lazy" data-src="img/junction2018.jpg">
-          <img class="lazy" data-src="img/santi.jpg">
-          <img class="lazy" data-src="img/kids.jpg">
-          <img class="lazy" data-src="img/sec.jpg">
-          <img class="lazy" data-src="img/junction2018-1.jpg">
-        </div>
-        
-        <div class="column-gallery">
-          <img class="lazy" data-src="img/app.jpg">
-          <img class="lazy" data-src="img/bitup.jpg">
-          <img class="lazy" data-src="img/soldadura.jpg">
-          <img class="lazy" data-src="img/hacking.jpg">
-          <img class="lazy" data-src="img/junction2019-1.jpg">
-        </div>
-
-        <div class="column-gallery">
-          <img class="lazy" data-src="img/pepemod.jpg">
-          <img class="lazy" data-src="img/atresmedia.jpg">
-          <img class="lazy" data-src="img/junction2019.jpg">
-          <img class="lazy" data-src="img/printer3d.jpg">
-        </div>
-
-        <div class="column-gallery">
-          <img class="lazy" data-src="img/flp1.jpg">
-          <img class="lazy" data-src="img/soldadura1.jpg">
-          <img class="lazy" data-src="img/nn1.jpg">
-          <img class="lazy" data-src="img/fosc2.jpg">
-        </div>
-      </div>
-    </div>
-
-    <div class="mgallery">
-      <h3>Development of free software projects, realization of courses of various technologies, maintenance of a server to provide services both inside and outside the association, dissemination of talks, job offers and any other information of interest to the partners.</h3>
-    </div>
-
-    <div id="services">
-      <div class="services">
-        <h1>OUR SERVICES</h1>
-        <p>Formal members are stored in our member database and have access to the multitude of services we provide. Check out our list of services below. Additionally, the tools and materials in the space are available for you to hack and mess with.</p>
+  <div class="bgallery">
+    <div class="gallery">
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" data-srcset="img/junction2018.webp">
+          <source type="image/jpeg" data-srcset="img/junction2018.jpg">
+          <img class="lazy" data-src="img/junction2018.jpg" alt="Winners at Junction 2018">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/santi.webp">
+          <source type="image/jpeg" data-srcset="img/santi.jpg">
+          <img class="lazy" data-src="img/santi.jpg" alt="Explaining MCU glitching at Makers Murcia">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/kids.webp">
+          <source type="image/jpeg" data-srcset="img/kids.jpg">
+          <img class="lazy" data-src="img/kids.jpg" alt="Showing 3D printing at Semana de la Ciencia">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/sec.webp">
+          <source type="image/jpeg" data-srcset="img/sec.jpg">
+          <img class="lazy" data-src="img/sec.jpg" alt="More Semana de la Ciencia">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/junction2018-1.webp">
+          <source type="image/jpeg" data-srcset="img/junction2018-1.jpg">
+          <img class="lazy" data-src="img/junction2018-1.jpg" alt="Hacking at Junction 2018">
+        </picture>
      </div>

-      <div class="tabla">
-        <div class="column">
-          <a href="https://cloud.fosc.space">
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" data-srcset="img/app.webp">
+          <source type="image/jpeg" data-srcset="img/app.jpg">
+          <img class="lazy" data-src="img/app.jpg" alt="Speaking for Puertas Violetas app">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/bitup.webp">
+          <source type="image/jpeg" data-srcset="img/bitup.jpg">
+          <img class="lazy" data-src="img/bitup.jpg" alt="Giving an ESP32 hacking talk at BITUP 2019">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/soldadura.webp">
+          <source type="image/jpeg" data-srcset="img/soldadura.jpg">
+          <img class="lazy" data-src="img/soldadura.jpg" alt="Learning to solder">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/hacking.webp">
+          <source type="image/jpeg" data-srcset="img/hacking.jpg">
+          <img class="lazy" data-src="img/hacking.jpg" alt="Installing Coreboot open firmware into a Thinkpad x230">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/junction2019-1.webp">
+          <source type="image/jpeg" data-srcset="img/junction2019-1.jpg">
+          <img class="lazy" data-src="img/junction2019-1.jpg" alt="Posing at Junction 2019">
+        </picture>
+      </div>
+
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" data-srcset="img/pepemod.webp">
+          <source type="image/jpeg" data-srcset="img/pepemod.jpg">
+          <img class="lazy" data-src="img/pepemod.jpg" alt="Soldering Nitrocaster's adapter board to a Thinkpad x230">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/atresmedia.webp">
+          <source type="image/jpeg" data-srcset="img/atresmedia.jpg">
+          <img class="lazy" data-src="img/atresmedia.jpg" alt="Having fun in Atresmedia">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/junction2019.webp">
+          <source type="image/jpeg" data-srcset="img/junction2019.jpg">
+          <img class="lazy" data-src="img/junction2019.jpg" alt="Hacking at Junction 2019">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/printer3d.webp">
+          <source type="image/jpeg" data-srcset="img/printer3d.jpg">
+          <img class="lazy" data-src="img/printer3d-1.jpg" alt="3D printer, 3D printing">
+        </picture>
+      </div>
+
+      <div class="column-gallery">
+        <picture>
+          <source type="image/webp" data-srcset="img/flp1.webp">
+          <source type="image/jpeg" data-srcset="img/flp1.jpg">
+          <img class="lazy" data-src="img/flp1.jpg" alt="First FOSC LAN Party">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/soldadura1.webp">
+          <source type="image/jpeg" data-srcset="img/soldadura1.jpg">
+          <img class="lazy" data-src="img/soldadura1.jpg" alt="Soldering workshop">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/nn1.webp">
+          <source type="image/jpeg" data-srcset="img/nn1.jpg">
+          <img class="lazy" data-src="img/nn1.jpg" alt="Giving an open firmware talk at Navaja Negra 2019">
+        </picture>
+        <picture>
+          <source type="image/webp" data-srcset="img/fosc2.webp">
+          <source type="image/jpeg" data-srcset="img/fosc2.jpg">
+          <img class="lazy" data-src="img/fosc2-1.jpg" alt="Showing some stuff during Cable Amarillo">
+        </picture>
+      </div>
+    </div>
+  </div>
+
+  <div class="mgallery">
+    <h3>Linux, hackathons, courses, talks, server systems administration, open software, firmware and hardware!</h3>
+  </div>
+
+  <div id="services">
+    <div class="services">
+      <h1>OUR SERVICES</h1>
+      <p>We believe in self hosting! Our members can enjoy many different applications which run from our servers.</p>
+
+      <p>Here we show a few ones, but there are much more.</p>
+    </div>
+
+    <div class="tabla">
+      <div class="column">
+        <a href="https://cloud.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/cloud-computing.webp">
+            <source type="image/png" data-srcset="icons/cloud-computing.png">
            <img class="lazy" data-src="icons/cloud-computing.png" alt="Cloud">
-          </a>
-          <h4>Cloud</h4>
-        </div>
+          </picture>
+        </a>
+        <h4>Cloud</h4>
+      </div>

-        <div class="column">
-          <a href="https://doc.fosc.space">
+      <div class="column">
+        <a href="https://doc.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/book.webp">
+            <source type="image/png" data-srcset="icons/book.png">
            <img class="lazy" data-src="icons/book.png" alt="Wiki">
-          </a>
-          <h4>Wiki</h4>
-        </div>
+          </picture>
+        </a>
+        <h4>Wiki</h4>
+      </div>

-        <div class="column">
-          <a href="https://rss.fosc.space">
+      <div class="column">
+        <a href="https://rss.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/rss2.webp">
+            <source type="image/png" data-srcset="icons/rss2.png">
            <img class="lazy" data-src="icons/rss2.png" alt="RSS">
-          </a>
-          <h4>RSS</h4>
-        </div>
+          </picture>
+        </a>
+        <h4>RSS</h4>
      </div>
+    </div>

-      <div class="tabla tabla2">
-        <div class="column">
-          <a href="https://netdata.fosc.space">
+    <div class="tabla tabla2">
+      <div class="column">
+        <a href="https://netdata.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/chart.webp">
+            <source type="image/png" data-srcset="icons/chart.png">
            <img class="lazy" data-src="icons/chart.png" alt="NetData">
-          </a>
-          <h4>NetData</h4>
-        </div>
+          </picture>
+        </a>
+        <h4>NetData</h4>
+      </div>

-        <div class="column">
-          <a href="https://analytics.fosc.space">
+      <div class="column">
+        <a href="https://plausible.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/analytics.webp">
+            <source type="image/png" data-srcset="icons/analytics.png">
            <img class="lazy" data-src="icons/analytics.png" alt="Analytics">
-          </a>
-          <h4>Analytics</h4>
-        </div>
+          </picture>
+        </a>
+        <h4>Analytics</h4>
+      </div>

-        <div class="column">
-          <a href="https://git.fosc.space">
+      <div class="column">
+        <a href="https://git.fosc.space">
+          <picture>
+            <source type="image/webp" data-srcset="icons/gitea.webp">
+            <source type="image/png" data-srcset="icons/gitea.png">
            <img class="lazy" data-src="icons/gitea.png" alt="Gitea">
-          </a>
-          <h4>Stolen Code</h4>
+          </picture>
+        </a>
+        <h4>Stolen Code</h4>
+      </div>
+    </div>
+  </div>
+
+  <div class="members" id="contact">
+
+    <h1>We're looking for new members!</h1>
+
+    <div class="shape">
+      <div class="cmembers cmembers1">
+
+        <h4>How do I become a member?</h4>
+        <hr>
+
+        <p>You become a member by either coming to our physical hackerspace often<br><br>
+          If you've been coming a lot to the space, it's likely that you will be asked to become a formal
+          member.<br><br>
+          <b>Even if you are not a member, if the lights are on, you are free to come and hack inside.</b>
+        </p>
+
+      </div>
+
+      <div class="cmembers cmembers2">
+
+        <h4>Tell us anything</h4>
+        <hr>
+
+        <div class="contact_methods">
+          <p><span class="iconify" data-icon="mdi:twitter" style="color: #2196f3"></span> <a
+              href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
+          <br>
+          <p><span class="iconify" data-icon="mdi:email" style="color: #f32821;"></span> <a
+              href="mailto:contact@fosc.space">Send us an email</a></p>
        </div>
+
+        <div class="button">
+          <button onclick="document.getElementById('mapButton').style.animation = 'rainbow 1s linear infinite'"
+            id="mapButton">Or just come in</button>
+        </div>
+
      </div>
    </div>

-    <div class="members" id="contact">
-      <div class="shape">
-        <div class="cmembers cmembers1">
-          <h4>How do I become a member?</h4>
-          <hr>
-          <p>You become a member by either coming to our physical hackerspace often, or patronizing it.<br><br>
-          If the lights are on, you are free to come and hack inside.<br><br>
-          <span>Even if you are not a member you are welcome to come in anytime.</span><br><br>
-          Becoming a member is less of a legal process and more of a trust process, there is no way to become a member without being accepted by others in the group.<br><br>
-          If you've been coming a lot to the space, it's likely that you will be asked to become a formal member.</p>
-        </div>
-        
-        <div class="cmembers cmembers2">
-          <h4>We're looking for new members, students are specially welcome</h4>
-          <hr>
-          
-          <div class="contact_methods">
-            <p><i class="mdi mdi-twitter"></i> <a href="https://twitter.com/foscupct">Contact us on Twitter</a></p>
-            <p><i class="mdi mdi-email"></i> <a href="mailto:contact@fosc.space">Send us an email</a></p>
-          </div>
-
-          <div class="button">
-            <button onclick="loadMap()" id="mapButton">Or just come in</button>
-          </div>
-
-          <div class="map">
-            <iframe id="map" frameborder="0" style="border:0" allowfullscreen></iframe>
-          </div>
-        </div>
-      </div>
+    <div class="map">
+      <iframe id="map" title="Map view of our location" frameborder="0" allowfullscreen class="lazy"
+        data-src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076"></iframe>
    </div>
-  </body>
+
+  </div>

  <footer>
    <hr>
    <div class="foot-logo">
-      <img class="lazy" data-src="img/Logo-invert.png">
+      <picture>
+        <source type="image/webp" data-srcset="img/Logo-invert.webp">
+        <source type="image/png" data-srcset="img/Logo-invert.png">
+        <img class="lazy" data-src="img/Logo-invert.png" alt="FOSC Logo">
+      </picture>
      <a href="https://git.fosc.space/fosc/fosc.space">WEBSITE SOURCE CODE</a>
      <div class="author">
-      	<p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
+        <p>Icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> and <a
+            href="https://www.flaticon.com/authors/smalllikeart" title="Smalllikeart">Smalllikeart</a> from <a
+            href="https://www.flaticon.com/">www.flaticon.com</a>.</p>
      </div>
    </div>
  </footer>

+  <!-- With the DOM ready, lazyload all pics and swap all icons -->
+  <script>
+    window.lazyLoadOptions = {
+      elements_selector: ".lazy"
+    };
+  </script>
+  <script async src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.7.0/dist/lazyload.min.js"></script>
+  <script src="https://code.iconify.design/2/2.2.1/iconify.min.js"></script>
+</body>
+
 </html>
--- a/js/main.js
+++ b/js/main.js
@ -1,54 +0,0 @@
-function loadMap() {
-    var site = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1580.5054989176758!2d-0.9796837724532329!3d37.60190018337746!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6341863c83cf8f%3A0xe24278be476b56b8!2sFOSC!5e0!3m2!1ses!2ses!4v1544058887076";
-    document.getElementById('map').src = site;
-}
-
-document.addEventListener("DOMContentLoaded", function() {
-  var lazyloadImages;    
-
-  if ("IntersectionObserver" in window) {
-    lazyloadImages = document.querySelectorAll(".lazy");
-    var imageObserver = new IntersectionObserver(function(entries, observer) {
-      entries.forEach(function(entry) {
-        if (entry.isIntersecting) {
-          var image = entry.target;
-          image.src = image.dataset.src;
-          image.classList.remove("lazy");
-          imageObserver.unobserve(image);
-        }
-      });
-    });
-
-    lazyloadImages.forEach(function(image) {
-      imageObserver.observe(image);
-    });
-  } else {  
-    var lazyloadThrottleTimeout;
-    lazyloadImages = document.querySelectorAll(".lazy");
-    
-    function lazyload () {
-      if(lazyloadThrottleTimeout) {
-        clearTimeout(lazyloadThrottleTimeout);
-      }    
-
-      lazyloadThrottleTimeout = setTimeout(function() {
-        var scrollTop = window.pageYOffset;
-        lazyloadImages.forEach(function(img) {
-            if(img.offsetTop < (window.innerHeight + scrollTop)) {
-              img.src = img.dataset.src;
-              img.classList.remove('lazy');
-            }
-        });
-        if(lazyloadImages.length == 0) { 
-          document.removeEventListener("scroll", lazyload);
-          window.removeEventListener("resize", lazyload);
-          window.removeEventListener("orientationChange", lazyload);
-        }
-      }, 20);
-    }
-
-    document.addEventListener("scroll", lazyload);
-    window.addEventListener("resize", lazyload);
-    window.addEventListener("orientationChange", lazyload);
-  }
-})
--- a/js/modernizer.js
+++ b/js/modernizer.js
@ -0,0 +1,3 @@
+/*! modernizr 3.6.0 (Custom Build) | MIT *
+ * https://modernizr.com/download/?-webp-setclasses !*/
+ !function(e,n,A){function o(e,n){return typeof e===n}function t(){var e,n,A,t,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],n=r[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(A=0;A<n.options.aliases.length;A++)e.push(n.options.aliases[A].toLowerCase());for(t=o(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],l=i.split("."),1===l.length?Modernizr[l[0]]=t:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=t),s.push((t?"":"no-")+l.join("-"))}}function a(e){var n=u.className,A=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+A+"no-js(\\s|$)");n=n.replace(o,"$1"+A+"js$2")}Modernizr._config.enableClasses&&(n+=" "+A+e.join(" "+A),c?u.className.baseVal=n:u.className=n)}function i(e,n){if("object"==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);else{e=e.toLowerCase();var o=e.split("."),t=Modernizr[o[0]];if(2==o.length&&(t=t[o[1]]),"undefined"!=typeof t)return Modernizr;n="function"==typeof n?n():n,1==o.length?Modernizr[o[0]]=n:(!Modernizr[o[0]]||Modernizr[o[0]]instanceof Boolean||(Modernizr[o[0]]=new Boolean(Modernizr[o[0]])),Modernizr[o[0]][o[1]]=n),a([(n&&0!=n?"":"no-")+o.join("-")]),Modernizr._trigger(e,n)}return Modernizr}var s=[],r=[],l={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var A=this;setTimeout(function(){n(A[e])},0)},addTest:function(e,n,A){r.push({name:e,fn:n,options:A})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var f,u=n.documentElement,c="svg"===u.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;f=o(e,"undefined")||o(e.call,"undefined")?function(e,n){return n in e&&o(e.constructor.prototype[n],"undefined")}:function(n,A){return e.call(n,A)}}(),l._l={},l.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},l._trigger=function(e,n){if(this._l[e]){var A=this._l[e];setTimeout(function(){var e,o;for(e=0;e<A.length;e++)(o=A[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){l.addTest=i}),Modernizr.addAsyncTest(function(){function e(e,n,A){function o(n){var o=n&&"load"===n.type?1==t.width:!1,a="webp"===e;i(e,a&&o?new Boolean(o):o),A&&A(n)}var t=new Image;t.onerror=o,t.onload=o,t.src=n}var n=[{uri:"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=",name:"webp"},{uri:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==",name:"webp.alpha"},{uri:"data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",name:"webp.animation"},{uri:"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=",name:"webp.lossless"}],A=n.shift();e(A.name,A.uri,function(A){if(A&&"load"===A.type)for(var o=0;o<n.length;o++)e(n[o].name,n[o].uri)})}),t(),a(s),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();e.Modernizr=Modernizr}(window,document);
--- a/mstile-150x150.png
+++ b/mstile-150x150.png
--- a/safari-pinned-tab.svg
+++ b/safari-pinned-tab.svg
--- a/site.webmanifest
+++ b/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "FOSC",
+    "short_name": "FOSC",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png?v=2",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png?v=2",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
Author	SHA1	Message	Date
Pablo	023d6f0954	Uprev deps	2022-04-14 16:52:15 +02:00
Pablo	f7afa99d42	Doc -> Wiki	2022-04-14 16:50:41 +02:00
Pablo	49bb62cc88	Fix borked url	2022-01-18 13:38:18 +01:00
Pablo	978b406064	Bump lazyload	2022-01-18 13:34:03 +01:00
Pablo	d075595efb	Bump iconify	2022-01-18 13:33:20 +01:00
Pablo	e307165ea8	Remove Sentry	2021-12-22 10:51:34 +01:00
Pablo	66013b2dd4	Bump jquer	2021-12-22 10:51:29 +01:00
Pablo	b09da7be61	Update integrity	2021-03-23 14:45:36 +01:00
Pablo	4e4010c65e	Use tracing sentry	2021-03-23 14:44:19 +01:00
Pablo	7a1a794302	Fix2	2021-03-23 14:40:59 +01:00
Pablo	1fd9229290	Fix	2021-03-23 14:40:38 +01:00
Pablo	12a1e5cc5f	Revert?	2021-03-23 14:40:08 +01:00
Pablo	4b17105eda	Fix	2021-03-23 14:38:12 +01:00
Pablo	2ff083552e	Add sentry	2021-03-23 14:37:21 +01:00
Pablo	1c812ed84c	New analytics page	2021-03-09 21:23:02 +01:00
Pablo	8a1d077610	Add analytics	2021-01-14 15:47:10 +01:00
Pablo	2031d6d108	Add favicon stuff	2020-08-01 04:08:23 +02:00
Pablo	64e5347f8e	Merge branch 'master' of git.fosc.space:fosc/fosc.space	2020-05-01 06:15:50 +02:00
Pablo	35f311ad09	Update libraries	2020-05-01 06:15:48 +02:00
Gilson Javier	6b2f845e01	fix contact redirection	2020-04-14 18:58:09 +00:00
Pablo	e9c81978de	Change icon	2020-04-01 06:42:32 +02:00
Pablo	5cc52ddd57	Remove enthusiasm	2020-04-01 06:39:18 +02:00
Pablo	2d7983cbd4	Add More... to services	2020-04-01 06:38:57 +02:00
Pablo	a9282793dc	Up quality	2020-03-15 03:22:44 +01:00
Pablo	9417e1a11b	Webp the backgrounds	2020-03-15 03:11:31 +01:00
Pablo	0860968446	Format document	2020-03-15 02:19:50 +01:00
Pablo	4bc510ca2e	Make SEO happy, again	2020-03-15 02:12:26 +01:00
Pablo	670d371541	Spacing	2020-03-15 02:10:42 +01:00
Pablo	e1a64734b5	Hack to make seo happy (?)	2020-03-15 02:09:48 +01:00
Pablo	bde447dba6	Remove useless icon	2020-03-15 01:17:11 +01:00
Pablo	e48da43858	Another one	2020-03-15 01:14:26 +01:00
Pablo	f4cfd2aea5	Add alt text for pictures	2020-03-15 01:13:35 +01:00
Pablo	0205040fe8	Fix broken tag	2020-03-15 01:01:21 +01:00
Pablo	e24a932e30	Fix html tags	2020-03-15 00:59:13 +01:00
Pablo	a89612b9af	SEOify	2020-03-15 00:47:08 +01:00
Cristian Gutierrez	0a74df5ff7	Upload files to ''	2020-03-14 23:36:13 +00:00
Cristian Gutierrez	b0cafd73ab	Delete 'favicon.ico'	2020-03-14 23:36:01 +00:00
Cristian Gutierrez	bdafc24e30	Upload favicon	2020-03-14 23:32:51 +00:00
Pablo	7ddc5def8e	Add apple touch icon (sigh)	2020-03-15 00:26:02 +01:00
Pablo	efd628c5ca	Revert "Revert "One more async?"" This reverts commit `4e0adafb85`.	2020-03-15 00:05:58 +01:00
Pablo	4e0adafb85	Revert "One more async?" This reverts commit `ebecfad04a`.	2020-03-14 23:56:13 +01:00
Pablo	ebecfad04a	One more async?	2020-03-14 23:51:07 +01:00
Pablo	518169d819	Lazy lazy loading	2020-03-14 23:36:46 +01:00
Pablo	de84d85d6e	Reorder navbar	2020-03-14 23:31:24 +01:00
Pablo	fdc603a488	Hide Home	2020-03-14 23:28:47 +01:00
Pablo	49c45903ba	Add easter egg	2020-03-14 22:50:46 +01:00
Pablo	9865c02a45	Tweak responsiveness	2020-03-14 19:16:35 +01:00
Pablo	895684fef2	Improve visual left skew	2020-03-14 18:55:37 +01:00
Pablo	8d9176ccaf	Lazyload map	2020-03-14 18:43:29 +01:00
Pablo	72501a208c	New contact region	2020-03-14 18:35:09 +01:00
Pablo	48db47b5ee	Add more iconitos	2020-03-14 05:53:26 +01:00
Pablo	433d366b26	Load material svg icons from iconify	2020-03-14 05:44:08 +01:00
Pablo	c5fbdb15eb	Swap font	2020-03-14 05:19:14 +01:00
Pablo	59c9545757	Swap to fira and stop shouting at users	2020-03-14 05:15:11 +01:00
Pablo	e3aecabc53	Fix css after path change	2020-03-14 05:07:21 +01:00
Pablo	a4541c088d	Modernize html structure	2020-03-14 05:05:49 +01:00
Pablo	fcca4bb86d	Make bottom background better looking	2020-03-14 04:40:22 +01:00
Pablo	cfd1123d5b	Lazyload bottom background	2020-03-14 04:39:20 +01:00
Pablo	04c9e54e24	jpegoptimize	2020-03-14 04:06:30 +01:00
Pablo	879c61d2d9	Replace native lazyloading with verlok/lazyload	2020-03-14 03:35:11 +01:00
Pablo	f2061a7b2a	Replace old lazyload library for native lazy loading	2020-03-13 22:42:54 +01:00
Pablo	32cb4f21f7	Lazy correctly	2020-03-13 22:29:49 +01:00
Pablo	6e8d5485f3	ALLLLLLLL	2020-03-13 22:25:52 +01:00
Pablo	9498b0695a	ALL	2020-03-13 21:54:02 +01:00
Pablo	871f37f3dd	Webp ALL. THE. THINGS.	2020-03-13 21:53:21 +01:00