TA blog post, change to cards, margin blog

src/components/blogCard.astro

@@ -43,6 +43,10 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
     a:hover > .circle {
       transform: none;
     }
+
+    article {
+      margin-left: 0.5rem;
+    }
   }
 
   a {

src/components/contactCard.astro

@@ -12,27 +12,46 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={site}>
   <article class="contact do-hover">
     <div style={icon}>
-      <h2>{site}</h2>
+      <span>
+        <h2>{site}</h2>
+      </span>
     </div>
   </article>
 </a>
 
 <style>
-  article:hover h2 {
+  a {
-    color: white;
+    text-decoration: none;
+  }
+
+  article:hover span {
+    padding: 0.5rem 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     background-color: var(--c-darkgray);
-    font-size: 18px;
+    height: 85%;
-    display: inline-block;
+    width: 100%;
-    vertical-align: center;
-    line-height: 150%;
-    width: 95%;
     opacity: 90%;
   }
 
+  article:hover h2 {
+    margin: 0;
+    display: inline-flex;
+    font-weight: bold;
+    color: white;
+    font-size: 18px;
+  }
+
   article h2 {
     display: none;
   }
 
+  article span {
+    display: none;
+  }
+
   article div {
     background-size: contain;
     width: 100px;
@@ -52,7 +71,6 @@ const icon: string = `background-image: url('/assets/social/${image}.webp')`
     transition: transform var(--speed) var(--ease);
     height: auto;
     width: auto;
-    line-height: 128px;
   }
   a:hover {
     transform: scale(var(--hover-scale));

src/components/taCard.astro

@@ -27,7 +27,9 @@ if (user !== undefined) {
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
     <div style={icon}>
-      <h2>{title}</h2>
+      <span>
+        <h2>{title}</h2>
+      </span>
     </div>
     <p>
       <span class={hasuser}>
@@ -56,7 +58,6 @@ if (user !== undefined) {
     transition: transform var(--speed) var(--ease);
     height: auto;
     width: auto;
-    line-height: 128px;
   }
   article:hover {
     transform: scale(var(--hover-scale));
@@ -68,18 +69,32 @@ if (user !== undefined) {
     object-position: 0% 0%;
   }
 
-  article:hover h2 {
+  article:hover div span {
-    color: white;
+    padding: 0.5rem 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     background-color: var(--c-darkgray);
-    font-size: 18px;
+    height: 90%;
-    display: inline-block;
-    vertical-align: bottom;
-    line-height: normal;
     width: 90%;
     opacity: 90%;
   }
 
-  article h2 {
+  article:hover span h2 {
+    margin: 0;
+    display: inline-flex;
+    font-weight: bold;
+    color: white;
+    font-size: 18px;
+    line-height: 150%;
+  }
+
+  article span h2 {
+    display: none;
+  }
+
+  article div span {
     display: none;
   }
 

src/components/technologyCard.astro

@@ -13,12 +13,17 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
     <div style={icon}>
-      <h2>{title}</h2>
+      <span>
+        <h2>{title}</h2>
+      </span>
     </div>
   </article>
 </a>
 
 <style>
+  a {
+    text-decoration: none;
+  }
   article {
     background-color: var(--c-darkergray);
     border-color: var(--c-darkgray);
@@ -41,18 +46,32 @@ const icon: string = `background-image: url('/assets/technologies/${image}.webp'
     height: 100px;
   }
 
-  article:hover h2 {
+  article:hover span {
-    color: white;
+    padding: 0 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
     background-color: var(--c-darkgray);
-    font-size: 18px;
+    height: 100%;
-    display: inline-block;
+    width: 100%;
-    vertical-align: center;
-    line-height: 150%;
-    width: 95%;
     opacity: 90%;
   }
 
+  article:hover h2 {
+    margin: 0;
+    display: inline-flex;
+    font-weight: bold;
+    color: white;
+    font-size: 18px;
+    line-height: 150%;
+  }
+
   article h2 {
     display: none;
   }
+
+  article span {
+    display: none;
+  }
 </style>

src/layouts/blogPost.astro

@@ -63,6 +63,26 @@ const date = new Date(frontmatter.pubDate).toLocaleDateString(
     max-width: max-content;
     background-color: var(--c-darkgray);
   }
+
+  article :global(h3) {
+    margin-bottom: 0.5rem;
+    margin-right: 3rem;
+    word-wrap: normal;
+    color: white;
+    padding: 0.25rem 0.75rem;
+    max-width: max-content;
+    background-color: var(--c-darkgray);
+  }
+
+  article :global(h4) {
+    margin-bottom: 0.5rem;
+    margin-right: 3rem;
+    word-wrap: normal;
+    color: white;
+    padding: 0.25rem 0.75rem;
+    max-width: max-content;
+    background-color: var(--c-darkgray);
+  }
   article :global(a) {
     color: var(--c-darkpurple);
     text-decoration: none;

src/pages/blog/astro-usage.md

@@ -9,9 +9,9 @@ tags: ['astro', 'coding']
 
 ## What is Astro
 
-[Astro](https://astro.build/) is a new type of all-in-one web framework, generally designed for speed. It's fascinating because it manages to integrate popular frameworks like `react` or `vue` while staying lightweight. It's really nice to use, especially coming from plain HTML + CSS.
+<a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> is a new type of all-in-one web framework, generally designed for speed. It's fascinating because it manages to integrate popular frameworks like `react` or `vue` while staying lightweight. It's really nice to use, especially coming from plain HTML + CSS.
 
-For a fast overview of Astro, look no further than [Astro in 100 Seconds](https://www.youtube.com/watch?v=dsTXcSeAZq8) by [Fireship](https://www.youtube.com/@Fireship)
+For a fast overview of Astro, look no further than <a href="https://www.youtube.com/watch?v=dsTXcSeAZq8" target="_blank" rel="noopener noreferrer">Astro in 100 Seconds</a> by <a href="https://www.youtube.com/@Fireship" target="_blank" rel="noopener noreferrer">Fireship</a>
 
 ## Why I like Astro
 

src/pages/blog/fgo-ta.md

@@ -0,0 +1,196 @@
+---
+layout: ../../layouts/blogPost.astro
+title: 'FGO TA - How, what, why'
+pubDate: 2023-03-16
+description: 'What FGO TA is, what brought me to it and how you can do it yourself!'
+author: 'Firq'
+tags: ['fgo', 'games']
+---
+
+TA is a central point about my experience of FGO. I am actively doing my own TAs since January 2022, focusing mainly on Shishou TA. However,
+I sometimes play around with other servants like Melt Lancer, Skadi, Tomoe or Welfares.
+
+## How did I get to TA
+
+Welllll .... blame <a href="https://youtube.com/@requiemta" target="_blank" rel="noopener noreferrer">@Requiem</a>. No, to be honest, I randomly started with TA in January 2023 when I wanted to try out something different for clearing Challenge Quests. I quickly started using Shishou for my TAs, and slowly learning the ins and outs of TA over the course of the CQs in 2022. Other players like Requiem or KOG were a great help in guiding me, as well as the people from Atlas Academy.
+
+## What is TA
+
+TA, short for **T**urn **A**ttack, is a form of completing challenging content in as little turns as possible. This means in most cases to break a bar each turn or defeat all enemies on screen in that turn. It differs from general farming, as TA is mostly associated with challenging content in FGO, while clearing farming nodes in 3 Turns is just considered 3-turing.
+
+### Types of TA
+
+- **Single-Core**: The simplest form of TA, using a single main DPS with supports
+- **Multi-Core**: A variation which uses multiple attackers
+- **No Duplicates**: Each servant is only allowed once. This includes supports
+- **Frontline Only / No Swap**: The amount of servants is limited to the frontline (3 servants max)
+- **No CE**: The DPS doesn't use a CE in general
+- **No Event CE**: A variation of No CE which only excluded Event Damage CEs
+- **No NP**: The DPS doesn't use its NP for clearing
+
+## How to TA
+
+This section is in no way perfect, it can however serve as a guideline for either getting into TA or expanding your general knowledge of the game. Be aware tho that, depending on the targeted node and enemies as well as gimmicks, this advice can sometimes not be applicable (see for example Challenge Quests with a different taunt behavior like the slapstick museum CQ).
+
+### Quests
+
+In general, most quests can be TA'd, which makes it pretty universal in FGO. But generally, there are four main categories of quests that get cleared in TA:
+
+- **Challenge Quests**: The High-Difficulty nodes in most events, they usually are repeatable and grant a Lore as clear reward
+- **Exhibition Quests**: Special High-Difficulty quests associated with special Lotto events like Nero-/Gil-/Ishtar-Fest
+- **Memorial Quests**: Quests available as a replay of previous High-Difficulty Quests, open either in a Main Interlude or for special events
+- **Special Story Quests**: Notable Quests from the main story that can be TA'd
+
+This is by no means a restrictive list, everyone is encouraged to try to TA everything. But most of the time, the run is done in one of these types of quests.
+
+### Servant
+
+So who can TA ... well, as it stands, most servants available can TA, but not everyone can TA everything.
+
+I chose Shishou for TA for multiple reasons:
+
+- **She is my Waifu**
+- **Her best support (Skadi) is also my Waifu**
+- Great Single Target damage
+- She has a special damage mod against 2 common traits (divine and undead)
+- She has cool animations and a cute costume <sub>_pyon pyon~_</sub>
+
+However, the stun on her NP as well as her bad gains and hitcounts make it pretty hard at times to get the best results. This doesn't stop me from trying tho 💜💜💜
+
+### Supports
+
+There are a lot of supportive servants that can be used for TA. General supports like Waver, specialized supports like Skadi or unusual supports like
+Hans. In general, most servants with the ability to buff others can be used for TA, but some are generally better than others.
+
+Typical SSR supports include Merlin, Skadi, Castoria, Waver, Reines, Van Gogh, Nero (Bride), while typical SR supports are Nightingale (Santa), Elizabeth,
+Jane or Wu Zetian. Most of the named supports can be found on the <a href="https://firq.dev/servants" target="_blank" rel="noopener noreferrer">Servants Page</a> of
+my site.
+
+Other interesting supports that I sometimes use are:
+
+- **Chiron**: A great general support with a multi-color-buff, critical stars and critical damage buffs
+- **Bartholomew**: One of the best quick supports if you are on budget ... multiple different buff types and low HP really go a long way
+- **Bunyan**: Since her release, she has been a great support because of buster buff and her low HP.
+
+But depending on the niches that need to be filled during a CQ, other supports are gonna be used in TA (for example Ibaraki for her debuff cleanse and critical
+buff).
+
+### CEs
+
+CEs play an important role in supporting or buffing the main TA servant. Some CEs even make the whole Clear possible, as without their effects a lack of damage or special gimmicks would prevent it. In the following paragraph, I will try to highlight some of the most important CEs for TA. For reference, you can
+look at the <a href="https://firq.dev/servants" target="_blank" rel="noopener noreferrer">CE Section of my Servants Page</a>.
+
+#### Taunt
+
+Taunt CEs enable one of the most important parts of TA: Cycling supports. Giving a low-HP support a taunt CE ensures that enemies will only attack this servant, making them die faster than by just relying on Lady Luck. Sadly, there are only two options for taunt CEs: Poster Girl and Outrage. Luckily, Outrage can be exchanged for from the RP shop.
+
+#### Starbombs
+
+Getting a burst of stars either at the start of the TA or when a support gets cycled in after some turns is a gamechanger when needing to crit. As gaining stars just from attacks isn't enough most of the time, these CEs enable a predictable amount of stars at specific points in the run. They work even better when combined with servants that have dependencies on stars like Jane.
+
+#### Bond CEs
+
+Getting a servant to Bond 10 usually takes quite a while (unless your name is WhiteFury). But for the supports, their effects usually are worth it. Skadi for example gives an extra 10% Quick Buff and 15% Critical Damage as long as she's on field.
+In general, these CEs can easily be used to passively buff the DPS servant a bit further.
+
+#### Other
+
+Some other CEs that are used a lot in TA:
+
+- **Black Grail**: Best NP damage CE in the game, the demerit of 500 damage/turn can usually be ignored as the quest is completed before the amount of damage becomes too much
+- **Holy Night Supper**: A general BiS CE for servants, as 50% starting Gauge, 15% NP Damage and 15% Critical Damage go a long way in TA
+- **Devilish Bodhisattva**: Nice CE for giving 60% Charge to a support servant as well as 2 levels of overcharge. Works really well with Van Gogh for the extra damage.
+- **A Fragment of 2030**: Gaining 12 Stars/Turn is a great way to get a sustained amount of stars, even better when combined with a support like BB (Summer) for the card lock
+
+### Save-Loading / Save-Scumming
+
+Save loading or save scumming is a strategy to ensure that the correct RNG happens during the run. For this, when a skill that has RNG elements is used (such as Shishou S1), the game can be quit before the skill animation completes. Upon loading back into the game, the skill is still unused.
+
+As the RNG seed for skills only changes upon skill usage, using another skill (preferably non-RNG), the seed for the RNG skill can be reset. Repeat this procedure and you can almost guarantee each skill.
+
+This tactic can also be applied to the attack turn itself. The RNG seed can be reset by doing the following:
+
+- Different chain hitcounts
+- Different enemy attacked/killed
+- Skill used
+- Command Spell used
+
+The important thing is that the game is quit before the player reaches the next turn.
+
+The RNG seed applies to critical chance, enemy actions and the damage roll. As the damage you deal with each card varies between 90% and 110%, you can use this strategy to etch out damage high-rolls for certain situations.
+
+### Support-Cycling
+
+As the turns of the quest pass, buffs will run out, charge will be needed, debuffs need to be cleansed ... That's where the topic of support-cycling comes in.
+This simply means that a support present on field (that already used all of its skills) gets swapped out or defeated in favor of another support that can apply
+new skills.
+
+Cycling supports can be achieved in three ways:
+
+- The servant gets defeated
+- The servant gets swapped out (Order Change, Miss Crane NP)
+- The servant gets sacrificed (The GONG)
+
+If a servant needs to be defeated, it is advisable to either use a low-rarity support that needs to be cycled (low HP) or an esports version of a SSR. Esports
+simply means that the servant in question is only leveled until all of its skills are unlocked. For example, a level 70 Skadi has already access to all of her skills,
+but she has 2767 HP less than her level 90 version. This can be the difference between getting her defeated or her surviving.
+
+Even for low-rarity servants, it makes usually sense to keep an esports copy just to make sure that they get defeated, even if the enemy is Odysseus (who struggled to defeat an esports Skadi in three actions with x2 class advantage).
+
+### Command Codes
+
+Command Codes can be, just like CEs, real gamechangers. As an example: In <a href="https://www.youtube.com/watch?v=lz6iBZvoDuw" target="_blank" rel="noopener noreferrer">this video</a>, MHXX has a 80% defense buff for Turn 1. The last quick card in the chain has an ignore defense CC, which enables it to do normal damage and breaking the bar with it. Other great CCs are the Ignore Invincibility one as well as the crit damage buff CCs, but the best CCs are hands down the NP Charge CC (+10% charge just for using the card every 3 turns) and the NP damage CCs (+8 Party or +15% self NP damage).
+
+These CCs can sometimes be the difference between completing a run or it being impossible.
+
+## More helpful information
+
+To get better results from your own TA attempts, I have compiled a list of small tweaks and tips to help with getting more consistent results.
+
+### Damage Calculator
+
+In general, it is recommended to calculate each turn of the TA beforehand. This helps preventing situations where you TA for hours only to find out even your high-roll won't be enough to finish the enemy. Todays damage calculators and bots also can calculate parameters like NP refund, critical stars, full chains and more. This helps with keeping an overview over the whole run and ensuring correct skill orders.
+
+Damage calculation tools that I usually use are:
+
+- <a href="https://discord.gg/TKJmuCR" target="_blank" rel="noopener noreferrer">Archimedes Bot, available in DMs or on the Atlas Academy Discord</a>
+- <a href="https://maketakunai.github.io/" target="_blank" rel="noopener noreferrer">Maketakunai NP damage calculator</a>
+
+### Recording
+
+Recording TAs in general is easy: You just need to record your phone screen and audio. Since most phones already have a built-in screen recorder, anyone can use that for getting their TAs recorded. However, if you want to go the extra mile like me, you can use different setups to capture your phone.
+
+#### OBS
+
+For capturing using a PC, I would always recommend <a href="https://obsproject.com/" target="_blank" rel="noopener noreferrer">OBS</a>. It is hands-down the best recording software, completely free of charge. Setting it up is really easy, as is using it. The files get recorded on your PC in your desired quality, ready to pe processed by the editing software of your choice.
+
+Just be sure to use OBS itself and not something like Streamlabs-OBS (just my personal opinion)
+
+#### scrcpy
+
+To get your phone screen (and audio as of version 2.0) to your PC, I would always recommend <a href="https://github.com/Genymobile/scrcpy" target="_blank" rel="noopener noreferrer">scrcpy (screen copy)</a>. Not because I have some commits in the project, but rather because it's an amazing piece of software that does most thing better than paid apps.
+
+To get started, download the latest release from their git repository, unzip it and you're good to go. Just attach your phone via a cable, call scrcpy from the terminal and voilá: You have a mirrored window of your phone.
+Such a simple way definitely deserves more recognition, so if you like it, feel free to share.
+
+#### Capture Card
+
+Another method would be to use a USB capture card. These can be found for cheap prices on Amazon, as well as everything else that's needed (HDMI cable, HDMI to USB-C converter). With these, the capture card acts like an external display so that it can be captured by OBS using the `Video Capture Device` option as source.
+
+### Key Mapper
+
+For save-scumming, it can be advisable (especially if you use screen gestures) to use a key mapper app. With this, any key on your phone can be remapped to do a certain action.
+
+Usually, I map `[Volume Up]` --> `[Home]` so that if I need to quit the game for canceling a skill, I just need to press one button instead of doing two swipes.
+This also drastically reduced the amount of times where I accidentally clicked and animation-skipped a skill I wanted to save-scum.
+
+## Closing Words
+
+I hope I could give you a glimpse into the world of FGO TA and the methods I usually use to perform them myself.
+
+If any other questions arise or if you find something that either seems wrong to you or that is missing, feel free to reach out.
+My contact details can be found <a href="https://firq.dev/about" rel="noopener noreferrer">in the contact section.</a>
+
+Anyway, thanks for the read, I hope you could learn something
+
+~ Firq

src/pages/blog/hello-world.md

@@ -14,13 +14,12 @@ Well ... that took some time to get up and running. But nonetheless, here we are
 My own site! Well, I should explain a bit more ...
 
 Last year, someone asked me if I could provide them with a list of servants and CEs that I own and that are often used in FGO TA. At first, I started writing down
-the servants as markdown files (kinda ironic, this is a markdown file as well). But after a while, a good friend, [Neshura](https://mastodon.neshweb.net/@neshura)
+the servants as markdown files (kinda ironic, this is a markdown file as well). But after a while, a good friend, <a href="https://mastodon.neshweb.net/@neshura" target="_blank" rel="noopener noreferrer">Neshura</a> said to me: "Why don't you just create a small site with GitLab Pages? You can host that on my instance". And so, I started writing HTML and CSS by hand, getting the
-said to me: "Why don't you just create a small site with GitLab Pages? You can host that on my instance". And so, I started writing HTML and CSS by hand, getting the
+first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to <a href="https://www.mitsunee.com/" target="_blank" rel="noopener noreferrer">Mitsunee</a> for helping me so much with the CSS).
-first version of this site done after 1-2 days. It was challenging, as my experience with CSS was limited, but in the end, it was ready (special thanks again to [Mitsunee](https://www.mitsunee.com/) for helping me so much with the CSS).
 
 But I got tired of always writing the same lines of code (because that happens if you have multiple cards with different content), so I kinda stopped updating the site for a while.
 
-But then came [Astro](https://astro.build). When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those.
+But then came <a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a>. When Mitsunee recommended it to me, I was instantly amazed by how easy this was ... I just needed to migrate the existing site to Astro (which took me a bit) and adapt the `gitlab-ci.yml`, and it was done! It felt amazing, having reusable components and simple creation of those.
 Shout outs to one of my favourite lines which creates the servant cards on the Servants page:
 
 ```typescript