format a portion of blog posts

1 files changed, 51 insertions, 62 deletions

diff --git a/content/blog/2019-01-07-useful-css.org b/content/blog/2019-01-07-useful-css.org
index fa5edc5..c3c4b19 100644
--- a/content/blog/2019-01-07-useful-css.org
+++ b/content/blog/2019-01-07-useful-css.org
@@ -4,34 +4,30 @@
 #+filetags: :dev:
 
 * Introduction to CSS
-[[https://en.wikipedia.org/wiki/CSS][CSS]], the language used to markup
-HTML code and make it "pretty", is one of the most effective ways to
-increase the attractiveness of a website. It can also lead to increased
-user engagement, retention, and satisfaction. In fact, there are whole
-career fields are dedicated to the improvement of user experiences,
+[[https://en.wikipedia.org/wiki/CSS][CSS]], the language used to markup HTML code and make it "pretty", is one of the
+most effective ways to increase the attractiveness of a website. It can also
+lead to increased user engagement, retention, and satisfaction. In fact, there
+are whole career fields are dedicated to the improvement of user experiences,
 known as UI design and UX design.
 
-Some web developers are used to the common CSS properties, such as
-element sizing, fonts, colors, etc., but are not as well versed in
-less-used properties and values such as =flexbox=, =clip-path=, and
-=transform=. This article will provide some insight into the less-used
-and unique CSS properties.
+Some web developers are used to the common CSS properties, such as element
+sizing, fonts, colors, etc., but are not as well versed in less-used properties
+and values such as =flexbox=, =clip-path=, and =transform=. This article will
+provide some insight into the less-used and unique CSS properties.
 
 * CSS Variables
-The first topic today is CSS variables. Variables are not often used by
-smaller developers. CSS variables allow you to give your website a
-well-defined structure, where you can easily reuse CSS properties
-throughout the project.
+The first topic today is CSS variables. Variables are not often used by smaller
+developers. CSS variables allow you to give your website a well-defined
+structure, where you can easily reuse CSS properties throughout the project.
 
-You can use variables to define things, such as color palettes. Then,
-you can use these colors for backgrounds anywhere else in the HTML. This
-could be extended, where extra variables could be defined for
-=primary-text=, =quoted-text=, etc. Variables can also be used to define
-spacing (e.g. =32px= or =2rem=), which can then be applied to margins,
-padding, font sizes, and more.
+You can use variables to define things, such as color palettes. Then, you can
+use these colors for backgrounds anywhere else in the HTML. This could be
+extended, where extra variables could be defined for =primary-text=,
+=quoted-text=, etc. Variables can also be used to define spacing (e.g. =32px= or
+=2rem=), which can then be applied to margins, padding, font sizes, and more.
 
-For example, here are some variables defined at the root of the website,
-which allows for any subsequent CSS rules to use those variables:
+For example, here are some variables defined at the root of the website, which
+allows for any subsequent CSS rules to use those variables:
 
 #+begin_src css
 :root {
@@ -46,23 +42,21 @@ body {
 #+end_src
 
 * CSS Box Shadows
-Box shadows were once my mortal enemy. No matter how hard I tried, I
-just couldn't get them to work how I wanted. Because of this, my
-favorite discovery has been CSSMatic's
-[[https://www.cssmatic.com/box-shadow][box shadow generator]]. It
-provides an excellent tool to generate box shadows using their simple
-sliders. Surprisingly, this is the reason I learned how box shadows
-work! You can use the sliders and watch how the CSS code changes in the
-image that is displayed. Through this, you should understand that the
-basic structure for box shadows is:
+Box shadows were once my mortal enemy. No matter how hard I tried, I just
+couldn't get them to work how I wanted. Because of this, my favorite discovery
+has been CSSMatic's [[https://www.cssmatic.com/box-shadow][box shadow generator]]. It provides an excellent tool to
+generate box shadows using their simple sliders. Surprisingly, this is the
+reason I learned how box shadows work! You can use the sliders and watch how the
+CSS code changes in the image that is displayed. Through this, you should
+understand that the basic structure for box shadows is:
 
 #+begin_src css
 box-shadow: inset horizontal vertical blur spread color;
 #+end_src
 
-Now, let's look at some basic examples! You can copy and paste the
-following code into a site like CodePen or your own HTML files. Feel
-free to play around with the code, experiment, and learn.
+Now, let's look at some basic examples! You can copy and paste the following
+code into a site like CodePen or your own HTML files. Feel free to play around
+with the code, experiment, and learn.
 
 *Box Shadow #1*
 
@@ -118,21 +112,19 @@ free to play around with the code, experiment, and learn.
 }
 #+end_src
 
-Try these box shadows out on your own and see how changing each shadow
-value works.
+Try these box shadows out on your own and see how changing each shadow value
+works.
 
 * CSS Flexbox
-Now, let's move on to the best part of this article: flexbox. The
-flexbox is by far my favorite new toy. I originally stumbled across this
-solution after looking for more efficient ways of centering content
-horizontally AND vertically. I had used a few hack-ish methods before,
-but flexbox throws those out the window. The best part of it all is that
-flexbox is /dead simple/.
-
-Flexbox pertains to the parent div of any element. You want the parent
-to be the flexbox in which items are arranged to use the flex methods.
-It's easier to see this in action that explained, so let's see an
-example.
+Now, let's move on to the best part of this article: flexbox. The flexbox is by
+far my favorite new toy. I originally stumbled across this solution after
+looking for more efficient ways of centering content horizontally AND
+vertically. I had used a few hack-ish methods before, but flexbox throws those
+out the window. The best part of it all is that flexbox is /dead simple/.
+
+Flexbox pertains to the parent div of any element. You want the parent to be the
+flexbox in which items are arranged to use the flex methods. It's easier to see
+this in action that explained, so let's see an example.
 
 *Flexbox*
 
@@ -167,23 +159,20 @@ example.
 }
 #+end_src
 
-You may notice that we no longer need to use the =top= property for the
-=h3= elements in our code. This is because we set the display box to be
-a flex container for the small boxes, AND we made the small boxes flex
-containers for their elements (the h3 tags). Flex boxes can be nested
-like this to center content that is inside centered content.
+You may notice that we no longer need to use the =top= property for the =h3=
+elements in our code. This is because we set the display box to be a flex
+container for the small boxes, AND we made the small boxes flex containers for
+their elements (the h3 tags). Flex boxes can be nested like this to center
+content that is inside centered content.
 
-For the example above, we designated the =justify-content= property to
-be =flex-start= so that the boxes stack from the left side of the
-screen. This property can be changed to =center= to make the boxes
-appear in the center of the screen.
+For the example above, we designated the =justify-content= property to be
+=flex-start= so that the boxes stack from the left side of the screen. This
+property can be changed to =center= to make the boxes appear in the center of
+the screen.
 
-For an interactive example,
-[[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]]
-from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
+For an interactive example, [[https://codepen.io/LandonSchropp/pen/KpzzGo][check out this CodePen]] from [[https://codepen.io/LandonSchropp/][LandonScropp]]. Resize the
 window with dice to see how they collapse and re-align.
 
 * Even More CSS
-For more inspiration, you can visit [[https://www.codepen.io][CodePen]],
-[[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI
-Movement]] to browse the collections of many amazing web designers.
+For more inspiration, you can visit [[https://www.codepen.io][CodePen]], [[https://dribbble.com][Dribbble]], or [[https://uimovement.com][UI Movement]] to browse
+the collections of many amazing web designers.