summaryrefslogtreecommitdiffstats
path: root/site/assets/scss/_layout.scss
diff options
context:
space:
mode:
Diffstat (limited to 'site/assets/scss/_layout.scss')
-rw-r--r--site/assets/scss/_layout.scss57
1 files changed, 57 insertions, 0 deletions
diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
new file mode 100644
index 0000000..d0482d9
--- /dev/null
+++ b/site/assets/scss/_layout.scss
@@ -0,0 +1,57 @@
+.bd-gutter {
+ --bs-gutter-x: #{$bd-gutter-x};
+}
+
+.bd-layout {
+
+ @include media-breakpoint-up(lg) {
+ display: grid;
+ grid-template-areas: "sidebar main";
+ grid-template-columns: 1fr 5fr;
+ gap: $grid-gutter-width;
+ }
+}
+
+.bd-sidebar {
+ grid-area: sidebar;
+}
+
+.bd-main {
+ grid-area: main;
+
+ @include media-breakpoint-down(lg) {
+ max-width: 760px;
+ margin-inline: auto;
+ }
+
+ @include media-breakpoint-up(md) {
+ display: grid;
+ grid-template-areas:
+ "intro"
+ "toc"
+ "content";
+ grid-template-rows: auto auto 1fr;
+ gap: inherit;
+ }
+
+ @include media-breakpoint-up(lg) {
+ grid-template-areas:
+ "intro toc"
+ "content toc";
+ grid-template-rows: auto 1fr;
+ grid-template-columns: 4fr 1fr;
+ }
+}
+
+.bd-intro {
+ grid-area: intro;
+}
+
+.bd-toc {
+ grid-area: toc;
+}
+
+.bd-content {
+ grid-area: content;
+ min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}