/* Site Header */ .site-header {
font-family: $banner-font-family; max-width: $content-width; background-color: $header-bg-color; margin-left: auto; margin-right: auto; padding-left: 4px; padding-right: 4px; box-sizing: border-box; @include media-query($on-laptop) { } @include media-query($on-palm) { } .grid-container-top { height: 32px; display: grid; grid-template-columns: auto auto; grid-template-rows: 100%; } .banner-logo-title-slogan { grid-column-start: 1; grid-column-end: 1; justify-self: start; align-self: center; display: grid; grid-template-columns: auto auto auto; grid-template-rows: 100%; grid-column-gap: 4px; .banner-logo { grid-column-start: 1; grid-column-end: 1; grid-row-start: 1; grid-row-end: 1; justify-self: start; } .banner-title { grid-column-start: 2; grid-column-end: 2; grid-row-start: 1; grid-row-end: 1; justify-self: start; align-self: end; .site-title { color: $title-color; font-size: $font-size-title; font-weight: $base-font-weight; } } .banner-slogan { grid-column-start: 3; grid-column-end: 3; grid-row-start: 1; grid-row-end: 1; justify-self: start; align-self: end; color: $slogan-color; .site-slogan { font-style: italic; font-size: $font-size-slogan; @include media-query($on-palm) { display: none; } padding-right: 4px; } .slogan-extension { display: inline; font-size: $large-font-size; font-weight: $base-font-weight; margin-bottom: 0; //font-style: italic; //font-size: $font-size-slogan; @include media-query($on-palm) { display: none; } } } } .banner-icons { grid-column-start: 2; grid-column-end: 2; justify-self: end; align-self: center; display: grid; grid-auto-columns: auto; grid-auto-rows: 100%; grid-column-gap: 4px; .banner-icon { grid-column-start: auto; grid-column-end: auto; grid-row-start: 1; grid-row-end: 1; justify-self: start; align-self: center; width: 22px; height: 22px; } }
}
/* Middle Section - Menu / Content */ .grid-container-middle {
max-width: $content-width; height: 100%; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: 16% 84%; grid-template-rows: 100%; //grid-column-gap: $spacing-unit; background-color: $middle-bg-color; background: $middle-bg-final; box-sizing: border-box; border-bottom: 1px solid $border-color; border-left: 1px solid $border-color; border-right: 1px solid $border-color; @include media-query($on-laptop) { border-left: none; border-right: none; } @include media-query($on-palm) { border-left: none; border-right: none; grid-template-columns: 100%; grid-template-rows: 100%; }
}
.classic-menu {
height: 100%; font-family: $menu-font-family; grid-column-start: 1; grid-column-end: 1; justify-self: stretch; align-self: stretch; word-wrap: break-word; width: 100%; box-sizing: border-box; border-right: 1px solid black; @include media-query($on-palm) { display: none; } .menu-title { font-size: $large-font-size; box-sizing: border-box; border-bottom: 1px dashed $border-color; margin-bottom: 1px; padding-left: 4px; padding-right: 4px; } .menu-links { list-style: none; margin-left: 0px; margin-bottom: 8px; //padding-left: 4px; //padding-right: 4px; text-indent: 4px; } .menu-links-history { text-indent: 0px; padding-left: 4px; padding-right: 4px; } .menu-link { display: block; line-height: 1.2; color: $text-color; &:visited { color: $text-color; } &:hover { color: $text-color; background: $menu-link-hover-bgcolor; } } .menu-history { font-size: $history-font-size; font-family: Verdana; width: 100%; min-height: 40px; max-height: 100px; text-align: left; background: $history-bg-color; box-sizing: border-box; word-wrap: break-word; color: $history-txt-color; //padding: 0.5%; overflow: auto; margin-top: -1px; .history-date { font-weight: 700; } .history-link { &:hover { color: $link-color-hover; } &:visited { color: $link-color; } } }
}
.content-area {
height: 100%; grid-column-start: 2; grid-column-end: 2; justify-self: start; align-self: start; width: 100%; word-wrap: break-word; box-sizing: border-box; padding-left: $spacing-unit; padding-right: $spacing-unit; @include media-query($on-palm) { grid-column-start: 1; grid-column-end: 1; padding-left: 4px; padding-right: 4px; } .post-list { list-style: none; margin-left: 0px; //padding-left: 4px; //padding-right: 4px; } .post-meta { font-size: $small-font-size; font-weight: $base-font-weight; font-family: $base-font-family; } .post-link { font-size: $large-font-size; &:visited { color: $link-color; } } .page { padding-top: $spacing-unit / 2.5; } .post-header { } .post-title { display: none; @include media-query($on-palm) { display: block; font-size: $large-font-size; font-weight: $base-font-weight; margin-bottom: 0; } } .post-content { }
}
/* Footer */ .site-footer {
max-width: $content-width; display: grid; grid-template-columns: 50% 50%; grid-template-rows: 100%; margin-left: auto; margin-right: auto; padding-right: 4px; padding-left: 4px;
}
.to-top {
grid-column-start: 1; grid-column-end: 1; justify-self: start; align-self: start; font-family: $menu-font-family; font-size: $small-font-size; &:visited { color: $link-color; }
}
.copyright {
grid-column-start: 2; grid-column-end: 2; justify-self: end; align-self: start; font-family: $menu-font-family; font-size: $cpr-font-size;
}
/* Mobile Menu */ .mobile-menu {
display: none; @include media-query($on-palm) { display: block; width: 100%; } .mob-menu-grid { width: 100%; display: grid; grid-template-columns: auto auto auto; grid-auto-rows: auto; grid-column-gap: 4px; background: black; .menu-btn { font-family: $menu-font-family; color: $button-txt-color; display: block; grid-column-start: auto; grid-column-end: auto; grid-row-start: auto; grid-row-end: auto; justify-self: start; align-self: center; padding: 2px; margin-top: 1px; margin-bottom: 1px; box-sizing: border-box; border: 2px solid $button-border-color; border-radius: 5px; background: $button-bg-color; margin-left: auto; margin-right: auto; &:visited { color: $button-txt-color; } &:hover { color: $button-txt-color; background: $menu-link-hover-bgcolor; } } }
}