QoL updates

- Updated project descriptions on Academia page - Added meta titles - Added close buttons to abstract dropdowns
LewisN3142 · Feb 17, 2024 · 027fd6b · 027fd6b
1 parent 89ba74d
commit 027fd6b
Show file tree

Hide file tree

Showing 10 changed files with 473 additions and 290 deletions.
diff --git a/academia_page/academia.html b/academia_page/academia.html
diff --git a/blog_page/blog.html b/blog_page/blog.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="Lewis Napper">
+  <meta name="title" content="Lewis Napper">
   <meta name="description"
     content="Welcome to the personal portfolio of Lewis Napper! Click here to view his blog and find out more about what he has been up to! Featured content includes reviews and commentary on all things games, music, and film.">
   <meta name="robots" content="max-snippet:320, noodp, noydir">
@@ -54,7 +55,8 @@ <h2> Terms and Conditions </h2>
           resulting from use of this information.
         </p>
         <p>
-          Please <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you believe
+          Please <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you
+          believe
           any information herein
           to be
           erronious or have issues with links to external material.
@@ -63,7 +65,7 @@ <h2> Terms and Conditions </h2>
           The material contained within this website is distributed under a
           CC-BY-NC-SA license. Should you wish to license material under any other terms, or claim copyright to material
           presented
-          herein, <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
+          herein, <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
         </p>
       </div>
     </div>

diff --git a/code_page/code_catalogue.html b/code_page/code_catalogue.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="Lewis Napper">
+  <meta name="title" content="Lewis Napper">
   <meta name="description"
     content="Welcome to the personal portfolio of Lewis Napper! Click here for a breakdown of programming code in a number of languages, including javascript, python, and MATLAB, from teaching material used in seminar classes to personal projects.">
   <meta name="robots" content="max-snippet:320, noodp, noydir">
@@ -54,7 +55,8 @@ <h2> Terms and Conditions </h2>
           resulting from use of this information.
         </p>
         <p>
-          Please <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you believe
+          Please <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you
+          believe
           any information herein
           to be
           erronious or have issues with links to external material.
@@ -63,7 +65,7 @@ <h2> Terms and Conditions </h2>
           The material contained within this website is distributed under a
           CC-BY-NC-SA license. Should you wish to license material under any other terms, or claim copyright to material
           presented
-          herein, <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
+          herein, <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
         </p>
       </div>
     </div>

diff --git a/contact_page/contact.html b/contact_page/contact.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="Lewis Napper">
+  <meta name="title" content="Lewis Napper">
   <meta name="description"
     content="Welcome to the personal portfolio of Lewis Napper! Visit this page to contact us with questions, project proposals, and technical issues!">
   <meta name=" robots" content="max-snippet:320, noodp, noydir">
@@ -205,8 +206,8 @@ <h1> Contact Me</h1>
             </div>
             By contacting me, you agree that your data may be managed in-line with our <button
               class="abstract-link under-overlay under-modal-overlay privacy-link" type="button" aria-expanded="false"
-              aria-controls="Privacy_Policy" style="margin-left:0.1rem"> <i class="abstract-icon icon-angle-right"></i>
-              Privacy Policy
+              aria-controls="Privacy_Policy" style="margin-left:0.1rem"> <i
+                class="abstract-icon icon-angle-right"></i>Privacy Policy
             </button>
 
             <div class="abstract-container modal-details privacy-container" id="Privacy_Policy">
@@ -244,18 +245,18 @@ <h1> Contact Me</h1>
                 manner, you will be contacted to confirm your consent.
               </p>
 
-              <p class="medium-para">
+              <p class="medium-para abstract-last-para">
                 You reserve the right to request access to any of your personal information that we have collected and
                 the
                 right to request the correction/completion of any erronious/incomplete information. You have the right
                 to
                 ask us to restrict the processing of your personal information at any stage. You can remove your
                 consent to us storing communications at any time, by contacting us once more with your request.
               </p>
-              <div class="close-privacy-bar">
-                <button class="under-modal-overlay under-overlay" id="close-privacy-button" type="button"
-                  aria-expanded="false" aria-controls="Privacy_Policy" aria-label="close privacy policy">Close<i
-                    class="abstract-icon icon-close"></i></button>
+              <div class="close-abstract-bar">
+                <button class="under-modal-overlay under-overlay close-abstract-button" id="close-privacy-button"
+                  type="button" aria-expanded="false" aria-controls="Privacy_Policy"
+                  aria-label="close privacy policy">Close<i class="abstract-icon icon-close"></i></button>
               </div>
             </div>
 

diff --git a/gallery_page/art_gallery.html b/gallery_page/art_gallery.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="Lewis Napper">
+  <meta name="title" content="Lewis Napper">
   <meta name="description"
     content="Welcome to the personal portfolio of Lewis Napper! Click here to view a gallery of his artwork, produced using both tradititional and digital tools.">
   <meta name="robots" content="max-snippet:320, noodp, noydir">
@@ -54,7 +55,8 @@ <h2> Terms and Conditions </h2>
           resulting from use of this information.
         </p>
         <p>
-          Please <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you believe
+          Please <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a> if you
+          believe
           any information herein
           to be
           erronious or have issues with links to external material.
@@ -63,7 +65,7 @@ <h2> Terms and Conditions </h2>
           The material contained within this website is distributed under a
           CC-BY-NC-SA license. Should you wish to license material under any other terms, or claim copyright to material
           presented
-          herein, <a href="contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
+          herein, <a href="../contact_page/contact.html" class="under-overlay internal-link">Contact Us</a>.
         </p>
       </div>
     </div>

diff --git a/games_page/video_games.html b/games_page/video_games.html
@@ -5,6 +5,7 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="author" content="Lewis Napper">
+  <meta name="title" content="Lewis Napper">
   <meta name="description"
     content="Welcome to the personal portfolio of Lewis Napper! Click here to view all things games, including speedrun tech, a gallery of glitches, and other gameplay.">
   <meta name="robots" content="max-snippet:320, noodp, noydir">
@@ -187,13 +188,13 @@ <h1> Gaming Stuff </h1>
 
         <article> <!-- General Gameplay Section -->
           <h2> Gameplay </h2>
-          <p class="medium-para">
+          <p class="medium-para youtube-para">
             This page compiles clips and screenshots from my playthroughs of various videogames, from glitches I have
             found or replicated, to speedruns and challenge attempts. These videos may also be found on my <a
               href="https://www.youtube.com/@lewisnapper" rel="noopener noreferrer"
               class="external-link under-overlay under-modal-overlay"> Youtube Channel</a>.
           </p>
-          <p class="medium-para">
+          <p class="medium-para youtube-para">
             Below is a selection of clips of general gameplay, including challenge attempts, no-hit runs, and other cool
             or funny moments that did not fit elsewhere.
           </p>
@@ -204,7 +205,7 @@ <h2> Gameplay </h2>
                 <h3 class="youtube-title"> Returnal &ndash; Phrike Zero Damage Run </h3>
                 <p class="medium-para">
                   Back in September of 2022, while playing Returnal on PS5 for the first time, I finally made it to
-                  Phrike, the boss of the initiial biome. Despite never having seen the boss before, my first attempt
+                  Phrike, the boss of the initial biome. Despite never having seen the boss before, my first attempt
                   ended
                   up being a zero damage run! Unfortunately, it wasn't quite a no-hit run as I was knocked over by a
                   melee attack about half way through the fight. This game is stunning and so fun to play!
@@ -305,7 +306,7 @@ <h3 class="youtube-title"> The Last of Us Part II &ndash; I Didn't Know You Coul
         <article> <!-- Speedrun Section -->
           <h2> Speedruns and Skips </h2>
 
-          <p class="medium-para">
+          <p class="medium-para youtube-para">
             Moving on from more general gameplay, here is a collection of clips of speedrun attempts and tech that I
             have managed to replicate. While I do not often get time to practice for lower times, my best attempts and
             any interesting skips that I learn will be collected here.
@@ -348,11 +349,10 @@ <h3 class="youtube-title"> Ghostrunner 2 &ndash; Full Demo in 6:07.97 </h3>
                 <p class="medium-para">
                   Here is a speedrun of the full demo for Ghostrunner 2, completed in September of 2023 on PS5. Having
                   messed around with running the demo for the first Ghostrunner game during the COVID19 pandemic, I just
-                  had to pick this up after it was announced. The combination of tight platforming and motorbike
-                  time-trials make for a fun and challenging route to optimise. There is one trick I do not go for at
+                  had to pick this up after it was announced. There is one trick I do not go for at
                   2:22 in the video, which involves doing a super jump off a ledge to skip having to set up the fan
-                  stored in the side room. I couldn't make it consistent enough to use in the runs at the time, but some
-                  more practice would surely make it viable and my time more competitive.
+                  stored in the side room. I couldn't make the skip consistent at the time, but a little practice would
+                  probably make it viable.
                 </p>
               </div>
               <div class="youtube-column-image">
@@ -413,7 +413,7 @@ <h3 class="youtube-title"> Astro's Playroom &ndash; Hopping Run in 26.80 </h3>
                   2021. Much of the challenge involved pressing/releasing the adaptive triggers to jump at the earliest
                   opportunity upon landing and turning while doing so.
 
-                  Note, this run was re-timed by myself in order to add the time to the title, since the recording did
+                  Note, this run was re-timed by myself, since the recording did
                   not include the
                   challenge end-card. As such, the time is only approximate and likely an over-estimate.
                 </p>
@@ -510,11 +510,6 @@ <h3 class="youtube-title"> Bloodborne &ndash; Sewer Skip (PS4 &ndash; Unedited)
                   past, the game sets that as my last 'stable ground,' the place where the player is positioned when the
                   game reloads.
                 </p>
-                <p class="medium-para">
-                  This clip is taken from a session of speedrun practice in July of 2019 and hence may be outdated when
-                  compared to
-                  current strategies.
-                </p>
               </div>
               <div class="youtube-column-image">
                 <span class="youtube-player-padding"></span>
@@ -550,11 +545,6 @@ <h3 class="youtube-title"> Bloodborne &ndash; Old Yharnam Skip (PS4 &ndash; Uned
                   not match the parts
                   of the roof that render in.
                 </p>
-                <p class="medium-para">
-                  This clip is taken from a session of speedrun practice in July of 2019 and hence may be outdated when
-                  compared to
-                  current strategies.
-                </p>
               </div>
               <div class="youtube-column-image">
                 <span class="youtube-player-padding"></span>
@@ -589,19 +579,16 @@ <h3 class="youtube-title"> Bloodborne &ndash; Hut Skip (PS4 &ndash; Unedited) </
                   using an R1 attack
                   lines us up with the corner of the hut, allowing us to roll onto an invisible wall that runs along the
                   side of the
-                  building. We can then roll into the hut, since the wall does not have collision this high up. The
-                  second part of this
+                  building. We can then roll into the hut, since the wall does not have collision this high up.
+                </p>
+                <p class="medium-para">
+                  The second part of this
                   glitch abuses the collision of the wooden beams in the lift shaft inside the hut &ndash; we can land
                   half
                   way down (taking a
                   little fall damage) and then drop to the bottom where we can then proceed to fight the Shadows of
                   Yharnam.
                 </p>
-                <p class="medium-para">
-                  This clip is taken from a session of speedrun practice in July of 2019 and hence may be outdated when
-                  compared to
-                  current strategies.
-                </p>
               </div>
               <div class="youtube-column-image">
                 <span class="youtube-player-padding"></span>
@@ -630,7 +617,10 @@ <h3 class="youtube-title"> Bloodborne &ndash; Yahar'gul Skip (PS4 &ndash; Unedit
                   The One Reborn shortly after entering
                   the area. This skip is characterised by the poor collision of the fence shown at the beginning of the
                   clip &ndash; with the
-                  correct angle and enough speed, you can just walk straight through it! The setup used here makes the
+                  correct angle and enough speed, you can just walk straight through it!
+                </p>
+                <p class="medium-para">
+                  The setup used here makes the
                   skip more
                   consistent, since there are enemies off-camera targeting the player. We transform the Saw Cleaver,
                   backstep, transform
@@ -639,11 +629,6 @@ <h3 class="youtube-title"> Bloodborne &ndash; Yahar'gul Skip (PS4 &ndash; Unedit
                   far enough forward that we land on solid ground on the other side, rather than falling into the
                   building.
                 </p>
-                <p class="medium-para">
-                  This clip is taken from a session of speedrun practice in July of 2019 and hence may be outdated when
-                  compared to
-                  current strategies.
-                </p>
               </div>
               <div class="youtube-column-image">
                 <span class="youtube-player-padding"></span>
@@ -679,11 +664,6 @@ <h3 class="youtube-title"> Bloodborne &ndash; Nightmare Frontier Skip (PS4 &ndas
                   damage when we jump
                   down. An emote is used to line up the initial fall and time the quit-out.
                 </p>
-                <p class="medium-para">
-                  This clip is taken from a session of speedrun practice in July of 2019 and hence may be outdated when
-                  compared to
-                  current strategies.
-                </p>
               </div>
               <div class="youtube-column-image">
                 <span class="youtube-player-padding"></span>
@@ -718,7 +698,7 @@ <h3 class="youtube-title"> Bloodborne &ndash; Nightmare Frontier Skip (PS4 &ndas
           <h2> Bugs and Glitches </h2>
         </article>
 
-        <p class="medium-para">
+        <p class="medium-para youtube-para">
           While playing games for dozens, if not hundreds, of hours, you're bound to find some bugs and glitches. This
           section compiles and provides a brief discussion of those glitches which I thought especially intersting, from
           missing collision to unintentional interactions. Note that this collection is not intended as a critique of

diff --git a/global/main.css b/global/main.css
@@ -653,6 +653,10 @@ main a:visited {
   color: var(--foreground-visited);
 }
 
+.medium-para.abstract-last-para {
+  margin-bottom: 0;
+}
+
 .Review-section {
   border-radius: 0.6rem;
   padding: 0.3rem 0.9rem 0.6rem 0.9rem;
@@ -668,12 +672,18 @@ main a:visited {
   margin-left: auto;
 }
 
+.youtube-para {
+  margin-left: 0.8rem;
+  margin-right: 0.8rem;
+  margin-bottom: 0.8rem;
+}
+
 /* FOCUS VISIBLE ACCESSIBILITY */
 a:focus-visible,
 button:focus-visible,
 #menu-toggle:focus-visible,
 #close-terms-button:focus-visible,
-#close-privacy-button:focus-visible,
+.close-abstract-button:focus-visible,
 #terms-conditions:focus-visible,
 .sidebar-nav .sidebar-text li a:focus-visible {
   border: 2px solid white;
@@ -685,7 +695,7 @@ button:focus-visible,
 #menu-toggle:focus-visible,
 #terms-conditions:focus-visible,
 #close-terms-button:focus-visible,
-#close-privacy-button:focus-visible {
+.close-abstract-button:focus-visible {
   outline: none;
 }
 
@@ -859,6 +869,7 @@ button:focus-visible,
   font-size: var(--font-size-default);
   transition: var(--icon-rotate-speed);
   vertical-align: -0.096rem;
+  margin-right: 0.3rem;
 }
 
 .abstract-link.abstract-toggled .abstract-icon {
@@ -952,13 +963,13 @@ button:focus-visible,
   padding-right: 0.3rem;
 }
 
-.close-privacy-bar {
+.close-abstract-bar {
   display: flex;
   flex-direction: row;
 }
 
-#close-privacy-button {
-  margin: 0rem 1rem 0.5rem 1rem;
+.close-abstract-button {
+  margin: 0rem 0.3rem 0.3rem 1rem;
   display: inline-block;
   justify-content: flex-end;
   flex-grow: 1;
@@ -1077,6 +1088,7 @@ textarea {
   text-align: center;
   justify-content: center;
   align-items: center;
+  line-height: 200px;
 }
 
 .About-section {
@@ -1652,7 +1664,7 @@ textarea {
     text-decoration: underline;
   }
 
-  #close-privacy-button:hover {
+  .close-abstract-button:hover {
     color: var(--foreground-clicked-blue);
     text-decoration: underline;
   }
@@ -1671,6 +1683,7 @@ textarea {
   /* dropdowns for abstract */
   .abstract-link:hover {
     color: var(--foreground-clicked-blue);
+    text-decoration: underline;
   }
 
   /* Logo in top bar */