Titles get ids

2024-11-07 08:05:54 -05:00 · 2022-12-02 17:45:27 +00:00 · 2022-12-02 17:45:27 +00:00 · ec474e82db
commit ec474e82db
parent c9f9ad3942
3 changed files with 70 additions and 14 deletions
--- a/Styles/thoughts.css
+++ b/Styles/thoughts.css
@ -14,6 +14,7 @@ body {
 .content {
   font-family: "Ubuntu Mono", monospace;
   line-height: 1.7rem;
   transition: .2s;
 }
@ -33,6 +34,21 @@ body {
   line-height: 1.3rem;
   font-size: 1.1rem;
   font-family: serif;
   transition: .2s;
 }
 .tempAlert {
   position: fixed;
   bottom: -10rem;
   right: .5rem;
   transition: .2s;
   opacity: 0;
   background-color: #222;
   color: #eee;
   font-family: monospace;
   font-size: 1.2rem;
   padding: 1rem 2rem;
   border-radius: 2rem;
 }
@media (prefers-color-scheme: dark) {
@ -40,11 +56,21 @@ body {
      background-color: #232326;
      color: #ddd;
   }
   .tempAlert {
      background-color: #FEFDFA;
      color: #222;
   }
 }
-@media only screen and (min-width: 1200px) {
+@media only screen and (min-width: 400px) {
-   .content {
+   .content { padding: 0 0.1rem; }
-     padding: 0 6rem;
+   .article { padding: 0 1rem; }
-     line-height: 1.7rem;
+}
-   }
+
@media only screen and (min-width: 600px) {
   .content { padding: 0 2rem; }
 }
@media only screen and (min-width: 900px) {
   .content { padding: 0 6rem; }
 }
--- a/index.html
+++ b/index.html
@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="The developer Editor Rust's personal website!">
   <link rel="shortcut icon" type="image/x-icon" href="Icons/race.png">
   <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
   <link rel="stylesheet" href="Styles/home.css">
@ -18,10 +20,10 @@
   <div class="content">
      <h1 class="title">Hi! I'm Editor Rust.</h1>
      <center><em>This site is still under active construction, and yes, this is inside a <code>center</code> tag.</em></center>
-      <h2>About me</h2>
+      <h2 id="about-me">About me</h2>
      <p>I'm a high school student who spends just about all their spare time programming. I do mostly full-stack web development, with Node as the backend. I enjoy working with JavaScript and CSS, and am a little <i>too</i> determined to make my websites look perfect. Still waiting to work on a project with someone, and only slightly lonely.</p>
-      <h2>Work</h2>
+      <h2 id="work">Work</h2>
      <p>My current big projects are Git Organized, a project management and planning tool for developer projects, and an unnamed chat project, meant to be an open chat like Twitter, a place to make communities to meet people like you, similar to Discord, and a place for private messaging, like Google Chat. Please check them out, and consider contributing!</p>
      <h3>Old work</h3>
      <p>Some other work I've done include Hillside Township, an imaginary town with a satirical newspaper, where I can exercise my love of creative writing as well as poke fun at politics and technology (Get Hillside Plus, premium citizenship!). Another website is the Schoolarly Bay, a place for research articles. Some of my friends chipped in with articles, and I might come back and fix this.</p>
@ -30,11 +32,11 @@
      <br><br>
      <p>Note that from here on out this website gets very opinionated, so just keep that in mind.</p>
-      <h2>Operating Systems</h2>
+      <h2 id="operating-systems">Operating Systems</h2>
      <p>Linux is the best OS, hands down. Open source, free, a great community, all the features you need and more you don't, and that amazing terminal. What could possibly compete? MacOS has a design that's like 15 years old, and has had no real updates in forever. Also, that price tag! Not everyone has wallets that deep. And Windows is garbage. Also, what's with the new glassmorphism? If only they'd implement it fully. It's just a patched together operating system made for businesses. Also PowerShell is the stuff of nightmares.</p>
      <p>Best mobile operating system is... depends. Linux on mobile is a joke. iOS would be best for ordinary people who are willing to shell out for a better OS. Android has <i>all</i> the options, making it a lot like Linux in many ways. So for anyone who knows what they want out of a device should go with Android. And tablets? Android on tablets is a joke. A kinda sad one. No Windows tablets. iPads would be great for anyone who... has a computer and just wants to doomscroll on their couch. It's useless for any real work. So if you want to use a tablet for work, I suppose you're stuck with a Windows device. Or a Surface Book with Linux. It all comes back to Linux, dosen't it?</p>
-      <h2>Workflow</h2>
+      <h2 id="workflow">Workflow</h2>
      <p>My current workflow includes JSON and Markdown. I know they aren't languages, but still, they're amazing, right? Also, Node, Ejs, Tailwind CSS, MongoDB (if you want the password to my database, just look through my old commits) JavaScript, and obviously CSS and HTML. I believe in cloud IDEs because of convenience,  so I use Github Codespaces for Visual Studio Code. Which is the hands-down best JavaScript IDE, and I am ready to defend that position. Clearly I use GitHub for source control. Note that I use these software because I have tried the competition and still consider these superior.</p>
      <h3>Software</h3>
      <p>I love web apps. I use Inkscape for SVGs (SVGs are amazing, and CSS takes it them to the next level). I use Chrome because of feature support for CSS, but I use Firefox for everything else, because it's not Chromium based. Also Opera is great. I've made attempts to use note apps like Obsidian, but now just... remember? It works, okay? For now anyway.</p>
@ -47,7 +49,7 @@
      <br><br>
-      <h2>Games</h2>
+      <h2 id="games">Games</h2>
      <h3>It's probably best to skip over this</h3>
      <p>Some of my really old work include some games. These early games include dreadful styling and questionable code, so I suggest you proceed with caution.</p>
      <p>Gold Rush was my first game, what really got me into JavaScript and web development. It's an incremental game, inspired by Cookie Clicker. It has exactly one image, and my recent attempts to modernize the UI had made it a disaster zone. Look at me, throwing around terms like UI, and UX, and accessibility. I'm a web designer now, through and through. The game is about as unbalanced math-wise as it gets, and half the ideas are unfinished, but I think I'm done here. Rest easy, Gold Rush.</p>
@ -55,10 +57,10 @@
      <p>Cookin' in the Kitchen is one of my more recent works. It was inspired by an old game I used to play, Cooking Fever. I have hopes of making this multiplayer and all, but I probably won't get to. It was a really cool experiment with drag and drop though.</p>
      <h2>More</h2>
-      <p>Dev jokes! Checkout my list <a href="https://docs.google.com/document/d/e/2PACX-1vRKinOJRXxrcpdMauNaTAzLNVHom4OkadGgdm6ja82330EJFr_5FRw4ThSj71GcjG9Ll_7jh-7mox95/pub">here</a></p>
+      <p>Developer jokes jokes! <a href="https://docs.google.com/document/d/e/2PACX-1vRKinOJRXxrcpdMauNaTAzLNVHom4OkadGgdm6ja82330EJFr_5FRw4ThSj71GcjG9Ll_7jh-7mox95/pub">Check them out</a></p>
      <p>BFF <a href="https://github.com/tildejustin">tildejustin</a>, see his stuff</p>
-      <h2>Funsies</h2>
+      <h2 id="funsies">Funsies</h2>
      <div class="funsies">
         <p>Change the website color theme</p>
         <button onclick="changeThme()">Random</button>
--- a/thoughts.html
+++ b/thoughts.html
@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta name="viewport" content="width=device-width">
   <meta name="description" content="The developer Editor Rust's personal website!">
   <link rel="shortcut icon" type="image/x-icon" href="Icons/race.png">
   <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
@ -14,7 +16,7 @@
   <div class="content">
      <div class="article">
-         <h1>The iMessage Lockin</h1>
+         <h1 id="imessage-lockin" onclick="copy('imessage-lockin')">The iMessage Lockin</h1>
         <h2>Dec 1 2022</h2>
         <p>Apple is known for its "walled garden"; a wonderful lineup of devices that work seamlessly together. But while their products may be great, they don't quite make up for the company's shortcomings, especially their refusal to play nice with other devices. All tech companies have some anti competition problems, like Microsoft trying to be Apple with Windows 11, Office, and Teams. May Steve Jobs protect us all from that horrible future. Every company puts their apps first, pre-installs bloatware, sorry, <i>software</i>, and generally tries to be your one go-to service provider. To make it clear, this is totally a problem that needs to be dealt with, and we can't let Microsoft, Google, Apple or anybody to have a completely locked system, no matter how wonderful. But at least while Android phones are competitors, they all use the same basic standards such as ports and messaging systems.</p>
         <p>Let's start at the beginning. While the concept of SMS had been conceived in the early 80s, it wasn't until the 90s that it was actually implemented. SMS stands for Short Message Service, and supports plain text messages of up to 160 characters. This worked for a while, but by 2002 people wanted more out of messaging, so MMS, Multimedia Messaging Service, was created. It had support for images, links, videos, files, emojis, and more, and was pretty much globally adopted. These systems worked, but in 2007 another standard was created, RCS, or Rich Communication Services, which was officially released in 20016. It standardized features that companies had to individually implement before, as well as adding features from popular messaging apps, like reactions and other small additions that created a smooth texting experience. Additionally, it has much improved security, which is important when texting cross-platform (iMessage uses its own encryption). Basically, it wasn't revolutionary, but it was a great and necessary effort at improving and standardizing texting.</p>
@ -25,7 +27,7 @@
         <p>So far, this has been a one-sided battle. Apple is happy with its messaging monopoly, and has no reason to change anything. Google is not the hero though. While RCS is a great standard and it would benefit all users if Apple adopted it, this isn't about users. I believe in this situation the people at Google really care about users, but that isn't always the case. If they <i>really</i> cared about users, maybe their Pixel devices would cooperate with other devices, or Google wouldn't push their own products so much. This time though, they're right. #GetTheMessage!</p>
      </div>
      <div class="article">
-         <h1>Reject Folding Phones</h1>
+         <h1 id="reject-folding-phones" onclick="copy('reject-folding-phones')">Reject Folding Phones</h1>
         <h2>Dec 1 2022</h2>
         <p>Unless you've been living under a rock for the last few years, you should have noticed a growing trend for foldable phones. Perhaps you thought it was cool, maybe you even considered buying one before you noticed the price. But why could anyone hate them? I'll tell you why it's a bad idea for everyone involved.</p>
         <p>Let's start from the developer side of things. When building an interface, it has to be optimized for different screens. The two difficulties that arise are scale and aspect ratio. You can develop a website or app for a computer, and it won't take much scaling down to fit on a tablet or larger monitor. Some tweaks, yes, but nothing huge. Now developing for phones is different. Multiple OSs aside, these devices are tiny. And even if you turn the device into landscape mode, which no one does, the aspect ratio of the device is completely different, making the UI seem stretched. But that's not all, because every phone maker is determined to make all their devices have a unique shape, and thus, a new screen to be optimized for. You can already see how this is a nightmare, even without counting the separate code bases you'd need for each system, but it was about to get far worse.</p>
@ -53,4 +55,30 @@
      </div>
   </div>
 </body>
 <script>
 let url = document.location.href;
 function copy(txt) {
   let link = `${url}#${txt}`;
   navigator.clipboard.writeText(link).then(() => {
       console.log("Copied link!");
   }, () => { console.log("Error copying link."); });
   let alert = document.createElement("DIV");
   alert.textContent = "Copied Link to Heading!";
   alert.classList.add("tempAlert");
   document.body.appendChild(alert);
   setTimeout(() => {
      alert.style.opacity = "1";
      alert.style.bottom = ".5rem";
   }, 200);
   setTimeout(() => {
      alert.style.opacity = "0";
      alert.style.bottom = "-10rem";
   }, 4200);
   setTimeout(() => {
      alert.remove();
   }, 4400);
 }
 </script>
 </html>