blog/_sass/yat/_layout.scss

777 lines
13 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;
2020-10-02 05:10:50 +02:00
margin-top: 12px;
2020-07-12 10:23:23 +02:00
background-color: transparent;
transition: 0.1s height,background-color,box-shadow;
2019-09-20 09:45:37 +02:00
&.site-header {
2020-07-12 10:23:23 +02:00
.site-brand-inner, .page-link {
color: #fff;
transition: 0.1s color;
}
@include media-query($on-laptop) {
.page-link {
color: $header-text-color;
2020-07-12 10:23:23 +02:00
}
.menu-icon {
> svg {
fill: $white-color;
}
}
}
2019-09-20 09:45:37 +02:00
}
}
footer.site-footer {
color: unset;
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;
2020-07-12 10:23:23 +02:00
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .06);
2019-09-11 06:19:34 +02:00
// Positioning context for the mobile navigation icon
@include flex-sticky(0);
z-index: 1000;
2020-07-12 10:23:23 +02:00
& > .wrapper {
margin: 0 60px;
2020-07-12 11:53:51 +02:00
padding: 0;
2020-07-12 10:23:23 +02:00
max-width: 100%;
2020-07-15 10:40:25 +02:00
transition: 0.2s margin;
2020-07-12 10:23:23 +02:00
@include media-query(1024px) {
2020-07-15 10:40:25 +02:00
margin: 0 20px;
2020-07-12 10:23:23 +02:00
max-width: unset;
}
}
2019-09-11 06:19:34 +02:00
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;
2020-07-12 10:23:23 +02:00
transition: 0.1s filter color;
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;
}
.site-favicon {
display: inline-block;
height: $header-height / 1.5;
margin-right: 5px;
}
2019-09-11 06:19:34 +02:00
}
}
.site-nav {
2020-07-12 10:23:23 +02:00
@include relative-font-size(1.125);
2019-09-11 06:19:34 +02:00
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 {
line-height: $base-line-height;
2020-07-12 10:23:23 +02:00
color: $header-text-color;
transition: 0.1s ease-in-out;
2019-09-11 06:19:34 +02:00
// Gaps between nav items, but not on the last one
&:not(:last-child) {
2020-07-12 10:23:23 +02:00
margin-right: 24px;
&:hover {
text-decoration: underline;
}
2019-09-11 06:19:34 +02:00
}
}
2020-07-12 10:23:23 +02:00
@include media-query($on-laptop) {
2019-09-11 06:19:34 +02:00
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 {
2020-07-12 10:23:23 +02:00
fill: rgba($header-text-color, 80%);
transition: 0.1s fill;
2019-09-11 06:19:34 +02:00
}
}
input ~ .trigger {
clear: both;
display: none;
2020-07-12 10:23:23 +02:00
border-radius: 3px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .06);
2019-09-11 06:19:34 +02:00
}
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 {
2020-07-12 10:23:23 +02:00
@include relative-font-size(1.0);
2019-09-11 06:19:34 +02:00
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;
2020-07-12 10:23:23 +02:00
padding: $spacing-unit * 1.8 0;
}
2019-09-11 06:19:34 +02:00
a {
2020-07-12 10:23:23 +02:00
$a-color: $brand-color;
2019-09-11 06:19:34 +02:00
color: $a-color;
&:hover {
color: lighten($a-color, 10%);
}
}
}
.copyleft {
display: inline-block;
transform: rotate(180deg);
}
2019-09-11 06:19:34 +02:00
/**
* 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);
}
}
2020-07-12 10:23:23 +02:00
.post-tags {
padding-right: 150px;
.post-tag {
display: inline-block;
2020-07-12 10:23:23 +02:00
margin: 0 12px 0 0;
}
}
2019-09-11 06:19:34 +02:00
}
/**
* Page content
*/
.page-content {
@extend %flex-1; /* <-- Keep footer on the bottom */
-ms-flex: none; /* <-- Fix IE footer issue */
2020-07-12 10:23:23 +02:00
padding: $spacing-unit * 2 0;
2020-10-02 05:10:50 +02:00
padding-top: 72px;
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 {
2020-07-12 10:23:23 +02:00
margin-bottom: $spacing-unit * 1.5;
padding-bottom: 30px;
&:not(:last-child) {
border-bottom: 1px solid #e3e3e3;
}
}
}
.post-title {
margin-bottom: $spacing-unit * 0.2;
2020-07-16 13:38:32 +02:00
transition: 0.2s all;
2020-07-12 10:23:23 +02:00
a {
text-decoration: none;
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
2019-09-11 06:19:34 +02:00
}
}
.post-meta {
2020-07-12 10:23:23 +02:00
font-size: $base-font-size;
2019-09-11 06:19:34 +02:00
color: $grey-color;
2020-07-12 10:23:23 +02:00
margin-bottom: $spacing-unit * 0.5;
2019-09-11 06:19:34 +02:00
}
.post-link {
@include relative-font-size(1.65);
font-weight: $base-font-weight * 1.5;
color: #333;
2020-07-12 10:23:23 +02:00
}
.post-excerpt {
color: #777;
word-break: break-word;
overflow-wrap: break-word;
2020-07-12 10:23:23 +02:00
}
.post-tags .post-tag {
text-decoration: none;
border: 1px solid;
padding: 2px 4px;
border-radius: 2px;
2020-08-25 08:24:14 +02:00
transition: color 0.2s;
2020-07-12 10:23:23 +02:00
&:not(:first-child) {
margin-left: 8px;
}
2020-08-25 08:24:14 +02:00
&:hover {
2020-10-02 05:10:50 +02:00
color: #787878;
2020-08-25 08:24:14 +02:00
}
2019-09-11 06:19:34 +02:00
}
2020-07-12 10:30:26 +02:00
.paginator {
text-align: center;
& > .previous:before {
2020-07-12 10:30:26 +02:00
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-right: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
& > .next:after {
2020-07-12 10:30:26 +02:00
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-left: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.previous span, .next span {
color: #b3b3b3;
}
.indicator {
padding: 0 15px;
}
}
2019-09-11 06:19:34 +02:00
}
/**
* Posts
*/
.post {
@extend %post-header;
2020-07-12 10:23:23 +02:00
.post-header {
margin: 50px auto 60px;
padding: 0 0 20px;
border-bottom: 1px solid #ebebeb;
.post-title {
margin-bottom: 6px;
}
.post-subtitle {
font-weight: lighter;
2020-07-12 10:23:23 +02:00
}
.post-meta {
color: #808080;
}
}
2019-09-11 06:19:34 +02:00
.post-content {
margin-bottom: $spacing-unit;
2020-09-29 06:46:54 +02:00
overflow-wrap: normal;
word-wrap: normal;
word-break: normal;
2019-09-11 06:19:34 +02:00
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);
}
}
2020-07-12 10:23:23 +02:00
2020-09-17 05:22:06 +02:00
img, svg, iframe {
2020-07-12 10:23:23 +02:00
margin-left: auto;
margin-right: auto;
display: block;
}
h2, h3, h4, h5, h6 {
margin: 60px 0 19px;
}
p, hr {
margin-bottom: 24px;
}
hr {
height: 1px;
background-color: #ebebeb;
border: none;
}
}
.post-related {
&>*:first-child {
@include relative-font-size(1.425);
color: #333;
margin-bottom: 14px;
}
ul {
margin-left: 15px;
.post-link {
@include relative-font-size(1.075);
}
a {
color: #666;
&:hover {
color: #333;
}
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
}
}
2019-09-11 06:19:34 +02:00
}
}
.post-comments {
padding-top: 25px;
}
2019-09-11 06:19:34 +02:00
/**
* Posts misc
*/
.post-nav {
display: flex;
justify-content: space-between;
2020-07-12 10:23:23 +02:00
margin: 72px 0 59px;
padding: 31px 0 0;
2019-09-11 06:19:34 +02:00
a {
2020-07-12 10:23:23 +02:00
@include relative-font-size(1.125);
line-height: 15px;
color: #666;
max-width: 50%;
2020-07-12 10:23:23 +02:00
}
.previous:before {
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-right: 8px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.next:after {
content: ' ';
border: solid #787878;
border-width: 0 2px 2px 0;
display: inline-block;
padding: 4px;
margin-left: 8px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
2019-09-11 06:19:34 +02:00
}
}
/**
* 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;
2020-10-02 05:10:50 +02:00
transition: 0.1s all ease-in-out;
2019-09-11 06:19:34 +02:00
}
2021-06-17 14:44:37 +02:00
2021-06-26 06:05:19 +02:00
& > video {
width: 100vw;
object-fit: cover;
}
2021-06-17 14:44:37 +02:00
& > img.img-placeholder {
display: none;
}
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;
2020-07-12 10:23:23 +02:00
text-shadow: 1px 1px 2px #33333355;
2019-09-11 06:19:34 +02:00
& > *:first-child {
margin: 0;
2019-09-11 06:19:34 +02:00
> :nth-child(1) {
2020-07-12 10:23:23 +02:00
@include relative-font-size(3.9);
letter-spacing: -1px;
margin-bottom: 0.1em;
2020-07-12 10:23:23 +02:00
font-weight: normal;
2020-07-16 13:38:32 +02:00
transition: 0.2s all;
2019-09-11 06:19:34 +02:00
@include media-query($on-palm) {
@include relative-font-size(1.975);
}
}
2019-09-11 06:19:34 +02:00
> :nth-child(2) {
font-weight: lighter;
margin-bottom: 0.8em;
transition: 0.2s all;
@include media-query($on-palm) {
@include relative-font-size(1.175);
}
}
2019-09-20 09:45:37 +02:00
> :last-child {
margin-bottom: 0;
}
2019-09-11 06:19:34 +02:00
}
2020-07-12 10:23:23 +02:00
.post-subtitle {
@include relative-font-size(1.525);
color: #ffffffcc;
padding-right: 280px;
@include media-query($on-palm) {
padding-right: 0;
}
2020-07-12 10:23:23 +02:00
}
.post-meta {
color: #ffffffcc;
}
2020-07-16 13:25:04 +02:00
.left-vsplit:before {
background: #e3e3e388;
}
2020-07-12 10:23:23 +02:00
.post-tags {
color: #999;
padding-right: 280px;
@include media-query($on-palm) {
padding-right: 0;
}
2020-07-12 10:23:23 +02:00
.post-tag {
@include relative-font-size(1.125);
display: inline-block;
text-decoration: none;
margin: 9px 12px 0 0;
color: #fff;
&:hover {
text-decoration: underline;
}
}
}
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;
2019-09-11 06:19:34 +02:00
.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);
2020-07-12 10:23:23 +02:00
@include media-query($on-laptop) {
2019-09-11 06:19:34 +02:00
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;
}
2020-07-12 10:23:23 +02:00
li a {
&.post-link {
margin-left: 5px;
}
color: #303030;
&:hover {
color: #000;
}
&:after {
content: 'NEW';
position: absolute;
margin-left: 8px;
margin-top: 3px;
padding: 0px 3px;
background-color: $brand-color;
color: #fff;
font-size: 10px;
font-weight: 600;
border-radius: 2px;
}
&:visited:after {
background-color: #fff;
}
}
2019-09-11 06:19:34 +02:00
}
2020-07-16 13:25:04 +02:00
.left-vsplit:before {
content: "";
display: inline-block;
width: 1px;
height: 10px;
margin: 0 10px;
background-color: #e3e3e3e3;
vertical-align: baseline;
}