UPDATE: blog style & content

author: Oxbian <got.dacs@slmail.me> 2023-12-06 20:39:45 +0100
committer: Oxbian <got.dacs@slmail.me> 2023-12-06 20:39:45 +0100
commit: df2d86f9a795b4f1826c3d1d02638bd1eb873227 (patch)
tree: b6692e3c6afc6599945e27afee1cad0c8d918573
parent: 1edc13b09b75737d26ee5969543c14da7b18c74b (diff)
download: ArKa-Web-df2d86f9a795b4f1826c3d1d02638bd1eb873227.tar.gz
ArKa-Web-df2d86f9a795b4f1826c3d1d02638bd1eb873227.zip
4 files changed, 85 insertions, 52 deletions
diff --git a/README.md b/README.md
index 7f73569..b25b342 100644
--- a/README.md
+++ b/README.md
@@ -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.
 
diff --git a/assets/fonts/BlockZone.ttf b/assets/fonts/BlockZone.ttf
new file mode 100644
index 0000000..0369147
--- /dev/null
+++ b/assets/fonts/BlockZone.ttf
diff --git a/assets/style/style.css b/assets/style/style.css
index b2e7eb0..e06fb1b 100644
--- a/assets/style/style.css
+++ b/assets/style/style.css
@@ -1,19 +1,24 @@
+@font-face {
+  font-family: "BlockZone";
+  src: url("../fonts/BlockZone.ttf") format("truetype");
+}
+
 /* Root */
 :root 
 {
     /* Dark mode */
-    --dark-bg: #0d0d0d;
-    --dark-text: #ffdab9;
-    --dark-link: black;
+    --dark-bg: #191919;
+    --dark-text: #BBBBBB;
+    --dark-link: #191919;
     --dark-link-bg: #f08080;
     --dark-title: #f08080;
 
     /* Light mode */
     --light-bg: #ffdab9;
-    --light-text: #0d0d0d;
-    --light-link: black;
-    --light-link-bg: #f08080;
-    --light-title: #f08080;
+    --light-text: #191919;
+    --light-link: #191919;
+    --light-link-bg: #DE6E7C;
+    --light-title: #DE6E7C;
 
     /* Default mode */
     --bg-color: var(--dark-bg);
@@ -31,9 +36,11 @@ body
     color: var(--text-color);
     border: 1px solid var(--link-bg-color);
 
+	font-size: calc(10px + 0.390625vw);
+	font-family: "BlockZone";
+
     width: 90vw;
-    margin-left: auto;
-    margin-right: auto;
+    margin: 0 auto;
     text-align: center;
 }
 
@@ -123,7 +130,16 @@ h1, h2, h3, h4 {
 }
 
 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 
@@ -131,21 +147,20 @@ h1 {
     margin-bottom: 2vh;
 }
 
-/* Responsive design */
 @media screen and (max-width: 700px) 
 {
     body 
     {
-	font-size: 10px;
+		font-size: 10px;
     }
 }
 
-@media screen and (max-width: 500px) 
+@media screen and (max-width: 600px) 
 {
     nav ul, #contact ul
     {
-	flex-direction: column;
-	gap: 0.5rem;
+		flex-direction: column;
+		gap: 0.5rem;
     }
 }
 
@@ -154,11 +169,11 @@ h1 {
 {
     :root 
     {
-	--bg-color: var(--dark-bg);
-	--text-color: var(--dark-text);
-	--link-color: var(--dark-link);
-	--link-bg-color: var(--dark-link-bg);
-	--title-color: var(--dark-title);
+		--bg-color: var(--dark-bg);
+		--text-color: var(--dark-text);
+		--link-color: var(--dark-link);
+		--link-bg-color: var(--dark-link-bg);
+		--title-color: var(--dark-title);
     }
 }
 
@@ -167,10 +182,10 @@ h1 {
 {
     :root
     {
-	--bg-color: var(--light-bg);
-	--text-color: var(--light-text);
-	--link-color: var(--light-link);
-	--link-bg-color: var(--light-link-bg);
-	--title-color: var(--light-title);
+		--bg-color: var(--light-bg);
+		--text-color: var(--light-text);
+		--link-color: var(--light-link);
+		--link-bg-color: var(--light-link-bg);
+		--title-color: var(--light-title);
     }
 }
diff --git a/index.html b/index.html
index a29550b..cdacf0c 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html lang="fr">
+<html lang="en">
 <head>
     <!-- Metadata -->
     <meta charset="UTF-8">
     <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:url" content="https://arka.rocks">
     <meta property="og:type" content="website">
-    <meta property="og:description" content="ArKa">
+    <meta property="og:description" content="ArKa main page">
     <!-- Style -->
     <link rel="stylesheet" href="assets/style/style.css">
     <link rel="shortcut icon" href="assets/favicon/favicon.ico" type="image/x-icon">
@@ -24,21 +24,24 @@
 
         <!-- ASCII ART -->
         <pre>
-█████╗ ██████╗ ██╗  ██╗ █████╗ 
-██╔══██╗██╔══██╗██║ ██╔╝██╔══██╗
-███████║██████╔╝█████╔╝ ███████║
-██╔══██║██╔══██╗██╔═██╗ ██╔══██║
-██║  ██║██║  ██║██║  ██╗██║  ██║
-╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝╚═╝  ╚═╝
+   ▄████████    ▄████████    ▄█   ▄█▄    ▄████████ 
+  ███    ███   ███    ███   ███ ▄███▀   ███    ███ 
+  ███    ███   ███    ███   ███▐██▀     ███    ███ 
+  ███    ███  ▄███▄▄▄▄██▀  ▄█████▀      ███    ███ 
+▀███████████ ▀▀███▀▀▀▀▀   ▀▀█████▄    ▀███████████ 
+  ███    ███ ▀███████████   ███▐██▄     ███    ███ 
+  ███    ███   ███    ███   ███ ▀███▄   ███    ███ 
+  ███    █▀    ███    ███   ███   ▀█▀   ███    █▀  
+               ███    ███   ▀                      
         </pre>
         
         <!-- Navbar -->
         <nav>
             <ul>
                 <li><a href="https://blog.arka.rocks">Blog</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://status.arka.rocks/status/arka">Status</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://status.arka.rocks/status/arka">Status</a></li>
                 <li><a href="#contact">Contact</a></li>
             </ul>
         </nav>
@@ -47,28 +50,41 @@
     <!-- Main content -->
     <main>
         <div id="content">
-            <h1>ArKa</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>
-	    <h2>Project made for ArKa</h2>
+			<h1>╓───── About ─────╖</h1>
+
+			<div class="h1-content">
+			<p>Hello, I’m Oxbian, a geek who loves free software, technology ethics and the Unix philosophy. I’m fascinated by everything related to computers, and I value privacy and security very highly. <b>That’s 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>I’m 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>
-		<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>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>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>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>
-	    <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>
-	    <p>The philosophy behind the tools made for ArKa is sustainability, no dependencies garbage like Node or Python, light and speed. </p>
+	    
+	    	<h2>ArKa philosophy</h2>
+	    	<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>
     </main>
     <hr>
 
     <!-- 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 -->
-        <div id="contact">
+		<!-- Contact -->
+		<div id="contact">
             <ul>
                 <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>
author	Oxbian <got.dacs@slmail.me>	2023-12-06 20:39:45 +0100
committer	Oxbian <got.dacs@slmail.me>	2023-12-06 20:39:45 +0100
commit	df2d86f9a795b4f1826c3d1d02638bd1eb873227 (patch)
tree	b6692e3c6afc6599945e27afee1cad0c8d918573
parent	1edc13b09b75737d26ee5969543c14da7b18c74b (diff)
download	ArKa-Web-df2d86f9a795b4f1826c3d1d02638bd1eb873227.tar.gz ArKa-Web-df2d86f9a795b4f1826c3d1d02638bd1eb873227.zip