// Style for the website @use 'sass:math'; // Variables for this sass implementation $picnic-dropimage-ratio: math.div(4, 3) !default; $picnic-nav-responsive: true; $picnic-normalize-ie: false; // Get the icons from fontello // You need to import this first @import "font/fontello"; // Imports the base variable styles @import "../../src/themes/default/theme"; // Normalize.css (external library) @import "../../src/picnic"; // // Generic styles for things like , and others // // It also overwrites normalize.css a bit // @import '../../src/plugins/generic/plugin'; // // @import '../../src/plugins/fontello/plugin'; // // // Simple elements // @import '../../src/plugins/label/plugin'; // @import '../../src/plugins/button/plugin'; // // // Forms // @import '../../src/plugins/input/plugin'; // @import '../../src/plugins/select/plugin'; // @import '../../src/plugins/radio/plugin'; // @import '../../src/plugins/checkbox/plugin'; // // // Components // //@import '../../src/plugins/table/plugin'; // @import '../../src/plugins/grid/plugin'; // // // Extra // @import '../../src/plugins/nav/plugin'; // // //@import '../../src/plugins/stack/plugin'; // @import '../../src/plugins/card/plugin'; // //@import '../../src/plugins/modal/plugin'; // // @import '../../src/plugins/dropimage/plugin'; // @import '../../src/plugins/tabs/plugin'; // @import '../../src/plugins/tooltip/plugin'; // Our own plugins, extending some of picnic's @import "hero"; @import "visual"; // Make a title and its text closer together h1, h2, h3, h4 { margin: 0; padding: 0; line-height: 1; } // Structure html, body, main { display: block; color: #333; background: #fff; width: 100%; height: 100%; margin: 0; z-index: 5; } // I like allowing scroll past end main .visual:last-child { margin-bottom: 100px; } .intro { padding: 10px; max-width: 960px; width: 100%; margin: 100px auto 500px; } nav .brand:hover, nav .brand:active { background: none; box-shadow: none; } // Display the grid with colors .flex.demo > * > * { display: block; padding: 0.3em 0; background: $green; text-align: center; } .flex.demo > *:nth-child(2n) > * { background: $aqua; } .test > h2 { padding-top: 80px; margin-top: -60px; } .loading, .loading * { transition: all 0s; } section.row { width: 90%; max-width: 960px; margin: 80px auto; } section.row aside { width: 200px; } @media all and (max-width: 500px) { .icon-help-circled { display: none; } } pre { width: 100%; code { background: none; } } comment-box.visual { margin-top: 60px; } // $browser-color: #ccc; // $browser-text: #333; // // .browser { // margin-top: 20px; // border: 2px solid $browser-color; // border-top: 26px solid $browser-color; // border-radius: 5px; // width: 100%; // height: 0; // position: relative; // display: block; // padding-bottom: 56%; // } // // .browser::before { // color: $browser-text; // content: attr(data-title); // display: block; // position: absolute; // top: -23px; // left: 5px; // font-size: 14px; // } // // .browser::after { // content: ''; // display: block; // position: absolute; // top: -19px; // right: 5px; // background: #f55; // border-radius: 50%; // width: 12px; // height: 12px; // } // // .browser iframe { // border: none; // position: absolute; // top: 0; // left: 0; // margin: 0; // width: 250%; // height: 250%; // transform: scale(0.4); // transform-origin: 0 0; // border-radius: 0 0 5px 5px; // }