Initial Structure

Alexander Bilz

21.34.2021 d66f1621a39d159446ed70b07772a039e4ca3a8c

 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 */