More tweaks

content/blog/batch-import-postgis-rasters.md

@@ -45,7 +45,7 @@ aws s3 cp s3://raster/SRTM_GL1/ . --recursive --endpoint-url https://opentopogra
 Now we have the data downloaded on our system, we can import it into our database.
 If we look inside the SRTM_GL1_srtm directory, we can see all of the 14280 raster files: 
 
-{{< figure src="/pics/blog/batch-import-postgis-rasters/raster-tiffs.webp" title=" " width="600">}}
+{{< figure src="/pics/blog/batch-import-postgis-rasters/raster-tiffs.webp" width="600">}}
 
 Next we will use the `raster2pgsql` command to import these rasters into our database.
 

content/data-lab/global-business-growth.md

@@ -9,7 +9,8 @@ summary: "Growth of bitcoin businesses based on OSM data"
 The following table shows bitcoin business growth around the world for the selected period in the dropdown. The chart displays yearly cumulative number of bitcoin businesses for the countries selected in the table.
 
 Data is obtained from Openstreetmaps and is updated roughly every 2 hours.
-
+<br/>
+<br/>
 Select growth period: {{< dropdown-filter id=cumulative_period_type select="365 day,28 day,7 day,1 day" >}}
 {{< chart src="/js/bitcoin-business-growth-chart.js" >}}
 {{< table src="/js/bitcoin-business-growth-table.js" >}}

hugo.toml

@@ -19,3 +19,5 @@ title = 'baseddata.io'
   ordered = false
   startLevel = 2
 
+[markup.goldmark.renderer]
+     unsafe = true

layouts/partials/chart.html

@@ -1,6 +1,8 @@
 <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
+<section class="chart-container">
   <div id="chart">
     <canvas id="{{ .id }}"></canvas>
     <script src="{{ .src }}"></script>
   </div>
+</section>
 <script src="/js/chart-params.js"></script>

layouts/partials/header.html

@@ -5,18 +5,27 @@
     </div>
     <div class="navbar__right">
       <div class="navbar-links">{{ partial "navbarlinks.html" . }}</div>
-      <!-- <div class="navbar-dropdown">
+      <div class="navbar-dropdown">
         <button class="hamburger-dropbtn">
-          <img
-            class="hamburger"
-            src="/hamburger-menu.svg"
-            alt="description of image"
-          />
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="3"
+            stroke="#6c757d"
+            class="hamburger-svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4 6h16M4 12h16M4 18h16"
+            ></path>
+          </svg>
         </button>
         <div class="navbar-dropdown-content">
           {{ partial "navbarlinks.html" . }}
         </div>
-      </div> -->
+      </div>
     </div>
   </nav>
 </header>

static/css/articles.css

@@ -115,6 +115,17 @@ figcaption h4 {
   border-right: var(--border-width) var(--border-style) var(--border-color);
 }
 
+@media (max-width: 600px) {
+  .main-article {
+    width: 100%;
+    padding: var(--content-padding);
+    line-height: 1.5;
+    text-align: left;
+    border-left: var(--border-width) var(--border-style) var(--border-color);
+    border-right: var(--border-width) var(--border-style) var(--border-color);
+  }
+}
+
 .main-article h1 {
   color: var(--heading1-color);
   font-size: var(--heading1-font-size);

static/css/charts.css

@@ -9,10 +9,11 @@
 
 #chart {
   width: 100%;
-  height: 50vh;
+  aspect-ratio: 16 / 9;
 }
 
-.chart-area {
-  width: 60%;
-  margin: var(--article-margin);
+.chart-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: center;
 }

static/css/navbar.css

@@ -79,3 +79,87 @@
 .navbar-links ul li a {
   display: inline-block;
 }
+
+.navbar-dropdown {
+  display: none;
+}
+
+@media (max-width: 600px) {
+  .navbar-dropdown {
+    display: flex;
+    margin-right: 20px;
+  }
+
+  .navbar-links {
+    display: none;
+  }
+
+  .hamburger-dropbtn {
+    height: 30px;
+    width: 30px;
+    border-width: 0;
+    background-color: var(--background-color);
+  }
+
+  .hamburger-dropbtn:hover {
+    height: 30px;
+    width: 30px;
+    border-width: 0;
+    background-color: var(--navbar-hover);
+    border-radius: 5px;
+  }
+
+  .navbar-dropdown-content {
+    display: none;
+  }
+
+  /* Show the dropdown menu on hover */
+  .navbar-dropdown:hover .navbar-dropdown-content {
+    display: block;
+    position: absolute;
+    top: 80%;
+    right: 1%;
+    flex-direction: column;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    background-color: var(--navbar-background-color);
+    border-radius: 5px;
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+  .navbar-dropdown-content li {
+    list-style-type: none;
+    padding: 10px 10px 5px 5px;
+  }
+
+  .navbar-dropdown-content a {
+    border: none;
+  }
+
+  .navbar-dropdown-content li:hover {
+    color: var(--navbar-text-color);
+    padding: 10px 10px 5px 5px;
+    text-decoration: none;
+    transition: background-color 0.3s ease;
+    background-color: var(--navbar-hover);
+    border-radius: 5px;
+  }
+
+  .navbar-dropdown-content a:hover {
+    border: none;
+  }
+
+  .navbar-link-dropdown-content {
+    position: absolute;
+    flex-direction: column;
+    width: 150px;
+    right: 95%;
+    top: 50%;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    background-color: var(--navbar-background-color);
+    border-radius: 5px;
+    border: var(--border-width) var(--border-style) var(--border-color) !important;
+  }
+
+  .navbar-link-dropdown-content a:hover {
+    border-radius: 5px;
+  }
+}

static/css/style.css

@@ -48,24 +48,23 @@
   --code-font-family: "Fira Mono", monospace;
 
   /* table */
-  --table-even-row-bg-color: #343a40;
-  --table-odd-row-bg-color: #515c66;
-  --table-header-bg: #212529;
-  --table-font-color: #e0ddd9;
+  --table-even-row-bg-color: #f9f9f9;
+  --table-odd-row-bg-color: #f9f9f9;
+  --table-header-bg: #eff3f7;
+  --table-font-color: #373841;
   --table-header-font-size: 14px;
   --table-row-font-size: 12px;
 }
 
 @media (max-width: 600px) {
   :root {
-    --font-size: 10;
     --author-row-font-size: 12px;
     --heading1-font-size: 25px;
     --code-block-font-size: 10px;
     --avatar-width: 20px;
     --article-max-width: 100%;
-    --table-header-font-size: 14px;
-    --table-row-font-size: 12px;
+    --table-header-font-size: 9px;
+    --table-row-font-size: 6px;
   }
 }
 

static/css/tables.css

@@ -21,6 +21,7 @@ td {
   padding: 5px;
   text-align: left;
   max-width: 90px;
+  font-size: var(--table-row-font-size);
 }
 
 @media only screen and (max-width: 800px) {

static/js/bitcoin-business-growth-chart.js

@@ -44,14 +44,19 @@ function updateChart() {
       axisLabel: axisLabel,
       axisLine: axisLine,
       type: "time",
-      name: "Date",
     },
     yAxis: {
       axisTick: axisTick,
       splitLine: {
         show: false,
       },
-      axisLabel: axisLabel,
+      axisLabel: {
+        fontSize: 12 * fontScale,
+        color: textColor,
+        formatter(value, index) {
+          return nFormatter(value, 0);
+        },
+      },
       axisLine: axisLine,
     },
 

static/js/chart-params.js

@@ -1,4 +1,4 @@
-const fontScale = 1;
+const fontScale = 0.8;
 
 const backgroundColor = "#f9f9f9";
 const tooltipBgColor = "#e7e7f5";

static/js/hashrate.js

@@ -38,7 +38,7 @@ function initEchart(dataArr) {
         type: "value",
         name: "Hashrate (H/s)",
         nameLocation: "middle",
-        nameGap: 35,
+        nameGap: 30,
         nameTextStyle: textStyleMain,
         position: "left",
         alignTicks: true,

static/js/miner-rewards.js

@@ -31,7 +31,7 @@ function initEchart(dataArr) {
     yAxis: [
       {
         type: "value",
-        name: "Total Daily Rewards (USD)",
+        name: "Rewards (USD)",
         nameLocation: "middle",
         nameGap: 35,
         nameTextStyle: textStyleMain,
@@ -53,6 +53,7 @@ function initEchart(dataArr) {
         type: "value",
         name: "Block Subsidy (BTC)",
         nameLocation: "middle",
+        nameGap: 20,
         nameTextStyle: {
           fontSize: 12 * fontScale,
           color: textColor,