feat: finishedHEADmain

3 files changed, 34 insertions, 14 deletions

diff --git a/index.html b/index.html
index e0a6af0..6c67f60 100644
--- a/index.html
+++ b/index.html
@@ -28,16 +28,20 @@
     </figure>
 	<div class="wordart tilt"><h3 class="text">WordArt</h3></div>
     <p>WordArt has become easily recognizable in it's primary uses (PowerPoint presentations and technically every Office suite program), to the point of becoming overused and associated to the fact that it was overused. This led to this feature slowly turning old-fashioned. If someone today was to use WordArt in a presentation, it would be immediately noticed as being <i>cliché</i>, or <i>kitsch</i>.<br>
-In case you had never heard about <b>WordArt</b>, it's a feature that's been present in PowerPoint for a while now (1991), which allows you to make some cool-ahh text effects. Rather than installing some unnecessary bloatware on my computer, I'm using a <a href="https://www.makewordart.com/">web editor</a> as well as some css snippets I <s>stole</s> found <a href="https://www.designpieces.com/2017/03/wordart-css3-text-effects">here</a> and <a href="https://codepen.io/front-end-developer/pen/omYJax">there</a> to style this article. These showcase some features of <b>WordArt</b>, but feel free to try out what PowerPoint has to offer, as the full power of <b>WordArt</b> won't be covered in the span of this article.</p>
+In case you had never heard about <b>WordArt</b>, it's a feature that's been present in PowerPoint for a while now (1991), which allows you to make some cool-ahh text effects. Rather than installing some unnecessary bloatware on my computer, I'm using a <a href="https://www.makewordart.com/">web editor</a> as well as some css snippets I <s>stole</s> found <a href="https://www.designpieces.com/2017/03/wordart-css3-text-effects">here</a> and <a href="https://codepen.io/front-end-developer/pen/omYJax">there</a> to style this article (honorable mention to <a href="https://arizzitano.github.io/css3wordart/">this website</a> which I found out about way too late). These showcase some features of <b>WordArt</b>, but feel free to try out what PowerPoint has to offer, as the full power of <b>WordArt</b> won't be covered in the span of this article.</p>
 	<br>
 	<div class="wordart superhero"><h2 class="text">Playing with the features</h2></div>
-    <p>While CSS technically allows for more features, the core features of <b>WordArt</b> include (along the usual color/highlighting/outline/etc. customizations) text effects ranging from good old shadows to letter 3-D shaping and text distortion :</p>
-    <img src="img/features.png" alt="sowwy no features">
-    <p>Here's a global showcase (stolen from <a href="https://www.makewordart.com/images/meta/meta.png">makewordart</a>) of what WordArt is capable of !
-    <img src="img/stolen.png" alt="I totally stole this one but I really need to finish this article">
+    <figure>
+        <figcaption>While CSS technically allows for more features, the core features of <b>WordArt</b> include (along the usual color/highlighting/outline/etc. customizations) text effects ranging from good old shadows to letter 3-D shaping and text distortion :</figcaption>
+        <img src="img/features.png" alt="sowwy no features" style="width: 30%;">
+    </figure>
+    <figure>
+        <figcaption>Here's a global showcase (stolen from <a href="https://www.makewordart.com/images/meta/meta.png">makewordart</a>) of what WordArt is capable of !</figcaption>
+        <img src="img/stolen.png" alt="I totally stole this one but I really need to finish this article">
+    </figure>
 	<br>
 	<div class="wordart superhero"><h2 class="text"><a href="https://www.youtube.com/watch?v=M9J6DKJXoKk" target=blank>Dr. Kleiner sings or something</a></h2></div>
-    <p>Overall, I believe that kitsch isn't (or at least shouldn't be) a pejorative term. The "decay" of <b>WordArt</b> (or anything considered as kitsch) is a chance for a return marked by nostalgia and remembrance.</p>
+    <p>Overall, I believe that kitsch isn't (or at least shouldn't be) a pejorative term. The "decay" of <b>WordArt</b> (or anything considered as kitsch) is a chance for a return marked by nostalgia and remembrance. I think WordArt just doesn't fit in today's graphical standard of everything being over-simplified and clean looking (which is a shame), and I've always seen WordArt as the Web revival equivalent of PowerPoint presentation styles. I believe that kitsch mostly means outdated, and that WordArt still has a chance in our presentations.</p>
 	<br>
 	<footer>Written by 👋 with ❤️ in a short amount of ⌛ by <a href="https://marcellus.cc">Marcellus</a>, going back to my compiler project</footer>
 </body>
diff --git a/style.css b/style.css
index ab8b1b1..b497f24 100644
--- a/style.css
+++ b/style.css
@@ -11,10 +11,26 @@ a {
 p {
     border-width: 2px;
     border-style: solid;
-    border-image: linear-gradient(yellow 0%, green 90%, blue 25%) 50;
+    border-image: linear-gradient(yellow 0%, blue 25%, green 90%) 50;
     margin-right: 20%;
     margin-left: 5%;
     padding: 20px;
-    background: #fffdfa77;
-    font-family: sans-serif;
+    background: #fffdfa88;
+    font-family: serif;
+    font-size: large;
 }
+
+figure {
+    border-width: 2px;
+    border-style: solid;
+    border-image: linear-gradient(salmon 0%, red 25%, orange 90%) 50;
+    margin-right: 20%;
+    margin-left: 5%;
+    padding: 20px;
+    background: #fffdfa88;
+    font-family: serif;
+}
+
+figure img {
+    width: 100%;
+}
\ No newline at end of file
diff --git a/wordart.css b/wordart.css
index b25afda..03bc21d 100644
--- a/wordart.css
+++ b/wordart.css
@@ -50,11 +50,11 @@
 
 
 .wordart.superhero {
-    transform: skew(0, -15deg);
-    -webkit-transform: skew(0, -15deg);
-    -moz-transform: skew(0, -15deg);
-    -o-transform: skew(0, -15deg);
-    -ms-transform: skew(0, -15deg);
+    transform: skew(0, -10deg);
+    -webkit-transform: skew(0, -10deg);
+    -moz-transform: skew(0, -10deg);
+    -o-transform: skew(0, -10deg);
+    -ms-transform: skew(0, -10deg);
 }
 
 .wordart.superhero .text {