Control Style variables from config.toml

Alexander Bilz

06.14.2020 c03b27eaaf18ae7c5c216e58e8e4b70c189aa216

Control Style variables from config.toml

@ivangjxyz  I've played around with SCSS and was able to control the variables from the config.toml.

Simply set these as following:

[params]
body_max_width = "1920px"
content_ratio = 0.7

What do you think?

I still need to convert the rest of the CSS and split the variables and different sections in smaller pieces. But overall I really like the abilities of SCSS.

 assets/scss/main.scss

File was renamed from assets/css/style.css
@@ -1,5 +1,16 @@
@charset "UTF-8";

/* Desktop screen configs */
$body_max_width: {{ .Site.Params.body_max_width | default "1920px" }};/*SET THIS VALUE ON MEDIA QUERY FOR BEST PRFMANCE*/
$content_ratio: {{ .Site.Params.content_ratio | default 0.1 }};

/* automated values */
$sidebar-ratio: 1 - $content-ratio;
$content-max-width: $body_max_width * $content_ratio;
$sidebar-max-width: $body_max_width - $content-max-width;
$content-width: $content_ratio * 100%;
$sidebar-width: $sidebar-ratio * 100%;

:root {
    --bg-color: #fff;
    --secondary-bg-color: #eeeeee;
@@ -14,16 +25,9 @@
    --blockquote-border-color: #dfe2e5;
    scroll-padding-top: 100px;
    
    /* Desktop screen configs */
    --body-max-width: 1920px;/*SET THIS VALUE ON MEDIA QUERY FOR BEST PRFMANCE*/
    --content-ratio: 0.7;

    
    /* automated values */
    --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'] {
@@ -50,7 +54,7 @@
    font-family: 'Verdana', sans-serif;
    font-size: 15px;
    width: 100%;
    max-width: var(--body-max-width);
    max-width: $body_max_width;
    margin: 0 auto;
    background-color: var(--bg-color);
}
@@ -186,12 +190,12 @@
.content {
    height: auto;
    float: right;
    width: var(--content-width);
    width: $content-width;
    margin-top: 60px;
}

.page-top {
    width: var(--content-width);
    width: $content-width;
    position: fixed;
    right: 0;
    z-index: 3;
@@ -263,7 +267,7 @@
}

.sidebar {
    width: var(--sidebar-width);
    width: $sidebar-width;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: var(--bg-color);
@@ -1002,23 +1006,23 @@
    }
}

/* USE --body-max-width VALUE FOR SEAMLESS TRANSITION */
@media (min-width: 1920px) { 
/* USE $body_max_width VALUE FOR SEAMLESS TRANSITION */
@media (min-width: $body_max_width) { 
    .content {
        width: var(--content-max-width);
        width: $content-max-width;
    }
    
    .sidebar {
        width: var(--sidebar-max-width);
        width: $sidebar-max-width;
        left: 50%;
        margin-left: calc( -1 * var(--body-max-width)/2);
        margin-left: calc( -1 * $body_max_width/2);
    }
    
    .page-top {
        width: var(--content-max-width);
        width: $content-max-width;
        position: fixed;
        left: 50%;
        margin-left: calc(-1* (var(--body-max-width)/2 - var(--sidebar-max-width) ));
        margin-left: calc(-1* ($body_max_width/2 - $sidebar-max-width ));
        z-index: 3;
        background-color: var(--bg-color);
        height: 60px;

 layouts/partials/head.html

@@ -11,12 +11,12 @@
    {{- end -}}

    <!-- CSS -->
    {{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
    <link rel="stylesheet"
          href="{{ $style.Permalink }}"
          integrity="{{ $style.Data.Integrity }}"
          crossorigin="anonymous"
          type="text/css">
    {{ $styles := resources.Get "scss/main.scss" | resources.ExecuteAsTemplate "style.main.scss" . | toCSS | minify | fingerprint }}

    <link rel="stylesheet" 
    href="{{ $styles.Permalink }}"
    integrity="{{ $styles.Data.Integrity }}"
    media="screen">
    {{- $css := "" -}}
    {{- range .Site.Params.customCss -}}
    {{ $css := resources.Get . | fingerprint }}