Updated look-and-style of page especially index

5 files changed, 69 insertions, 33 deletions

diff --git a/cylo.png b/cylo.png
deleted file mode 100644
index 0436075..0000000
--- a/cylo.png
+++ /dev/null
diff --git a/favicon.png b/favicon.png
new file mode 100644
index 0000000..2abbbfa
--- /dev/null
+++ b/favicon.png
diff --git a/index.html b/index.html
index 8d1b50e..5244aa3 100644
--- a/index.html
+++ b/index.html
@@ -3,24 +3,24 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="author" content="aki">
-<meta name="tags" content="homepage, programming">
-<link rel="icon" type="image/png" href="cylo.png">
+<meta name="tags" content="homepage, software engineering, hardware engineering">
+<link rel="icon" type="image/png" href="favicon.png">
 <link rel="stylesheet" type="text/css" href="style.css">
 
 <title>Ignore</title>
 
-<header>
-<h1><img src="cylo.png" alt="Ignore"></h1>
-</header>
+<h1 style="display: none;">Ignore</h1>
 
-<nav>
-<h2>Index</h2>
-<ul>
-	<li><a href="#blog">Blog</a>
-	<li><a href="https://git.ignore.pl">Public Git Repositories</a>
-	<li><a href="graveyard_of_the_drawings.html">Graveyard of the Drawings</a>
-	<li><a href="faq.html">Frequently Asked Questions</a>
-</ul>
+<section id="about">
+<img id="profile-picture" src="profile.png">
+<p id="introduction">Welcome to my website! Over the Internet I usually go by <em>Aki</em>. I'm interested in creative
+work, primarily focused on software and hardware engineering. I post here my projects, experiments, and whatever else.
+</section>
+
+<hr>
+
+<section id="projects">
+<h2>Projects</h2>
 <ul>
 	<li><a href="https://derelict.ignore.pl">Derelict</a> —
 		3D visualizations of after the battle wreckage fields for EVE Online
@@ -30,10 +30,11 @@
 	<li><a href="https://ignore.pl/starshatter/">Starshatter: The Open Source Project</a> —
 		A military space combat simulator set in distant future based on original Starshatter game
 </ul>
-</nav>
+<p>See more: <a href="https://git.ignore.pl">Public Git Repositories</a>
+</section>
 
-<section id="blog">
-<h2>Blog</h2>
+<section id="posts">
+<h2>Posts</h2>
 <ul>
 <li>	<a href="lets_not_store_versions_in_versioned_files.html">Let's Not Store Versions in Versioned Files</a><br>
 	<time>2022-07-02</time>
diff --git a/profile.png b/profile.png
new file mode 100644
index 0000000..8c08543
--- /dev/null
+++ b/profile.png
diff --git a/style.css b/style.css
index 619fcbe..793a411 100644
--- a/style.css
+++ b/style.css
@@ -6,7 +6,7 @@ body {
 }
 
 p, dd {
-	line-height: 140%;
+	line-height: 1.4em;
 	text-align: justify;
 }
 
@@ -15,24 +15,31 @@ p, dd, pre {
 }
 
 h1, h2, h3, h4, h5, h6 {
-	color: #3482a5;
-	margin-bottom: 0.2em;
+	font-weight: normal;
+	margin: 1.5em 0 0.2em 0;
 }
 
-.subtitle {
-	color: #999;
-	margin-top: 0.2em;
-	font-size: 90%;
-	text-align: center;
+article h2,
+article h3,
+article h4,
+article h5,
+article h6,
+article .subtitle {
+	border-bottom: 1px dashed #999;
+	padding: 0 0 0.2em 0;
 }
 
-#blog ul li {
-	margin-bottom: 0.4em;
+hr {
+	border-style: dashed;
+	border-color: #999;
+	border-width: 0 0 1px 0;
 }
 
-ul time {
-	font-size: 80%;
+.subtitle {
 	color: #999;
+	margin-top: 0.2em;
+	font-size: 90%;
+	text-align: center;
 }
 
 pre {
@@ -42,7 +49,8 @@ pre {
 }
 
 code {
-	font-weight: bold;
+	background-color: #f0f0f0;
+	padding: 0 1px;
 }
 
 img {
@@ -58,19 +66,21 @@ article > header > *, article > h1 {
 	text-align: center;
 }
 
-a:link {
+a:link,
+a:visited.always-fresh {
 	color: #0e42ef;
 }
 
-a:link:hover {
+a:link:hover,
+a:visited.always-fresh {
 	background: #0e42ef36;
 }
 
-a:visited {
+a:visited:not(.always-fresh) {
 	color: #6f0eef;
 }
 
-a:visited:hover {
+a:visited:hover:not(.always-fresh) {
 	background: #6f0eef36;
 }
 
@@ -79,3 +89,28 @@ a:active:hover {
 	color: #e0083b;
 	background: #e0083b36;
 }
+
+#about {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+#profile-picture {
+	display: block;
+	margin: 1em 1em 1em 0;
+	max-height: 4em;
+}
+
+#introduction {
+	flex: 1;
+}
+
+#posts li {
+	margin-bottom: 0.2em;
+}
+
+#posts time {
+	font-size: 80%;
+	color: #999;
+}