A Pen by TheOrigins on CodePen.
Created
October 20, 2023 18:28
-
-
Save corvusdeinanis/b8e60f6f0bd9a3176ad5f2e8db15ee98 to your computer and use it in GitHub Desktop.
responsive semantic navbar 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script type="text/javascript" src="https://latest.cactus.chat/cactus.js"></script> | |
| <header> | |
| <input type="checkbox" id="toggle-menu"> | |
| <label class="menu-icon" for="toggle-menu"> | |
| <a id="menu-icon">≡</a> | |
| </label> | |
| <nav> | |
| <li><a href=""> Home </a></li> | |
| <li><a href=""> My Work </a></li> | |
| <li><a href=""> About </a></li> | |
| </nav> | |
| <img class ="mainimage" src="https://astroslair.xyz/assets/img/astromainimage.webp" alt="a computer screen displaying 'astro's lair'"\> | |
| </header> | |
| <main> | |
| <h1> You find yourself in Astro's Lair.</h1> | |
| <p> Here's cup of [insert your favorite beverage] ☕! </p> | |
| <p> A long time ago, corporations did not rule the interwebz. It was a time of creativity, expression, and exploration. This website? It's a love letter to the Internet of yesteryear.</p> | |
| <p> Hang out for a bit. Look around, play some of my <a href="">games</a>, check out some of the <a href ="">projects</a> that have kept me busy, and leave message (really appreciate those)! </p> | |
| </main> | |
| <div class="grid"> | |
| <div id="updatescol"> | |
| <h1>Updates!</h1> | |
| <p><strong>June 12, 2023</strong>Some optimizations, new pages, and more minimal. So minimal that I'm questioning me choosing Bootstrap. All of this could be made using plain old html and css. <em>Maybe that's next...?</em><br><br><strong>June 09, 2023</strong><br>New homepage. Super minimal and if I say so myself, pretty sleek!<br><br><strong>May 24, 2023</strong><br> Another big update! <br>- Yesterweb Ring has been discontinued :( <br>- Added a new commenting system! <a href="https://cactus.chat/">cactus.chat</a> now powers our comment box! It's open-source!<br>- Analytics using <a href="https://umami.is/about">Umami</a>. <em>does not collect any personal information, does not use cookies, does not track users across websites, and is GDPR compliant</em>. Oh, and it's open-source <br>- Astrodex should be live soon <br>- Redesigned the experiments/game page<br>- Updates box looks much neater!<br><br><strong>January 28, 2023</strong><br>BIGGEST update yet! Another rehaul. 💜 I should stop rehaul-ing and start making more content honestly. Currently, we have 27k views, whoop. <br><br><strong>December 11, 2022</strong><br>Another major rehaul. This took me longer than I anticipated. Oh, domain (astroslair dot xyz) expired a month ago. I'm still debating on getting a new one/renewing it. <br><br><strong>August 1, 2022</strong><br>Added my (incomplete) 📕 Codex Vitae/blog/digital garden hodgepodge! It replaces the blog that I had earlier. <br><br><strong>June 30, 2022</strong><br>Things didn't go as planned. The June 10th launch did not happen ;~: But hey! New site is now live :D <br><br><strong>June 10, 2022</strong> <br>Major overhaul 2.0 - Electric Boogaloo! Should work even better on mobile now :D Made a ton of changes. Switched to Bootstrap5. Also we're close to 14k views! <br><br><strong>June 7, 2022</strong> <br>We hit 13,000 views?! What? How? Must be bots crawling the site or something. <br><br>Whoop! We're live and it's my birthday! 🥳🎉 <br><br><strong>Jan 15, 2022</strong><br>Site Redesign! Major overhaul. <br><br>🍰 <strong>Oct 15, 2021</strong> <br>Site Created!! 🎊</p> | |
| </div> | |
| <div id = "chatbox"> | |
| <div id = "chat"> | |
| <script> | |
| initComments({ | |
| node: document.getElementById("chat"), | |
| defaultHomeserverUrl: "https://matrix.cactus.chat:8448", | |
| serverName: "cactus.chat", | |
| siteName: "astroslair", | |
| commentSectionId: "homepage" | |
| }) | |
| </script> | |
| </div> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://latest.cactus.chat/cactus.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css2?family=Belanosima&family=Koulen&display=swap'); | |
| :root { | |
| background: #000; | |
| } | |
| h1 { | |
| font-size:2.2em; | |
| font-family: 'Belanosima'; | |
| text-align: center; | |
| } | |
| p { | |
| font-family: 'Belanosima'; | |
| text-align: center; | |
| } | |
| header { | |
| background-color: black; | |
| font-size:2em; | |
| font-family: monospace; | |
| } | |
| nav { | |
| background-color: black; | |
| color: white; | |
| cursor: pointer; | |
| justify-content: center; | |
| text-align: center; | |
| font-family: 'Koulen'; | |
| } | |
| #menu-icon { | |
| color: white; | |
| cursor: pointer; | |
| display: none; | |
| font-size:1.75em; | |
| text-decoration: none; | |
| } | |
| nav a { | |
| color: white; | |
| } | |
| nav a:hover { | |
| color:white; | |
| background-color:#b70460; | |
| } | |
| #toggle-menu{ | |
| display: none; | |
| } | |
| @media screen and (max-width: 700px) { | |
| nav { | |
| display: none; | |
| position: absolute; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| #menu-icon { | |
| visibility: visible; | |
| display: block; | |
| } | |
| .menu-icon { | |
| z-index: 1; | |
| visibility: visible; | |
| } | |
| #toggle-menu:checked ~ nav { | |
| display: block; | |
| } | |
| } | |
| #mainimage img { | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #updatescol { | |
| display: block; | |
| overflow-y: scroll; | |
| /*margin-bottom: 17px;*/ | |
| background: #380940; | |
| border: 6px pink; | |
| height: 350px; | |
| /*margin-top: 10px;*/ | |
| } | |
| #chatbox { | |
| overflow: auto; | |
| max-height: 350px; | |
| } | |
| .grid { | |
| border: 1px; | |
| margin: 12px; | |
| } | |
| /* cactus chat */ | |
| .cactus-comments-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: .5em | |
| } | |
| .cactus-comment { | |
| display: flex; | |
| flex-direction: row; | |
| gap: 1em; | |
| padding-block-end: .5em; | |
| } | |
| .cactus-comment-avatar { | |
| display: flex | |
| } | |
| .cactus-comment-avatar>* { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| border-radius: 50%; | |
| margin: 0 | |
| } | |
| .cactus-comment-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: .5em | |
| } | |
| .cactus-comment-header { | |
| display: flex; | |
| gap: .5em; | |
| flex-wrap: wrap | |
| } | |
| .cactus-button { | |
| align-items: center; | |
| padding-block: .6em; | |
| padding-inline: 1em; | |
| background-color: purple; | |
| font-weight: 700; | |
| border-radius: 30px; | |
| color: var(--cactus-button-text-color); | |
| font-size: inherit; | |
| } | |
| :root { | |
| --cactus-text-color: white; | |
| --cactus-button-color: #d63384 ; | |
| --cactus-button-text-color: white; | |
| --cactus-comment-time: white; | |
| } | |
| .cactus-editor-textarea { | |
| height: 2.5rem; | |
| } | |
| .cactus-login-form { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2em; | |
| padding: 2rem; | |
| border-radius: var(--cactus-border-radius); | |
| background-color: var(--cactus-background-color--strong); | |
| color: var(--cactus-login-form-text-color); | |
| box-shadow: 0 .5em 1em .5em var(--cactus-box-shadow-color); | |
| box-sizing: border-box; | |
| inline-size: 100%; | |
| max-inline-size: 300px | |
| } | |
| .cactus-login-close { | |
| align-self: flex-end; | |
| position: relative; | |
| margin: -2em; | |
| padding: 0; | |
| color: var(--cactus-button-color); | |
| scale: 2; | |
| background-color: transparent; | |
| border: none | |
| } | |
| .cactus-login-close:hover:not([disabled]) { | |
| color: var(--cactus-button-color--strong); | |
| cursor: pointer | |
| } | |
| .cactus-login-close:active:not([disabled]) { | |
| color: var(--cactus-button-color--stronger); | |
| cursor: pointer | |
| } | |
| .cactus-login-close-icon { | |
| inline-size: 20px; | |
| block-size: 20px | |
| } | |
| .cactus-login-title { | |
| align-self: center; | |
| font-size: 1.17em; | |
| font-weight: 700; | |
| margin: 0 | |
| } | |
| .cactus-login-client { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1em | |
| } | |
| .cactus-login-client-title { | |
| font-size: 1em; | |
| font-weight: 700; | |
| margin: 0 | |
| } | |
| .cactus-matrixdotto-button { | |
| justify-content: center; | |
| text-decoration: none | |
| } | |
| .cactus-login-credentials { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1em | |
| } | |
| .cactus-login-credentials-title { | |
| font-size: 1em; | |
| font-weight: 700; | |
| margin: 0 | |
| } | |
| .cactus-login-field { | |
| display: flex; | |
| flex-direction: column; | |
| gap: .25em | |
| } | |
| .cactus-login-label { | |
| font-size: 1em; | |
| padding-bottom: .25em; | |
| color: var(--cactus-text-color--soft) | |
| } | |
| .cactus-login-error { | |
| margin: 0; | |
| font-size: .8em; | |
| color: var(--cactus-text-color--soft) | |
| } | |
| .cactus-login-field>input { | |
| border-radius: var(--cactus-border-radius); | |
| border: solid var(--cactus-border-width) var(--cactus-border-color); | |
| padding: .5em; | |
| background-color: transparent; | |
| color: inherit; | |
| font-size: inherit | |
| } | |
| .cactus-login-field>input::placeholder { | |
| color: var(--cactus-text-color--soft) | |
| } | |
| .cactus-login-credentials-button { | |
| justify-content: center | |
| } | |
| .cactus-comments-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1em; | |
| text-align: left !important; | |
| } | |
| main { | |
| margin: 2.2rem; | |
| padding: 2.2rem; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://cdn.jsdelivr.net/npm/@picocss/pico@next/css/pico.min.css" rel="stylesheet" /> | |
| <link href="https://unpkg.com/sanitize.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment