1 files changed, 50 insertions, 23 deletions

diff --git a/resources/css.org b/resources/css.org
index 4ca2638..9fd9ab7 100644
--- a/resources/css.org
+++ b/resources/css.org
@@ -71,8 +71,8 @@ These colors variables can be accessed anywhere in the rest of the stylesheet.
 #+NAME: colors
 #+BEGIN_SRC css
   :root {
-      --topnav: dodgerblue;
-      --topnav-menu: royalblue;
+      --main: dodgerblue;
+      --accent: royalblue;
   }
 #+END_SRC
 
@@ -84,21 +84,21 @@ We assign colors to the page element backgrounds.
 #+BEGIN_SRC css
   .todo { background: tomato; }
   .done { background: forestgreen; }
-  .timestamp { background: var(--topnav); }
-  .title { background: var(--topnav); }
-  #topnav { background: var(--topnav); }
-  .button { background: var(--topnav-menu); }
-  #topnav #hamburger { background: var(--topnav-menu); }
+  .timestamp { background: var(--main); }
+  .title { background: var(--main); }
+  #topnav { background: var(--main); }
+  .button { background: var(--accent); }
+  #topnav #hamburger { background: var(--accent); }
   #topnav #hamburger:hover { background: white; }
-  #topnav #hamburger:hover .line { background: var(--topnav); }
+  #topnav #hamburger:hover .line { background: var(--main); }
   #topnav .button:hover { background: white; }
   #shadow { background: black; }
-  thead { background: var(--topnav); }
+  thead { background: var(--main); }
   #topnav ul a:hover { background: white; }
-  #org-div-home-and-up { background: var(--topnav); }
-  #postamble { background: var(--topnav); }
-  #outline-container-main-content
-  .outline-3 { background: var(--topnav); }
+  #org-div-home-and-up { background: var(--main); }
+  #org-div-home-and-up a:hover { background: white; }
+  #postamble { background: var(--main); }
+  #outline-container-main-content .outline-3 { background: white; }
 #+END_SRC
 
 
@@ -112,11 +112,13 @@ We assign colors to the page element backgrounds.
   .subtitle { color: lightgray; }
   .button { color: white; }
   #topnav #hamburger { color: white; }
-  #topnav #hamburger:hover { color: var(--topnav-menu); }
-  #topnav .button:hover { color: var(--topnav-menu); }
+  #topnav #hamburger:hover { color: var(--accent); }
+  #topnav .button:hover { color: var(--accent); }
   #topnav ul a { color: white; }
-  #topnav ul a:hover { color: var(--topnav-menu); }
-  #org-div-home-and-up { color: white; }
+  #topnav ul a:hover { color: var(--accent); }
+  #org-div-home-and-up,
+  #org-div-home-and-up a { color: white; }
+  #org-div-home-and-up a:hover { color: var(--accent); }
   #postamble { color: white; }
   thead { color: white; }
 #+END_SRC
@@ -241,6 +243,7 @@ Certains homepage sections are styled uniquely, for visual impact.
       max-width: 12em;
       padding: 0 1em;
       border-radius: 8px;
+      border: 3px solid var(--main);
   }
 #+end_src
 
@@ -262,10 +265,21 @@ section, except for the title and topnav sections.
 #+END_SRC
 
 
-** TODO `Home' and `Up' links
+** `Home' and `Up' links
 
 #+BEGIN_SRC css
-  #org-div-home-and-up {}
+  #org-div-home-and-up {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      padding: 0.5em;
+      font-size: large;
+  }
+  #org-div-home-and-up a {
+      text-decoration: none;
+      padding: 0.5em;
+      font-family: "Jost", sans-serif;
+  }
 #+END_SRC
 
 
@@ -326,7 +340,7 @@ serves as a useful reminder of the
 #+BEGIN_SRC css
   thead {
       position: sticky;
-      top: 0;
+      top: 2.6rem;
   }
 #+END_SRC
 
@@ -334,17 +348,30 @@ serves as a useful reminder of the
 ** Images
 
 #+BEGIN_SRC css
-.figure img { max-width: 100%; min-width: 30%; }
+  .figure img { max-width: 100%; min-width: 30%; }
 #+END_SRC
 
 
-*** TODO Hero images
+*** TODO Homepage images
+
+This whole section not necessarily needed.
+
+**** Hero images
 
 #+BEGIN_SRC css
   /* .figure { style max-width: 100%; min-width: 30%; } */
 #+END_SRC
 
 
+**** Main card images
+
+#+BEGIN_SRC css
+  /* #outline-container-main-content .outline-3 img { */
+  /*     max-height: 10em; */
+  /* } */
+#+END_SRC
+
+
 ** Workflow states
 
 Here, we define styling for TODO, DONE and other workflow state
@@ -667,7 +694,7 @@ label.
   #topnav ul {
       position: absolute;
       flex-direction: column;
-      background: var(--topnav);
+      background: var(--main);
       height: calc(100vh - 3.5em);
       top: 3.5em;
       padding: 0 0.5em;