css, new post

CrackTheCode016 · Oct 1, 2023 · 84a1068 · 84a1068
1 parent d422219
commit 84a1068
Show file tree

Hide file tree

Showing 6 changed files with 174 additions and 117 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,9 @@ A Wasm-based, low effort blog that loads MD/MDx files. Made with [Trunk] and [Ye
 
 Posts are stored via `posts/` in the project's root, which Trunk copies over on build.  Wasm bindings are used to call `fetch`, where the post is rendered as HTML and displayed.   
 
-**Note:** please do not delete `metadata.json` - it's used for loading posts!  It is autogenerated on each build, where it parses each post's header:
+> **Note:** please do not delete `metadata.json` - it's used for loading posts!  It is autogenerated on each build, where it parses each post's header:
+>
+> The `id` must also match the **filename**! (`id: example` -> `example.md`)
 
 ```md
 ---

diff --git a/index.scss b/index.scss
@@ -1,23 +1,24 @@
 html,
 body {
-  font-family: 'Ubuntu';
-  height: 100%;
-  margin: 0;
-  background: #212129;
-  background-image: radial-gradient(#3d3e51 1px, transparent 0);
-  background-size: 40px 40px;
-  background-position: -19px -19px;
-  color: beige;
-  animation: animatedBackground 40s linear infinite alternate;
+    font-family: 'Ubuntu';
+    height: 100%;
+    margin: 0;
+    background: #212129;
+    background-image: radial-gradient(#3d3e51 1px, transparent 0);
+    background-size: 40px 40px;
+    background-position: -19px -19px;
+    color: beige;
+    animation: animatedBackground 40s linear infinite alternate;
 }
 
 @keyframes animatedBackground {
-  0% {
-    background-position: top left;
-  }
-  100% {
-    background-position: bottom right;
-  }
+    0% {
+        background-position: top left;
+    }
+
+    100% {
+        background-position: bottom right;
+    }
 }
 
 // pallette
@@ -29,149 +30,177 @@ body {
 // #4c5265 (76,82,101)
 
 button {
-  color: rgb(245, 245, 220);
-  background-color: #40445a;
-  border-radius: 8px;
-  padding: 8px 8px 10px 10px;
-  border: none;
-  font-weight: bold;
-  margin: 4px;
+    color: rgb(245, 245, 220);
+    background-color: #40445a;
+    border-radius: 8px;
+    padding: 8px 8px 10px 10px;
+    border: none;
+    font-weight: bold;
+    margin: 4px;
 }
 
 button:hover {
-  background-color: #3d3e51;
+    background-color: #3d3e51;
 }
 
 nav {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  flex-direction: column;
-  padding-top: 5%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    flex-direction: column;
+    padding-top: 5%;
 }
 
 nav img {
-  max-width: 80px;
-  border-radius: 50%;
+    max-width: 80px;
+    border-radius: 50%;
 }
 
 main {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 30px;
 }
 
 h1 {
-  font-size: 2rem;
+    font-size: 2rem;
 }
 
 code {
-  margin: 0px 4px 0px 4px;
-  font-size: larger;
+    margin: 0px 4px 0px 4px;
+    font-size: larger;
+    white-space: pre-line;
 }
 
- .bar {
-  display: flex;
-  fill: beige;
-  width: 100%;
-  margin: 10px 10px 10px 0px;
-  height: 2px;
-  border-radius: 10px;
-  background-color: rgb(245, 245, 220)dc;
+.bar {
+    display: flex;
+    fill: beige;
+    width: 100%;
+    margin: 10px 10px 10px 0px;
+    height: 2px;
+    border-radius: 10px;
+    background-color: rgb(245, 245, 220)dc;
 }
 
 // BLOG
 
 .body {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  align-items: center;
-  justify-content: center;
-  background-color: #3d3e51;
-  flex-grow: 1;
-  border-radius: 8px;
-  opacity: .75;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    background-color: #3d3e51;
+    flex-grow: 1;
+    border-radius: 8px;
+    opacity: .75;
 }
 
 .full {
-  width: 90%;
+    width: 90%;
 }
 
-.list, .list-header, .list-body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 15px;
+.list,
+.list-header,
+.list-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 15px;
 }
 
 .list-body button {
-  align-self: center;
+    align-self: center;
 }
 
 .list-item {
-  border-radius: 8px;
-  padding: 10px;
+    border-radius: 8px;
+    padding: 10px;
 }
 
 .list-item:hover {
-  animation: fadeIn 0.5s;
+    animation: fadeIn 0.25s;
+    background-color: rgba(33, 33, 41, 1);
 }
 
 @keyframes fadeIn {
-  0% { background-color: rgba(33, 33, 41,0.1); }
-  100% { background-color: rgba(33, 33, 41,1); }
+    0% {
+        background-color: rgba(33, 33, 41, 0.1);
+    }
+
+    100% {
+        background-color: rgba(33, 33, 41, 1);
+    }
 }
 
 .post {
-  display: flex;
-  flex-direction: column;
-  padding: 5% 10% 10% 10%;
-  background-color: rgba(64,68,90,0.75);
-  box-shadow: 2px 10px 34px 5px rgba(64,68,90,0.44);
-  h1 {
-    font-size: 5.9vw;
-  }
-  h2 {
-    font-size: 3.0vh;
-  }
-  p {
-    font-size: 2vmin;
-  }
-  li {
-    font-size: 2vmin;
-  }
+    display: flex;
+    flex-direction: column;
+    padding: 5% 10% 10% 10%;
+    background-color: rgba(64, 68, 90, 0.75);
+    box-shadow: 2px 10px 34px 5px rgba(64, 68, 90, 0.44);
+
+    h1 {
+        font-size: 5.9vw;
+    }
+
+    h2 {
+        font-size: 5.0vh;
+    }
+
+    h3 {
+        font-size: 4.1vh;
+    }
+
+    p {
+        font-size: 2.7vmin;
+    }
+
+    li {
+        font-size: 4vmin;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    .post {
+        p {
+            font-size: 4.5vmin;
+        }
+    }
 }
 
+
 .post hr {
-  width: 100%;
+    width: 100%;
 }
 
 .post img {
-  max-width: 65%;
-  box-shadow: 2px 10px 10px 5px rgba(0,0,0,0.1);
-  margin-left: 17.5%;
-  margin-right: 17.5%;
+    max-width: 65%;
+    box-shadow: 2px 10px 10px 5px rgba(0, 0, 0, 0.1);
+    margin-left: 17.5%;
+    margin-right: 17.5%;
 }
 
 .post a {
-  color: beige;
+    color: beige;
 }
 
 .post p img {
-  display: flex;
-  justify-self: center;
-  justify-content: center;
+    display: flex;
+    justify-self: center;
+    justify-content: center;
 }
 
-.post .info, .date, .author {
-  font-style: italic;
-  color: rgba(245, 245, 220, 0.5);
+.post .info,
+.date,
+.author {
+    font-style: italic;
+    color: rgba(245, 245, 220, 0.5);
 }
 
 .info {
-  display: flex;
-  justify-content: space-between;
-}
+    display: flex;
+    justify-content: space-between;
+}
diff --git a/posts/metadata.json b/posts/metadata.json
@@ -1 +1 @@
-[{"title":"Wasm blog!??!?","id":"wasm","date":"Aug 23rd 2023","author":"badery","peek":"A short, real post on WASM!","md_name":"./posts/wasm.md"}]
+[{"title":"welcome, friend.","id":"welcome","date":"Oct 1st 2023","author":"bader","peek":"the start of something new, perhaps?","md_name":"./posts/welcome.md"}]
diff --git a/posts/wasm.md b/posts/wasm.md
diff --git a/posts/welcome.md b/posts/welcome.md
@@ -0,0 +1,41 @@
+---
+title: welcome, friend.
+id: welcome
+date: Oct 1st 2023
+author: bader
+desc: the start of something new, perhaps?
+---
+
+## hello.
+
+Most of this blog will probably be an informal, rant-like format.  Over the years, I've been priveleged enough to have written on [Hackernoon](https://hackernoon.com/u/anormaljourney), which has gotten me pretty far.  I mostly cover the following:
+
+- What the future of technology could look like.
+
+- Web3 and blockchain.  More specifically, [Polkadot](https://polkadot.network) and [Substrate](https://substrate.io), as that is my current occupational interest.
+
+- Rust and WebAssembly.
+
+At the time of this writing, I work as a technical educatior at the [Web3 Foundation](https://web3.foundation), where I work on education surrounding blockchain engineering, design, and architecture.
+
+I usually like to explore nuanced topics that relate to all of these things above, such as rebuilding the [internet using ants](https://hackernoon.com/reinventing-the-internet-welcome-to-the-antinet-bog001).
+
+## FAQ
+
+### What was this blob built with?
+
+This blog was born out of my love for Rust.  It was made using Yew, which is a fantastic way for me to avoid writing JavaScript.  In short, Yew compiles to WebAssembly, a portable format that can be executed in almost any modern browser.
+
+### Isn't blockchain/web3 a hype industry?
+
+ Not really.  The technology is sound, the applications infinite, but the reality often disappointing.  It will surely improve with time, as it has the potential to fundementally change how we define computation over the internet.
+
+ ### How do you say your name?
+
+ I am not sure why you want to know, but Bader, Bay-der, Badder, Budder, or other pronounceations all work, as I really do not care. The list goes on,   really any proncounation works.  If you really want, pronounce it like Bed-e*rr*, but roll the _r_.
+
+ If I got you to try saying it while reading this, my goal is complete.
+
+  ### What are you working on now?
+
+  Check out my [GitHub](https://github.com/CrackTheCode016), it's the best place to stalk any projects.
diff --git a/src/components/blog_list.rs b/src/components/blog_list.rs
@@ -20,7 +20,7 @@ fn post_to_list_item(post: &Post, navigator: Navigator) -> Html {
     html! {
      <div class="list-item" {onclick}>
         <div class="list-header">
-            <p class="date">{"Tue Aug 22"}</p>
+            <p class="date">{post.date.clone()}</p>
             <h1>{post.title.clone()}</h1>
             <div class="info">
         </div>