summaryrefslogtreecommitdiff
path: root/_sass/layout
diff options
context:
space:
mode:
Diffstat (limited to '_sass/layout')
-rw-r--r--_sass/layout/_404.scss14
-rw-r--r--_sass/layout/_archive.scss5
-rw-r--r--_sass/layout/_article.scss29
-rw-r--r--_sass/layout/_articles.scss17
-rw-r--r--_sass/layout/_base.scss6
-rw-r--r--_sass/layout/_home.scss15
-rw-r--r--_sass/layout/_landing.scss23
-rw-r--r--_sass/layout/_page.scss165
8 files changed, 274 insertions, 0 deletions
diff --git a/_sass/layout/_404.scss b/_sass/layout/_404.scss
new file mode 100644
index 0000000..e206f76
--- /dev/null
+++ b/_sass/layout/_404.scss
@@ -0,0 +1,14 @@
+.layout--404 {
+ .sign {
+ display: table;
+ margin: map-get($spacers, 4) auto;
+ margin-top: map-get($spacers, 5);
+ h1 {
+ font-size: map-get($base, font-size-xl) * 4;
+ line-height: 1;
+ }
+ p {
+ font-size: map-get($base, font-size-xl) * 1.2;
+ }
+ }
+}
diff --git a/_sass/layout/_archive.scss b/_sass/layout/_archive.scss
new file mode 100644
index 0000000..7dc417f
--- /dev/null
+++ b/_sass/layout/_archive.scss
@@ -0,0 +1,5 @@
+.layout--archive {
+ & > .layout--archive__result {
+ margin: map-get($spacers, 4) 0;
+ }
+}
diff --git a/_sass/layout/_article.scss b/_sass/layout/_article.scss
new file mode 100644
index 0000000..dd83384
--- /dev/null
+++ b/_sass/layout/_article.scss
@@ -0,0 +1,29 @@
+.article__sharing {
+ margin: map-get($spacers, 4) 0;
+}
+.article__section-navigator {
+ padding-top: map-get($spacers, 3);
+ margin: map-get($spacers, 4) 0 map-get($spacers, 3) 0;
+ word-wrap: break-word;
+ @include split-line(top, 4px);
+ & > .previous, & > .next {
+ width: 50%;
+ & > span {
+ font-weight: map-get($base, font-weight-bold);
+ color: $text-color-l;
+ }
+ & > a {
+ display: block;
+ @include link-colors($text-color, $main-color-1);
+ }
+ }
+ & > .previous {
+ float: left;
+ padding-right: map-get($spacers, 2);
+ }
+ & > .next {
+ float: right;
+ padding-left: map-get($spacers, 2);
+ text-align: right;
+ }
+}
diff --git a/_sass/layout/_articles.scss b/_sass/layout/_articles.scss
new file mode 100644
index 0000000..85f258c
--- /dev/null
+++ b/_sass/layout/_articles.scss
@@ -0,0 +1,17 @@
+.layout--articles {
+ margin: map-get($spacers, 4) 0;
+ margin-top: map-get($spacers, 5);
+ @include media-breakpoint-down(md) {
+ margin-top: map-get($spacers, 4);
+ }
+ .card__header {
+ font-size: map-get($base, font-size);
+ }
+ .card__image {
+ & > .overlay {
+ &, .card__header {
+ font-size: map-get($base, font-size-sm);
+ }
+ }
+ }
+}
diff --git a/_sass/layout/_base.scss b/_sass/layout/_base.scss
new file mode 100644
index 0000000..6200ec5
--- /dev/null
+++ b/_sass/layout/_base.scss
@@ -0,0 +1,6 @@
+.icon {
+ display: block;
+ > svg {
+ display: block;
+ }
+}
diff --git a/_sass/layout/_home.scss b/_sass/layout/_home.scss
new file mode 100644
index 0000000..298e6b9
--- /dev/null
+++ b/_sass/layout/_home.scss
@@ -0,0 +1,15 @@
+.layout--home {
+ .pagination {
+ margin: map-get($spacers, 4) 0;
+ }
+ .pagination__menu {
+ max-width: 100%;
+ @include overflow(auto);
+ }
+ .pagination__omit {
+ color: $text-color-l;
+ }
+ .items {
+ margin-top: map-get($spacers, 4) * 1.5;
+ }
+}
diff --git a/_sass/layout/_landing.scss b/_sass/layout/_landing.scss
new file mode 100644
index 0000000..752d4e7
--- /dev/null
+++ b/_sass/layout/_landing.scss
@@ -0,0 +1,23 @@
+.layout--landing {
+ .heros {
+ max-width: map-get($layout, content-max-width) * 2;
+ margin-right: auto;
+ margin-left: auto;
+ }
+ .hero {
+ img {
+ display: block;
+ width: 100%;
+ margin: 0 auto;
+ }
+ }
+ .hero__content {
+ margin-bottom: 0;
+ }
+ .hero__cover {
+ max-width: map-get($layout, content-max-width);
+ }
+ .hero__cover--full-width {
+ max-width: none;
+ }
+}
diff --git a/_sass/layout/_page.scss b/_sass/layout/_page.scss
new file mode 100644
index 0000000..bb42331
--- /dev/null
+++ b/_sass/layout/_page.scss
@@ -0,0 +1,165 @@
+body,
+html,
+.root,
+.layout--page {
+ height: 100%;
+}
+
+.layout--page {
+ &.layout--page--sidebar {
+ .page__viewport,
+ .page__grid {
+ height: 100%;
+ }
+ @include media-breakpoint-down(lg) {
+ .page__main {
+ @include overflow(unset);
+ }
+ }
+ }
+}
+
+.page__main {
+ height: 100%;
+ color: $text-color;
+ .col-aside {
+ display: none;
+ & > aside {
+ position: absolute;
+ width: map-get($layout, aside-width);
+ @include overflow(hidden);
+ }
+ }
+}
+
+.page__main-inner {
+ position: relative;
+ @include flexbox();
+ @include flex-direction(column);
+ min-height: 100%;
+ background-color: $background-color;
+}
+
+.page__content {
+ @include flex(1);
+ width: 100%;
+ margin: 0 auto;
+ @media print {
+ padding-bottom: 0;
+ }
+}
+.hide-footer {
+ .page__content {
+ padding-bottom: 0;
+ }
+}
+
+.page__comments {
+ margin: map-get($spacers, 4) 0;
+}
+
+.page__aside {
+ .toc-aside {
+ padding: map-get($spacers, 5) 0 map-get($spacers, 3) map-get($spacers, 5);
+ }
+}
+
+.page__actions {
+ position: fixed;
+ bottom: map-get($spacers, 5);
+ left: map-get($spacers, 3);
+ z-index: map-get($z-indexes, actions);
+ display: none;
+}
+
+.page__sidebar {
+ z-index: map-get($z-indexes, sidebar);
+ display: block;
+ width: 80%;
+ max-width: map-get($layout, sidebar-width);
+ height: 100%;
+ background-color: $background-color;
+ @include split-line(right);
+ @include transition(transform map-get($animation, duration));
+ @include overflow(auto);
+ .sidebar-toc {
+ padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 4);
+ }
+}
+.sidebar-button {
+ @include clickable($text-color-d, rgba($main-color-3, .75));
+}
+
+.page__mask {
+ @include modal(map-get($z-indexes, mask));
+ cursor: pointer;
+}
+.layout--page--sidebar {
+ .page__main {
+ @include overflow(auto);
+ @media print {
+ @include overflow(unset);
+ }
+ }
+}
+
+.has-aside {
+ .col-aside {
+ position: relative;
+ display: block;
+ width: map-get($layout, aside-width);
+ & > aside {
+ &.fixed {
+ position: fixed;
+ -webkit-font-smoothing: subpixel-antialiased;
+ }
+ }
+ @include media-breakpoint-down(lg) {
+ display: none;
+ }
+ }
+}
+
+@include media-breakpoint-down(lg) {
+ .page__sidebar {
+ position: fixed;
+ @include transform(translate(- map-get($layout, sidebar-width), 0));
+ }
+
+ .page__actions {
+ display: block;
+ }
+
+ .show-sidebar {
+ .page__actions {
+ visibility: hidden;
+ }
+ .page__sidebar {
+ @include transform(translate(0));
+ }
+ .page__mask {
+ @include modal--show();
+ }
+ }
+}
+
+.hero--light {
+ .article__info {
+ color: $text-color-theme-light;
+ }
+}
+.hero--dark {
+ .article__info {
+ color: $text-color-theme-dark;
+ }
+}
+
+.page__main--immersive {
+ .page__header {
+ position: absolute;
+ width: 100%;
+ }
+ .hero__content {
+ padding-top: map-get($layout, header-height);
+ }
+}