Improve note page view

author: Lucas Fryzek <lucas.fryzek@gmail.com> 2022-11-26 00:01:25 -0500
committer: Lucas Fryzek <lucas.fryzek@gmail.com> 2022-11-26 00:01:25 -0500
commit: 485d6a8e3d7a16a128ec945ecb401d419e741f81 (patch)
tree: 1a1259155c99c7ad5b825ac39553ec27a7b1e2a1 /html
parent: 60dfa1702796dc5dee294e1358afb3a969802fc2 (diff)
7 files changed, 57 insertions, 15 deletions
diff --git a/html/about.html b/html/about.html
index e79068a..a65f1ee 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -26,7 +26,8 @@
     <h1 class="page-title-header">About</h1>
     </div>
 <div class="note-divider"></div>
-<div class="note-body">
+<div class="main-container">
+    <div class="note-body">
 <p><img class="page-self-image" src="/assets/me.jpg"></p>
 <p>Hello my name is Lucas Fryzek, and welcome to my website!</p>
 <p>I’m a software developer with specific interests in computer graphics, embedded systems, and operating systems. For my day job I work on DO-178 certified graphics drivers for safety critical environments, and in my free time I enjoy working on personal projects (including this website). I plan to use this site to share information about projects I’m working on, or just generally cool stuff I’m interested in.</p>
@@ -43,6 +44,7 @@
 </li>
 </ul>
 </div>
+    </div>
 </div>    </main>
 </body>
 </html>
diff --git a/html/assets/style.css b/html/assets/style.css
index b550d4f..af1fd0b 100644
--- a/html/assets/style.css
+++ b/html/assets/style.css
@@ -1,8 +1,19 @@
+.html-note-page
+{
+    background-color: white;
+}
+
+.html-main-page
+{
+    background-color: #e9e9e7;
+}
+
 body
 {
     background-color: #e9e9e7;
     color: #353534;
     font-family: Open Sans,Arial;
+    margin: 0;
 }
 
 figure
@@ -30,7 +41,7 @@ img + figcaption
 
 pre 
 {
-    background-color: #FCFBF7;
+    background-color: #E9E9E7;
     border-radius: 5px;
     padding: 10px;
 }
@@ -40,14 +51,24 @@ blockquote
     background-color: #FCFBF7;
     border-radius: 5px;
     padding: 5px;
-    border-left: 10px solid #cecece;
+    border: 1px solid #cecece;
+    border-left: 5px solid #cecece;
     overflow-wrap: anywhere;
 }
 
+.main-container
+{
+    margin: 0;
+    background-color: #FFFFFF;
+}
+
 .note-body
 {
+    padding-top: 10px;
     max-width: 924px;
     margin: auto;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .contact-list, .social-media-list 
@@ -155,7 +176,7 @@ blockquote
     align-items: center;
     margin-bottom: 0.5em;
     margin-left: 1em;
-    margin-top: 1em;
+    padding-top: 1em;
 }
 
 .header-links
@@ -169,11 +190,19 @@ a.header-link
     color: #353534;
 }
 
+/*
 main
 {
     max-width: 1400px;
     margin: 40px auto;
 }
+*/
+
+.frontpage-main-container
+{
+    margin: 40px auto;
+    max-width: 1400px;
+}
 
 .main-heading
 {
@@ -210,6 +239,7 @@ main
 
 .note-link
 {
+    height: fit-content;
     color: #353534; 
     text-decoration: none;
 }
diff --git a/html/index.html b/html/index.html
index 6100efc..67fe83c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="html-main-page" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -22,6 +22,7 @@
         </div>
     </div>
     <main>
+<div class="frontpage-main-container">
 <div class="title-header-container">
     <div class="animated-box">
         <ul class="animated-name">
@@ -58,6 +59,7 @@
             <p>After re-watching suckerpinch’s Reverse Emulation video I got inspired to try and replicate what ...</p>
         </div>
     </a>
-    </div>    </main>
+    </div>
+</div>    </main>
 </body>
 </html>
diff --git a/html/notes/baremetal-risc-v.html b/html/notes/baremetal-risc-v.html
index 03ac433..9461564 100644
--- a/html/notes/baremetal-risc-v.html
+++ b/html/notes/baremetal-risc-v.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="html-note-page" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -39,7 +39,8 @@
     </div>
     </div>
 <div class="note-divider"></div>
-<div class="note-body">
+<div class="main-container">
+    <div class="note-body">
 <p>After re-watching suckerpinch’s <a href="https://www.youtube.com/watch?v=ar9WRwCiSr0">“Reverse Emulation”</a> video I got inspired to try and replicate what he did, but instead do it on an N64. Now my idea here is not to preform reverse emulation on the N64 itself but instead to use the SBC as a cheap way to make a dev focused flash cart. Seeing that sukerpinch was able to meet the timings of the NES bus made me think it might be possible to meet the N64 bus timings taking an approach similar to his.</p>
 <h2 id="why-risc-v-baremetal">Why RISC-V Baremetal?</h2>
 <p>The answer here is more utilitarian then idealistic, I originally wanted to use a Raspberry Pi since I thought that board may be more accessible if other people want to try and replicate this project. Instead what I found is that it is impossible to procure a Raspberry Pi. Not to be deterred I purchased a <a href="https://linux-sunxi.org/Allwinner_Nezha">“Allwinner Nezha”</a> a while back and its just been collecting dust in my storage. I figured this would be a good project to test the board out on since it has a large amount of RAM (1GB on my board), a fast processor (1 GHz), and accessible GPIO. As for why baremetal? Well one of the big problems suckerpinch ran into was being interrupted by the Linux kernel while his software was running. The board was fast enough to respond to the bus timings but Linux would throw off those timings with preemption. This is why I’m taking the approach to do everything baremetal. Giving 100% of the CPU time to my program emulating the CPU bus.</p>
@@ -149,6 +150,7 @@ riscv64-unknown-elf-objcopy -O binary app.elf app.bin</code></pre>
 <p><img src="/assets/2022-06-09-baremetal-risc-v/riscv-terminal.png" /></p>
 <h2 id="whats-next">What’s Next?</h2>
 <p>Well the sky is the limit! We have a method to load and run a program that can do anything on the Nezha board now. Looking through the datasheet we can see how to access the GPIO on the board to blink an LED. If you’re really ambitious you could try getting ethernet or USB working in a baremetal environment. I am going to continue on my goal of emulating the N64 cartridge bus which will require me to get GPIO working as well as interrupts on the GPIO lines. If you want to see the current progress of my work you can check it out on github <a href="https://github.com/Hazematman/N64-Cart-Emulator">here</a>.</p>
+    </div>
 </div>    </main>
 </body>
 </html>
diff --git a/html/notes/digital_garden.html b/html/notes/digital_garden.html
index 9f41114..8e8ef53 100644
--- a/html/notes/digital_garden.html
+++ b/html/notes/digital_garden.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="html-note-page" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -39,9 +39,11 @@
     </div>
     </div>
 <div class="note-divider"></div>
-<div class="note-body">
+<div class="main-container">
+    <div class="note-body">
 <p>After reading Maggie Appleton page on <a href="https://maggieappleton.com/garden-history">digital gardens</a> I was inspired to convert my own website into a digital garden.</p>
 <p>I have many half baked ideas that a never finish. Some of them get to a published state like <a href="rasterizing-triangles"></a> and <a href="baremetal-risc-v"></a>, but many of them never make it to the published state. The idea of digital garden seems very appealing to me, as it encourages you to post on a topic even if you haven’t made it “publishable” yet.</p>
+    </div>
 </div>    </main>
 </body>
 </html>
diff --git a/html/notes/rasterizing-triangles.html b/html/notes/rasterizing-triangles.html
index 8bad785..c9f2a87 100644
--- a/html/notes/rasterizing-triangles.html
+++ b/html/notes/rasterizing-triangles.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="html-note-page" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -39,7 +39,8 @@
     </div>
     </div>
 <div class="note-divider"></div>
-<div class="note-body">
+<div class="main-container">
+    <div class="note-body">
 <p>Lately I’ve been trying to implement a software renderer <a href="https://www.cs.drexel.edu/~david/Classes/Papers/comp175-06-pineda.pdf">following the algorithm described by Juan Pineda in “A Parallel Algorithm for Polygon Rasterization”</a>. For those unfamiliar with the paper, it describes an algorithm to rasterize triangles that has an extremely nice quality, that you simply need to preform a few additions per pixel to see if the next pixel is inside the triangle. It achieves this quality by defining an edge function that has the following property:</p>
 <pre><code>E(x+1,y) = E(x,y) + dY
 E(x,y+1) = E(x,y) - dX</code></pre>
@@ -121,6 +122,7 @@ func draw_triangle(x0, y0, x1, y1, x2, y2, v0, v1, v2):
     starting_e2 = e2
     starting_v = v</code></pre>
 <p>Now this pseudo code is not the most efficient as it will iterate over the entire screen to draw one triangle, but it provides a starting basis to show how to use these Pineda properties to calculate per vertex values. One thing to note if you do implement this is, if you use fixed point arithmetic, be careful to insure you have enough precision to calculate all of these values with overflow or underflow. This was an issue I ran into running out of precision when I did the divide by the area.</p>
+    </div>
 </div>    </main>
 </body>
 </html>
diff --git a/html/now.html b/html/now.html
index c79a750..00c7061 100644
--- a/html/now.html
+++ b/html/now.html
@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html lang="en">
+<html class="" lang="en">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -26,12 +26,14 @@
     <h1 class="page-title-header">Now</h1>
     </div>
 <div class="note-divider"></div>
-<div class="note-body">
+<div class="main-container">
+    <div class="note-body">
 <p>A monthly update about my life</p>
 <blockquote>
 <h2 id="october-2022">October 2022</h2>
 <p>After reading about digital gardens, I’ve decided to convert my whole website into its very own digital garden. I wasn’t too happy with existing themes and tools I could find online so I decided to try and build a digital garden engine myself using pandoc and custom filters.</p>
 </blockquote>
+    </div>
 </div>    </main>
 </body>
 </html>
author	Lucas Fryzek <lucas.fryzek@gmail.com>	2022-11-26 00:01:25 -0500
committer	Lucas Fryzek <lucas.fryzek@gmail.com>	2022-11-26 00:01:25 -0500
commit	485d6a8e3d7a16a128ec945ecb401d419e741f81 (patch)
tree	1a1259155c99c7ad5b825ac39553ec27a7b1e2a1 /html
parent	60dfa1702796dc5dee294e1358afb3a969802fc2 (diff)