From 77a2e6edcf0f992ec25209ba12a7df246364523e Mon Sep 17 00:00:00 2001
From: rasmus <rasmusbwr.prof@gmail.com>
Date: Fri, 7 Feb 2025 12:59:25 +0100
Subject: [PATCH] Fix css on set up page for fortran

---
 src/components/Fortran/Fortran_Set_Up.vue | 105 +++++++++-------------
 1 file changed, 40 insertions(+), 65 deletions(-)

diff --git a/src/components/Fortran/Fortran_Set_Up.vue b/src/components/Fortran/Fortran_Set_Up.vue
index b206a3e..5555927 100644
--- a/src/components/Fortran/Fortran_Set_Up.vue
+++ b/src/components/Fortran/Fortran_Set_Up.vue
@@ -5,67 +5,51 @@
 <template>
   <div>
     <h1 class="text-3xl">Setting Up The Environment</h1>
-    <hr>
+    <hr class="mb-6">
 
-    <p>If you're familiar with C, then you would feel right at home with Fortran's build environment. There isn't really
+    <p class="mb-6">If you're familiar with C, then you would feel right at home with Fortran's build environment. There isn't really
       an "official" compiler for the language, only a standard, that has to be implemented by the compilers. But there
-      are a lot of great compilers, that might as well be "official."</p>
-    <br>
-
-    <p>The top listed compiler on Fortran's website, is the GNU Fortran compiler (gfortran). It's the one I will be using
+      are a lot of great compilers, that might as well be "official."<br><br>
+      The top listed compiler on Fortran's website, is the GNU Fortran compiler (gfortran). It's the one I will be using
       throughout the examples on the site. Unless stated otherwise. There are also some other notable compilers, that
       has some rather interesting qualities to them.</p>
-    <br>
 
     <p>Compilers:</p>
-    <ul>
+    <ul class="mb-6">
       <li>&gt; <a class="underline" href="https://lfortran.org/">lfortran</a> (This one can be used as an interactive
         compiler, supports parsing all of the 2018 standard syntax and also compile Fortran to WebAssemply).</li>
       <li>&gt; <a class="underline" href="https://developer.nvidia.com/hpc-sdk">NVIDIA HPC SDK</a> (This one comes with a whole lot of GPU
         accelerated libraries).</li>
     </ul>
-    <br>
 
-    <p>But we will be using gfortran. Through the examples on this site, I will mainly be focusing on developing on Linux.</p>
-    <br>
-
-    <p>First, we install the compiler.</p>
-    <br>
+    <p class="mb-6">But we will be using gfortran. Through the examples on this site, I will mainly be focusing on developing on Linux. <br>
+      First, we install the compiler.</p>
 
     <p>For Fedora.</p>
-    <code class="text-red-500">$ sudo dnf install gcc-gfortran</code>
-    <br>
-    <br>
+    <code class="text-red-500 mb-6">$ sudo dnf install gcc-gfortran</code>
 
     <p>For ubuntu.</p>
-    <code class="text-red-500">$ sudo apt install gfortran</code>
-    <br>
-    <br>
+    <code class="text-red-500 mb-6">$ sudo apt install gfortran</code>
 
-    <p>And that's it. Pretty easy.</p>
-    <br>
+    <p class="mb-6">And that's it. Pretty easy.</p>
 
-    <h1 class="text-3xl">Project Structure</h1>
-    <hr>
+    <h2 class="text-2xl">Project Structure</h2>
+    <hr class="mb-6">
 
-    <p>When creating a Fortran project, or any project in general, you want a structure. There is a lot of different
+    <p class="mb-6">When creating a Fortran project, or any project in general, you want a structure. There is a lot of different
       layouts for the structure, but equal amongst them, is the <code class="text-red-500">src</code> folder. That's where we keep all of out
-      source code. Like <code class="text-red-500">*.f90, *.f95</code> files.</p>
-    <br>
+      source code. Like <code class="text-red-500">*.f90, *.f95</code> files.<br><br>
 
-    <p>But other than that, most projects include a <code class="text-red-500">Makefile</code> file, a
+      But other than that, most projects include a <code class="text-red-500">Makefile</code> file, a
       <code class="text-red-500">library</code>, <code class="text-red-500">test</code>
       and <code class="text-red-500">bin</code> folder. Your layout doesn't need to look like this specifically, nor does it have to contain
       the same folders. Each project is different, and so are the requirements. But this layout is simple, and great
-      for medium to large projects.</p>
-    <br>
-
-    <p>But if we're doing micro-projects, as in like, a hello world application, a test application, or a small tool,
+      for medium to large projects.<br><br>
+      But if we're doing micro-projects, as in like, a hello world application, a test application, or a small tool,
       this layout is rather redundant, and in the examples on this site, we will only use it on bigger projects,
       and we will let you know, when or how we set up the project.</p>
-    <br>
 
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 project/
 ├── src/          # Source files (.f90, .f95, etc.)
@@ -81,33 +65,32 @@ project/
     <br>
 
     <p>Notes:</p>
-    <ul>
+    <ul class="mb-6">
       <li>&gt; <code class="text-red-500">src</code> (This is where we keep all of out source code).</li>
       <li>&gt; <code class="text-red-500">modules</code> (This is where we keep our classes. Or in Fortran-speak, modules).</li>
       <li>&gt; <code class="text-red-500">include</code> (This is where we keep our interfaces, that out modules will inherit from, if we're using Fortran 90 or above).</li>
       <li>&gt; <code class="text-red-500">bin</code> (This is where the compiled program should end up in).</li>
     </ul>
-    <br>
 
-    <h1 class="text-3xl">Compiling</h1>
-    <hr>
-    <p>Makefiles are very useful, and becomes increasingly useful, the bigger the project gets. A makefile simplifies the
+
+    <h2 class="text-2xl">Compiling</h2>
+    <hr class="mb-6">
+
+    <p class="mb-6">Makefiles are very useful, and becomes increasingly useful, the bigger the project gets. A makefile simplifies the
       compilation process, as all of the compile flags can be gathered inside a single file. It makes it possible to
       dynamically change the compilation depending on the system architecture or config. It also removes the need to
-      manually compile and link your objects together, every time you make a change.</p>
-    <br>
+      manually compile and link your objects together, every time you make a change.<br><br>
 
-    <p>And with a bigger project, comes a big count of source files. That's where a makefile helps a lot, as it handles
-      and tracks all changes to each file, ensuring that it's only the changed files that gets re-compiled.</p>
-    <br>
+      And with a bigger project, comes a big count of source files. That's where a makefile helps a lot, as it handles
+      and tracks all changes to each file, ensuring that it's only the changed files that gets re-compiled.<br><br>
 
-    <p>So let's see a makefile in action. Below code is a simple Hello World application, that we will use a makefile to
+      So let's see a makefile in action. Below code is a simple Hello World application, that we will use a makefile to
       compile. Although it's worth noting, that a program this small, a makefile is wildly redundant. But it does show
       how it's set up in a simple environment.</p>
-    <br>
+
 
     <code class="text-red-500">hello.f90</code>
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 program hello
     implicit none
@@ -115,11 +98,10 @@ program hello
 end program hello
 </code></pre>
     </div>
-    <br>
 
-    <p>The makefile, in the eyes of a modern programmer (C#, Python, JS, Etc) might look rather repulsive. But be not
+
+    <p class="mb-6">The makefile, in the eyes of a modern programmer (C#, Python, JS, Etc) might look rather repulsive. But be not
       afraid. It will all make sense in a bit.</p>
-    <br>
 
     <ul>
       <li>&gt; <code class="text-red-500">hello: hello.o</code></li>
@@ -137,12 +119,11 @@ end program hello
     </ul>
     <br>
 
-    <p>A quick note. It's very important that whenever something is indented in a makefile, that it's indented with a tab,
+    <p class="mb-6">A quick note. It's very important that whenever something is indented in a makefile, that it's indented with a tab,
       and not 4 spaces. It needs to be a tab character.</p>
-    <br>
 
     <code class="text-red-500">makefile</code>
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 Makefile for hello.f90
 
@@ -162,41 +143,35 @@ clean:
     rm -f *.o hello
 </code></pre>
     </div>
-    <br>
 
-    <p>Now simply run the makefile with the following command.</p>
-    <br>
+    <p class="mb-6">Now simply run the makefile with the following command.</p>
 
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 $ make
 gfortran   -O2    -c hello.f90
 gfortran   -O2    -o hello hello.o
 </code></pre>
     </div>
-    <br>
 
-    <p>We have now successfully compiled the program with the help of a makefile. Now simply run the program and we'll
+    <p class="mb-6">We have now successfully compiled the program with the help of a makefile. Now simply run the program and we'll
       see the output.</p>
-    <br>
 
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 $ ./hello
  Hello, World!
 </code></pre>
     </div>
-    <br>
 
-    <p>The exact same should happen, if we run the next command instead.</p>
+    <p class="mb-6">The exact same should happen, if we run the next command instead.</p>
 
-    <div class="font-mono shadow-xl p-2">
+    <div class="font-mono shadow-lg shadow-slate-500 p-2 mb-6">
 <pre><code class="text-sm">
 $ make run
 ./hello
  Hello, World!
 </code></pre>
     </div>
-    <br>
   </div>
 </template>
\ No newline at end of file