diff options
Diffstat (limited to 'assets/css/layouts')
| -rw-r--r-- | assets/css/layouts/_card-grid.scss | 22 | ||||
| -rw-r--r-- | assets/css/layouts/_landing.scss | 54 | ||||
| -rw-r--r-- | assets/css/layouts/_project-grid.scss | 22 | ||||
| -rw-r--r-- | assets/css/layouts/_section.scss | 74 | 
4 files changed, 0 insertions, 172 deletions
| diff --git a/assets/css/layouts/_card-grid.scss b/assets/css/layouts/_card-grid.scss deleted file mode 100644 index c9d927a..0000000 --- a/assets/css/layouts/_card-grid.scss +++ /dev/null | |||
| @@ -1,22 +0,0 @@ | |||
| 1 | @include namespace('card-grid') { | ||
| 2 | @include store(( | ||
| 3 | --dims: ( | ||
| 4 | --col-width: 17em | ||
| 5 | ) | ||
| 6 | )); | ||
| 7 | |||
| 8 | @include layout(namespace()) { | ||
| 9 | display: grid; | ||
| 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
| 11 | gap: .6rem; | ||
| 12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | ||
| 13 | |||
| 14 | @include element('card') { | ||
| 15 | box-shadow: none; | ||
| 16 | } | ||
| 17 | |||
| 18 | @include media('<=sm') { | ||
| 19 | grid-template-columns: 1fr; | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
| diff --git a/assets/css/layouts/_landing.scss b/assets/css/layouts/_landing.scss deleted file mode 100644 index a81b105..0000000 --- a/assets/css/layouts/_landing.scss +++ /dev/null | |||
| @@ -1,54 +0,0 @@ | |||
| 1 | @include namespace('landing') { | ||
| 2 | @include store(( | ||
| 3 | --dims: ( | ||
| 4 | --banner-width: 30rem, | ||
| 5 | ), | ||
| 6 | --colors: ( | ||
| 7 | --banner-bg: prop(--colors --bg, $global: true) | ||
| 8 | ) | ||
| 9 | )); | ||
| 10 | |||
| 11 | @include layout(namespace()) { | ||
| 12 | display: flex; | ||
| 13 | flex-direction: row; | ||
| 14 | align-items: center; | ||
| 15 | margin-top: auto; | ||
| 16 | margin-bottom: auto; | ||
| 17 | |||
| 18 | @include element('banner') { | ||
| 19 | width: 70%; | ||
| 20 | max-width: prop(--dims --banner-width); | ||
| 21 | background-color: prop(--colors --banner-bg); | ||
| 22 | } | ||
| 23 | |||
| 24 | @include element('content') { | ||
| 25 | width: 100%; | ||
| 26 | } | ||
| 27 | |||
| 28 | @include iro-responsive-env(('md', 'lg')) { | ||
| 29 | padding-right: iro-responsive-set((0, 3rem)); | ||
| 30 | padding-left: iro-responsive-set((0, 6rem)); | ||
| 31 | } | ||
| 32 | |||
| 33 | @include media('<=md') { | ||
| 34 | display: block; | ||
| 35 | |||
| 36 | @include element('side') { | ||
| 37 | display: none; | ||
| 38 | |||
| 39 | @include sibling-element('side') { | ||
| 40 | display: block; | ||
| 41 | } | ||
| 42 | } | ||
| 43 | |||
| 44 | @include element('banner', 'content') { | ||
| 45 | width: auto; | ||
| 46 | padding: 0; | ||
| 47 | } | ||
| 48 | |||
| 49 | @include element('banner') { | ||
| 50 | max-width: none; | ||
| 51 | } | ||
| 52 | } | ||
| 53 | } | ||
| 54 | } | ||
| diff --git a/assets/css/layouts/_project-grid.scss b/assets/css/layouts/_project-grid.scss deleted file mode 100644 index 5ed983c..0000000 --- a/assets/css/layouts/_project-grid.scss +++ /dev/null | |||
| @@ -1,22 +0,0 @@ | |||
| 1 | @include namespace('project-grid') { | ||
| 2 | @include store(( | ||
| 3 | --dims: ( | ||
| 4 | --col-width: 20em | ||
| 5 | ) | ||
| 6 | )); | ||
| 7 | |||
| 8 | @include layout(namespace()) { | ||
| 9 | display: grid; | ||
| 10 | grid-template-columns: repeat(auto-fill, minmax(#{prop(--dims --col-width)}, 1fr)); | ||
| 11 | gap: 2rem; | ||
| 12 | filter: drop-shadow(#{prop(--dims --obj-shadow, $global: true)} #{prop(--colors --obj-shadow, $global: true)}); | ||
| 13 | |||
| 14 | @include element('project') { | ||
| 15 | box-shadow: none; | ||
| 16 | } | ||
| 17 | |||
| 18 | @include media('<=sm') { | ||
| 19 | grid-template-columns: 1fr; | ||
| 20 | } | ||
| 21 | } | ||
| 22 | } | ||
| diff --git a/assets/css/layouts/_section.scss b/assets/css/layouts/_section.scss deleted file mode 100644 index 80b8ca9..0000000 --- a/assets/css/layouts/_section.scss +++ /dev/null | |||
| @@ -1,74 +0,0 @@ | |||
| 1 | @include namespace('section') { | ||
| 2 | @include store(( | ||
| 3 | --colors: ( | ||
| 4 | --border: prop(--colors --obj-hi, $global: true), | ||
| 5 | --body-bg: transparent, | ||
| 6 | ) | ||
| 7 | )); | ||
| 8 | |||
| 9 | @include store(( | ||
| 10 | --colors: ( | ||
| 11 | --body-bg: prop(--colors --bg-hi, $global: true), | ||
| 12 | ) | ||
| 13 | ), 'light'); | ||
| 14 | |||
| 15 | @include layout(namespace()) { | ||
| 16 | position: relative; | ||
| 17 | |||
| 18 | @include modifier('flex') { | ||
| 19 | display: flex; | ||
| 20 | flex-direction: column; | ||
| 21 | align-items: stretch; | ||
| 22 | justify-content: flex-start; | ||
| 23 | } | ||
| 24 | |||
| 25 | @include modifier('fullscreen') { | ||
| 26 | box-sizing: border-box; | ||
| 27 | min-height: 100vh; | ||
| 28 | margin-bottom: calc(-1 * #{prop(--dims --outer, $global: true)}); | ||
| 29 | padding-bottom: prop(--dims --outer, $global: true); | ||
| 30 | } | ||
| 31 | |||
| 32 | @include modifier('body') { | ||
| 33 | background-color: prop(--colors --body-bg); | ||
| 34 | } | ||
| 35 | |||
| 36 | @include modifier('no-header') { | ||
| 37 | padding-top: prop(--dims --outer, $global: true); | ||
| 38 | } | ||
| 39 | |||
| 40 | @include element('header') { | ||
| 41 | display: flex; | ||
| 42 | flex-direction: row; | ||
| 43 | align-items: center; | ||
| 44 | height: prop(--dims --outer, $global: true); | ||
| 45 | font-size: 1 / 16 * 15em; | ||
| 46 | |||
| 47 | @include modifier('sticky') { | ||
| 48 | position: sticky; | ||
| 49 | z-index: 9000; | ||
| 50 | top: 0; | ||
| 51 | left: 0; | ||
| 52 | } | ||
| 53 | } | ||
| 54 | |||
| 55 | /*@include element('footer') { | ||
| 56 | position: absolute; | ||
| 57 | z-index: 10000; | ||
| 58 | right: 0; | ||
| 59 | bottom: 0; | ||
| 60 | height: prop(--dims --outer, $global: true); | ||
| 61 | font-size: 1 / 16 * 15em; | ||
| 62 | }*/ | ||
| 63 | |||
| 64 | @include element('header-separator') { | ||
| 65 | flex: 1 1 auto; | ||
| 66 | width: 100%; | ||
| 67 | height: 100%; | ||
| 68 | margin-top: -1px; | ||
| 69 | margin-right: prop(--container --dims --pad-x, $global: true); | ||
| 70 | margin-left: prop(--container --dims --pad-x, $global: true); | ||
| 71 | border-top: 1px solid prop(--colors --border); | ||
| 72 | } | ||
| 73 | } | ||
| 74 | } | ||
