standard galactic alphabet button

public/css/classes.css

@@ -147,7 +147,7 @@
     color: #4c4f69;
     border-radius: 5px;
     padding: 10px 25px;
-    font-family: 'Lato', sans-serif;
+    font-family: system-ui, sans-serif;
     font-weight: 500;
     background: transparent;
     cursor: pointer;

public/css/galactic-classes.css

@@ -0,0 +1,255 @@
+@font-face {
+    font-family: standardGalactic;
+    src: url(/fonts/galactic.ttf);
+}
+
+
+.content {}
+
+.column {
+    float: left;
+    width: 50%;
+}
+
+/* Clear floats after the columns */
+.row:after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+.navbar-menu {
+    flex-grow: initial !important;
+    flex-shrink: initial !important;
+}
+
+.navbar {
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    padding-top: 7px;
+    padding-bottom: 7px;
+}
+
+.navbar-item {
+    font-size: medium;
+    padding-right: 10px;
+    padding-left: 10px;
+    margin-top: 5px;
+}
+
+.navbar .navbar-menu {
+    flex-grow: initial;
+    flex-shrink: initial;
+}
+
+.astro-a {
+    position: absolute;
+    top: -32px;
+    left: 50%;
+    transform: translatex(-50%);
+    width: 220px;
+    height: auto;
+    z-index: -1;
+}
+
+.text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+}
+
+.instructions {
+    margin-bottom: 2rem;
+    border: 1px solid rgba(var(--accent-light), 25%);
+    background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
+    padding: 1.5rem;
+    border-radius: 8px;
+    text-align: center;
+}
+
+.instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    background: rgba(var(--accent-light), 12%);
+    color: rgb(var(--accent-light));
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+    text-align: center;
+}
+
+.instructions strong {
+    color: rgb(var(--accent-light));
+}
+
+.link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
+}
+
+.title {
+    font-size: 55px;
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+}
+
+.astro-a {
+    position: absolute;
+    top: -32px;
+    left: 50%;
+    transform: translatex(-50%);
+    width: 220px;
+    height: auto;
+    z-index: -1;
+}
+
+.text-gradient {
+    background-image: var(--accent-gradient);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-size: 400%;
+    background-position: 0%;
+}
+
+.instructions {
+    margin-bottom: 2rem;
+    border: 1px solid rgba(var(--accent-light), 25%);
+    background: linear-gradient(rgba(var(--accent-dark), 66%),
+            rgba(var(--accent-dark), 33%));
+    padding: 1.5rem;
+    border-radius: 8px;
+}
+
+.instructions code {
+    font-size: 0.8em;
+    font-weight: bold;
+    background: rgba(var(--accent-light), 12%);
+    color: rgb(var(--accent-light));
+    border-radius: 4px;
+    padding: 0.3em 0.4em;
+}
+
+.instructions strong {
+    color: rgb(var(--accent-light));
+}
+
+.link-card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
+    gap: 2rem;
+    padding: 0;
+}
+
+.custom-btn {
+    width: 130px;
+    height: 40px;
+    color: #4c4f69;
+    border-radius: 5px;
+    padding: 10px 25px;
+    font-family: standardGalactic;
+    font-weight: 500;
+    background: transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    position: relative;
+    display: inline-block;
+    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, .5),
+        7px 7px 20px 0px rgba(0, 0, 0, .1),
+        4px 4px 5px 0px rgba(0, 0, 0, .1);
+    outline: none;
+}
+
+/* 8 */
+.btn-1 {
+    background-color: #c6d0f5;
+    background-image: linear-gradient(315deg, #c6d0f5 0%, #fab387 74%);
+    line-height: 42px;
+    padding: 0;
+    border: none;
+}
+
+.btn-1 span {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.btn-1:before,
+.btn-1:after {
+    position: absolute;
+    content: "";
+    right: 0;
+    bottom: 0;
+    background: #fab387;
+    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
+                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
+      inset -4px -4px 6px 0 rgba(255,255,255,.5),
+      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+    transition: all 0.3s ease;
+}
+
+.btn-1:before {
+    height: 0%;
+    width: 2px;
+}
+
+.btn-1:after {
+    width: 0%;
+    height: 2px;
+}
+
+.btn-1:hover:before {
+    height: 100%;
+}
+
+.btn-1:hover:after {
+    width: 100%;
+}
+
+.btn-1:hover {
+    background: transparent;
+}
+
+.btn-1 span:hover {
+    color: #fab387;
+}
+
+.btn-1 span:before,
+.btn-1 span:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    top: 0;
+    background: #fab387;
+    /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
+                -4px -4px 6px 0 rgba(116, 125, 136, .2), 
+      inset -4px -4px 6px 0 rgba(255,255,255,.5),
+      inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
+    transition: all 0.3s ease;
+}
+
+.btn-1 span:before {
+    width: 2px;
+    height: 0%;
+}
+
+.btn-1 span:after {
+    height: 2px;
+    width: 0%;
+}
+
+.btn-1 span:hover:before {
+    height: 100%;
+}
+
+.btn-1 span:hover:after {
+    width: 100%;
+}

public/css/galactic.css

@@ -0,0 +1,68 @@
+@import "galactic-classes.css";
+
+:root {
+    background: repeat url("/assets/background.png");
+    -webkit-background-size: repeat;
+    -moz-background-size: cover;
+    -o-background-size: cover;
+    background-size: repeat;
+
+    --accent: 250, 179, 135;
+    --accent-light: 250, 221, 201;
+    --accent-dark: 149, 106, 81;
+    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
+
+    font-family:standardGalactic;
+}
+
+html {
+    background: #13151a;
+    background-size: 224px;
+}
+
+main {
+    margin: auto;
+    padding: 1rem;
+    width: 800px;
+    max-width: calc(100% - 2rem);
+    color: white;
+    font-size: 20px;
+    line-height: 1.6;
+}
+
+audio {
+    width: 100%;
+}
+
+h1 {
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    text-align: center;
+    margin-bottom: 1em;
+}
+
+a:link {
+    color: #89b4fa
+}
+
+a:visited {
+    color: #b4befe
+}
+
+a:hover {
+    color: #89dceb
+}
+
+hr {
+    width: 32%;
+    color: #6e738d;
+}
+
+body {
+    color: #cdd6f4
+}
+
+p {
+    color: #cdd6f4
+}

public/fonts/galactic-LICENSE.md

@@ -0,0 +1,3 @@
+***Note of the author***
+
+From "Commander Keen"

public/scripts/galactic-font.js

@@ -0,0 +1,14 @@
+function toggleTheme() { 
+    // Obtains an array of all <link> 
+    // elements. 
+    // Select your element using indexing. 
+    var theme = document.getElementsByTagName('link')[0]; 
+
+    // Change the value of href attribute  
+    // to change the css sheet. 
+    if (theme.getAttribute('href') == '/css/mystyle.css') { 
+        theme.setAttribute('href', '/css/galactic.css'); 
+    } else { 
+        theme.setAttribute('href', '/css/mystyle.css'); 
+    } 
+} 

src/layouts/Layout.astro

@@ -24,5 +24,6 @@ const { title } = Astro.props;
     </section>
     <Footer />
     <script type='text/javascript' src='/scripts/fuckchrome.js'></script>
+    <script type='text/javascript' src='/scripts/galactic-font.js'></script>
   </body>
 </html>

src/pages/index.astro

@@ -56,7 +56,8 @@ import Card from "../components/Card.astro";
       <p><a href="mailto:bm01@limepot.xyz">==> Email</a></p>
       <p><a href="https://steamcommunity.com/id/limepot/">==> Steam</a></p>
       <p><a href="https://ouroboros.gay/@limepot">==> The Fediverse</a><a href="https://jointhefediverse.net/"><span style="color: #fab387;">*</span></a></p>
-
+      <hr>
+      <button style="width:300px" class="custom-btn btn-1" type="button" onclick="toggleTheme()">Standard Galactic Alphabet Switcher</button> 
     </div>
   </main>
 </Layout>