Basic Home Page Implementation

* Moves assets from old website
* Basic layout based on old website
* Move home page from old website

public/css/styles.css

@@ -0,0 +1,258 @@
+@font-face {
+	font-family: "VGA437";
+	src: url("/fonts/VGA437.ttf");
+}
+
+:root {
+	--body-bg-image: url("/images/aqua.gif");
+}
+
+* {
+	image-rendering: pixelated;
+	box-sizing: border-box;
+}
+
+
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: Verdana;
+	font-size: 15px;
+	max-width: 900px;
+	margin: auto;
+	background: #ffffd6;
+	background-image: var(--body-bg-image);
+}
+
+p {
+	text-align: justify;
+}
+
+footer {
+	bottom: 0px;
+	left: 0;
+	text-align: center;
+	width: 100%;
+}
+
+.header {
+	text-align: center;
+}
+
+.header nav {
+	display: block;
+}
+
+.header ul,
+footer ul {
+	padding: 0px;
+}
+
+.header ul>li {
+	display: inline-block;
+	text-align: center;
+}
+
+.header ul>li:not(:last-child):after {
+	content: " | ";
+}
+
+.header ul>li a {
+	text-decoration: none;
+	font-size: 15px;
+	color: #000000;
+	font-weight: bold;
+}
+
+.text-center {
+	/* text-align: center; */
+}
+
+footer ul>li {
+	display: inline-block;
+}
+
+footer ul>li>p {
+	margin-block-end: unset;
+	margin-block-start: unset;
+}
+
+.logo-container {
+	padding-top: 10px;
+}
+
+.logo {
+	text-decoration: none;
+	font-family: "VGA437", sans-serif;
+	font-size: 220%;
+	color: #000000;
+}
+
+h4.slogan {
+	margin: 0px;
+}
+
+.mt-10 {
+	margin-top: 10px;
+}
+
+.font-bold {
+	font-weight: bold;
+}
+
+.font-italics {
+	font-style: italic;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+th,
+tr,
+td {
+	border: 1px solid;
+}
+
+table tr {
+	padding-bottom: 10px;
+}
+
+table th {
+	padding-right: 20px;
+}
+
+table td {
+	padding: 10px;
+}
+
+.post-date {
+	font-size: 15px;
+	font-style: italic;
+}
+
+.post-lists li {
+	list-style-type: "◆  ";
+	margin-bottom: 5px;
+}
+
+@media (max-width: 1000px) {
+	body {
+		font-size: 80%;
+		padding: 3%;
+	}
+
+	#blog img {
+		max-width: 80%;
+	}
+}
+
+/* Underline Reveal */
+.hvr-underline-reveal {
+	display: inline-block;
+	vertical-align: middle;
+	-webkit-transform: perspective(1px) translateZ(0);
+	transform: perspective(1px) translateZ(0);
+	box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+	position: relative;
+	overflow: hidden;
+}
+
+.hvr-underline-reveal:before {
+	content: "";
+	position: absolute;
+	z-index: -1;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #000000;
+	height: 2px;
+	-webkit-transform: translateY(4px);
+	transform: translateY(4px);
+	-webkit-transition-property: transform;
+	transition-property: transform;
+	-webkit-transition-duration: 0.3s;
+	transition-duration: 0.3s;
+	-webkit-transition-timing-function: ease-out;
+	transition-timing-function: ease-out;
+}
+
+.hvr-underline-reveal:hover:before,
+.hvr-underline-reveal:focus:before,
+.hvr-underline-reveal:active:before {
+	-webkit-transform: translateY(0);
+	transform: translateY(0);
+}
+
+.tools-container {
+	--auto-grid-min-size: 16rem;
+	display: grid;
+	grid-template-columns: repeat(auto-fill,
+			minmax(var(--auto-grid-min-size), 1fr));
+	grid-gap: 1rem;
+}
+
+.tool {
+	border: 1px solid #000000;
+	width: 252px;
+	margin: 10px;
+	padding: 10px;
+	box-shadow: 2px 6px;
+	background: linen;
+}
+
+img {
+	max-width: 100%;
+}
+
+.tools-container .tool-name * {
+	font-weight: bold;
+	color: #000000;
+}
+
+.tools-container label {
+	font-weight: bold;
+}
+
+p.first-letter::first-letter {
+	font-size: 150%;
+}
+
+.highlight {
+	background: #000000;
+	padding: 2px 5px 2px 5px;
+	color: #ffffff;
+}
+
+.highlight.tags {
+	border-radius: 8px;
+}
+
+.article {
+	line-height: 25px;
+}
+
+.etyone {
+	margin-bottom: 5px;
+}
+
+.gr_grid_container {
+	/* customize grid container div here. eg: width: 500px; */
+}
+
+.gr_grid_book_container {
+	/* customize book cover container div here */
+	float: left;
+	width: 98px;
+	height: 160px;
+	padding: 0;
+	overflow: hidden;
+}
+
+.four-o-four {
+	text-align: center;
+}