Merge pull request #3 from xiggeush/master

CSS changes
PixelGuys · Apr 28, 2024 · d287562 · d287562
2 parents 6983338 + f758a45
commit d287562
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
         </div>
     </nav>
     <main>
-        <p style="text-align: center;"> <!--Change the "text-align: center" to "display none" if you want it gone.-->
+        <p class="intro"> <!--Change the "text-align: center" to "display none" if you want it gone.-->
             Embark on an thrilling journey across vast landscapes, <br>exploring the deepest of caves <br>unseen by
             daylight.
             Discover ancient minerals, untouched by time, <br>as you discover more in this forgotten
@@ -90,6 +90,7 @@
         <div>
             <a href="?">Legal</a>
             <a href="?">Guidelines</a>
+                <br />
             <a href="https://github.com/pixelguys/Cubyz">Github</a>
             <a href="https://www.youtube.com/@quantumdeveloper2733">Youtube</a>
             <a href="https://discord.gg/XtqCRRG">Discord</a>

diff --git a/styles.css b/styles.css
@@ -17,7 +17,7 @@
 
 ::-webkit-scrollbar {
     height: 15px;
-    width: 15px;
+    width: 10px;
 }
 
 ::-webkit-scrollbar-track {
@@ -82,6 +82,16 @@ footer {
     width: 100%;
 }
 
+footer a {
+    margin-right: 5px;
+    text-decoration: none;
+}
+
+footer a:hover, footer:active {
+    color: #fff;
+    transition: 0.2s;
+}
+
 footer div {
     padding: 50px 0px 30px 0px;
     text-align: center;
@@ -116,18 +126,18 @@ nav {
     background-size: 64px;
     width: 150px;
     height: 30px;
+    overflow: hidden;
 }
 
 .banner {
-    width: 1200px;
     height: 200px;
     object-fit: cover;
     display: block;
     margin: auto;
 }
 
 .banner img {
-    width: 1200px;
+    width: 100%;
     height: 200px;
     object-fit: cover;
     display: block;
@@ -152,10 +162,18 @@ nav {
 }
 
 .banner div {
+    background-image: url(assets/textures/void_stone.png);
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    background-size: 64px;
     display: flex;
     position: absolute;
-    top: 10px;
-    left: 10px;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    max-width: 100%;
+    /* width: 100%;*/
 }
 
 .banner p {
@@ -168,12 +186,34 @@ nav {
 
 .banner a {
     padding: 10px;
+    float: left;
+    display: block;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+    font-size: 17px;
+}
+
+.banner a:hover, .banner a:active {
+    color: #fff;
+    transition: 0.2s;
+}
+
+p.intro {
+    text-align: center;
+    margin-top: 3em;
+    margin-bottom: 3em;
 }
 
 a {
     color: #9090ff;
 }
 
+a:hover, a:active {
+    color: #fff;
+    transition: 0.2s;
+}
+
 main {
     max-width: 800px;
     margin: auto;
@@ -200,7 +240,7 @@ main img {
     image-rendering: -moz-crisp-edges;
     image-rendering: crisp-edges;
     background-size: 64px;
-    padding: 4px;
+    padding: 10px;
     box-shadow: inset 0 0 10px #000000;
     font-size: 18px;
 }