More component stylings.

intern0t · Nov 4, 2018 · e0f25ff · e0f25ff
1 parent 2b0ffd7
commit e0f25ff
Show file tree

Hide file tree

Showing 12 changed files with 252 additions and 40 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 _site
 .sass-cache
 .jekyll-metadata
-_posts/20*.md
+_posts/20*.md
+!_posts/*-demo.md
diff --git a/_config.yml b/_config.yml
@@ -19,11 +19,10 @@ description: >- # this means to ignore newlines until "baseurl:"
     Write an awesome description for your new site here. You can edit this
     line in _config.yml. It will appear in your document head meta (for
     Google search results) and in your feed.xml site description.
-baseurl: "/blair-jekyll-theme" # the subpath of your site, e.g. /blog
+baseurl: "" # the subpath of your site, e.g. /blog
 url: "" # the base hostname & protocol for your site, e.g. http://example.com
-twitter_username: jekyllrb
-github_username: jekyll
-
+twitter_username: InvalidxSyntax
+github_username: intern0t
 
 excerpt_separator: "<!--excerpt-->"
 

diff --git a/_layouts/home.html b/_layouts/home.html
@@ -7,9 +7,9 @@
 <div class="posts">
 	{% for post in paginator.posts %}
 	<article class="post home-post">
-		<h4>
+		<h3>
 			<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
-		</h4>
+		</h3>
 
 		<div clsss="meta">
 			<div class="post-misc">

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -3,9 +3,9 @@
 ---
 
 <article class="post" itemscope itemtype="http://schema.org/BlogPosting">
-	<h4 itemprop="name headline">
+	<h3 itemprop="name headline">
 		<a class="title" href="{{ page.url | relative_url }}">{{ page.title | escape }}</a>
-	</h4>
+	</h3>
 
 	<div class="post-misc">
 		<div class="post-meta">

diff --git a/_posts/2018-11-03-welcome-to-jekyll.markdown → _posts/2018-11-03-welcome-to-jekyll-demo.md b/_posts/2018-11-03-welcome-to-jekyll.markdown → _posts/2018-11-03-welcome-to-jekyll-demo.md
diff --git a/_posts/2018-11-04-style-test-demo.md b/_posts/2018-11-04-style-test-demo.md
@@ -0,0 +1,109 @@
+---
+layout: post
+title: "A Full and Comprehensive Style Test"
+tags: test styles markdown design layout
+categories: test
+---
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fringilla ex nec tellus feugiat euismod at et ligula. Maecenas dignissim mauris sed quam consectetur mattis. Vestibulum at nulla justo. Fusce aliquet, magna sit amet auctor imperdiet, nisi lacus efficitur sem, nec placerat lacus quam in dui. Mauris ultricies quam quis eros sollicitudin placerat. Donec accumsan vitae nisi eu pharetra. Nunc id interdum odio. Maecenas in facilisis tellus. Mauris enim ipsum, aliquet ac mollis eu, consectetur quis urna. Quisque auctor posuere lorem, et rutrum eros congue in. Duis massa metus, iaculis nec arcu nec, mattis aliquet nulla. Phasellus eget justo consequat, efficitur neque non, cursus mi.
+<!--excerpt-->
+
+## 1. Header 
+
+# Header 1
+
+## Header 2
+
+### Header 3
+
+#### Header 4
+
+##### Header 5
+
+###### Header 6
+
+### 1-1. Header Alignment 
+
+##### Left(Default)
+
+##### Center
+{: .center}
+
+##### Right
+{: .right}
+
+## 2. Body Text
+
+Lorem ipsum dolor sit amet, [test link](#) adipiscing elit. **This is strong.** Nullam dignissim convallis est. Quisque aliquam. *This is emphasized.* Donec faucibus. Nunc iaculis suscipit dui. 5<sup>3</sup> = 125. Water is H<sub>2</sub>O. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. <u>Underline</u>. Maecenas ornare tortor. Donec sed tellus eget `COPY filename` sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, <del>Dinner’s at 5:00.</del> commodo vitae, feugiat in, nunc. Morbi imperdiet augue <mark>mark element</mark> quis tellus.
+
+## 3. Images
+
+![Large example image](http://placehold.it/800x400 "Large example image")
+![Medium example image](http://placehold.it/400x200 "Medium example image")
+![Small example image](http://placehold.it/200x200 "Small example image")
+
+### 3-1. Image Alignment
+![Center example image](http://placehold.it/200x200 "Center"){: .center-image}
+
+## 4. Blockquotes
+
+> Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam.
+
+## 5. List Types
+
+### Unordered List
+
+* Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+* Nam ultrices nunc in nisi pellentesque ultricies. Cras scelerisque ipsum in ante laoreet viverra. Pellentesque eget quam et augue molestie tincidunt ac ut ex. Sed quis velit vulputate, rutrum nisl sit amet, molestie neque. Vivamus sed augue at turpis suscipit fringilla.
+* Integer pretium nisl vitae justo aliquam, at varius nisi blandit.
+  1. Nunc vehicula nulla ac odio gravida vestibulum sed nec mauris.
+  2. Duis at diam eget arcu dapibus consequat.
+* Etiam vel elit in purus iaculis pretium.
+
+### Ordered List
+
+1. Quisque ullamcorper leo non ex pretium, in fermentum libero imperdiet.
+2. Donec eu nulla euismod, rhoncus ipsum nec, faucibus elit.
+3. Nam blandit purus gravida, accumsan sem in, lacinia orci.
+  * Duis congue dui nec nisi posuere, at luctus velit semper.
+  * Suspendisse in lorem id lacus elementum pretium nec vel nibh.
+4. Aliquam eget ipsum laoreet, maximus risus vitae, iaculis leo.
+
+### Definition Lists
+
+kramdown
+: A Markdown-superset converter
+
+Maruku
+: Another Markdown-superset converter
+
+## 6. Tables
+
+| Header1 | Header2 | Header3 |
+|:--------|:-------:|--------:|
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|----
+| cell1   | cell2   | cell3   |
+| cell4   | cell5   | cell6   |
+|=====
+| Foot1   | Foot2   | Foot3
+
+
+## 7. Code Snippets
+
+### Highlighted Code Blocks
+
+{% highlight css %}
+#container {
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
+}
+{% endhighlight %}
+
+### Standard code block
+
+    <div id="awesome">
+      <p>This is great isn't it?</p>
+    </div>
diff --git a/_sass/_colors.scss b/_sass/_colors.scss
@@ -14,4 +14,6 @@ $Sail: #9CD7F7;
 $TrendyPink: #875088;
 $TePapaGreen: #1F3341;
 $MaroonFlush: #c7254e;
-$SoftPeaches: #f9f2f4;
+$SoftPeaches: #f9f2f4;
+$Boulder: #797979;
+$OuterSpace: #2b353c;
diff --git a/_sass/_components.scss b/_sass/_components.scss
@@ -8,12 +8,13 @@
 $TwoPix: 2px;
 
 code {
-    background: $SoftPeaches;
-    color: $MaroonFlush;
-    padding: $TwoPix ($TwoPix * 3);
-    border-radius: $TwoPix;
-    font-size: ($TwoPix * 6) + 1;
     @include font($globalCodeFontFamily);
+    box-shadow: inset 0 0 3px #000000;
+    background: $OuterSpace;
+    padding: ($TwoPix * 3) - 1;
+    border-radius: $TwoPix;
+    font-size: ($TwoPix * 6);
+    color: $Iron;
 }
 
 p {
@@ -78,34 +79,114 @@ h1,
 h2,
 h3,
 h4,
-h5 {
-    @include font($globalFontFamily_);
-    font-weight: bold;
+h5,
+h6 {
+    @include font($globalFontFamily);
     letter-spacing: 0.3px;
     margin: ($TwoPix * 10) 0;
+    line-height: $globalFontSize * 2;
+    width: 100%;
+    color: $Iron;
+    font-weight: bold;
+    padding: 0;
 
     a {
         text-decoration: none;
     }
 }
 
+dl {
+    width: 100%;
+    @include flex;
+    flex-wrap: wrap;
+    overflow: visible;
+
+    dt {
+        flex: 0 0 30%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        text-align: right;
+        font-weight: bold;
+    }
+    dd {
+        flex: 0 0 65%;
+        margin-left: auto;
+        text-align: left;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+
+    dt,
+    dd {
+        margin-bottom: 10px;
+    }
+}
+
 blockquote {
     padding: ($TwoPix * 5) ($TwoPix * 10);
     margin: 15px 0 15px 0;
     border-left: ($TwoPix + 2) solid $globalLinkColor;
     background: rgba($Iron, 0.1);
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%232b4252' fill-opacity='0.66' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
+    color: $Iron;
 }
 
 sup {
     vertical-align: super;
-	font-size: smaller;    
-	margin: -7px 0 0 3px;
-    padding-top: -5px;
-    position: absolute;
+    font-size: smaller;
 }
 
 sub {
     vertical-align: sub;
     font-size: smaller;
 }
+
+table {
+    width: 100%;
+
+    thead {
+        background: $TePapaGreen;
+
+        tr {
+            th {
+                padding: 15px 5px;
+                font-weight: bold;
+                color: $Iron;
+
+                &:first {
+                    border-top-left-radius: 3px;
+                }
+
+                &:last-child {
+                    border-top-right-radius: 3px;
+                }
+            }
+        }
+    }
+
+    tbody {
+        tr {
+            &:nth-child(even) {
+                background: rgba($PaleSky, 0.1);
+            }
+
+            td {
+                padding: 15px 5px;
+            }
+        }
+    }
+
+    tfoot {
+        tr {
+            border-top: 4px solid $PaleSky;
+
+            td {
+                padding: 15px 5px;
+            }
+        }
+    }
+}
+
+hr {
+    border: 1px solid $PaleSky;
+}