KPR/kernel_panic_web
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

changed styles and fonts

Browse Source
This commit is contained in:
Orson 2024-08-14 15:24:36 -06:00
parent 5d3fd39f59
commit ccbbfdd1a3
9 changed files with 583 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
kernelpanic.lol/assets/static/quicksand.light-regular.otf Normal file
View File

Binary file not shown.

128
kernelpanic.lol/assets/static/style.css
View File

@ -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 {
color: #33bbdf;
.content img {
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;
}

145
kernelpanic.lol/assets/static/style2.css Normal file
View File

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

BIN
kernelpanic.lol/assets/static/terminal-grotesque_open.otf Normal file
View File

Binary file not shown.

BIN
kernelpanic.lol/assets/static/tex-gyre-adventor.regular.otf Normal file
View File

Binary file not shown.

12
kernelpanic.lol/content/contents.lr
View File

@ -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.

4
kernelpanic.lol/kernelpanic.lol.lektorproject
View File

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

232
kernelpanic.lol/layoutWithJs.html Normal file
View File

@ -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>

179
kernelpanic.lol/templates/layout.html
View File

@ -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="/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="/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'|url}}"><div class="button">qué es esto</div></a>
<a href="{{'/somos'|url}}"><div class="button">quiénes somos</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>