UPDATE: blog style & content

This commit is contained in:
2023-12-06 20:39:45 +01:00
parent 1edc13b09b
commit df2d86f9a7
4 changed files with 85 additions and 52 deletions

View File

@ -1,5 +1,7 @@
# ArKa # ArKa Web
--- ---
This repository contains source code of ArKa infrastructure main page. This repository contains source code of ArKa main page
Pure [HTML](https://validator.w3.org/nu/?doc=https%3A%2F%2Farka.rocks%2F) & [CSS](https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Farka.rocks&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en), W3C compliant.

BIN
assets/fonts/BlockZone.ttf Normal file

Binary file not shown.

View File

@ -1,19 +1,24 @@
@font-face {
font-family: "BlockZone";
src: url("../fonts/BlockZone.ttf") format("truetype");
}
/* Root */ /* Root */
:root :root
{ {
/* Dark mode */ /* Dark mode */
--dark-bg: #0d0d0d; --dark-bg: #191919;
--dark-text: #ffdab9; --dark-text: #BBBBBB;
--dark-link: black; --dark-link: #191919;
--dark-link-bg: #f08080; --dark-link-bg: #f08080;
--dark-title: #f08080; --dark-title: #f08080;
/* Light mode */ /* Light mode */
--light-bg: #ffdab9; --light-bg: #ffdab9;
--light-text: #0d0d0d; --light-text: #191919;
--light-link: black; --light-link: #191919;
--light-link-bg: #f08080; --light-link-bg: #DE6E7C;
--light-title: #f08080; --light-title: #DE6E7C;
/* Default mode */ /* Default mode */
--bg-color: var(--dark-bg); --bg-color: var(--dark-bg);
@ -31,9 +36,11 @@ body
color: var(--text-color); color: var(--text-color);
border: 1px solid var(--link-bg-color); border: 1px solid var(--link-bg-color);
font-size: calc(10px + 0.390625vw);
font-family: "BlockZone";
width: 90vw; width: 90vw;
margin-left: auto; margin: 0 auto;
margin-right: auto;
text-align: center; text-align: center;
} }
@ -123,7 +130,16 @@ h1, h2, h3, h4 {
} }
h1 { h1 {
border-bottom: 1px solid var(--title-color); width: 80%;
margin: 0 auto;
text-align: center;
border: 1px solid var(--title-color);
}
main div.h1-content {
width: 80%;
margin: 0 auto;
} }
#contact ul #contact ul
@ -131,21 +147,20 @@ h1 {
margin-bottom: 2vh; margin-bottom: 2vh;
} }
/* Responsive design */
@media screen and (max-width: 700px) @media screen and (max-width: 700px)
{ {
body body
{ {
font-size: 10px; font-size: 10px;
} }
} }
@media screen and (max-width: 500px) @media screen and (max-width: 600px)
{ {
nav ul, #contact ul nav ul, #contact ul
{ {
flex-direction: column; flex-direction: column;
gap: 0.5rem; gap: 0.5rem;
} }
} }
@ -154,11 +169,11 @@ h1 {
{ {
:root :root
{ {
--bg-color: var(--dark-bg); --bg-color: var(--dark-bg);
--text-color: var(--dark-text); --text-color: var(--dark-text);
--link-color: var(--dark-link); --link-color: var(--dark-link);
--link-bg-color: var(--dark-link-bg); --link-bg-color: var(--dark-link-bg);
--title-color: var(--dark-title); --title-color: var(--dark-title);
} }
} }
@ -167,10 +182,10 @@ h1 {
{ {
:root :root
{ {
--bg-color: var(--light-bg); --bg-color: var(--light-bg);
--text-color: var(--light-text); --text-color: var(--light-text);
--link-color: var(--light-link); --link-color: var(--light-link);
--link-bg-color: var(--light-link-bg); --link-bg-color: var(--light-link-bg);
--title-color: var(--light-title); --title-color: var(--light-title);
} }
} }

View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<!-- Metadata --> <!-- Metadata -->
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ArKa"> <meta name="description" content="ArKa main page">
<meta property="og:title" content="ArKa"> <meta property="og:title" content="ArKa">
<meta property="og:url" content="https://arka.rocks"> <meta property="og:url" content="https://arka.rocks">
<meta property="og:type" content="website"> <meta property="og:type" content="website">
<meta property="og:description" content="ArKa"> <meta property="og:description" content="ArKa main page">
<!-- Style --> <!-- Style -->
<link rel="stylesheet" href="assets/style/style.css"> <link rel="stylesheet" href="assets/style/style.css">
<link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
@ -24,21 +24,24 @@
<!-- ASCII ART --> <!-- ASCII ART -->
<pre> <pre>
█████████████ ██╗ █████ ████████ ▄████████ ▄█ ▄█▄ ▄████████
██╔══██╗██╔══██╗██║ ██╔╝██╔══██ ███ ███ ███ ███ ███ ▄███▀ ███ ███
███████║██████╔╝█████╔╝ ███████ ███ ███ ███ ███ █████▀ ███ ███
██╔══██║██╔══██╗██╔═██╗ ██╔══██║ ███ ███ ▄███▄▄▄▄██▀ ▄█████▀ ███ ███
████████████████ ███████████ ▀▀███▀▀▀▀▀ ▀▀████▄ ▀███████████
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ███ ███ ▀███████████ ███▐██▄ ███ ███
███ ███ ███ ███ ███ ▀███▄ ███ ███
███ █▀ ███ ███ ███ ▀█▀ ███ █▀
███ ███ ▀
</pre> </pre>
<!-- Navbar --> <!-- Navbar -->
<nav> <nav>
<ul> <ul>
<li><a href="https://blog.arka.rocks">Blog</a></li> <li><a href="https://blog.arka.rocks">Blog</a></li>
<li><a href="https://git.arka.rocks">Gitea</a></li> <li><a href="https://git.arka.rocks">Gitea</a></li>
<li><a href="https://bin.arka.rocks">Encryped Bin</a></li> <li><a href="https://bin.arka.rocks">Encryped Bin</a></li>
<li><a href="https://status.arka.rocks/status/arka">Status</a></li> <li><a href="https://status.arka.rocks/status/arka">Status</a></li>
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
</ul> </ul>
</nav> </nav>
@ -47,28 +50,41 @@
<!-- Main content --> <!-- Main content -->
<main> <main>
<div id="content"> <div id="content">
<h1>ArKa</h1> <h1>╓───── About ─────╖</h1>
<p>ArKA is the name of this group of websites and services maintained by me, Oxbian.</p>
<p>On ArKa you can find a <a href="https://blog.arka.rocks">blog</a> where I talk about good practices in different domains, a <a href="https://git.arka.rocks">git</a> server which contains projects that could be usefull or not for you, and an <a href="https://bin.arka.rocks">encryped</a> text / small files sharing.</p> <div class="h1-content">
<h2>Project made for ArKa</h2> <p>Hello, Im Oxbian, a geek who loves free software, technology ethics and the Unix philosophy. Im fascinated by everything related to computers, and I value privacy and security very highly. <b>Thats why ArKa never collects any data about you, and your security is my top priority.</b></p>
<p>I enjoy cyberpunk and dystopian media, because they show us the potential pitfalls of our society. But I also hope we can move towards a solarpunk future.</p>
<p>Im always eager to learn new things and share my knowledge, which you can find on the <a href="https://wiki.arka.rocks">wiki</a>.</p>
<p>ArKa is the small portion of the web maintained by me, Oxbian. Services I offer are mainly read only (Git server, Wiki, Blog), but I also offer a privatebin instance for sharing data securly and privatly.</p>
<h2> ArKa services </h2>
<p>On this small portion of the web, called ArKa, you can find multiple services. Most of them are read only, for security reason, like my <a href="https://wiki.arka.rocks">wiki</a>, <a href="https://blog.arka.rocks">blog</a>, <a href="https://git.arka.rocks">git server</a>.</p>
<p>There is also some services you can use like an <a href="https://bin.arka.rocks">encrypted bin</a> called privatebin. You can send text / files, they are encrypted, salt, and even myself can't read them. I also recommand you to setup a password for your bin to improve security.</p>
<h2>Projects made for ArKa</h2>
<p>For the needs of ArKa, I made some tools, and software, all are available on the <a href="https://git.arka.rocks/ArKa/">ArKa organization</a> on the git server.</p>
<ul> <ul>
<li>A blog generator, it take markdown files and generate webpages. Fully customisable thanks to the template system. <a href="https://git.arka.rocks/Oxbian/BlogGenerator">BlogGenerator</a></li> <li>A blog generator, it take markdown files and generate webpages. Fully customisable thanks to the template system. <a href="https://git.arka.rocks/Oxbian/BlogGenerator">BlogGenerator</a></li>
<li>A script to send message to someone via Matrix. <a href="https://git.arka.rocks/Oxbian/matrix-sender">Matrix sender</a></li> <li>A script to send message to someone via Matrix. <a href="https://git.arka.rocks/Oxbian/matrix-sender">Matrix sender</a></li>
<li>Some scripts which sends notifications of logwatch, fail2ban to an user via Matrix. <a href="https://git.arka.rocks/Oxbian/matrix-monitoring">Matrix monitoring</a></li> <li>Some scripts which sends notifications of logwatch, fail2ban to an user via Matrix. <a href="https://git.arka.rocks/Oxbian/matrix-monitoring">Matrix monitoring</a></li>
</ul> </ul>
<h2>ArKa philosophy</h2>
<p>The philosophy behind ArKa is to have a server with low maintenance, low ressources use (actually all the public services and others privates services runs on a raspberrypi 4), with fast reponse time.</p> <h2>ArKa philosophy</h2>
<p>The philosophy behind the tools made for ArKa is sustainability, no dependencies garbage like Node or Python, light and speed. </p> <p>The philosophy behind ArKa is to have a server with low maintenance, low ressources usage (actually all the public services and others privates services runs on a raspberrypi 4), with fast reponse time.</p>
<p>The philosophy behind the tools made for ArKa is sustainability, no dependencies garbage like Node or Python, light and speed. I will create most of my tools in POSIX shell and C, and I'm still searching a good solution for web based tools.</p>
</div>
</div> </div>
</main> </main>
<hr> <hr>
<!-- Footer --> <!-- Footer -->
<footer> <footer>
<p>Contact me for any questions, in general I answer quite fast.</p> <p>Contact me for any questions, in general I answer quite fast.</p>
<!-- Contact --> <!-- Contact -->
<div id="contact"> <div id="contact">
<ul> <ul>
<li><a href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li> <li><a href="https://matrix.to/#/@oxbian:matrix.org">Matrix</a></li>
<li><a rel="me" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li> <li><a rel="me" href="https://social.linux.pizza/@Oxbian">Mastodon</a></li>