added games list to front page, alphabetised css

diff --git a/index.html b/index.html
index 4e51457b7fb4500783314cc23ed8c0d190fabb2f..5d18cb824094d4958b3e95d5d1a0a33c87fdafe1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -93,6 +93,13 @@
               </a>
               <h3 class="datestamp">2025</h3>
             </div>
+            <div class="title-block">
+              <a
+                class="blog-title indented"
+                href="diversions/hentaigames/list.html"
+                ><h4>↪ List of Games (updated 01/03/2025)</h4>
+              </a>
+            </div>
           </div>
         </div>
       </div>

diff --git a/main.css b/main.css
index e8e9c4540ebc66b25b680f5869b4fbccc46fbab5..83040568b1f22dc55716a74508134f5d5c63e8c1 100644 (file)
--- a/main.css
+++ b/main.css
@@ -7,22 +7,37 @@
     font-family: 'Source Code Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
-.header {
-    max-width: 1000px;
+body {
+    font-family: 'Source Code Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: bisque;
+    color: black;
+}
+
+.blog-title {
+    flex: 1;
+}
+
+.blog-img {
+    padding: 10px;
+    display: block;
     margin: 0 auto;
+    max-width: 250px;
 }
 
-.container{
+.blog-img-lrg {
+    padding: 10px;
+    display: block;
+    margin: 0 auto;
+    max-width: 600px;
+}
+
+.container {
     padding-top: 10px;
     padding-bottom: 10px;
 }
 
-.main {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 20px;
-    background-color: beige;
-    border-radius: 25px;
+.content {
+    color: black;
 }
 
 .embed-title{
@@ -49,26 +64,42 @@
     border: 0;
 }
 
-.marquee-heading{
-    color:crimson
+.footer {
+    max-width: 800px;
+    margin: 0 auto;
+    padding-top: 10px;
+    background-color: antiquewhite;
+    border-radius: 25px;
 }
 
-.heading {
-    color: dimgray;
+.footer-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding-bottom: 10px;
 }
 
-.title-block{
-    display:flex;
-    padding-top: 5px;
-    padding-bottom: 5px;
+.footer-entry {
+    display: inline-block;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.header {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.heading {
+    color: dimgray;
 }
 
-.blog-title{
-    flex:1;
+.icon {
+    width: 48px;
 }
 
-.content{
-    color:black;
+.indented {
+    margin-left: 15px;
 }
 
 .links{
@@ -92,43 +123,33 @@
     margin-right: 5px;
 }
 
-.footer{
+.main {
     max-width: 800px;
     margin: 0 auto;
-    padding-top: 10px;
-    background-color:antiquewhite;
+    padding: 20px;
+    background-color: beige;
     border-radius: 25px;
 }
 
-.footer-container{
-    display:flex;
-    justify-content: center;
-    align-items: center;
-    padding-bottom:10px;
+.marquee-heading {
+    color: crimson
 }
 
-.footer-entry{
-    display: inline-block;
-    padding-left:5px;
-    padding-right:5px;
-}
-
-.icon{
-    width: 48px;
+p {
+    margin-bottom: 10px;
 }
 
-.blog-img {
-    padding: 10px;
-    display: block;
-    margin: 0 auto;
-    max-width: 250px;
+.title-block {
+    display: flex;
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
 
-.blog-img-lrg {
-    padding: 10px;
-    display: block;
-    margin: 0 auto;
-    max-width: 600px;
+ul {
+    margin-top: 10px;
+    margin-left: 25px;
+    margin-right: 25px;
+    margin-bottom: 10px;
 }
 
 .video-embed{
@@ -138,21 +159,4 @@
     margin: 0 auto;
     padding-top: 10px;
     padding-bottom: 10px;
-}
-
-body{
-    font-family: 'Source Code Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: bisque;
-    color: black;
-}
-
-ul{
-    margin-top: 10px;
-    margin-left: 25px;
-    margin-right: 25px;
-    margin-bottom: 10px;
-}
-
-p{
-    margin-bottom: 10px;
 }
\ No newline at end of file