// header header {
list-style: none; position: relative; z-index: 1; mix-blend-mode: multiply; nav { width: 90%; margin: auto; } ul { margin: 0 1rem; min-height: $min-header-height; } li { display: inline-block; padding: 0.5rem; } .active:after { width: 100%; } .nav-home-button { display: flex; align-items: center; a { transition: opacity 0.4s ease-in-out; &:after { content: none; } &:hover { opacity: 0.5; } } img { height: 70px; } } .basic-nav { margin-left: auto; display: flex; align-items: center; justify-content: flex-end; } @media (max-width: $break-md) { .nav-home-button { justify-content: center; } .basic-nav { justify-content: center; } }
}
// footer footer {
.bio-container { h5 { margin-bottom: 0; } } .social-links { display: flex; flex-wrap: wrap; justify-content: center; li { display: inline-block; margin: 0.4rem; a { transition: opacity 0.4s ease-in-out; &:after { content: none; } &:hover { opacity: 0.4; } } img { width: 50px; } } }
}
// home page .Home-img {
min-height: 100vh; background-size: cover; margin-top: -$min-header-height; .main-feed-link { width: 30px; position: absolute; bottom: 3rem; right: 3rem; }
}
.main-feed-link {
transition: opacity 0.4s ease-in-out; &:after { content: none; } &:hover { opacity: 0.4; } img { width: 30px; }
}
// pages and gallery .pages-layout, .gallery-layout {
.Grid-cell { display: flex; align-items: stretch; }
}
.thumbnail-link {
@include overlay-on-hover($brand-color); flex: 1; text-align: center; background-size: cover; &:hover { .thumbnail-title { opacity: 1; } }
}
.thumbnail-title {
z-index: 1; color: #fff; padding: 0.5em; opacity: 0; filter: brightness(100%); transition: opacity 0.4s ease-in-out;
}
.header-date {
color: $text-color-light; font-size: 0.7em; margin-left: 1em;
}
.size-buttons{
list-style: none; li { display: inline-block; }
}
@media (min-width: $break-md) {
.size-buttons { text-align: right; }
}
.pager {
list-style: none; display: inline-block; li { display: inline-block; } a { margin: 0 0.3em; }
}
.pager-and-size ul {
margin-top: 0;
}
width-50, width-75, width-100 {
margin: 0 auto;
}
width-50 {
width: 50%; display: none; &:target { display: block; & ~ #width-100 { display: none; } }
}
width-75 {
width: 75%; display: none; &:target { display: block; & ~ #width-100 { display: none; } }
}
width-100 {
width: 100%; &:target { display: block; }
}
.main-image {
margin: auto;
} // comments .comments-container {
margin: 5em 0;
}