diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..17c0123ac --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +# Jekyll Generated Files +_site/ +.jekyll-cache + +# Mac +.DS_Store diff --git a/README.md b/README.md index 0a5e5a1cd..90e104a7e 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Windows 95 Theme for Jekyll -![ss](https://github.com/h01000110/windows-95/raw/gh-pages/screenshot_2.png) +![Screen shot of website](assets/img/ScreenshotWithIcons.png) Homepage: [Windows 95](https://h01000110.github.io/20170917/windows-95) diff --git a/_config.yml b/_config.yml index d6079a046..e230e7f9b 100644 --- a/_config.yml +++ b/_config.yml @@ -1,13 +1,14 @@ permalink: /:year:month:day/:title -url: #Your url here -baseurl: /project +# When testing locally, leave "url:" blank or use http://localhost:4000 +url: # Your URL Here +# When testing locally, leave "baseurl:" blank +baseurl: -# variables +# Variables name: Your Site Name description: Your description here google_verification: null - # File management include: [".htaccess"] exclude: ["README.md", "LICENSE"] @@ -20,6 +21,8 @@ sass: # Markdown markdown: kramdown kramdown: - input: GFM + # Defaults to GFM according to the docs: + # https://jekyllrb.com/docs/configuration/markdown/ + # input: GFM syntax_highlighter_opts: - disable : true \ No newline at end of file + disable : true diff --git a/_data/tags.yml b/_data/tags.yml index 7759dca20..2a889bb6c 100644 --- a/_data/tags.yml +++ b/_data/tags.yml @@ -9,3 +9,6 @@ tag3: tag4: name: tag4 + +icons: + name: icons diff --git a/_includes/post-type-ico-file.html b/_includes/post-type-ico-file.html new file mode 100644 index 000000000..afbfdd26c --- /dev/null +++ b/_includes/post-type-ico-file.html @@ -0,0 +1,16 @@ +{% comment %} + (*.ico is large icon in top window) + DEFAULT ASSIGN FILE ICON IF NONE ASSIGNED. + IF STATEMENT FOR EACH TYPE OTHER THAN DEFAULT "FILE.ICO" +{% endcomment %} + +{% assign img_src = "/assets/img/file.ico" %} +{% if post.filetype == "image" %} + {% assign img_src = "/assets/img/image.ico" %} +{% elsif post.filetype == "image2" %} + {% assign img_src = "/assets/img/image2.ico" %} +{% elsif post.filetype == "creation" %} + {% assign img_src = "/assets/img/creation.ico" %} +{% elsif post.filetype == "music" %} + {% assign img_src = "/assets/img/music.ico" %} +{% endif %} diff --git a/_includes/post-type-png-file.html b/_includes/post-type-png-file.html new file mode 100644 index 000000000..aa96af30b --- /dev/null +++ b/_includes/post-type-png-file.html @@ -0,0 +1,17 @@ +{% comment %} + (*.png is small icon in the bottom window title bar) + DEFAULT ASSIGN FILE ICON IF NONE ASSIGNED. + IF STATEMENT FOR EACH TYPE OTHER THAN DEFAULT "FILE.PNG" +{% endcomment %} + +{% assign img_src = "/assets/img/file.png" %} +{% if page.filetype == "image" %} + {% assign img_src = "/assets/img/image.png" %} +{% elsif page.filetype == "image2" %} + {% assign img_src = "/assets/img/image2.png" %} +{% elsif page.filetype == "creation" %} + {% assign img_src = "/assets/img/creation.png" %} +{% elsif page.filetype == "music" %} + {% assign img_src = "/assets/img/music.png" %} +{% endif %} + diff --git a/_includes/show-all-posts.html b/_includes/show-all-posts.html new file mode 100644 index 000000000..e400fcd92 --- /dev/null +++ b/_includes/show-all-posts.html @@ -0,0 +1,9 @@ + diff --git a/_includes/show-only-posts-based-on-tag.html b/_includes/show-only-posts-based-on-tag.html new file mode 100644 index 000000000..8f1533359 --- /dev/null +++ b/_includes/show-only-posts-based-on-tag.html @@ -0,0 +1,16 @@ + diff --git a/_layouts/default.html b/_layouts/default.html index d0cc6d183..d524b5d6c 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -32,32 +32,24 @@

{{ site.name }}

{% unless page.date%} {% if page.title == 'me' or page.title == '404...' %} - + {% include show-all-posts.html %} {% else %} {{ content }} {% endif %} {% else %} - + {% include show-only-posts-based-on-tag.html %} {% endunless %}
@@ -70,9 +62,9 @@

{{ site.name }}

{% if page.title %} -
+
- + {% include post-type-png-file.html %}

{{ page.title }}

@@ -82,17 +74,17 @@

{{ page.title }}

  • {{ page.date | date: '%B %-d, %Y' }}
  • - {{ content }} + {{ content }} {% if page.title %} {% include donate.html %} {% endif %}
    - {% endif %} + {% endif %} - \ No newline at end of file + diff --git a/_layouts/tag.html b/_layouts/tag.html index 557a9ad5e..df6f3ce78 100644 --- a/_layouts/tag.html +++ b/_layouts/tag.html @@ -3,6 +3,7 @@ --- \ No newline at end of file + diff --git a/_posts/2017-08-31-lorem-ipsum.md b/_posts/2017-08-31-lorem-ipsum.md index d9ec9fbc0..a99233a78 100644 --- a/_posts/2017-08-31-lorem-ipsum.md +++ b/_posts/2017-08-31-lorem-ipsum.md @@ -1,11 +1,11 @@ --- layout: default title: "Lorem Ipsum" -tags: tag1 tag2 tag3 tag4 +tag: tag1 --- ## Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin enim nibh, suscipit sed rhoncus quis, blandit quis sapien. Ut congue pharetra rhoncus. Praesent finibus vitae urna quis cursus. Proin mollis elementum sapien, vitae viverra magna tincidunt a. Nullam tincidunt interdum dui ut ultricies. Maecenas pellentesque tellus ac mauris faucibus elementum. Nulla quis risus aliquam, pharetra neque non, dapibus augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras ullamcorper lacinia augue in placerat. Suspendisse lacinia massa id blandit varius. Mauris ultricies ultricies bibendum. -Mauris eu lectus fermentum leo dictum hendrerit. Maecenas vel leo sit amet quam laoreet consequat vitae nec eros. Curabitur eleifend eu orci quis consectetur. Sed pretium tortor at consequat tincidunt. Nullam a tellus faucibus, dapibus tortor eget, ullamcorper metus. Aenean at aliquet metus. Aenean molestie metus rutrum, tincidunt nulla quis, tincidunt lorem. Morbi diam sem, rutrum vitae convallis eget, dignissim semper lacus. Curabitur ipsum diam, tincidunt in hendrerit sit amet, luctus vitae dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. \ No newline at end of file +Mauris eu lectus fermentum leo dictum hendrerit. Maecenas vel leo sit amet quam laoreet consequat vitae nec eros. Curabitur eleifend eu orci quis consectetur. Sed pretium tortor at consequat tincidunt. Nullam a tellus faucibus, dapibus tortor eget, ullamcorper metus. Aenean at aliquet metus. Aenean molestie metus rutrum, tincidunt nulla quis, tincidunt lorem. Morbi diam sem, rutrum vitae convallis eget, dignissim semper lacus. Curabitur ipsum diam, tincidunt in hendrerit sit amet, luctus vitae dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/_posts/2017-09-16-markdown-test-page.md b/_posts/2017-09-16-markdown-test-page.md index 40eb8bdfe..d57118734 100644 --- a/_posts/2017-09-16-markdown-test-page.md +++ b/_posts/2017-09-16-markdown-test-page.md @@ -1,7 +1,7 @@ --- layout: default title: "Markdown Test Page" -tags: tag1 tag3 +tag: tag1 --- ## Source: [Markdown Test Page](https://github.com/fullpipe/markdown-test-page) @@ -176,4 +176,4 @@ Incididunt in culpa cupidatat mollit cillum qui proident sit. In cillum aliquip [![Box](http://img.youtube.com/vi/qEuD6v1Y9fg/0.jpg)](http://www.youtube.com/watch?v=qEuD6v1Y9fg) -Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#!) dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure. \ No newline at end of file +Reprehenderit non eu quis in ad elit esse qui aute id [incididunt](#!) dolore cillum. Esse laboris consequat dolor anim exercitation tempor aliqua deserunt velit magna laboris. Culpa culpa minim duis amet mollit do quis amet commodo nulla irure. diff --git a/_posts/2021-08-16-image-example.md b/_posts/2021-08-16-image-example.md new file mode 100644 index 000000000..961214d5d --- /dev/null +++ b/_posts/2021-08-16-image-example.md @@ -0,0 +1,22 @@ +--- +layout: default +title: "Image Example" +tag: icons +filetype: image +--- + +# This is an example of a post with the "image2" icon + +To use this, add `filetype: image` to the top in the [front matter](https://jekyllrb.com/docs/front-matter/) section. + +It will appear as this image in the post list: + +![large image icon](/assets/img/image.ico) + +And it will have this image in the topbar of the window: + +![small image icon](/assets/img/image.png) + +# Image Types + +The `.png` is used for the small icons in the topbar. The `.ico` image filetype is used for the larger icon that shows up in the post list. diff --git a/_posts/2021-08-17-image2-example.md b/_posts/2021-08-17-image2-example.md new file mode 100644 index 000000000..7c8d96da3 --- /dev/null +++ b/_posts/2021-08-17-image2-example.md @@ -0,0 +1,22 @@ +--- +layout: default +title: "Image2 Example" +tag: icons +filetype: image2 +--- + +# This is an example of a post with the "image2" icon + +To use this, add `filetype: image2` to the top in the [front matter](https://jekyllrb.com/docs/front-matter/) section. + +It will appear as this image in the post list: + +![large image icon](/assets/img/image2.ico) + +And it will have this image in the topbar of the window: + +![small image icon](/assets/img/image2.png) + +# Image Types + +The `.png` is used for the small icons in the topbar. The `.ico` image filetype is used for the larger icon that shows up in the post list. diff --git a/_posts/2021-08-18-creation-example.md b/_posts/2021-08-18-creation-example.md new file mode 100644 index 000000000..c159ba418 --- /dev/null +++ b/_posts/2021-08-18-creation-example.md @@ -0,0 +1,22 @@ +--- +layout: default +title: "Creation Example" +tag: icons +filetype: creation +--- + +# This is an example of a post with the "creation" icon + +To use this, add `filetype: creation` to the top in the [front matter](https://jekyllrb.com/docs/front-matter/) section. + +It will appear as this image in the post list: + +![large image icon](/assets/img/creation.ico) + +And it will have this image in the topbar of the window: + +![small image icon](/assets/img/creation.png) + +# Image Types + +The `.png` is used for the small icons in the topbar. The `.ico` image filetype is used for the larger icon that shows up in the post list. diff --git a/_posts/2021-08-19-music-example.md b/_posts/2021-08-19-music-example.md new file mode 100644 index 000000000..284c568e6 --- /dev/null +++ b/_posts/2021-08-19-music-example.md @@ -0,0 +1,22 @@ +--- +layout: default +title: "Music Example" +tag: icons +filetype: music +--- + +# How to use Icons + +To use this, add `filetype: music` to the top in the [front matter](https://jekyllrb.com/docs/front-matter/) section. + +It will appear as this image in the post list: + +![large image icon](/assets/img/music.ico) + +And it will have this image in the topbar of the window: + +![small image icon](/assets/img/music.png) + +# Image Types + +The `.png` is used for the small icons in the topbar. The `.ico` image filetype is used for the larger icon that shows up in the post list. diff --git a/_posts/2021-08-20-how-to-add-more-icons-example.md b/_posts/2021-08-20-how-to-add-more-icons-example.md new file mode 100644 index 000000000..27835b09e --- /dev/null +++ b/_posts/2021-08-20-how-to-add-more-icons-example.md @@ -0,0 +1,88 @@ +--- +layout: default +title: "Add More Icons" +tag: icons +--- + +# Icon How To Page + +* [Image Types](#Imagetypes) +* [How To Use Icons](#Howtouseicons) +* [How to Add More Custom Icons](#Addcustomicons) + +# Image Types + +The `.png` is used for the small icons in the topbar. The `.ico` image filetype is used for the larger icon that shows up in the post list. + +[[Top]](#top) + +# How To Use Icons + +To use this, add `filetype: ` to the top in the [front matter](https://jekyllrb.com/docs/front-matter/) section. + +`` can be one of +- `creation` + - ![large creation icon](/assets/img/creation.ico) +- `image` + - ![large image icon](/assets/img/image.ico) +- `image2` + - ![large image2 icon](/assets/img/image2.ico) +- `music` + - ![large music icon](/assets/img/creation.ico) + +If you leave it blank, or don't add `filetype: ` to the frontmatter it will default to the text file icon +- ![large file icon](/assets/img/file.ico) + +[[Top]](#top) + +# How to Add More Custom Icons + +I found icons here: [https://win98icons.alexmeub.com/](https://win98icons.alexmeub.com/) + +View all the icons and pick one that you want. Make sure it has both a small icon (for the top bar), and a large icon (for the post list) in the viewer. For example, you *could not* use the `hard_disk_drive_pie` icon because it doesn't have a small icon, only a large one. + +In our example lets look at one of the already imported icons, the `paint_file` icon (or the creation icon). Using the icon viewer website, you can see it has both a large and small version. + +| Image | Small Image | Can you use it? | +| :-------------- | :--------------: | :-------------: | +| !["hard_disk_drive_pie icon"](https://win98icons.alexmeub.com/icons/png/hard_disk_drive_pie.png) | NONE | *NO* | +| !["large paint_file-4 icon"](/assets/img/creation.ico) | !["small paint_file-4 icon"](/assets/img/creation.png) | **YES** | + +
    + +Now you need to download the icons. There's a link to download all icons on the left side of the icon viewer page: it looks like the double program window icon and it is titled **"Download All Icons"**. + +Click it and you will be brought to a Google Drive Page. Download the folder you are brought to and un-compress it locally on your computer. + +Make sure you get the `.png` (that is very small) in the `windows98-icon/png` folder and a `.ico` in the `windows98-icon/ico` folder. + +In our example we would grab the `windows98-icon/png/paint_file-0.png` icon (since this is the smallest) and the `windows98-icon/ico/paint_file.ico`. + +Now decide on a one word name for it. Rename both your `.png` and `.ico` file to your one word name. In our case, we renamed the `paint_file.ico` to `creation.ico` and `paint_file-0.png` to `creation.png`. + +Put these newly renamed files in the `assets/img/` folder of the repository. + +Next edit the `_includes/post-type-ico-file.html`. Add a new `elsif` statement before the `{% raw %}{% endif %}{% endraw %}` for your files. You can copy/paste the example below and replace `` with the name of your file. +``` +{% raw %}{% elsif post.filetype == "" %} + {% assign img_src = "/assets/img/.ico" %}{% endraw %} +``` +In our example, we would add the following since our file names were `creation`. +``` +{% raw %}{% elsif post.filetype == "creation" %} + {% assign img_src = "/assets/img/creation.ico" %}{% endraw %} +``` +Next edit the `_includes/post-type-png-file.html`. Add a new `elsif` statement before the `{% raw %}{% endif %}{% endraw %}` for your files. You can copy/paste the example below and replace `` with the name of your file. +``` +{% raw %}{% elsif page.filetype == "" %} + {% assign img_src = "/assets/img/.png" %}{% endraw %} +``` +In our example, we would add the following since our file names were `creation`. +``` +{% raw %}{% elsif page.filetype == "creation" %} + {% assign img_src = "/assets/img/creation.png" %}{% endraw %} +``` + +Now you can add the type `filetype: ` to your post front matter and the new icon type will show up in the post list and the top bar. In our example, we used the file name of `creation` so we would put `filetype: creation` to see the MS Paint file icon. + +[[Top]](#top) diff --git a/_sass/_main.scss b/_sass/_main.scss index af1f68b28..0259b4ee6 100644 --- a/_sass/_main.scss +++ b/_sass/_main.scss @@ -2,6 +2,7 @@ body { background: #008082; font-family: sans-serif, serif, monospace; font-size: 13px; + line-height: normal; } .wrapper, .content { diff --git a/assets/css/002.scss b/assets/css/002.scss index bc62d79ae..2e0d374ab 100644 --- a/assets/css/002.scss +++ b/assets/css/002.scss @@ -10,3 +10,9 @@ .post_title { background: #00007f; } + +code { + font-family: monospace; + background-color: #e5e8ea; + padding: 0 .15em; +} diff --git a/assets/img/ScreenshotWithIcons.png b/assets/img/ScreenshotWithIcons.png new file mode 100644 index 000000000..c12df772e Binary files /dev/null and b/assets/img/ScreenshotWithIcons.png differ diff --git a/assets/img/creation.ico b/assets/img/creation.ico new file mode 100644 index 000000000..2ad3a6b7d Binary files /dev/null and b/assets/img/creation.ico differ diff --git a/assets/img/creation.png b/assets/img/creation.png new file mode 100644 index 000000000..2d0e1e477 Binary files /dev/null and b/assets/img/creation.png differ diff --git a/assets/img/image.ico b/assets/img/image.ico new file mode 100644 index 000000000..4cfcbbef2 Binary files /dev/null and b/assets/img/image.ico differ diff --git a/assets/img/image.png b/assets/img/image.png new file mode 100644 index 000000000..dbb584dd4 Binary files /dev/null and b/assets/img/image.png differ diff --git a/assets/img/image2.ico b/assets/img/image2.ico new file mode 100644 index 000000000..81f624245 Binary files /dev/null and b/assets/img/image2.ico differ diff --git a/assets/img/image2.png b/assets/img/image2.png new file mode 100644 index 000000000..8a28faba3 Binary files /dev/null and b/assets/img/image2.png differ diff --git a/assets/img/music.ico b/assets/img/music.ico new file mode 100644 index 000000000..dd83c17fa Binary files /dev/null and b/assets/img/music.ico differ diff --git a/assets/img/music.png b/assets/img/music.png new file mode 100644 index 000000000..9ebf0f392 Binary files /dev/null and b/assets/img/music.png differ diff --git a/assets/js/002.js b/assets/js/002.js index 2dadc67d2..248a0935d 100644 --- a/assets/js/002.js +++ b/assets/js/002.js @@ -7,11 +7,16 @@ function numbers () { var num = 0; var select = fields[field].innerText; var select_f = select.split(/\n/); + + // FIXES ISSUE WHERE INLINE CODE BLOCKS / CODE SPANS (CODE THAT IS ONE LINE) + // ARE NOT SHOWING UP. + if (select_f.length === 1) + continue; + var tab = document.createElement("table"); // IF YOU USE MARKDOWN AND YOU HAVE BEEN GETTING ONE ADDITIONAL LINE IN YOUR TAG CODE // UNCOMMENT THE SECTION BELOW - /* MARKDOWN SECTION /**/ select_f.splice(-1, 1); diff --git a/index.html b/index.html index 4a2d79878..8b82a5bfb 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ --- \ No newline at end of file + diff --git a/tags/icons.html b/tags/icons.html new file mode 100644 index 000000000..806dc092e --- /dev/null +++ b/tags/icons.html @@ -0,0 +1,5 @@ +--- +layout: tag +tag: icons +permalink: /tag/icons/ +---