Custom CSS for subfigures

content/zettels/test.md

@@ -79,7 +79,7 @@ Sed aliquam
 Here is a list of links to:
 
 -   [Figure 5](#figure--fig:general-control-names)
--   [Table 3](#table--tab:table-with-equations)
+-   [Table 2](#table--tab:table-with-equations)
 -   Listing [Code Snippet 1](#code-snippet--lst:matlab-figure)
 -   Specific [line of code](#org-coderef--967846-4)
 -   Equation \ref{eq:numbered}
@@ -465,7 +465,7 @@ Numbering can be continued by using `+n` option as shown below.
 ```
 <div class="src-block-caption">
   <span class="src-block-number"><a href="#code-snippet--lst:tikz-test-general-control-names">Code Snippet 4</a>:</span>
-  Tikz code that is used to generate <a href="#org16fb2fb">5</a>
+  Tikz code that is used to generate <a href="#orgd3b3bc3">5</a>
 </div>
 
 <a id="figure--fig:test-general-control-names"></a>
@@ -506,7 +506,7 @@ Fusce blandit mauris dui, sed lobortis sapien tincidunt ac. Maecenas vitae moles
 
 ### Sub Images {#sub-images}
 
-Link to sub[ 2](#org-target--fig-general-control-names-1).
+Link to sub[Figure 6a](#org-target--fig-general-control-names-1).
 
 ```md
 #+name: fig:subfigure
@@ -516,24 +516,29 @@ Link to sub[ 2](#org-target--fig-general-control-names-1).
 | <<fig:general_control_names_1>> sub figure caption | <<fig:general_control_names_2>> sub figure caption |
 ```
 
-<a id="table--fig:subfigure"></a>
-<div class="table-caption">
-  <span class="table-number"><a href="#table--fig:subfigure">Table 2</a>:</span>
-  Subfigure Caption
-</div>
 
-| ![](figs/general_control_names.png)                                                              | ![](figs/general_control_names.png)                                                              |
-|--------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|
-| <span class="org-target" id="org-target--fig-general-control-names-1"></span> sub figure caption | <span class="org-target" id="org-target--fig-general-control-names-2"></span> sub figure caption |
+<figure class="subfigures" id="table--fig:subfigure">
+<div class="subfigure-row">
+<div class="subfigure" id="org-target--fig-general-control-names-1" style="flex-basis: 49%">
+<img src="figs/general_control_names.png" alt="sub figure caption" loading="lazy">
+<div class="subfigure-caption"><span class="subfigure-label">(a)</span> sub figure caption</div>
+</div>
+<div class="subfigure" id="org-target--fig-general-control-names-2" style="flex-basis: 49%">
+<img src="figs/general_control_names.png" alt="sub figure caption" loading="lazy">
+<div class="subfigure-caption"><span class="subfigure-label">(b)</span> sub figure caption</div>
+</div>
+</div>
+<figcaption><span class="figure-number">Figure 6: </span>Subfigure Caption</figcaption>
+</figure>
 
 
 ## Tables {#tables}
 
-[Table 3](#table--tab:table-with-equations) shows a table with some mathematics inside.
+[Table 2](#table--tab:table-with-equations) shows a table with some mathematics inside.
 
 <a id="table--tab:table-with-equations"></a>
 <div class="table-caption">
-  <span class="table-number"><a href="#table--tab:table-with-equations">Table 3</a>:</span>
+  <span class="table-number"><a href="#table--tab:table-with-equations">Table 2</a>:</span>
   A Simple table with included math
 </div>
 
@@ -545,7 +550,7 @@ Link to sub[ 2](#org-target--fig-general-control-names-1).
 
 <a id="table--tab:table-without-head"></a>
 <div class="table-caption">
-  <span class="table-number"><a href="#table--tab:table-without-head">Table 4</a>:</span>
+  <span class="table-number"><a href="#table--tab:table-without-head">Table 3</a>:</span>
   Table without Head
 </div>
 
@@ -559,7 +564,7 @@ Link to sub[ 2](#org-target--fig-general-control-names-1).
 
 <a id="table--tab:table-multiple-heads"></a>
 <div class="table-caption">
-  <span class="table-number"><a href="#table--tab:table-multiple-heads">Table 5</a>:</span>
+  <span class="table-number"><a href="#table--tab:table-multiple-heads">Table 4</a>:</span>
   Table with multiples groups
 </div>
 
@@ -592,7 +597,7 @@ Almost anything can be put here for instance this table below.
 
 <a id="table--tab:table-with-equations-bis"></a>
 <div class="table-caption">
-  <span class="table-number"><a href="#table--tab:table-with-equations-bis">Table 6</a>:</span>
+  <span class="table-number"><a href="#table--tab:table-with-equations-bis">Table 5</a>:</span>
   A Simple table with included math
 </div>