test conversion back to markdown

1 files changed, 0 insertions, 178 deletions

diff --git a/content/blog/2019-01-07-useful-css.org b/content/blog/2019-01-07-useful-css.org
deleted file mode 100644
index c3c4b19..0000000
--- a/content/blog/2019-01-07-useful-css.org
+++ /dev/null
@@ -1,178 +0,0 @@
-#+title: Useful CSS Snippets
-#+date: 2019-01-07
-#+description: Explore some useful CSS snippets.
-#+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,
-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.
-
-* 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.
-
-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:
-
-#+begin_src css
-:root {
-    --primary-color: black;
-    --secondary-color: white;
-}
-
-body {
-    background-color: var(--primary-color);
-    color: var(--secondary-color);
-}
-#+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:
-
-#+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.
-
-*Box Shadow #1*
-
-#+begin_src html
-<div class="shadow-examples">
-    <div class="box effect1">
-        <h3>Effect 1</h3>
-    </div>
-</div>
-#+end_src
-
-#+begin_src css
-.box h3 {
-    text-align: center;
-    position: relative;
-    top: 80px;
-}
-.box {
-    width: 70%;
-    height: 200px;
-    background: #fff;
-    margin: 40px auto;
-}
-.effect1 {
-    box-shadow: 0 10px 6px -6px #777;
-}
-#+end_src
-
-*Box Shadow #2*
-
-#+begin_src html
-<div class="shadow-examples">
-    <div class="box effect2">
-        <h3>Effect 2</h3>
-    </div>
-</div>
-#+end_src
-
-#+begin_src css
-.box h3 {
-    text-align: center;
-    position: relative;
-    top: 80px;
-}
-.box {
-    width: 70%;
-    height: 200px;
-    background: #fff;
-    margin: 40px auto;
-}
-.effect2 {
-    box-shadow: 10px 10px 5px -5px rgba(0, 0, 0, 0.75);
-}
-#+end_src
-
-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.
-
-*Flexbox*
-
-#+begin_src html
-<div class="flex-examples">
-    <div class="sm-box">
-        <h3>1</h3>
-    </div>
-    <div class="sm-box">
-        <h3>2</h3>
-    </div>
-</div>
-#+end_src
-
-#+begin_src css
-.flex-examples {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    align-items: center;
-    padding: 10px;
-    background-color: #f2f2f2;
-}
-.sm-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 20%;
-    height: 100px;
-    background: #fff;
-    margin: 40px 10px;
-}
-#+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.
-
-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
-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.