Doc-Ment

Here are a few options for manipulating images with CSS. Go knock yourself out:

  • border-radius can be used to make the edges of the images curved.

  • padding creates a border around the image. Can be used for thumbnails.

  • box-shadow gives the element a shadow. Here are more values at w3schools

Styling lists can really make a site pop. All you have to do is use the list-style-type property and pair it with the value you want. W3schools has a nice list of all the values.

Here is some example code:

li {
    list-style-type: circle;
}

Over time I have developed a optimal structure tree for Jekyll. There a few things to point out first.

-There is no Sass files. This is because for optimal performance all the CSS is placed in an includes, and we have not worked out a way to pipe the compiled sass to a CSS includes file.

-Markdown files are only used for front matter. Having modular layouts means its easier to swap and experiment. Also VS Code does not have similar auto complete for front matter as Markdown.

-Instead of an assets folder there is an /images making it much easier to reach

-All css is in _includes

.
├── _data
├── images
│   └── icons
├── _includes
├── _layouts
├── _posts
│   └── _site
└── _site
    ├── assets
    ├── images
    │   └── icons
    └── jekyll
        └── update
            └── 2019
                └── 04
                    └── 16

If statements in liquid can be used to only load certain sections based on what you define in the front matter. For example, if you only want a JS library loaded on a certain page, you could employ a liquid boolean.


(in front matter)

comments: true

{% if page.comments %}

Stuff

{% endif %}



Transitions are pretty great. They are fast ways to make a site look more elegant and professional.

Here is a code sample:

.orange-btn:hover {
    color:black;
    background-color: orange;
    transition: 0.3s;
}

Its rather self-explanatory trasnition: 0.3s; is how long the animation will last. I also think it only really works on :hover

Cicular radial dial Progress bars are LIT! They make things look cool.

You will need a circle.css library to start.

In the library you can change around colors and values. Clunky I know.

Until my future self finds a better way, this is the way to build it.

 <div class="card clearfix dark-area col-md-4">

                <div class="c100 p78 small blue">
                    <span>78%</span>
                    <div class="slice">
                        <div class="bar"></div>
                        <div class="fill"></div>
                    </div>
                </div>
                <h3 class="grey">CSS</h3>
                </div>

Use the pX selector to name the percentage of the bar.

There are two ways you can do parallax scrolling

Use

selector {
    background-image: url(src);
    background-size: cover;
}

Method 2:

In HTMl

<img src="image/example" class="fixed">

In CSS

.fixed {
    z-index: -1
    position:fixed;
}

This second option is less preferrable as you will only be able to use it on one image, or have multiple z-index values.

This is a template for archive logic. It only works if you have bootstrap.js and jquery.js.

<h1 class="subtitle text-center">Archive</h1>

{% assign currentYear = site.time | date: "%Y" %}
{% assign currentMonth = site.time | date: "%B" %}
{% for post in site.posts %}

{% assign postYear = post.date | date: "%Y" %}
{% assign postMonth = post.date  | date: "%B" %}

<!--Basic structure-->
{% if forloop.first %}
<button class="offset-md-4 btn btn-primary year" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<li> {{ postYear}}
</button>
    <ul class="collapse" id="collapseExample">
        <li> {{ postMonth }}
            <ul>
{% endif %}

<!--If the post happened in the current year-->
{% if (postYear == currentYear and postMonth == currentMonth) or forloop.first %}
    <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
{% endif %}

<!--If the post happened in the current year, but the month posted is not the current month-->


<!--If post year does not equal current year-->
{% if postYear != currentYear %}
    </ul></li></ul></li>
    <button class="offset-md-4 btn btn-primary year" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        <li> {{ postYear}}
        </button>
            <ul>
                <li class="collapse" id="collapseExample"> {{ postMonth }}
                    <ul>
                        <li><a href="{{ post.url | prepend: site.baseurl }}">{{ post.title }}</a></li>
{% endif %}
{% assign currentYear = postYear %}
{% assign currentMonth = postMonth %} {% endfor %}

When trying to hide elements such as when you are using the @media tag to create a responsive website display:none can be used to remove an element entirely.

@media only screen and (max-width: 900px) {

    .description {
        display: none;
    }
}

Here are the names of CSS components.

Using liquid to write posts.

There are multiple ways you can list posts on a homepage or blog.

 {% for post in site.posts %}

    <!--Post-->
 
    <div class="post">
 
      <h1 class="post-title text-center">
 
          <div class="nline"><a href=" {{ post.url }}">{{ post.title }}</a></div>
 
      </h1>
 
      <!--Date-->
 
        <p class="small post-date text-center">{{ post.date | date_to_string }}</p>

        <p>{{ post.content }}</p>
 
        <div class="d-flex p-4 bg-transparent"></div>
 
    {% endfor %}

{{post.content}} displays the entire post.

{{post.excerpt}} displays the post’s expert (as defined in front matter)

strip_html removes any and all html elements including pictures that use <img> tags

{{ page.author }} author as defined in front matter

{{ post.date }} date

date_to_string translates the date into a readable string

Coding the same includes and doing the same adjustments everytime I made a new site got boring and a major waste of time. To fix this situation, I wrote a simple script that copies files from the AugustusFiles directory to the jekyll folder that you specify.

Here is the code

#!/bin/bash

echo "filename"

read filename

mkdir $filename/_includes
mkdir $filename/_layouts
cp AugustusFiles/head.html $filename/_includes/
cp AugustusFiles/animate.css $filename/_includes/
cp AugustusFiles/bootstrap.css $filename/_includes/
cp AugustusFiles/footer.html $filename/_includes/
cp AugustusFiles/Jstyle.css $filename/_includes/
cp AugustusFiles/_config.yml $filename/
rm $filename/about.md

Its pretty straightforward. You write the files in /AugustusFiles that you want with every site you make, run ./Augustus.sh then enter the filename of your jekyll file.

Site categories are declared in the front matter and can be used in different ways to categorize posts.

Archive

Categories can be used to list posts as follows:

{% for category in site.categories %}

<h3> {{ category[0] }}</h3>

<ul>

{% for post in category[1] %}
  
  <li><a href="{{ post.url }}">{{ post.title }}
  
  </a></li>

{% endfor %}

</ul>

{% endfor %}

Here is a useful image when determing how css elements affect box sizing.

When making a site, the @media tag can be used to make more responsive css.

@media only screen and (max-width: 720px) {
    .title {
        font-size:3rem;
    }
    .subtitle {
        font-size: 1.5rem;
        padding:3%;
    }
}

max-width can be replaced with min-width for the opposite result

for a plain html code segment use the <pre></pre> tags.

For snippets of code with liquid in them use the

{-% raw %-}

and

{-% endraw %-}

(without the “-“ of course)