├── .github
└── FUNDING.yml
├── .gitignore
├── README.md
├── _config.yml
├── _includes
├── disqus.html
├── footer.html
├── head.html
└── header.html
├── _layouts
├── default.html
├── page.html
└── post.html
├── _posts
├── 2014-05-01-elements.markdown
├── 2014-05-01-html.markdown
├── 2014-05-15-welcome-to-jekyll.markdown
├── 2015-07-17-lorem-ipsum.markdown
└── 2015-07-17-more-random-text.md
├── _sass
├── _layout.scss
├── _normalize.scss
└── _syntax-highlighting.scss
├── about.md
├── archive.html
├── css
└── main.scss
├── feed.xml
├── images
└── block-log.png
└── index.html
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # These are supported funding model platforms
2 |
3 | github: anandubajith # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
4 | patreon: # Replace with a single Patreon username
5 | open_collective: # Replace with a single Open Collective username
6 | ko_fi: # Replace with a single Ko-fi username
7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
9 | liberapay: # Replace with a single Liberapay username
10 | issuehunt: # Replace with a single IssueHunt username
11 | otechie: # Replace with a single Otechie username
12 | custom: # Replace with a single custom sponsorship URL
13 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | _site
2 | .sass-cache
3 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | block-log
2 | =========
3 |
4 | 
5 |
6 | | [Live demo](https://anandu.net/demo/block-log/) | [Github Repo](https://github.com/anandubajith/block-log) | [Download zip](https://github.com/anandubajith/block-log/archive/master.zip) |
7 | |-----------|-------------|---------------|
8 |
9 | Setting up
10 | ====================
11 | To start you own blog, simply git clone the repository on github. You could also press the "fork" button on github.
12 | ```
13 | git clone https://github.com/anandubajith/block-logs.git
14 | ```
15 | Then you will need to edit the `_config.yml` file at the root of repository.
16 |
17 | To add your own posts, add a file to the `_posts` directory which has the name `year-month-day-title.md`.
18 | *Note - the file does not have to be markdown.*
19 |
20 | To publish the post, just `git push` it to your own github repo and your set!
21 |
22 | Things to change on `_config.yml`
23 | ====================
24 | There is a config file at the root called `_config.yml`. By Default it looks like:
25 | ```
26 | title: "Block-Log"
27 | description: "Write an awesome description for your blog."
28 | baseurl: "" # the subpath of your site, e.g. /blog/
29 | url: "http://yourdomain.com" # the base hostname & protocol for your site
30 | permalink: /:year/:title
31 | github: "yourusername"
32 | twitter: "yourusername"
33 | email: "mail@example.com"
34 | disqus-id: "example" #leave blank if you dont want comments.
35 | markdown: kramdown
36 | sass:
37 | style: :compressed
38 | ```
39 |
40 | For more information on Jekyll, visit their [wiki on github](https://github.com/mojombo/jekyll/wiki).
41 | For more information on github pages: [http://pages.github.com](http://pages.github.com).
42 |
43 | License
44 | ====================
45 | ### The MIT License (MIT)
46 |
47 | Copyright (c) 2015 Anandu B Ajith
48 |
49 | Permission is hereby granted, free of charge, to any person obtaining a copy
50 | of this software and associated documentation files (the "Software"), to deal
51 | in the Software without restriction, including without limitation the rights
52 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
53 | copies of the Software, and to permit persons to whom the Software is
54 | furnished to do so, subject to the following conditions:
55 |
56 | The above copyright notice and this permission notice shall be included in all
57 | copies or substantial portions of the Software.
58 |
59 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
60 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
61 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
62 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
63 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
64 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
65 | SOFTWARE.
66 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | # Site settings
2 | title: "block-Log"
3 | description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolor"
4 | baseurl: "" # the subpath of your site, e.g. /blog/
5 | url: "http://yourdomain.com" # the base hostname & protocol for your site
6 | permalink: /:year/:title
7 | github: "yourusername"
8 | twitter: "yourusername"
9 | email: "mail@example.com"
10 | disqus-id: "example" #leave blank if you dont want comments.
11 |
12 | # Build settings
13 | markdown: kramdown
14 | sass:
15 | style: :compressed
16 |
--------------------------------------------------------------------------------
/_includes/disqus.html:
--------------------------------------------------------------------------------
1 | {% if site.disqus-id %}
2 |
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
22 |
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Misc Stuff – abbr, acronym, pre, code, sub, sup, etc.
117 |
Lorem superscript dolor subscript amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. cite. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. NBA Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. AVE
118 |
119 | Lorem ipsum dolor sit amet,
120 | consectetuer adipiscing elit.
121 | Nullam dignissim convallis est.
122 | Quisque aliquam. Donec faucibus.
123 | Nunc iaculis suscipit dui.
124 | Nam sit amet sem.
125 | Aliquam libero nisi, imperdiet at,
126 | tincidunt nec, gravida vehicula,
127 | nisl.
128 | Praesent mattis, massa quis
129 | luctus fermentum, turpis mi
130 | volutpat justo, eu volutpat
131 | enim diam eget metus.
132 | Maecenas ornare tortor.
133 | Donec sed tellus eget sapien
134 | fringilla nonummy.
135 | NBA
136 | Mauris a ante. Suspendisse
137 | quam sem, consequat at,
138 | commodo vitae, feugiat in,
139 | nunc. Morbi imperdiet augue
140 | quis tellus.
141 | AVE
142 |
143 | “This stylesheet is going to help so freaking much.” -Blockquote
144 |
And then move on to a more interesting ordered list:
18 |
19 |
one, two
20 |
21 |
buckle my shoe
22 |
23 |
24 |
three, four
25 |
26 |
knock at the door
27 |
28 |
29 |
Five, six
30 |
31 |
pick up sticks
32 |
33 |
34 |
Seven, eight, lay them straight
35 |
36 |
Nine, ten, a big fat hen
37 |
Eleven, twelve, dig and delve
38 |
Thirteen, fourteen, maids a’courting
39 |
Fifteen, sixteen, maids in the kitchen
40 |
Seventeen, eighteen, maids a’waiting
41 |
Nineteen, twenty, my platter’s empty …
42 |
43 |
44 |
45 |
46 |
--------------------------------------------------------------------------------
/_posts/2014-05-15-welcome-to-jekyll.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Welcome to Jekyll!"
4 | date: 2014-05-15 18:44:35
5 | categories: jekyll update
6 | ---
7 |
8 | You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!
9 | To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.
10 |
11 | Jekyll also offers powerful support for code snippets:
12 |
13 | {% highlight ruby %}
14 | def print_hi(name)
15 | puts "Hi, #{name}"
16 | end
17 | print_hi('Tom')
18 | #=> prints 'Hi, Tom' to STDOUT.
19 | {% endhighlight %}
20 |
21 | Check out the [Jekyll docs][jekyll] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll's GitHub repo][jekyll-gh].
22 |
23 | [jekyll-gh]: https://github.com/mojombo/jekyll
24 | [jekyll]: http://jekyllrb.com
25 |
--------------------------------------------------------------------------------
/_posts/2015-07-17-lorem-ipsum.markdown:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "Lorem ipsum dolor sit amet.."
4 | date: 2015-07-17 12:36:09
5 | categories: jekyll update
6 | ---
7 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8 |
9 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
10 |
11 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
12 |
--------------------------------------------------------------------------------
/_posts/2015-07-17-more-random-text.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: post
3 | title: "More random text"
4 | date: 2015-05-15 18:44:35
5 | categories: random text
6 | ---
7 |
OK, so images can get quite complicated as we have a few variables to work with! For example the image below has had a caption entered in the WordPress image upload dialog box, this creates a [caption] shortcode which then in turn wraps the whole thing in a div with inline styling! Maybe one day they'll be able to use the figure and figcaption elements for all this. Additionally, images can be wrapped in links which, if you're using anything other than color or text-decoration to style your links can be problematic.
8 |
This is the optional caption.
9 |
The next issue we face is image alignment, users get the option of None, Left, Right & Center. On top of this, they also get the options of Thumbnail, Medium, Large & Fullsize. You'll probably want to add floats to style the image position so important to remember to clear these to stop images popping below the bottom of your articles.
10 |
11 |
12 |
13 |
14 |
Additionally, to add further confusion, images can be wrapped inside paragraph content, lets test some examples here.
15 | Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur.Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Donec ullamcorper nulla non metus auctor fringilla. Aenean lacinia bibendum nulla sed consectetur.
16 |
And then... Finally, users can insert a WordPress [gallery], which is kinda ugly and comes with some CSS stuck into the page to style it (which doesn't actually validate, nor does the markup for the gallery). The amount of columns in the gallery is also changable by the user, but the default is three so we'll work with that for our example with an added fouth image to test verticle spacing.
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
Table Head Column One
39 |
Table Head Column Two
40 |
Table Head Column Three
41 |
42 |
43 |
44 |
45 |
Table Footer Column One
46 |
Table Footer Column Two
47 |
Table Footer Column Three
48 |
49 |
50 |
51 |
52 |
Table Row Column One
53 |
Short Text
54 |
Testing a table cell with a longer amount of text to see what happens, you're not using tables for site layouts are you?
55 |
56 |
57 |
Table Row Column One
58 |
Table Row Column Two
59 |
Table Row Column Three
60 |
61 |
62 |
Table Row Column One
63 |
Table Row Column Two
64 |
Table Row Column Three
65 |
66 |
67 |
Table Row Column One
68 |
Table Row Column Two
69 |
Table Row Column Three
70 |
71 |
72 |
Table Row Column One
73 |
Table Row Column Two
74 |
Table Row Column Three
75 |
76 |
77 |
78 |
79 |
80 |
Ordered list item one.
81 |
Ordered list item two.
82 |
Ordered list item three.
83 |
Ordered list item four.
84 |
By the way, Wordpress does not let you create nested lists through the visual editor.
85 |
86 |
87 |
88 |
Unordered list item one.
89 |
Unordered list item two.
90 |
Unordered list item three.
91 |
Unordered list item four.
92 |
By the way, Wordpress does not let you create nested lists through the visual editor.
93 |
94 |
95 |
96 | Currently WordPress blockquotes are just wrapped in blockquote tags and have no clear way for the user to define a source. Maybe one day they'll be more semantic (and easier to style) like the version below.
97 |
98 |
99 |
HTML5 comes to our rescue with the footer element, allowing us to add semantically separate information about the quote.
100 |
105 |
106 |
107 |
Level One Heading
108 |
Level Two Heading
109 |
Level Three Heading
110 |
Level Four Heading
111 |
Level Five Heading
112 |
Level Six Heading
113 |
114 |
This is a standard paragraph created using the WordPress TinyMCE text editor. It has a strong tag, an em tag and a strikethrough which is actually just the del element. There are a few more inline elements which are not in the WordPress admin but we should check for incase your users get busy with the copy and paste. These include citations, abbr, bits of code and variables, inline quotations, inserted text, text that is no longer accurate or something so important you might want to mark it. We can also style subscript and superscript characters like C02, here is our 2nd example. If they are feeling non-semantic they might even use bold, italic, big or small elements too. Incidentally, these HTML4.01 tags have been given new life and semantic meaning in HTML5, you may be interested in reading this article by Harry Roberts which gives a nice excuse to test a link. It is also worth noting in the "kitchen sink" view you can also add underline styling and set text color with pesky inline CSS.
115 |
Additionally, WordPress also sets text alignment with inline styles, like this left aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
116 |
This is a right aligned paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
117 |
This is a justified paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
118 |
Finally, you also have the option of an indented paragraph. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.
And last, and by no means least, users can also apply the Address tag to text like this:
123 Example Street,
119 | Testville,
120 | West Madeupsburg,
121 | CSSland,
122 | 1234
11 | 
12 | 
14 |