changed styles and fonts

kernelpanic.lol/assets/static/style.css

@@ -1,16 +1,117 @@
-body {
-    font-family: 'Verdana', sans-serif;
-    margin: 50px 25px;
-}
 
+
+::-webkit-scrollbar {
+    display: none;
+}
+@font-face {
+    font-family: "Quicksand";
+    src:
+        local("Quicksand"),
+        url("/static/terminal-grotesque_open.otf");
+    font-style: normal;    
+}
+body, html, canvas {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-left: 0%;
+    margin-right: 0%;
+    width: 100vw;
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none;
+    
+    background-size: 20px 20px;
+    {% block bgstuff %}
+    background-color: white; 
+    {% endblock %}
+    font-family: 'Quicksand', sans-serif;
+}
+canvas {
+    display:block;
+    z-index=-3;
+}
+#topbar {
+    width: 100%;
+    text-align: center;
+    border-bottom: 1px solid black;
+    position: sticky;
+    top:0;
+    animation: slideDown 3s backwards;
+}
+@keyframes slideDown {
+    0% {
+        left:0vw;
+    }
+    100% {
+        left:50vw;
+    }
+}
+.button {
+    display: inline-block;
+    padding: 10px;
+    border-right: 1px solid black;
+    transition: background-color 0.5s;
+    font-size: large;
+}
 a {
-    color: #2a99b6;
+    font-size: large;
+    color: black;
+}
+.button:hover {
+    background-color: #888;
+}
+.content {
+    padding-left: 10%;
+    padding-right: 10%;
+    text-align: justify;
+    overflow:scroll;
+    width:80vw;
+    font-size:large;
+}
+h1 {
+    text-align: center;
+    font-size: ;
+}
+#footer {
+    color:inherit;
+    width: 100vw;
+    font-size: small;
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+    width: 100%;
+    text-align: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    position: absolute;
+    display: block;
+    bottom: -75px;
+    background-color: inherit;
+    border-top: 1px solid #e7e7e7;
+}
+#footer a {
+    font-size: small;
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
 }
 
-a:hover {
+.content img {
-    color: #33bbdf;
+    max-width: 800px;
+    display: inline;
 }
 
+.content {
+    text-align: justify;
+    width: 80%;
+}
+
+
+
+
+
+
 header, footer, div.page {
     width: 760px;
     margin: 0 auto;
@@ -40,3 +141,16 @@ header nav ul li {
 div.page {
     background: #f1fbfe;
 }
+
+#grid {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle closest-side, transparent 98%, #000 100%) 50% 50% / 10% 10%;
+    background-repeat: no-repeat;
+  }
+
+
+
+
+

kernelpanic.lol/assets/static/style2.css

@@ -0,0 +1,145 @@
+
+
+::-webkit-scrollbar {
+    display: none;
+}
+@font-face {
+    font-family: "Quicksand";
+    src:
+        local("Quicksand"),
+        url("/static/quicksand.light-regular.otf");
+    font-style: normal;    
+}
+body, html {
+    height: 100%;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    margin-left: 10%;
+    margin-right: 10%;
+    width: 80vw;
+    scrollbar-width: none; /* For Firefox */
+    -ms-overflow-style: none;
+    {% block bgstuff %}
+    background-color: white;
+    {% endblock %}
+    font-family: 'Quicksand', sans-serif;
+}
+
+#topbar {
+    width: 100%;
+    text-align: center;
+    border-bottom: 1px solid black;
+    position: sticky;
+    top:0;
+    animation: slideDown 3s backwards;
+}
+@keyframes slideDown {
+    0% {
+        left:0vw;
+    }
+    100% {
+        left:50vw;
+    }
+}
+.button {
+    display: inline-block;
+    padding: 10px;
+    border-right: 1px solid black;
+    transition: background-color 0.5s;
+    font-size: large;
+}
+a {
+    font-size: large;
+    color: black;
+}
+.button:hover {
+    background-color: #888;
+}
+.content {
+    padding-left: 10%;
+    padding-right: 10%;
+    text-align: justify;
+    overflow:scroll;
+    width:80vw;
+    font-size:large;
+}
+h1 {
+    text-align: left;
+}
+#footer {
+    color:inherit;
+    width: 100vw;
+    font-size: small;
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+    width: 100%;
+    text-align: center;
+    padding-left: 10px;
+    padding-right: 10px;
+    position: absolute;
+    display: block;
+    bottom: -75px;
+    background-color: inherit;
+    border-top: 1px solid #e7e7e7;
+}
+#footer a {
+    font-size: small;
+    -webkit-filter: invert(100%);
+    filter: invert(100%);
+}
+
+.content img {
+    max-width: 800px;
+    display: inline;
+}
+
+.content {
+    text-align: justify;
+    width: 80%;
+}
+
+
+
+
+
+
+header, footer, div.page {
+    width: 760px;
+    margin: 0 auto;
+    background: #daeef3;
+    padding: 20px 30px;
+}
+
+header h1 {
+    color: #169bbd;
+    margin: 0;
+    font-weight: normal;
+    font-size: 42px;
+}
+
+header nav ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+header nav ul li {
+    display: inline;
+    margin: 0 8px 0 0;
+    padding: 0;
+}
+
+div.page {
+    background: #f1fbfe;
+}
+
+#grid {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle closest-side, transparent 98%, #000 100%) 50% 50% / 10% 10%;
+    background-repeat: no-repeat;
+  }

kernelpanic.lol/content/contents.lr

@@ -1,7 +1,17 @@
-title: Habemus hackspace
+title: Somos un **hackspace**
 ---
 body:
 
+##¿Qué es un hackspace?
+
+Un lugar mágico, místico y maravilloso donde nos reunimos a plantear y resolver problemas, aprender nuevas habilidades, así como, en general, interactuar sin temor a juicio en torno a temas de tecnología y libertad. 
+
+##¿Qué implica ser hacker?
+
+Implica tener curiosidad ante lo desconocido, perseverancia ante irresolvible y el ego preparado para estar en lo equivocado.
+
+##¿Por qué *Kernel Panic* Space?
+
 El **_kernel panic_** es un viaje solitario a través del laberinto de la información. Te abres camino a tientas entre las enredaderas de los manuales, los callejones sin salida de los foros y los pozos sin fondo de las listas de correo. ¿Qué habrá visto, de veras, [DenverCoder9](https://letmegooglethat.com/?q=denvercoder9&l=1)? ¿Quién tendrá la respuesta a tu pregunta?
 
 Tal vez nadie, pero en este _Cuarto de Máquinas_ creemos que tu búsqueda implacable no tiene por qué ser un viaje enfrentado a solas.

kernelpanic.lol/kernelpanic.lol.lektorproject

@@ -5,5 +5,5 @@ name = kernelpanic.lol
 [servers.kernet]
 name = kernet
 enabled = true
-target = rsync://h4x@10.13.42.3:4891/home/h4x/www
+target = rsync://root@10.13.42.99:22/var/www/kp.lol
-extra_flags = --delete
+extra_flags = --delete

kernelpanic.lol/layoutWithJs.html

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}{% endblock %}</title>
+    
+    <style>
+        ::-webkit-scrollbar {
+            display: none;
+        }
+        body, html {
+            height: 100%;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            margin-left: 10%;
+            margin-right: 10%;
+            width: 80vw;
+            scrollbar-width: none; /* For Firefox */
+            -ms-overflow-style: none;
+            {% block bgstuff %}
+            background-color: white;
+            {% endblock %}
+        }
+        
+        #topbar {
+            width: 100%;
+            text-align: center;
+            border-bottom: 1px solid black;
+            position: sticky;
+            top:0;
+            animation: slideDown 3s backwards;
+        }
+        @keyframes slideDown {
+            0% {
+                left:0vw;
+            }
+            100% {
+                left:50vw;
+            }
+        }
+        .button {
+            display: inline-block;
+            padding: 10px;
+            border-right: 1px solid black;
+            transition: background-color 0.5s;
+            font-size: large;
+        }
+        a {
+            font-size: large;
+            color: black;
+        }
+        .button:hover {
+            background-color: #888;
+        }
+        .content {
+            padding-left: 10%;
+            padding-right: 10%;
+            text-align: justify;
+            overflow:scroll;
+            width:80vw;
+            font-size:large;
+        }
+        h1 {
+            text-align: left;
+        }
+        #footer {
+            color:inherit;
+            width: 100vw;
+            font-size: small;
+            -webkit-filter: invert(100%);
+            filter: invert(100%);
+            width: 100%;
+            text-align: center;
+            padding-left: 10px;
+            padding-right: 10px;
+            position: absolute;
+            display: block;
+            bottom: -75px;
+            background-color: inherit;
+            border-top: 1px solid #e7e7e7;
+        }
+        #footer a {
+            font-size: small;
+            -webkit-filter: invert(100%);
+            filter: invert(100%);
+        }
+
+        .content img {
+            max-width: 800px;
+            display: inline;
+        }
+
+        .content {
+            text-align: justify;
+            width: 80%;
+        }
+    </style>
+</head>
+<body>
+    <!-- Llegaste al código, a ver cáele al telegram -> [arroba]kprftw -->
+    <div id="topbar">
+        {% block topbar %}
+        <a href="/"><div class="button">a casa</div></a>
+        <a href="/spacestats"><div id="spaceStatusButton" class="button">a casa</div></a>
+        <a href="/guatecon-01"><div class="button color-changer" id="colorButton">GuateCON 0.1</div></a>
+        <a href="/about"><div class="button">qué es esto</div></a>
+        <a href="/somos"><div class="button">quiénes somos</div></a>
+        <a href="/blog"><div class="button">blog</div></a>
+        <a href="https://box.kernelpanic.lol"><div class="button">proyectos</div></a>
+        <a href="/censo-hacker-latinoamericane-2023"><div class="button">participa en el censo</div></a>
+        <!--<a href="https://pat.kernelpanic.lol/calendar/#/2/calendar/view/CH1zbFeFKLPO5SPle5JNxjKqdSaidbYPYBKFC4PDSus/embed/"><div class="button">calendario</div></a> -->
+
+        <!-- Add more buttons as needed -->
+        {% endblock %}
+    </div>
+    
+    <div class="content">
+        <h1>{{ this.title }}</h1>
+        {% block body %}{% endblock %}
+    </div>
+
+    <script>
+        document.body.addEventListener('click', function () {
+            var randomColor = 'rgb(' + 
+                Math.floor(Math.random() * 256) + ',' +
+                Math.floor(Math.random() * 256) + ',' +
+                Math.floor(Math.random() * 256) + ')';
+            document.body.style.backgroundColor = randomColor;
+            document.getElementById('topbar').style.backgroundColor = randomColor;
+            var rgb = randomColor.match(/\d+/g).map(Number);
+            
+            // Calculate the brightness of the color
+            var brightness = Math.round((parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000);
+            
+            // Choose black or white for the font color based on the brightness
+            var randomFontColor = brightness > 150 ? 'black' : 'white';
+            document.body.style.color = randomFontColor;
+        });
+        var buttons = document.querySelectorAll('.button');
+        buttons.forEach(function(button) {
+            button.addEventListener('mouseover', function() {
+                var randomColor = 'rgb(' + 
+                    Math.floor(Math.random() * 256) + ',' +
+                    Math.floor(Math.random() * 256) + ',' +
+                    Math.floor(Math.random() * 256) + ')';
+
+                // Convert the RGB color to an array of numbers
+                var rgb = randomColor.match(/\d+/g).map(Number);
+                
+                // Calculate the brightness of the color
+                var brightness = Math.round((parseInt(rgb[0]) * 299 + parseInt(rgb[1]) * 587 + parseInt(rgb[2]) * 114) / 1000);
+                
+                // Choose black or white for the font color based on the brightness
+                var randomFontColor = brightness > 150 ? 'black' : 'white';
+
+                this.style.backgroundColor = randomColor;
+                this.style.color = randomFontColor;
+            });
+        });
+    </script>
+<script>
+    const button = document.getElementById('colorButton');
+    let t = 0;
+  
+    function generateColor(t, phase) {
+      return Math.floor((Math.sin(t + phase) + 1) * 128);
+    }
+  
+    function updateGradient() {
+      const r1 = generateColor(t, 0);
+      const g1 = generateColor(t, 2);
+      const b1 = generateColor(t, 4);
+      const color1 = `rgb(${r1}, ${g1}, ${b1})`;
+  
+      const r2 = generateColor(t, 6);
+      const g2 = generateColor(t, 8);
+      const b2 = generateColor(t, 10);
+      const color2 = `rgb(${r2}, ${g2}, ${b2})`;
+  
+      button.style.background = `linear-gradient(to right, ${color1}, ${color2})`;
+  
+      t += 0.01;
+    }
+  
+    setInterval(updateGradient, 1000 / 600);  // 60 frames per second for a smooth transition
+  </script>
+  <script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const endpoint = "https://kernelpanic.lol/spacestats"; // Replace with your actual endpoint
+        const button = document.getElementById('spaceStatusButton');
+
+        fetch(endpoint)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                updateButtonStatus(button, data.state.open);
+            })
+            .catch(error => {
+                console.error('There has been a problem with your fetch operation:', error);
+                button.textContent = 'Error fetching status';
+            });
+    });
+
+    function updateButtonStatus(button, status) {
+        if (status === 'true') {
+            button.textContent = 'Estamos aquí';
+            button.style.backgroundColor = 'green';
+        } else if (status === 'false') {
+            button.textContent = 'No estamos';
+            button.style.backgroundColor = 'red';
+        } else {
+            button.textContent = 'Algo raro sucede';
+            button.style.backgroundColor = 'grey';
+        }
+    }
+
+  </script>
+    <div id="footer">
+        {% block footer %}
+            <p>Por la gracia de San iGNUcio desde el Cuarto de Máquinas @ 2023.</p> 
+            <p>Contáctanos en <a href="https://twitter.com/botkernel">el twatter</a> para lo que se ocupe.</p>
+        {% endblock %}
+    </div>
+</body>
+</html>

kernelpanic.lol/templates/layout.html

@@ -3,120 +3,27 @@
 <head>
     <meta charset="UTF-8">
     <title>{% block title %}{% endblock %}</title>
+    <link rel="stylesheet" type="text/css" href="/static/style.css" />
     
-    <style>
-        ::-webkit-scrollbar {
-            display: none;
-        }
-        body, html {
-            height: 100%;
-            margin: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            margin-left: 10%;
-            margin-right: 10%;
-            width: 80vw;
-            scrollbar-width: none; /* For Firefox */
-            -ms-overflow-style: none;
-            {% block bgstuff %}
-            background-color: white;
-            {% endblock %}
-        }
-        
-        #topbar {
-            width: 100%;
-            text-align: center;
-            border-bottom: 1px solid black;
-            position: sticky;
-            top:0;
-            animation: slideDown 3s backwards;
-        }
-        @keyframes slideDown {
-            0% {
-                left:0vw;
-            }
-            100% {
-                left:50vw;
-            }
-        }
-        .button {
-            display: inline-block;
-            padding: 10px;
-            border-right: 1px solid black;
-            transition: background-color 0.5s;
-            font-size: large;
-        }
-        a {
-            font-size: large;
-            color: black;
-        }
-        .button:hover {
-            background-color: #888;
-        }
-        .content {
-            padding-left: 10%;
-            padding-right: 10%;
-            text-align: justify;
-            overflow:scroll;
-            width:80vw;
-            font-size:large;
-        }
-        h1 {
-            text-align: left;
-        }
-        #footer {
-            color:inherit;
-            width: 100vw;
-            font-size: small;
-            -webkit-filter: invert(100%);
-            filter: invert(100%);
-            width: 100%;
-            text-align: center;
-            padding-left: 10px;
-            padding-right: 10px;
-            position: absolute;
-            display: block;
-            bottom: -75px;
-            background-color: inherit;
-            border-top: 1px solid #e7e7e7;
-        }
-        #footer a {
-            font-size: small;
-            -webkit-filter: invert(100%);
-            filter: invert(100%);
-        }
 
-        .content img {
-            max-width: 800px;
-            display: inline;
-        }
-
-        .content {
-            text-align: justify;
-            width: 80%;
-        }
-    </style>
 </head>
 <body>
     <!-- Llegaste al código, a ver cáele al telegram -> [arroba]kprftw -->
     <div id="topbar">
         {% block topbar %}
         <a href="/"><div class="button">a casa</div></a>
-        <a href="/spacestats"><div id="spaceStatusButton" class="button">a casa</div></a>
+        <!--<a href="/spacestats"><div id="spaceStatusButton" class="button">a casa</div></a>
-        <a href="/guatecon-01"><div class="button color-changer" id="colorButton">GuateCON 0.1</div></a>
+        <a href="/guatecon-01"><div class="button color-changer" id="colorButton">GuateCON 0.1</div></a> -->
-        <a href="/about"><div class="button">qué es esto</div></a>
+        <a href="{{'/about'|url}}"><div class="button">qué es esto</div></a>
-        <a href="/somos"><div class="button">quiénes somos</div></a>
+        <a href="{{'/somos'|url}}"><div class="button">quiénes somos</div></a>
-        <a href="/blog"><div class="button">blog</div></a>
+        <a href="{{'/blog'|url}}"><div class="button">blog</div></a>
         <a href="https://box.kernelpanic.lol"><div class="button">proyectos</div></a>
-        <a href="/censo-hacker-latinoamericane-2023"><div class="button">participa en el censo</div></a>
+        <!--<a href="/censo-hacker-latinoamericane-2023"><div class="button">participa en el censo</div></a>-->
         <!--<a href="https://pat.kernelpanic.lol/calendar/#/2/calendar/view/CH1zbFeFKLPO5SPle5JNxjKqdSaidbYPYBKFC4PDSus/embed/"><div class="button">calendario</div></a> -->
 
         <!-- Add more buttons as needed -->
         {% endblock %}
     </div>
-    
     <div class="content">
         <h1>{{ this.title }}</h1>
         {% block body %}{% endblock %}
@@ -161,7 +68,8 @@
             });
         });
     </script>
-<script>
+<!-- THIS IS THE GRADIENT MORPHING BUTTON
+ <script>
     const button = document.getElementById('colorButton');
     let t = 0;
   
@@ -186,8 +94,8 @@
     }
   
     setInterval(updateGradient, 1000 / 600);  // 60 frames per second for a smooth transition
-  </script>
+  </script>-->
-  <script>
+  <!--<script>
     document.addEventListener('DOMContentLoaded', function() {
         const endpoint = "https://kernelpanic.lol/spacestats"; // Replace with your actual endpoint
         const button = document.getElementById('spaceStatusButton');
@@ -200,7 +108,7 @@
                 return response.json();
             })
             .then(data => {
-                updateButtonStatus(button, data.status);
+                updateButtonStatus(button, data.state.open);
             })
             .catch(error => {
                 console.error('There has been a problem with your fetch operation:', error);
@@ -209,10 +117,10 @@
     });
 
     function updateButtonStatus(button, status) {
-        if (status === 'open') {
+        if (status === 'true') {
             button.textContent = 'Estamos aquí';
             button.style.backgroundColor = 'green';
-        } else if (status === 'closed') {
+        } else if (status === 'false') {
             button.textContent = 'No estamos';
             button.style.backgroundColor = 'red';
         } else {
@@ -221,6 +129,63 @@
         }
     }
 
+  </script>-->
+  <script>
+        var canvas = document.getElementById('body');
+        var ctx = canvas.getContext('2d');
+
+        var gridSpacing = 180; // --s: 80px;  /* control the size of the grid */
+        var gridSize = 20;
+        var distortionFactor = 10;
+
+        function drawGrid(centerX, centerY) {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            for (var i = 0; i < canvas.width; i += gridSpacing) {
+                for (var j = 0; j < canvas.height; j += gridSpacing) {
+                    var dx = i - centerX;
+                    var dy = j - centerY;
+                    var dist = Math.sqrt(dx*dx + dy*dy);
+                    var offset = dist / distortionFactor;
+
+                    var x = i + dx / offset;
+                    var y = j + dy / offset;
+
+                    ctx.fillRect(x, y, gridSize, gridSize);
+
+                    // Connect the points with lines
+                    if (i > 0) {
+                        // Horizontal line
+                        ctx.beginPath();
+                        ctx.moveTo(x, y + gridSize / 2);
+                        ctx.lineTo(x - gridSpacing, j + dy / (dist / (distortionFactor * gridSpacing)) + gridSize / 2);
+                        ctx.stroke();
+                    }
+
+                    if (j > 0) {
+                        // Vertical line
+                        ctx.beginPath();
+                        ctx.moveTo(x + gridSize / 2, y);
+                        ctx.lineTo(i + dx / (dist / (distortionFactor * gridSpacing)) + gridSize / 2, y - gridSpacing);
+                        ctx.stroke();
+                    }
+                }
+            }
+        }
+
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        window.onresize = resizeCanvas;
+        resizeCanvas();
+
+        canvas.onmousemove = function(e) {
+            drawGrid(e.clientX, e.clientY);
+        };
+
+        drawGrid(canvas.width / 2, canvas.height / 2);
   </script>
     <div id="footer">
         {% block footer %}
@@ -229,4 +194,4 @@
         {% endblock %}
     </div>
 </body>
-</html>
+</html>