Initial Structure

Alexander Bilz

21.34.2021 d66f1621a39d159446ed70b07772a039e4ca3a8c

Initial Structure

 assets/scss/_code.scss

New file
@@ -0,0 +1,216 @@
:root {
    /* Light -> monokailight */
    --chr-def-color: #272822;
    --chr-def-bg-color: #fafafa;
    --chr-err-color: #960050;
    --chr-err-bg-color: #960050;
    --chr-hl-bg-color: #ffffcc;
    --chr-lnt-color: #7f7f7f;
    --chr-ln-color: #7f7f7f;
    --chr-k-color: #00a8c8;
    --chr-kc-color: #00a8c8;
    --chr-kd-color: #00a8c8;
    --chr-kn-color: #f92672;
    --chr-kp-color: #00a8c8;
    --chr-kr-color: #00a8c8;
    --chr-kt-color: #00a8c8;
    --chr-n-color: #111111;
    --chr-na-color: #75af00;
    --chr-nb-color: #111111;
    --chr-bp-color: #111111;
    --chr-nc-color: #75af00;
    --chr-no-color: #00a8c8;
    --chr-nd-color: #75af00;
    --chr-ni-color: #111111;
    --chr-ne-color: #75af00;
    --chr-nf-color: #75af00;
    --chr-fm-color: #111111;
    --chr-nl-color: #111111;
    --chr-nn-color: #111111;
    --chr-nx-color: #75af00;
    --chr-py-color: #111111;
    --chr-nt-color: #f92672;
    --chr-nv-color: #111111;
    --chr-vc-color: #111111;
    --chr-vg-color: #111111;
    --chr-vi-color: #111111;
    --chr-vm-color: #111111;
    --chr-l-color: #ae81ff;
    --chr-ld-color: #d88200;
    --chr-s-color: #d88200;
    --chr-sa-color: #d88200;
    --chr-sb-color: #d88200;
    --chr-sc-color: #d88200;
    --chr-dl-color: #d88200;
    --chr-sd-color: #d88200;
    --chr-s2-color: #d88200;
    --chr-se-color: #8045ff;
    --chr-sh-color: #d88200;
    --chr-si-color: #d88200;
    --chr-sx-color: #d88200;
    --chr-sr-color: #d88200;
    --chr-s1-color: #d88200;
    --chr-ss-color: #d88200;
    --chr-m-color: #ae81ff;
    --chr-mb-color: #ae81ff;
    --chr-mf-color: #ae81ff;
    --chr-mh-color: #ae81ff;
    --chr-mi-color: #ae81ff;
    --chr-il-color: #ae81ff;
    --chr-mo-color: #ae81ff;
    --chr-o-color: #f92672;
    --chr-ow-color: #f92672;
    --chr-p-color: #111111;
    --chr-c-color: #75715e;
    --chr-ch-color: #75715e;
    --chr-cm-color: #75715e;
    --chr-c1-color: #75715e;
    --chr-cs-color: #75715e;
    --chr-cp-color: #75715e;
    --chr-cpf-color: #75715e;
  }
  
  html[data-theme='dark'] {
    /* Dark -> monokai */
    --chr-def-color: #f8f8f2;
    --chr-def-bg-color: #272822;
    --chr-err-color: #960050;
    --chr-err-bg-color: #1e0010;
    --chr-hl-bg-color: #ffffcc;
    --chr-lnt-color: #7f7f7f;
    --chr-ln-color: #7f7f7f;
    --chr-k-color: #66d9ef;
    --chr-kc-color: #66d9ef;
    --chr-kd-color: #66d9ef;
    --chr-kn-color: #f92672;
    --chr-kp-color: #66d9ef;
    --chr-kr-color: #66d9ef;
    --chr-kt-color: #66d9ef;
    --chr-na-color: #a6e22e;
    --chr-nc-color: #a6e22e;
    --chr-no-color: #66d9ef;
    --chr-nd-color: #a6e22e;
    --chr-ne-color: #a6e22e;
    --chr-nf-color: #a6e22e;
    --chr-nx-color: #a6e22e;
    --chr-nt-color: #f92672;
    --chr-l-color: #ae81ff;
    --chr-ld-color: #e6db74;
    --chr-s-color: #e6db74;
    --chr-sa-color: #e6db74;
    --chr-sb-color: #e6db74;
    --chr-sc-color: #e6db74;
    --chr-dl-color: #e6db74;
    --chr-sd-color: #e6db74;
    --chr-s2-color: #e6db74;
    --chr-se-color: #ae81ff;
    --chr-sh-color: #e6db74;
    --chr-si-color: #e6db74;
    --chr-sx-color: #e6db74;
    --chr-sr-color: #e6db74;
    --chr-s1-color: #e6db74;
    --chr-ss-color: #e6db74;
    --chr-m-color: #ae81ff;
    --chr-mb-color: #ae81ff;
    --chr-mf-color: #ae81ff;
    --chr-mh-color: #ae81ff;
    --chr-mi-color: #ae81ff;
    --chr-il-color: #ae81ff;
    --chr-mo-color: #ae81ff;
    --chr-o-color: #f92672;
    --chr-ow-color: #f92672;
    --chr-c-color: #75715e;
    --chr-ch-color: #75715e;
    --chr-cm-color: #75715e;
    --chr-c1-color: #75715e;
    --chr-cs-color: #75715e;
    --chr-cp-color: #75715e;
    --chr-cpf-color: #75715e;
    --chr-gd-color: #f92672;
    --chr-gi-color: #a6e22e;
    --chr-gu-color: #75715e;
  }
  
  /* Background */ .chroma { color: var(--chr-def-color); background-color: var(--chr-def-bg-color) }
  /* Other */ .chroma .x {  }
  /* Error */ .chroma .err { color: var(--chr-err-color); background-color: var(--chr-err-bg-color) }
  /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
  /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
  /* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: var(--chr-hl-bg-color) }
  /* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chr-lnt-color) }
  /* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--chr-ln-color) }
  /* Keyword */ .chroma .k { color: var(--chr-k-color) }
  /* KeywordConstant */ .chroma .kc { color: var(--chr-kc-color) }
  /* KeywordDeclaration */ .chroma .kd { color: var(--chr-kd-color) }
  /* KeywordNamespace */ .chroma .kn { color: var(--chr-kn-color) }
  /* KeywordPseudo */ .chroma .kp { color: var(--chr-kp-color) }
  /* KeywordReserved */ .chroma .kr { color: var(--chr-kr-color) }
  /* KeywordType */ .chroma .kt { color: var(--chr-kt-color) }
  /* Name */ .chroma .n { color: var(--chr-n-color) }
  /* NameAttribute */ .chroma .na { color: var(--chr-na-color) }
  /* NameBuiltin */ .chroma .nb { color: var(--chr-nb-color) }
  /* NameBuiltinPseudo */ .chroma .bp { color: var(--chr-bp-color) }
  /* NameClass */ .chroma .nc { color: var(--chr-nc-color) }
  /* NameConstant */ .chroma .no { color: var(--chr-no-color) }
  /* NameDecorator */ .chroma .nd { color: var(--chr-nd-color) }
  /* NameEntity */ .chroma .ni { color: var(--chr-ni-color) }
  /* NameException */ .chroma .ne { color: var(--chr-ne-color) }
  /* NameFunction */ .chroma .nf { color: var(--chr-nf-color) }
  /* NameFunctionMagic */ .chroma .fm { color: var(--chr-fm-color) }
  /* NameLabel */ .chroma .nl { color: var(--chr-nl-color) }
  /* NameNamespace */ .chroma .nn { color: var(--chr-nn-color) }
  /* NameOther */ .chroma .nx { color: var(--chr-nx-color) }
  /* NameProperty */ .chroma .py { color: var(--chr-py-color) }
  /* NameTag */ .chroma .nt { color: var(--chr-nt-color) }
  /* NameVariable */ .chroma .nv { color: var(--chr-nv-color) }
  /* NameVariableClass */ .chroma .vc { color: var(--chr-vc-color) }
  /* NameVariableGlobal */ .chroma .vg { color: var(--chr-vg-color) }
  /* NameVariableInstance */ .chroma .vi { color: var(--chr-vi-color) }
  /* NameVariableMagic */ .chroma .vm { color: var(--chr-vm-color) }
  /* Literal */ .chroma .l { color: var(--chr-l-color) }
  /* LiteralDate */ .chroma .ld { color: var(--chr-ld-color) }
  /* LiteralString */ .chroma .s { color: var(--chr-s-color) }
  /* LiteralStringAffix */ .chroma .sa { color: var(--chr-sa-color) }
  /* LiteralStringBacktick */ .chroma .sb { color: var(--chr-sb-color) }
  /* LiteralStringChar */ .chroma .sc { color: var(--chr-sc-color) }
  /* LiteralStringDelimiter */ .chroma .dl { color: var(--chr-dl-color) }
  /* LiteralStringDoc */ .chroma .sd { color: var(--chr-sd-color) }
  /* LiteralStringDouble */ .chroma .s2 { color: var(--chr-s2-color) }
  /* LiteralStringEscape */ .chroma .se { color: var(--chr-se-color) }
  /* LiteralStringHeredoc */ .chroma .sh { color: var(--chr-sh-color) }
  /* LiteralStringInterpol */ .chroma .si { color: var(--chr-si-color) }
  /* LiteralStringOther */ .chroma .sx { color: var(--chr-sx-color) }
  /* LiteralStringRegex */ .chroma .sr { color: var(--chr-sr-color) }
  /* LiteralStringSingle */ .chroma .s1 { color: var(--chr-s1-color) }
  /* LiteralStringSymbol */ .chroma .ss { color: var(--chr-ss-color) }
  /* LiteralNumber */ .chroma .m { color: var(--chr-m-color) }
  /* LiteralNumberBin */ .chroma .mb { color: var(--chr-mb-color) }
  /* LiteralNumberFloat */ .chroma .mf { color: var(--chr-mf-color) }
  /* LiteralNumberHex */ .chroma .mh { color: var(--chr-mh-color) }
  /* LiteralNumberInteger */ .chroma .mi { color: var(--chr-mi-color) }
  /* LiteralNumberIntegerLong */ .chroma .il { color: var(--chr-il-color) }
  /* LiteralNumberOct */ .chroma .mo { color: var(--chr-mo-color) }
  /* Operator */ .chroma .o { color: var(--chr-o-color) }
  /* OperatorWord */ .chroma .ow { color: var(--chr-ow-color) }
  /* Punctuation */ .chroma .p { color: var(--chr-p-color) }
  /* Comment */ .chroma .c { color: var(--chr-c-color) }
  /* CommentHashbang */ .chroma .ch { color: var(--chr-ch-color) }
  /* CommentMultiline */ .chroma .cm { color: var(--chr-cm-color) }
  /* CommentSingle */ .chroma .c1 { color: var(--chr-c1-color) }
  /* CommentSpecial */ .chroma .cs { color: var(--chr-cs-color) }
  /* CommentPreproc */ .chroma .cp { color: var(--chr-cp-color) }
  /* CommentPreprocFile */ .chroma .cpf { color: var(--chr-cpf-color) }
  /* Generic */ .chroma .g {  }
  /* GenericDeleted */ .chroma .gd {  }
  /* GenericEmph */ .chroma .ge { font-style: italic }
  /* GenericError */ .chroma .gr {  }
  /* GenericHeading */ .chroma .gh {  }
  /* GenericInserted */ .chroma .gi {  }
  /* GenericOutput */ .chroma .go {  }
  /* GenericPrompt */ .chroma .gp {  }
  /* GenericStrong */ .chroma .gs { font-weight: bold }
  /* GenericSubheading */ .chroma .gu {  }
  /* GenericTraceback */ .chroma .gt {  }
  /* GenericUnderline */ .chroma .gl {  }
  /* TextWhitespace */ .chroma .w {  }
  

 assets/scss/_contact.scss

New file
@@ -0,0 +1,65 @@
.contact-form {
    margin-top: 30px;
}
.form-style{
    width: 100%;
}
.form-style ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.form-style ul li {
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style ul li .field-style {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    font-size: 14px;
    padding: 8px;
    outline: none;
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
}
.form-style ul li    .field-style:focus {
    box-shadow: 0 0 5px;
    border:1px solid;
}
.form-style ul li .field-split {
    width: 49%;
}
.form-style ul li .field-full {
    width: 100%;
}
.form-style ul li input.align-left {
    float:left;
}
.form-style ul li input.align-right {
    float:right;
}
.form-style ul li textarea {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
    width: 100%;
    height: auto;
}
.form-style ul li input[type="button"], 
.form-style ul li input[type="submit"] {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    display: inline-block;
    cursor: pointer;
    color: var(--body-color);
    text-decoration: none;
    width: 100%;
}
.form-style ul li input[type="button"]:hover, 
.form-style ul li input[type="submit"]:hover {
    background-color: var(--bg-color);
    border: 1px solid var(--form-button-hover-border-color);
}

 assets/scss/_mixins.scss

 assets/scss/_navigation.scss

 assets/scss/_print.scss

 assets/scss/_typography.scss

 assets/scss/_variables.scss

New file
@@ -0,0 +1,7 @@
// Font Variables

// Color Variables

// Design Ratios
$body_max_width: 1920px;
$content_ratio: 0.7;

 assets/scss/anatole.scss

New file
@@ -0,0 +1,8 @@
@import 'variables';
@import 'mixins';
@import 'typography';
@import 'navigation';
@import 'templates/main.scss';
@import 'print';
@import 'code';
@import 'contact';

 assets/scss/templates/_main.scss

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

/* 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;
@@ -179,12 +186,12 @@
.content {
    height: auto;
    float: right;
    width: 60%;
    width: $content-width;
    margin-top: 60px;
}

.page-top {
    width: 60%;
    width: $content-width;
    position: fixed;
    right: 0;
    z-index: 3;
@@ -256,7 +263,7 @@
}

.sidebar {
    width: 40%;
    width: $sidebar-width;
    -webkit-background-size: cover;
    background-size: cover;
    background-color: var(--bg-color);
@@ -1014,84 +1021,24 @@
    }
}

@media (min-width: 1921px){
@media (min-width: $body_max_width){
    .content {
        padding-right: 25%;
        width: 35%;
        width: $content-max-width*0.75;
    }
    .sidebar {
        padding-left: 15%;
        width: 25%;
        width: $sidebar-max-width*0.85;
    }
    .page-top {
        // TODO fix menu bar
        width: $body_max_width - $sidebar-max-width;
        position: fixed;
        margin-left: -1* ($body_max_width/2 - $sidebar-max-width );
        z-index: 3;
        background-color: var(--bg-color);
        height: 60px;
        border-bottom: 1px solid var(--border-color);
    }
}


/* (CONTACT) FORM */

.contact-form {
    margin-top: 30px;
}
.form-style{
    width: 100%;
}
.form-style ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.form-style ul li {
    display: block;
    margin-bottom: 10px;
    min-height: 35px;
}
.form-style ul li .field-style {
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    font-size: 14px;
    padding: 8px;
    outline: none;
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
}
.form-style ul li    .field-style:focus {
    box-shadow: 0 0 5px;
    border:1px solid;
}
.form-style ul li .field-split {
    width: 49%;
}
.form-style ul li .field-full {
    width: 100%;
}
.form-style ul li input.align-left {
    float:left;
}
.form-style ul li input.align-right {
    float:right;
}
.form-style ul li textarea {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    color: var(--body-color);
    width: 100%;
    height: auto;
}
.form-style ul li input[type="button"], 
.form-style ul li input[type="submit"] {
    background-color: var(--bg-color);
    border: 1px solid var(--form-border-color);
    display: inline-block;
    cursor: pointer;
    color: var(--body-color);
    text-decoration: none;
    width: 100%;
}
.form-style ul li input[type="button"]:hover, 
.form-style ul li input[type="submit"]:hover {
    background-color: var(--bg-color);
    border: 1px solid var(--form-button-hover-border-color);
}

/* (CONTACT) FORM END */

 layouts/partials/head.html

@@ -11,18 +11,13 @@
    {{- end -}}

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

    {{ range .Site.Params.customCss }}
        {{ $minstyles := resources.Get . }}
        {{ $styles := $minstyles | resources.Minify | resources.Fingerprint }}