add infobox & custom styling & crimson sweet spot

4 files changed, 155 insertions, 0 deletions

diff --git a/blocking/Makefile b/blocking/Makefile
index a604f68..e13482b 100644
--- a/blocking/Makefile
+++ b/blocking/Makefile
@@ -7,6 +7,7 @@ html:
 	mkdir -p html
 	make4ht -d html blocking.tex
 	make4ht -d html blocking.tex
+	cat custom.css >> html/blocking.css
 	rm blocking.4ct blocking.4tc blocking.aux blocking.dvi blocking.idv blocking.lg blocking.log blocking.tmp blocking.xref blocking.css blocking.html
 
 all: pdf html
diff --git a/blocking/blocking.tex b/blocking/blocking.tex
index df0d317..357ed1f 100644
--- a/blocking/blocking.tex
+++ b/blocking/blocking.tex
@@ -5,6 +5,7 @@
 \usepackage{ccicons}
 \usepackage{graphicx}
 \usepackage{csquotes}
+\usepackage[many]{tcolorbox}
 
 
 \setlength{\parskip}{1em}
@@ -30,6 +31,33 @@
 \fi
 
 
+\iftexforht
+\newenvironment{infobox}[1][]{
+  \HCode{</p><div class="infobox"><p>}
+  \textbf{#1}:
+}{
+  \HCode{</p></div><p>}
+}
+\else
+\newtcolorbox{infobox}[1][]{
+  breakable,
+  title=#1,
+  colback=white,
+  colbacktitle=white,
+  coltitle=black,
+  fonttitle=\bfseries,
+  bottomrule=0pt,
+  toprule=0pt,
+  leftrule=3pt,
+  rightrule=3pt,
+  titlerule=0pt,
+  arc=0pt,
+  outer arc=0pt,
+  colframe=black,
+}
+\fi
+
+
 \newcommand{\youtube}[2]{
   \iftexforhtTF{
     \begin{figure}
@@ -204,6 +232,15 @@ If you hit the wurm with a melee weapon (even if it's still invulnerable), the s
 Knowing where the sweet spot is can help you with placing your blocking skills, and it's essential to husk blocking.
 
 
+\subsubsection{Crimson}
+
+\begin{figure}[ht]
+  \centering
+  \includegraphics[width=\textwidth]{images/sweet-spot-crimson.png}
+  \caption{Location of the Sweet Spot on the Crimson wurm head.}
+\end{figure}
+
+
 \subsection{Husk Blocking}
 
 Unlike egg blocking, husk blocking requires a bit more precision, as husks cannot be blocked by simply placing projectile reflect/destruction skills in their path.
@@ -347,6 +384,13 @@ On its own, this skill is not very useful for blocking, but we will combine it w
 You will usually not need this, but it is good to keep in mind:
 If you mess up somewhere, swap to Focus and use \uskill{Temporal Curtain} as a reflect!
 
+\begin{infobox}[About skill placement]
+  If you click your skill on the UI, or you press your key while your mouse cursor is hovering over some UI element, the skill will be cast at the exact position that you are standing at.
+  This means that if you are standing on the Sweet Spot, and you cast e.g. \uskill{Temporal Curtain} this way, it will be cast directly on the Sweet Spot as well, allowing it to reliably block every egg.
+
+  This works for other reflects as well, e.g. the Guardian's \href{https://wiki.guildwars2.com/wiki/Wall_of_Reflection}{\uskill{Wall of Reflection}}.
+\end{infobox}
+
 Now we can take a look at the utility skills.
 We already know that \uskill{Mimic} and \uskill{Feedback} are set, which leaves us with a healing skill, a single utility skill and the elite skill.
 
diff --git a/blocking/custom.css b/blocking/custom.css
new file mode 100644
index 0000000..af5dede
--- /dev/null
+++ b/blocking/custom.css
@@ -0,0 +1,110 @@
+/* see https://github.com/huyng/latex-simple-css */
+body {
+    /* Serif options */
+    /*font-family: "Times New Roman", Times, serif;*/
+    /*font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif    */
+
+    /*Sans Serif options */
+    /*font-family: "Helvetica", Arial, Freesans, clean, sans-serif;*/
+    font-family: "Helvetica Neue", Arial, Freesans, clean, sans-serif;
+    /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;*/
+    /*font-family: "Trebuchet MS", Helvetica, sans-serif;*/
+    /*font-family: Verdana, Geneva, sans-serif;*/
+    /*font-family: Tahoma, Geneva, sans-serif;*/
+    /*font-family: Baskerville, 'Times New Roman', Times, serif;*/
+
+
+    padding:1em;
+    font-size: 14px;
+    font-weight:300;    
+    line-height: 20px;
+    margin:10em;
+    max-width:42em;
+    background:#fefefe;
+    color:#333;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    margin: 2em 0px 15px 0px;
+}
+
+h1 {
+    color: #000;
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 2em;
+}
+
+h3 {
+    font-size: 1.6em;
+}
+
+h4 {
+    font-size: 1.3em;
+}
+
+h5 {
+    font-size: 1em;
+}
+
+h6 {
+    color: #777777;
+    background-color: inherit;
+    font-size: 1em;
+}
+
+hr {
+    height: 0.2em;
+    border: 0;
+    color: #CCCCCC;
+    background-color: #CCCCCC;
+}
+
+p, blockquote, ul, ol, dl, li, table, pre {
+    margin: 15px 0;
+}
+
+code, pre {
+    border-radius: 3px;
+    background-color: #F8F8F8;
+    color: inherit;
+}
+
+code {
+    border: 1px solid #EAEAEA;
+    margin: 0 2px;
+    padding: 0 5px;
+}
+
+pre {
+    border: 1px solid #CCCCCC;
+    line-height: 1.25em;
+    overflow: auto;
+    padding: 6px 10px;
+}
+
+pre > code {
+    border: 0;
+    margin: 0;
+    padding: 0;
+}
+
+a, a:visited {
+    color: #4183C4;
+    background-color: inherit;
+    text-decoration: none;
+}
+
+img {
+    max-width: 100%;
+}
+
+/* end custom css */
+
+div.infobox {
+    border-left: 5px solid green;
+    border-right: 5px solid green;
+}
diff --git a/blocking/images/sweet-spot-crimson.png b/blocking/images/sweet-spot-crimson.png
new file mode 100644
index 0000000..256bf66
--- /dev/null
+++ b/blocking/images/sweet-spot-crimson.png