diff options
Diffstat (limited to 'app/assets/stylesheets/layout')
| -rw-r--r-- | app/assets/stylesheets/layout/_container.scss | 42 | ||||
| -rw-r--r-- | app/assets/stylesheets/layout/_document.scss | 48 | ||||
| -rw-r--r-- | app/assets/stylesheets/layout/_grid.scss | 24 | ||||
| -rw-r--r-- | app/assets/stylesheets/layout/_scroller.scss | 16 | ||||
| -rw-r--r-- | app/assets/stylesheets/layout/_section.scss | 8 | ||||
| -rw-r--r-- | app/assets/stylesheets/layout/_sectioning.scss | 70 |
6 files changed, 208 insertions, 0 deletions
diff --git a/app/assets/stylesheets/layout/_container.scss b/app/assets/stylesheets/layout/_container.scss new file mode 100644 index 0000000..6a20bea --- /dev/null +++ b/app/assets/stylesheets/layout/_container.scss @@ -0,0 +1,42 @@ +@if ($enable-class-container and $enable-classes) { + /** + * Container + */ + + .container, + .container-fluid { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--spacing); + padding-left: var(--spacing); + } + + .container { + @if map-get($breakpoints, "sm") { + @media (min-width: map-get($breakpoints, "sm")) { + max-width: map-get($viewports, "sm"); + padding-right: 0; + padding-left: 0; + } + } + + @if map-get($breakpoints, "md") { + @media (min-width: map-get($breakpoints, "md")) { + max-width: map-get($viewports, "md"); + } + } + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + max-width: map-get($viewports, "lg"); + } + } + + @if map-get($breakpoints, "xl") { + @media (min-width: map-get($breakpoints, "xl")) { + max-width: map-get($viewports, "xl"); + } + } + } +} diff --git a/app/assets/stylesheets/layout/_document.scss b/app/assets/stylesheets/layout/_document.scss new file mode 100644 index 0000000..1607659 --- /dev/null +++ b/app/assets/stylesheets/layout/_document.scss @@ -0,0 +1,48 @@ +/** + * Document + * Content-box & Responsive typography + */ + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// 1. Add border box sizing in all browsers (opinionated) +// 2. Backgrounds do not repeat by default (opinionated) +*, +*::before, +*::after { + box-sizing: border-box; // 1 + background-repeat: no-repeat; // 2 +} + +// 1. Add text decoration inheritance in all browsers (opinionated) +// 2. Add vertical alignment inheritance in all browsers (opinionated) +::before, +::after { + text-decoration: inherit; // 1 + vertical-align: inherit; // 2 +} + +// 1. Use the default cursor in all browsers (opinionated) +// 2. Change the line height in all browsers (opinionated) +// 3. Breaks words to prevent overflow in all browsers (opinionated) +// 4. Use a 4-space tab width in all browsers (opinionated) +// 5. Remove the grey highlight on links in iOS (opinionated) +// 6. Prevent adjustments of font size after orientation changes in iOS +:where(:root) { + -webkit-tap-highlight-color: transparent; // 5 + -webkit-text-size-adjust: 100%; // 6 + text-size-adjust: 100%; // 6 + background-color: var(--background-color); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + line-height: var(--line-height); // 2 + font-family: var(--font-family); + text-rendering: optimizeLegibility; + overflow-wrap: break-word; // 3 + cursor: default; // 1 + tab-size: 4; // 4 +} diff --git a/app/assets/stylesheets/layout/_grid.scss b/app/assets/stylesheets/layout/_grid.scss new file mode 100644 index 0000000..572312b --- /dev/null +++ b/app/assets/stylesheets/layout/_grid.scss @@ -0,0 +1,24 @@ +@if ($enable-classes and $enable-grid) { + /** + * Grid + * Minimal grid system with auto-layout columns + */ + + .grid { + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); + display: grid; + grid-template-columns: 1fr; + margin: 0; + + @if map-get($breakpoints, "lg") { + @media (min-width: map-get($breakpoints, "lg")) { + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); + } + } + + & > * { + min-width: 0; // HACK for childs in overflow + } + } +} diff --git a/app/assets/stylesheets/layout/_scroller.scss b/app/assets/stylesheets/layout/_scroller.scss new file mode 100644 index 0000000..9b58ef7 --- /dev/null +++ b/app/assets/stylesheets/layout/_scroller.scss @@ -0,0 +1,16 @@ +/** + * Horizontal scroller (<figure>) + */ + +// Wrapper to make any content responsive across all viewports +figure { + display: block; + margin: 0; + padding: 0; + overflow-x: auto; + + figcaption { + padding: calc(var(--spacing) * 0.5) 0; + color: var(--muted-color); + } +} diff --git a/app/assets/stylesheets/layout/_section.scss b/app/assets/stylesheets/layout/_section.scss new file mode 100644 index 0000000..8bc6902 --- /dev/null +++ b/app/assets/stylesheets/layout/_section.scss @@ -0,0 +1,8 @@ +/** + * Section + * Responsive spacings for section + */ + +section { + margin-bottom: var(--block-spacing-vertical); +} diff --git a/app/assets/stylesheets/layout/_sectioning.scss b/app/assets/stylesheets/layout/_sectioning.scss new file mode 100644 index 0000000..00d73c5 --- /dev/null +++ b/app/assets/stylesheets/layout/_sectioning.scss @@ -0,0 +1,70 @@ +/** + * Sectioning + * Container and responsive spacings for header, main, footer + */ + +// Reboot based on : +// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css +// - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css +// –––––––––––––––––––– + +// Render the `main` element consistently in IE +main { + display: block; +} + +// Pico +// –––––––––––––––––––– + +// 1. Remove the margin in all browsers (opinionated) +#{$semantic-root-element} { + width: 100%; + margin: 0; // 1 + + > header, + > main, + > footer { + width: 100%; + margin-right: auto; + margin-left: auto; + + // Semantic container + @if $enable-semantic-container { + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); + + // Centered viewport + @if $enable-viewport { + @if map-get($breakpoints, "sm") and $enable-viewport { + @media (min-width: map-get($breakpoints, "sm")) { + max-width: map-get($viewports, "sm"); + padding-right: 0; + padding-left: 0; + } + } + + @if map-get($breakpoints, "md") and $enable-viewport { + @media (min-width: map-get($breakpoints, "md")) { + max-width: map-get($viewports, "md"); + } + } + + @if map-get($breakpoints, "lg") and $enable-viewport { + @media (min-width: map-get($breakpoints, "lg")) { + max-width: map-get($viewports, "lg"); + } + } + + @if map-get($breakpoints, "xl") and $enable-viewport { + @media (min-width: map-get($breakpoints, "xl")) { + max-width: map-get($viewports, "xl"); + } + } + } + } + + // Semantic container + @else { + padding: var(--block-spacing-vertical) 0; + } + } +} |