aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Barry Clark <barry@barryclark.co> 2014-02-17 20:34:55 -0500
committerGravatar Barry Clark <barry@barryclark.co> 2014-02-17 20:34:55 -0500
commit0df8994e5f44bd42fff2302711bda9a59bcb9dcf (patch)
tree2a72873b8823d45faa0ba19b70f3cdbdee9134f4
parent9931bd1ed25bf92afcc7782269281169ebceb578 (diff)
downloadkompetenzbolzen.github.io-0df8994e5f44bd42fff2302711bda9a59bcb9dcf.tar.gz
Style Guide, and all markdown content styled
Diffstat
-rw-r--r--_config.yml4
-rw-r--r--_layouts/default.html4
-rw-r--r--_layouts/page.html3
-rw-r--r--_layouts/post.html8
-rw-r--r--_posts/2014-2-2-Markdown-Cheatsheet.md63
-rw-r--r--_posts/2014-2-3-Oh-hi.md10
-rw-r--r--_posts/2014-4-4-Jekyll-The-Easy-Way.md4
-rw-r--r--index.html13
-rwxr-xr-xscss/style.scss76
-rw-r--r--style.css66
10 files changed, 194 insertions, 57 deletions
diff --git a/_config.yml b/_config.yml
index db57a35..22ac80d 100644
--- a/_config.yml
+++ b/_config.yml
@@ -3,10 +3,10 @@
#
# The name of your site
-name: Barry Clark
+name: Jekyll Boilerplate
# A short bio or description
-description: Short bio of description placeholder.
+description: Your blog with Jekyll—no setup required.
# A URL pointing to your avatar or profile pic
# To use your Gravatar: (the one that GitHub uses for your profile pic)
diff --git a/_layouts/default.html b/_layouts/default.html
index d7f8c43..fd55250 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -21,13 +21,13 @@
<body>
<header class="masthead">
- <img src="{{ site.avatar }}" class="avatar" />
+ <a href="/" class="site-name"><img src="{{ site.avatar }}" class="avatar" /></a>
<a href="/" class="site-name">{{ site.name }}</a>
<p class="site-description">{{ site.description }}</p>
<nav>
<a href="/">Blog</a>
- <a href="/about">About</a>
+ <a href="/about">About Me</a>
</nav>
<div style="clear:both;"></div>
diff --git a/_layouts/page.html b/_layouts/page.html
index 9b67cad..cff5360 100644
--- a/_layouts/page.html
+++ b/_layouts/page.html
@@ -3,7 +3,8 @@ layout: default
---
<article class="page">
- <header><h1>{{ page.title }}</h1></header>
+
+ <h1>{{ page.title }}</h1>
<div class="entry">
{{ content }}
diff --git a/_layouts/post.html b/_layouts/post.html
index 1384cce..d51134d 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -7,11 +7,15 @@ layout: default
<h1>{{ page.title }}</h1>
</header>
+ <div class="date">
+ {{ page.date | date: "%B %e, %Y" }}
+ </div>
+
<div class="entry">
{{ content }}
</div>
- <section id="comments">
+ <div class="comments">
{% include disqus.html disqus_identifier=page.disqus_identifier %}
- </section>
+ </div>
</article>
diff --git a/_posts/2014-2-2-Markdown-Cheatsheet.md b/_posts/2014-2-2-Markdown-Cheatsheet.md
new file mode 100644
index 0000000..59c70ef
--- /dev/null
+++ b/_posts/2014-2-2-Markdown-Cheatsheet.md
@@ -0,0 +1,63 @@
+---
+layout: post
+title: Markdown Style Guide
+---
+
+A demo of all styled markdown elements in Jekyll Boilerplate.
+
+This is a paragraph, it's surrounded by whitespace. Next up are some headers, they're heavily influenced by GitHub's markdown style.
+
+## Header 2 (H1 is reserved for post titles)##
+### Header 3 ###
+#### Header 4 ####
+##### Header 5 #####
+
+A link to [Jekyll Boilerplate](http://github.com/barryclark/jekyll-boilerplate/). A big ass literal link <http://github.com/barryclark/jekyll-boilerplate/>
+
+An image, located within /images
+
+![an image alt text](/images/omg-code.jpg "an image title")
+
+* A bulletted list
+- alternative syntax 1
++ alternative syntax 2
+ - an indented list item
+
+1. An
+2. ordered
+3. list
+
+Inline markup styles:
+
+- _italics_
+- **bold**
+- `code()`
+
+> Blockquote
+>> Nested Blockquote
+
+Code:
+
+ // Code is just text indented a bit
+ which(is_easy) to_remember();
+
+~~~
+
+// Markdown extra adds un-indented code blocks too
+
+if (this_is_more_code == true && !indented) {
+ // tild wrapped code blocks, also not indented
+}
+
+~~~
+
+Use two trailing spaces
+on the right
+to create linebreak tags
+
+Finally, horizontal lines
+
+----
+****
+
+Enjoy! \ No newline at end of file
diff --git a/_posts/2014-2-3-Oh-hi.md b/_posts/2014-2-3-Oh-hi.md
new file mode 100644
index 0000000..4dad732
--- /dev/null
+++ b/_posts/2014-2-3-Oh-hi.md
@@ -0,0 +1,10 @@
+---
+layout: post
+title: Oh, Hi!
+---
+
+This is a demo site for Jekyll Boilerplate. It was made in just a few minutes—by forking [Jekyll Boilerplate](http://github.com/barryclark/jekyll-boilerplate/)!
+
+Jekyll boilerplate is a starting point for creating your blog using Jekyll and GitHub Pages. It make it _really easy_.
+
+Talk through benefits. \ No newline at end of file
diff --git a/_posts/2014-4-4-Jekyll-The-Easy-Way.md b/_posts/2014-4-4-Jekyll-The-Easy-Way.md
index 7eccc1a..d107d42 100644
--- a/_posts/2014-4-4-Jekyll-The-Easy-Way.md
+++ b/_posts/2014-4-4-Jekyll-The-Easy-Way.md
@@ -5,10 +5,10 @@ title: Jekyll The Easy Way
I just migrated my blog over to this Jekyll powered static site that you're currently reading. Finding a good workflow with Jekyll took me longer than I expected.
-When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be.
-
![cool code image aww yea](/images/omg-code.jpg)
+When you understand how Jekyll works, it's _extremely_ fast to set up. However when learning I came across lot of articles, repos and stack overflow threads that made the setup much more complicated than it needs to be.
+
### Jekyll is built for one specific purpose
Tom Preston Warner of Github build Jekyll to [[INSERT HERE EXCERT FROM TPW's blog]]
diff --git a/index.html b/index.html
index 2f3de29..2accc19 100644
--- a/index.html
+++ b/index.html
@@ -5,11 +5,16 @@ layout: default
<div class="posts">
{% for post in site.posts %}
<article class="post">
- <header>
- <h1>{{ post.title }}</h1>
- </header>
+
+ <h1>{{ post.title }}</h1>
+
+ <div class="date">
+ {{ post.date | date: "%B %e, %Y" }}
+ </div>
- <div class="entry">{{ post.content | truncatewords:40}}</div>
+ <div class="entry">
+ {{ post.content | truncatewords:40}}
+ </div>
<a href="{{ post.url }}" class="read-more">Read More</a>
</article>
diff --git a/scss/style.scss b/scss/style.scss
index 29b4a0e..fd5bf1a 100755
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -28,7 +28,7 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: $helveticaNeue;
color: $darkerGray;
- font-weight: 400;
+ font-weight: 500;
line-height: 1.7;
margin: 1em 0 15px;
@@ -36,36 +36,36 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
- font-size: 2.2rem;
+ font-weight: 400;
+ font-size: 35px;
@include mobile {
- font-size: 2.2rem;
+ font-size: 32px;
}
}
h2 {
- letter-spacing: 1px;
- font-weight: 300;
-
- font-size: 1.7rem;
+ font-size: 26px;
@include mobile {
- font-size: 1.5rem;
+ font-size: 24px;
}
}
h3 {
- font-weight: 600;
-
- font-size: 1.2rem;
+ font-size: 22px;
@include mobile {
- font-size: 1.2rem;
+ font-size: 20px;
}
}
h4 {
- font-size: 1rem;
- @include mobile {
- font-size: 1rem;
- }
+ font-size: 18px;
+ font-weight: 600;
+}
+
+h5 {
+ font-size: 18px;
+ color: $gray;
+ font-weight: 600;
}
p {
@@ -81,15 +81,44 @@ a {
}
}
-ul {
+ul, ol {
+ margin: 15px 0;
padding-left: 30px;
+}
+
+ul {
list-style-type: disc;
}
+ol {
+ list-style-type: decimal;
+}
+
+ol ul, ul ol, ul ul, ol ol {
+ margin: 0;
+}
+
+ul ul, ol ul {
+ list-style-type: circle;
+}
+
+em {
+ font-style: italic;
+}
+
+strong {
+ font-weight: 600;
+}
+
img {
max-width: 100%;
}
+.date {
+ font-style: italic;
+ color: $gray;
+}
+
// Specify the color of the selection
::-moz-selection {
color: $black;
@@ -110,9 +139,9 @@ img {
//
.masthead {
- margin: 20px 0 70px;
+ margin: 20px 0 30px;
padding-bottom: 20px;
- border-bottom: 2px solid $darkGray;
+ border-bottom: 1px dotted $lightGray;
}
.avatar {
@@ -144,6 +173,7 @@ img {
.site-description {
float: left;
+ font-size: 14px;
display: none;
}
@@ -151,9 +181,9 @@ nav {
float: right;
font-family: $helveticaNeue;
- font-size: 1.1rem;
+ font-size: 18px;
@include mobile {
- font-size: 1rem;
+ font-size: 18px;
}
// nav has it's own link highlighting
@@ -192,7 +222,7 @@ nav {
.post {
blockquote {
border-left: 2px solid $gray;
- font-size: 1.2em;
+ font-size: 22px;
font-style: italic;
margin: 1.8em .8em;
padding: 0.1em 1em;
@@ -202,5 +232,5 @@ nav {
footer {
// border-top: 1px $lightGray solid;
- padding: 1rem 0;
+ padding: 20px 0;
}
diff --git a/style.css b/style.css
index ca7c869..435cb04 100644
--- a/style.css
+++ b/style.css
@@ -294,37 +294,38 @@ body {
h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #222222;
- font-weight: 400;
+ font-weight: 500;
line-height: 1.7;
margin: 1em 0 15px;
padding: 0; }
h1 {
- font-size: 2.2rem; }
+ font-weight: 400;
+ font-size: 35px; }
@media screen and (max-width: 520px) {
h1 {
- font-size: 2.2rem; } }
+ font-size: 32px; } }
h2 {
- letter-spacing: 1px;
- font-weight: 300;
- font-size: 1.7rem; }
+ font-size: 26px; }
@media screen and (max-width: 520px) {
h2 {
- font-size: 1.5rem; } }
+ font-size: 24px; } }
h3 {
- font-weight: 600;
- font-size: 1.2rem; }
+ font-size: 22px; }
@media screen and (max-width: 520px) {
h3 {
- font-size: 1.2rem; } }
+ font-size: 20px; } }
h4 {
- font-size: 1rem; }
- @media screen and (max-width: 520px) {
- h4 {
- font-size: 1rem; } }
+ font-size: 18px;
+ font-weight: 600; }
+
+h5 {
+ font-size: 18px;
+ color: #666666;
+ font-weight: 600; }
p {
margin: 15px 0; }
@@ -336,13 +337,35 @@ a {
a:hover, a:active {
text-decoration: underline; }
+ul, ol {
+ margin: 15px 0;
+ padding-left: 30px; }
+
ul {
- padding-left: 30px;
list-style-type: disc; }
+ol {
+ list-style-type: decimal; }
+
+ol ul, ul ol, ul ul, ol ol {
+ margin: 0; }
+
+ul ul, ol ul {
+ list-style-type: circle; }
+
+em {
+ font-style: italic; }
+
+strong {
+ font-weight: 600; }
+
img {
max-width: 100%; }
+.date {
+ font-style: italic;
+ color: #666666; }
+
::-moz-selection {
color: black;
background: #eeeeee; }
@@ -352,9 +375,9 @@ img {
background: #eeeeee; }
.masthead {
- margin: 20px 0 70px;
+ margin: 20px 0 30px;
padding-bottom: 20px;
- border-bottom: 2px solid #333333; }
+ border-bottom: 1px dotted #aaaaaa; }
.avatar {
float: left;
@@ -379,15 +402,16 @@ img {
.site-description {
float: left;
+ font-size: 14px;
display: none; }
nav {
float: right;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 1.1rem; }
+ font-size: 18px; }
@media screen and (max-width: 520px) {
nav {
- font-size: 1rem; } }
+ font-size: 18px; } }
nav a {
margin-left: 25px;
text-align: right;
@@ -411,11 +435,11 @@ nav {
.post blockquote {
border-left: 2px solid #666666;
- font-size: 1.2em;
+ font-size: 22px;
font-style: italic;
margin: 1.8em 0.8em;
padding: 0.1em 1em;
color: #666666; }
footer {
- padding: 1rem 0; }
+ padding: 20px 0; }
generated by cgit v1.2.3 (git 2.39.1) at 2024-06-29 00:27:32 +0000