Add customize able sidebar (#196)

Alexander Bilz

07.40.2021 b6e1660d84612054d7141c588818319c404912c2

Add customize able sidebar (#196)

Closes #180 

 README.md

@@ -152,6 +152,13 @@
listDateFormat = "Jan 2"
```

### Changing the sidebar/content ratio
By default, the content fills up 60% of the screen width on devices with a full HD resolution. If you want to change the ratio, adjust the `contentratio` variable. Let's, for example, set the content ratio to 70%:
```toml
[params]
contentratio = 0.7
```

### Read-more Links
You can enable read-more links for truncated posts by setting the `readMore = true`. The length of the preview is controlled by Hugo's `summarylength`. Read-more links are disabled by default.
```toml

 assets/css/style.css

@@ -17,6 +17,13 @@
    --link-color: #0366d7;
    --thumbnail-height: 15em;
    scroll-padding-top: 100px;
    --body-max-width: 1920px;
    --content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
    --sidebar-ratio: calc(1 - var(--content-ratio));
    --content-max-width: calc(var(--body-max-width) * var(--content-ratio));
    --sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
    --content-width: calc(var(--content-ratio) * 100%);
    --sidebar-width: calc(var(--sidebar-ratio) * 100%);
}

html[data-theme='dark'] {
@@ -181,12 +188,12 @@
.content {
    height: auto;
    float: right;
    width: 60%;
    width: var(--content-width);
    margin-top: 60px;
}

.page-top {
    width: 60%;
    width: var(--content-width);
    position: fixed;
    right: 0;
    z-index: 3;
@@ -258,7 +265,7 @@
}

.sidebar {
    width: 40%;
    width: var(--sidebar-width);
    -webkit-background-size: cover;
    background-size: cover;
    background-color: var(--bg-color);
@@ -271,6 +278,7 @@
    display: flex;
    flex-direction: column;
    min-height: 100%;
    float: left;
}

.sidebar .logo-title {
@@ -1081,17 +1089,22 @@
}

@media (min-width: 1921px){
    .content {
        padding-right: 25%;
        width: 35%;
    }
    .sidebar {
        padding-left: 15%;
        width: 25%;
        padding-left: 17%;
        width: calc(var(--sidebar-width) - 20%);
        padding-right: 3%;
    }
    .content {
        margin-left: calc(15% + var(--sidebar-width));
        width: calc(var(--content-width) - 20%);
        padding-right: 20%;
    }
    .page-top{
        position: fixed;
        width: calc(var(--content-width));
    }
}


/* (CONTACT) FORM */

.contact-form {

 assets/css/style.rtl.css

@@ -17,6 +17,13 @@
    --link-color: #0366d7;
    --thumbnail-height: 15em;
    scroll-padding-top: 100px;
    --body-max-width: 1920px;
    --content-ratio: {{ .Site.Params.contentratio | default 0.6 }};
    --sidebar-ratio: calc(1 - var(--content-ratio));
    --content-max-width: calc(var(--body-max-width) * var(--content-ratio));
    --sidebar-max-width: calc(var(--body-max-width) - var(--content-max-width));
    --content-width: calc(var(--content-ratio) * 100%);
    --sidebar-width: calc(var(--sidebar-ratio) * 100%);
}

html[data-theme='dark'] {
@@ -181,12 +188,12 @@
.content {
    height: auto;
    float: left;
    width: 60%;
    width: var(--content-width);
    margin-top: 60px;
}

.page-top {
    width: 60%;
    width: var(--content-width);
    position: fixed;
    left: 0;
    z-index: 3;
@@ -258,7 +265,7 @@
}

.sidebar {
    width: 40%;
    width: var(--sidebar-width);
    -webkit-background-size: cover;
    background-size: cover;
    background-color: var(--bg-color);
@@ -1081,13 +1088,19 @@
}

@media (min-width: 1921px){
    .content {
        padding-left: 25%;
        width: 35%;
    }
    .sidebar {
        padding-right: 15%;
        width: 25%;
        padding-right: 17%;
        width: calc(var(--sidebar-width) - 20%);
        padding-left: 3%;
    }
    .content {
        margin-right: calc(15% + var(--sidebar-width));
        width: calc(var(--content-width) - 20%);
        padding-left: 20%;
    }
    .page-top{
        position: fixed;
        width: calc(var(--content-width));
    }
}

@@ -1160,4 +1173,4 @@
    border: 1px solid var(--form-button-hover-border-color);
}

/* (CONTACT) FORM END */
/* (CONTACT) FORM END */

 layouts/partials/head.html

@@ -13,14 +13,16 @@
    <!-- CSS -->
    
    {{ if eq .Site.Language.LanguageDirection "rtl"}}
    {{ $style := resources.Get "css/style.rtl.css" | resources.Minify | resources.Fingerprint }}
    {{ $templateStyle := resources.Get "css/style.rtl.css" }}
    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
          href="{{ $style.RelPermalink }}"
          integrity="{{ $style.Data.Integrity }}"
          crossorigin="anonymous"
          type="text/css">
    {{else}}
    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
    {{ $templateStyle := resources.Get "css/style.css" }}
    {{ $style := $templateStyle  | resources.ExecuteAsTemplate "css/main.css" . | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
        href="{{ $style.RelPermalink }}"
        integrity="{{ $style.Data.Integrity }}"