diff docs/assets/css/piecrust.scss @ 1053:94d7d5e38571

docs: Upgrade to Bootstrap 4 and Sass.
author Ludovic Chabant <ludovic@chabant.com>
date Sun, 28 Jan 2018 21:22:03 -0800
parents
children f6b0c6fe6e47
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/docs/assets/css/piecrust.scss	Sun Jan 28 21:22:03 2018 -0800
@@ -0,0 +1,290 @@
+
+// Core variables and mixins
+@import "bootstrap-reboot";
+@import "bootstrap-grid";
+
+// Components
+@import "media";
+@import "nav";
+@import "navbar";
+@import "utilities";
+
+
+// Variables
+//$font-size-base:          17px;
+
+
+// Dividers
+@mixin pc-divider-img($offsetx, $offsety) {
+    @media (min-width: map-get($grid-breakpoints, 'sm')) {
+        display: inline-block;
+        content: " ";
+        background-image: url("../img/dividers.png");
+        background-repeat: no-repeat;
+        background-position: (-$offsetx) (-$offsety);
+        width: 100px;
+        height: 50px;
+
+    }
+}
+@mixin pc-divider($offset) {
+    &::before {
+        @include pc-divider-img(0, $offset);
+        margin-right: 0.5em;
+    }
+    &::after {
+        @include pc-divider-img(100px, $offset);
+        margin-left: 0.5em;
+    }
+}
+
+@mixin pc-divider1() {
+    @include pc-divider(0);
+}
+
+@mixin pc-divider1-white() {
+    @include pc-divider(50px);
+}
+
+@mixin pc-divider2() {
+    @include pc-divider(100px);
+}
+
+@mixin pc-divider3() {
+    @include pc-divider(150px);
+}
+
+
+// Icons
+$pc-icon-width: 128px;
+
+
+// Decorators
+@mixin pc-decorator($img-name, $margin-left) {
+    margin-left: $pc-icon-width;
+    &::before {
+        content: " ";
+        background-image: url($img-name);
+        background-repeat: no-repeat;
+        display: block;
+        float: left;
+        width: 128px;
+        height: 92px;
+        margin-left: -($pc-icon-width + $margin-left);
+    }
+}
+
+@mixin pc-banner($img-name) {
+    background-image: url($img-name);
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: cover;
+}
+
+@mixin pc-banner-header($img-name) {
+    @include pc-banner($img-name);
+    padding: 0 0 3em 0;
+    margin-bottom: 3em;
+    text-align: center;
+    color: black;
+}
+
+// Customizations
+.navbar {
+    padding: 0 1rem;
+    background: #ffffff30;
+    text-shadow: #fff 0 0 1em, #fff 0 0 .1em;
+
+    a {
+        color: #000;
+        padding: 1rem 1rem;
+        
+        &:hover {
+            color: #fff;
+            background: #000000c0 !important;
+            text-shadow: #000 0 0 1em, #000 0 0 .1em;
+        }
+    }
+    a.active {
+        background: #ffffff60;
+    }
+}
+a.navbar-brand {
+    font-family: Lobster, serif;
+    padding: (1rem / 1.25) 1rem;
+}
+
+h1 {
+    font-family: Lobster, serif;
+    font-size: 2em;
+    margin-top: 0;
+    margin-bottom: 0.375em;
+    text-shadow: #fff 0 0 1em, #fff 0 0 0.1em;
+}
+h1.site-title {
+    font-size: 5em;
+    text-align: center;
+}
+@media (min-width: map-get($grid-breakpoints, "sm")) {
+    h1 {
+        font-size: 3em;
+    }
+}
+@media (min-width: map-get($grid-breakpoints, "md")) {
+    h1 {
+        font-size: 4em;
+    }
+}
+
+h2 {
+    font-family: Lobster, serif;
+    font-size: 2.2em;
+}
+
+blockquote {
+    font-size: $font-size-base;
+    border-left: 5px solid #f00; //$brand-info;
+}
+@media (min-width: map-get($grid-breakpoints, "md")) {
+    blockquote {
+        @include pc-decorator('../img/cake.png', 5px + $line-height-base);
+        min-height: 126px;
+    }
+}
+
+header.page-title h1 {
+    @include pc-divider(150px);
+    text-align: center;
+    margin: 0.5em auto 1em;
+}
+
+footer {
+    font-size: 0.8em;
+    text-align: center;
+    margin: 2em;
+}
+
+
+// Splash-page
+.pc-splash {
+    h2 {
+        @include pc-divider2();
+        margin: 1em 0;
+        text-align: center;
+    }
+
+    .pc-splash-logo {
+        background-image: url('../img/logo.png');
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: contain;
+        height: 275px;
+    }
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+        .pc-splash-logo {
+            height: 325px;
+        }
+    }
+    @media (min-width: map-get($grid-breakpoints, "md")) {
+        .pc-splash-logo {
+            height: 375px;
+        }
+    }
+
+    .pc-splash-main {
+        font-size: 1.1em;
+        margin: 1em 0.5em 0 0.5em;
+        padding-bottom: 2em;
+
+        p {
+            margin: 0;
+            text-shadow: #fff 0 0 1em, #fff 0 0 0.1em;
+        }
+    }
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+        .pc-splash-main {
+            font-size: 1.3em;
+            margin: 1em 2em 0 2em;
+        }
+    }
+    @media (min-width: map-get($grid-breakpoints, "md")) {
+        .pc-splash-main {
+            font-size: 1.5em;
+            width: 50%;
+            margin: 1em auto 0 auto;
+        }
+    }
+
+    .pc-splash-icon {
+        display: block;
+        margin: 0 auto;
+    }
+}
+.pc-splash.pc-header-wrapper {
+    @include pc-banner("../img/header2-bg.jpg");
+    color: black;
+}
+.pc-splash.pc-splash-chalkboard {
+    background: url("../img/chalkboard-bg.jpg");
+    color: white;
+    padding: 0.25em 0 3em 0;
+    margin: 0;
+
+    h2 {
+        @include pc-divider1-white();
+    }
+}
+
+
+// Getting-Started
+.pc-tutorial {
+    @include pc-banner-header("../img/header5-bg.jpg");
+}
+
+
+// Documentation
+.pc-documentation {
+    @include pc-banner-header("../img/header10-bg.jpg");
+}
+
+@mixin pc-docnav() {
+    list-style-type: none;
+    padding: 0;
+}
+
+ul.doc-level1 {
+    @include pc-docnav();
+
+    &>li {
+        margin-bottom: 1em;
+    }
+    &>li>a {
+        font-size: 1.1em;
+        font-weight: bold;
+    }
+
+    $doc-link-active: #f00; //darken($brand-success, 10%);
+    a.active {
+        border-left: 3px solid $doc-link-active;
+        padding-left: 0.5em;
+        color: $doc-link-active;
+    }
+}
+
+ul.doc-level2 {
+    @include pc-docnav();
+}
+
+
+// Code
+.pc-code {
+    @include pc-banner-header("../img/header7-bg.jpg");
+}
+
+
+// Support
+.pc-support {
+    @include pc-banner-header("../img/header9-bg.jpg");
+}
+
+