blog/_sass/yat/_layout.scss

436 lines
6.6 KiB
SCSS
Raw Normal View History

/**
* Animation for transparent header
*/
html {
&[data-header-transparent] {
header.site-header {
position: fixed;
}
}
&[data-scroll-status='top'] {
header.site-header-transparent {
height: 0;
2019-09-20 09:45:37 +02:00
&.site-header {
text-shadow: 0 0 2px #505050a0;
}
}
footer.site-footer {
color: #888;
background-color: transparent;
.site-footer-inner {
border-top: solid 1px #eee;
}
}
}
&[data-scroll-status='down'] {
header.site-header {
top: -$header-height;
}
.framework .sidebar {
top: 20px;
}
}
}
2019-09-11 06:19:34 +02:00
/**
* Site header
*/
.site-header {
background-color: $header-background-color;
2019-09-11 06:19:34 +02:00
height: $header-height;
width: 100%;
transition: height 0.2s, text-shadow 0.2s, top 0.2s;
2019-09-11 06:19:34 +02:00
// Positioning context for the mobile navigation icon
@include flex-sticky(0);
z-index: 1000;
a {
text-decoration: none;
}
2019-09-20 09:45:37 +02:00
.site-header-inner {
position: relative;
}
2019-09-11 06:19:34 +02:00
}
.site-brand {
line-height: $header-height;
2019-09-11 06:19:34 +02:00
margin-right: 50px;
.site-brand-inner {
2019-09-13 11:26:19 +02:00
@include relative-font-size(1.125);
2019-09-11 06:19:34 +02:00
font-weight: $base-font-weight;
letter-spacing: -1px;
2019-09-20 09:45:37 +02:00
transition: filter 0.2s;
2019-09-11 06:19:34 +02:00
2019-09-13 11:26:19 +02:00
&, &:visited {
2019-09-11 06:19:34 +02:00
color: $header-text-color;
}
&:hover {
2019-09-20 09:45:37 +02:00
filter: drop-shadow(0 0 2px #08080880);
}
.site-favicon {
display: inline-block;
height: $header-height / 1.5;
margin-right: 5px;
}
2019-09-11 06:19:34 +02:00
}
}
.site-nav {
@include relative-font-size(1.025);
line-height: $header-height;
2019-09-20 09:45:37 +02:00
position: absolute;
right: 0;
top: 0;
2019-09-11 06:19:34 +02:00
.nav-trigger {
display: none;
}
.menu-icon {
display: none;
}
.page-link {
color: $header-text-color;
line-height: $base-line-height;
// Gaps between nav items, but not on the last one
&:not(:last-child) {
margin-right: 20px;
}
}
@include media-query($on-palm) {
position: absolute;
top: 0;
2019-09-11 06:19:34 +02:00
text-align: left;
label[for="nav-trigger"] {
display: block;
z-index: 2;
cursor: pointer;
}
.menu-icon {
display: block;
float: right;
text-align: center;
> svg {
fill: $white-color;
}
}
input ~ .trigger {
clear: both;
display: none;
}
input:checked ~ .trigger {
display: block;
background: $header-background-color;
}
.page-link {
display: block;
padding: 5px 10px;
color: rgba($header-text-color, 80%);
margin: 0 25px;
}
}
}
/**
* Site footer
*/
.site-footer {
@include relative-font-size(0.9);
color: $footer-text-color;
background-color: $footer-background-color;
2019-09-11 06:19:34 +02:00
text-align: left;
transition: background-color 0.2s;
.site-footer-inner {
transition: border-top 0.2s;
padding: $spacing-unit * 0.8 0;
}
2019-09-11 06:19:34 +02:00
a {
$a-color: invert(mix(invert($theme-color), #0030ae));
color: $a-color;
&:hover {
color: lighten($a-color, 10%);
}
}
}
/**
* Post header
*/
%post-header {
.post-header {
margin-bottom: $spacing-unit;
}
.post-title {
@include relative-font-size(2.625);
letter-spacing: -1px;
line-height: 1;
@include media-query($on-laptop) {
@include relative-font-size(2.25);
}
}
}
/**
* Page content
*/
.page-content {
@extend %flex-1; /* <-- Keep footer on the bottom */
padding: $spacing-unit * 1.5 0;
2019-09-11 06:19:34 +02:00
}
.page-heading {
@include relative-font-size(2);
}
.post-list-heading {
@include relative-font-size(1.75);
}
/**
* Pagination page
*/
.pagination {
.post-list {
margin-left: 0;
list-style: none;
> li {
margin-bottom: $spacing-unit;
}
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
}
.post-link {
@include relative-font-size(1.5);
display: block;
font-weight: $base-font-weight * 1.5;
2019-09-11 06:19:34 +02:00
}
}
/**
* Posts
*/
.post {
@extend %post-header;
.post-content {
margin-bottom: $spacing-unit;
h2 {
@include relative-font-size(2);
@include media-query($on-laptop) {
@include relative-font-size(1.75);
}
}
h3 {
@include relative-font-size(1.625);
@include media-query($on-laptop) {
@include relative-font-size(1.375);
}
}
h4 {
@include relative-font-size(1.25);
@include media-query($on-laptop) {
@include relative-font-size(1.125);
}
}
}
}
/**
* Posts misc
*/
.post-nav {
display: flex;
justify-content: space-between;
a {
display: flex;
}
}
/**
* Archives page
*/
.page-archives {
.page-archives-list {
margin-left: 0;
list-style: none;
}
.archives-time {
@include relative-font-size(1.5);
&:not(:first-child) {
margin-top: 18px;
}
margin-bottom: 8px;
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
}
}
/**
* Page banner
*/
.page-banner {
display: block;
position: relative;
height: $banner-height;
background-color: $banner-background;
transition: height 0.2s;
2019-09-11 06:19:34 +02:00
.page-banner-img {
position: absolute;
width: 100%;
2019-09-11 06:19:34 +02:00
height: 100%;
overflow: hidden;
& > *:first-child {
@include center-image;
2019-09-11 06:19:34 +02:00
}
}
.wrapper {
height: 100%;
}
.page-banner-inner {
@include vertical-center(relative);
2019-09-11 06:19:34 +02:00
color: $banner-text-color;
padding: 10px 5px;
text-shadow: 1px 1px 2px #333;
& > *:first-child {
margin: 0;
2019-09-11 06:19:34 +02:00
> :nth-child(1) {
@include relative-font-size(2.825);
letter-spacing: -1px;
line-height: 1;
margin-bottom: 10px;
2019-09-11 06:19:34 +02:00
@include media-query($on-palm) {
@include relative-font-size(2.425);
}
}
2019-09-11 06:19:34 +02:00
> :nth-child(2) {
font-weight: $base-font-weight * 1.5;
}
2019-09-20 09:45:37 +02:00
> :last-child {
margin-bottom: 0;
}
2019-09-11 06:19:34 +02:00
}
}
@include media-query($on-palm) {
height: $banner-height / 1.5;
}
2019-09-11 06:19:34 +02:00
}
/**
* Layout and sidebar
*/
.framework {
@extend %flex-layout;
.main {
@extend %flex-1;
}
.sidebar {
padding-left: 8px;
transition: top 0.2s, display 0.2s;
2019-09-11 06:19:34 +02:00
@include flex-sticky($header-height + 20px);
@include media-query($on-palm) {
display: none;
}
}
}
/**
* Segments page
*/
.page-segments {
.page-segments-list {
margin-left: 0;
list-style: none;
}
.segment-name {
font-weight: $base-font-weight * 1.5;
2019-09-11 06:19:34 +02:00
margin-bottom: 8px;
position: relative;
@include relative-font-size(1.6);
&:not(:first-child) {
margin-top: 28px;
}
&:hover:before {
content: '#';
left: -1em;
position: absolute;
}
}
.post-meta {
font-size: $small-font-size;
color: $grey-color;
}
}