/* ——————– header ———————– */
/*
-
sticky header
*/
.sticky {
position: -webkit-sticky; position: sticky; top: 0; z-index: 1;
}
/*
-
header main
*/
.site-header {
position: relative; background-color: $nav-bg; min-height: $spacing-unit * 1.865; box-shadow: $shadow;
}
/*
-
site title and logo
*/
.site-title {
@include relative-font-size(1.625); font-weight: 300; line-height: $base-line-height * $base-font-size * 2.25; margin-bottom: 0; float: left; text-decoration: none; color: $nav-text; &, &:visited { color: $nav-text; }
}
.site-logo {
display: inline-block; max-height: 50px; width: auto; opacity: 1; box-shadow: none; margin-top: 5px; margin-bottom: 0px;
}
/*
-
navigation page links
*/
.site-nav {
float: right; line-height: $base-line-height * $base-font-size * 2.25; .nav-trigger { display: none; } .menu-icon { display: none; }
/*
-
links on the nav panel
*/
.nav-items { position: relative; display: inline-block; line-height: $base-line-height; padding-top: 18px; padding-bottom: 18px; &:hover { color: $nav-text; background-color: $nav-hl; text-decoration: underline; } a{ padding: 18px; text-decoration: none; color: $nav-text; &:visited { color: $nav-text; } } }
/*
-
main dropdown container
*/
.dropdown-content { display: none; position: absolute; right:0; top: 100%; line-height: $base-line-height; background-color: $nav-hl-dark; min-width: 100%; box-shadow: $shadow; z-index: 1; a { display: block; text-decoration: none; padding: 10px; color: $nav-text; text-align: center; &:visited { color: $nav-text; } &:hover { color: $nav-text; background-color: $nav-hl-light; text-decoration: underline; } } } .nav-items:hover .dropdown-content { display: block; }
/*
-
navigation panel on small devices
*/
@include media-query($on-palm) { position: absolute; top: 9px; right: $spacing-unit / 2; background-color: $nav-bg; border: 1px solid $stroke; border-radius: 5px; text-align: right; label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; } .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; > svg { fill: $text-light; } } input ~ .trigger { clear: both; display: none; } input:checked ~ .trigger { display: block; } .nav-items { position: relative; display: block; padding: 10px; &:not(:last-child) { margin-right: 0; } } .dropdown-content { display: none; position: left; background-color: $box-fill; min-width: 100%; z-index: 1; right: 100%; top: 0; } .nav-items:input .dropdown-content { display: block; } }
}
/* ———- generic pages and posts ———– */
/*
-
page
*/
.page-content {
padding-top: $spacing-unit; padding-bottom: $spacing-unit; flex: 1;
}
.page-heading {
@include relative-font-size(2);
}
.post-list-heading {
@include relative-font-size(1.75);
}
.post-list {
margin-left: 0; list-style: none; > li { margin-bottom: $spacing-unit; }
}
.post-meta {
font-size: $small-font-size; text-align: center; color: $text-muted; a { color: $text-muted; text-decoration: none; &:visited { color: $text-muted; text-decoration: none; &:hover { color: $link; text-decoration: underline; } } }
}
.sidebar-meta {
display: block; text-align: center; border-radius: 8px; box-shadow: $shadow-body; width: 100%; height: auto; padding-top: $spacing-unit; padding-bottom: $spacing-unit; padding-left: $spacing-unit / 2; padding-right: $spacing-unit / 2; font-size: $small-font-size; background-color: $box-fill;
}
.post-link {
display: block; @include relative-font-size(1.5);
}
/**
* post */
.post-header {
margin-bottom: $spacing-unit * 2;
}
.post-title {
@include relative-font-size(2.625); text-align: center; @include media-query($on-tablet) { @include relative-font-size(2.25); }
}
.post-content {
margin-bottom: $spacing-unit; h2 { @include relative-font-size(2); @include media-query($on-tablet) { @include relative-font-size(1.75); } } h3 { @include relative-font-size(1.625); @include media-query($on-tablet) { @include relative-font-size(1.375); } } h4 { @include relative-font-size(1.25); @include media-query($on-tablet) { @include relative-font-size(1.125); } }
}
.video {
display: block; border-radius: 8px; box-shadow: $shadow-body;
}
.document {
display: block; width: 100%; height: 500px; border-radius: 8px; box-shadow: $shadow-body;
}
/* ————— profile page ———————- */
.profile-common{
padding-top: 100px; padding-bottom: 100px; min-height: 700px;
} .db-common{
background-color: $dark-bg; color: $dbg-text; h1, h2, h3, h4, h5, h6{ color: $dbg-text-light; }
} .db-start{
border-radius: 0% 0% 80% 0% / 0% 0% 10% 0% ;
} .db-middle{
border-radius: 80% 0% 80% 0% / 10% 0% 10% 0% ;
} .db-end{
border-radius: 80% 0% 0% 0% / 10% 0% 0% 0% ;
}
.lb-common{
background-color: $light-bg; color: $lbg-text; h1, h2, h3, h4, h5, h6{ color: $lbg-text-light; } a { color: $lbg-text-light; text-decoration: none; &:hover { color: $lbg-text-light; text-decoration: underline; } }
}
.lb-middle{
border-radius: 80% 0% 0% 0% / 0% 0% 10% 0% ;
} .lb-end{
border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
}
.profile{
img{ /*max-width: 100%;*/ max-width: 70%; }
}
@include media-query($on-palm){ .profile{
img{ max-width: 100%; }
} }
/* ————— home page ————— */
.home-page {
padding-top: $spacing-unit ;
}
.center{
float: center;
}
.social-links-home {
margin-top: $spacing-unit; margin-bottom: $spacing-unit; display: block; text-align: center; background-color: $dbg-shape; border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ; box-shadow: $shadow; a{ text-align: center; display: inline-block; padding: 20px; color: $text; &:visited { color: $text; } &:hover { color: $link-hover; }
} }
.profile-picture {
text-align: center; img{ opacity: 1; border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ; //border-radius: 56% 57% 63% 53% / 66% 44% 74% 68% ; //border-radius: 8px; //border-radius: 57% 43% 68% 32% / 40% 60% 40% 60% ; // border-radius: 69% 50% 59% 77% / 68% 50% 79% 72% ; }
}
/* ————– pagination ——————- */
/*
-
pagination tooltips
*/
.tooltip {
position: relative; display: inline-block; border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; top: 150%; left: 50%; margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
/*
-
pagination buttons
*/
.pagination {
padding-top: $spacing-unit; padding-bottom: $spacing-unit; a { border-radius: 48% 87% 69% 65% / 85% 52% 76% 55% ; display: inline-block; background-color: $grey85; max-width: 300px; padding: $spacing-unit / 2; text-decoration: none; box-shadow: $shadow; color: $text-light; &:hover { background-color: $grey8; color: $text-light; box-shadow: $shadow-hover; } &:visited { color: $text-light; text-decoration: none; } } }
/* —————– tags page ——————- */
.tag-btn {
margin-right: $spacing-unit;
}
full-tags-list {
.tag-entry { margin-top: $spacing-unit ; margin-bottom: $spacing-unit ; margin-left: $spacing-unit / 2; /*margin: 0 0 0.9375rem 1.5625rem;*/ .entry-date { color: $text; font-size: $small-font-size; } }
}
/* —————- Footer —————– */
.site-footer {
/*padding-left: $spacing-unit * 1.5;*/ background-color: $footer-color; color: $nav-text-muted; a{ color: $nav-text-muted; &:visited{ color: $nav-text-muted; } &:hover{ color: $nav-text; } }
}
.footer-col-wrapper {
margin-left: auto; margin-right: auto; @include relative-font-size(0.9375); @extend %clearfix;
}
.footer-col {
@include relative-font-size(0.8); float: center; padding: 10px;
}
.footer-col-1 {
text-align: left; width: -webkit-calc(33%); width: calc(33%);
}
.footer-col-2 {
text-align: center; width: -webkit-calc(34%); width: calc(34%);
}
.footer-col-3 {
text-align: right; width: -webkit-calc(33%); width: calc(33%);
}
@include media-query($on-palm) {
.footer-col { float: none; text-align: center; width: -webkit-calc(100% - (#{$spacing-unit} / 2)); width: calc(100% - (#{$spacing-unit} / 2)); }
}