From b810d9a0b47dd49a90cc8ec7bf1b05f59ff945b3 Mon Sep 17 00:00:00 2001
From: Bradley Taunt <bt@btxx.org>
Date: Sat, 20 Jul 2024 12:13:49 -0400
Subject: Crude testing with blogrb

---
 posts/css-slope-graphs.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'posts/css-slope-graphs.md')

diff --git a/posts/css-slope-graphs.md b/posts/css-slope-graphs.md
index 36250a5..b694933 100644
--- a/posts/css-slope-graphs.md
+++ b/posts/css-slope-graphs.md
@@ -16,7 +16,7 @@ For this concept we will actually be building this graph out of `tables` - crazy
 
 (But more on that in the CSS section)
 
-```html
+~~~html
 <p>Sales of the leading frozen pizza brands of the United States from 2011 to 2017 (in million US dollars) <br><em>Source: Statisa 2018</em></p>
 <table>
   <thead>
@@ -54,7 +54,7 @@ For this concept we will actually be building this graph out of `tables` - crazy
     </tr>
   </tbody>
 </table>
-```
+~~~
 
 As you can see, nothing too fancy is happpening here. Pay close attention to the `data-set` and `data-name` variables though - those will be important for the CSS portion of this design, mainly the rendering of the line elements.
 
@@ -64,7 +64,7 @@ As you can see, nothing too fancy is happpening here. Pay close attention to the
 
 To avoid overwhelming your brain all-at-once, let's break the CSS down into bite-sized chunks, starting with the base styling:
 
-```css
+~~~css
 @import url('https://opentype.netlify.com/et-book/index.css');
 * {
   box-sizing: border-box;
@@ -93,7 +93,7 @@ table {
   text-align: left;
   width: 100%;
 }
-```
+~~~
 
 Pretty basic stuff.
 
@@ -106,7 +106,7 @@ Now we need to design how our slope graph will look on larger screens / desktops
 5. Remember that `data-name` variable? We now use that for our `:before` pseudo element for `table tbody tr td:nth-of-type(3)`
 6. After that, you can see the simple customization we include to render the angle / position of the slope lines and the corresponding labels
 
-```css
+~~~css
 @media(min-width:800px) {
   table {
     display: block;
@@ -204,11 +204,11 @@ Now we need to design how our slope graph will look on larger screens / desktops
     width: 56%;
   }
 }
-```
+~~~
 
 All that's left are some minor styles to make everything look nice on mobile:
 
-```css
+~~~css
 @media(max-width:800px) {
   p {
     margin: 2rem 0;
@@ -221,7 +221,7 @@ All that's left are some minor styles to make everything look nice on mobile:
     text-align: right;
   }
 }
-```
+~~~
 
 ## Not the most practical
 This slope graph concept is far from perfect for use in real-world situations. The fact that you need to manually render each point of data yourself makes this implementation quite annoying for more in-depth projects.
-- 
cgit v1.2.3-54-g00ecf