Uprev deps

This reverts commit 4e0adafb85.

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>

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;

index.html

@@ -1,112 +1,128 @@
 <!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. -->
-
-<html lang="en">
- 	
-  <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="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">
+<head>
+  <meta charset="utf-8">
   <title>FOSC - Free Open Source Club</title>
-		<script src="js/main.js"></script>
-  	m<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-  </head>
+
+  <meta name="description" content="FOSC: Hackerspace located at Universidad Politecnica de Cartagena (UPCT)">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+
+  <link rel="stylesheet" type="text/css" href="css/main.css">
+  <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
+
+  <script src="js/modernizer.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+
+
+  <!-- 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">
-          <img class="lazy" data-src="img/Logo-invert.png" style="width: 100px;">
+          <picture>
+            <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>
+                  <a href="https://rss.fosc.space"><span class="iconify" data-icon="mdi:rss"></span> RSS</a>
                 </li>
                 <li>
-                  <a href="https://netdata.fosc.space">NetData</a>
+                  <a href="https://netdata.fosc.space"><span class="iconify" data-icon="mdi:finance"></span> NetData</a>
                 </li>
                 <li>
-                  <a href="https://analytics.fosc.space">Analytics</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">Stolen Code</a>
+                  <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>
@@ -122,65 +138,151 @@
   <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">
+        <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="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">
+        <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">
-          <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">
+        <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">
-          <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">
+        <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>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>
+    <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>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>
+      <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">
+          </picture>
         </a>
         <h4>Cloud</h4>
       </div>
 
       <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">
+          </picture>
         </a>
         <h4>Wiki</h4>
       </div>
 
       <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">
+          </picture>
         </a>
         <h4>RSS</h4>
       </div>
@@ -189,21 +291,33 @@
     <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">
+          </picture>
         </a>
         <h4>NetData</h4>
       </div>
 
       <div class="column">
-          <a href="https://analytics.fosc.space">
+        <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">
+          </picture>
         </a>
         <h4>Analytics</h4>
       </div>
 
       <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">
+          </picture>
         </a>
         <h4>Stolen Code</h4>
       </div>
@@ -211,47 +325,76 @@
   </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, 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>
+
+        <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>We're looking for new members, students are specially welcome</h4>
+
+        <h4>Tell us anything</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>
+          <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="loadMap()" id="mapButton">Or just come in</button>
+          <button onclick="document.getElementById('mapButton').style.animation = 'rainbow 1s linear infinite'"
+            id="mapButton">Or just come in</button>
+        </div>
+
+      </div>
     </div>
 
     <div class="map">
-            <iframe id="map" frameborder="0" style="border:0" allowfullscreen></iframe>
+      <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>
+
   </div>
-      </div>
-    </div>
-  </body>
 
   <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>

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);
-  }
-})

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);

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"
+}