+
+
+
+
+
+
\ No newline at end of file
diff --git a/components/01_Atoms/link/link.hbs b/components/01_Atoms/link/link.hbs
index 97f2e8f..21d3eb5 100644
--- a/components/01_Atoms/link/link.hbs
+++ b/components/01_Atoms/link/link.hbs
@@ -1,3 +1 @@
-- {{text}} -
\ No newline at end of file +{{text}} \ No newline at end of file diff --git a/components/01_Atoms/tag/_tag.scss b/components/01_Atoms/tag/_tag.scss index aa0c847..028c4fc 100644 --- a/components/01_Atoms/tag/_tag.scss +++ b/components/01_Atoms/tag/_tag.scss @@ -3,10 +3,17 @@ background-color: $-beige; border-radius: 2px; width: max-content; - @include RV-FlexRow__Container; + @include RV-Flex; height: min-content; gap: 3px; transition: background .3s; + + .LP-Link { + color: $-grey; + &:hover { + text-decoration: none; + } + } &__Remove { .RV-Iconized__Icon { diff --git a/components/02_Molecules/_molecules.scss b/components/02_Molecules/_molecules.scss index e85441e..f0c814a 100644 --- a/components/02_Molecules/_molecules.scss +++ b/components/02_Molecules/_molecules.scss @@ -1,6 +1,6 @@ -@import 'textSection/textSection'; -@import 'placeTeaser/placeTeaser'; -@import 'tagList/tagList'; -@import 'navigation/navigation'; -@import 'messageList/messageList'; -@import 'userInfo/userInfo'; +//@import 'textSection/textSection'; +//@import 'placeTeaser/placeTeaser'; +//@import 'tagList/tagList'; +//@import 'navigation/navigation'; +//@import 'messageList/messageList'; +//@import 'userInfo/userInfo'; diff --git a/components/02_Molecules/userInfo/_userInfo.scss b/components/02_Molecules/userInfo/_userInfo.scss index 8ff2407..012bb24 100644 --- a/components/02_Molecules/userInfo/_userInfo.scss +++ b/components/02_Molecules/userInfo/_userInfo.scss @@ -15,7 +15,7 @@ padding: 0; margin: 0; text-align: center; - padding: $-spacing-small / 2; + padding: $-spacing-small; font-size: 25px; } } @@ -26,7 +26,7 @@ font-size: 18px; } - padding: $-spacing-small / 2; + padding: $-spacing-small; .LP-UserInfo__Key { padding-right: $-spacing-medium; diff --git a/components/03_Organisms/_organisms.scss b/components/03_Organisms/_organisms.scss index d6ea334..ed1f23a 100644 --- a/components/03_Organisms/_organisms.scss +++ b/components/03_Organisms/_organisms.scss @@ -1,9 +1,9 @@ -@import 'header/header'; -@import 'placeGrid/placeGrid'; -@import 'placeList/placeList'; -@import 'linkList/linkList'; -@import 'footer/footer'; -@import 'form/form'; -@import 'imageGrid/imageGrid'; -@import 'osmMap/osmMap'; -@import 'userProfile/userProfile'; +//@import 'header/header'; +//@import 'placeGrid/placeGrid'; +//@import 'placeList/placeList'; +//@import 'linkList/linkList'; +//@import 'footer/footer'; +//@import 'form/form'; +//@import 'imageGrid/imageGrid'; +//@import 'osmMap/osmMap'; +//@import 'userProfile/userProfile'; diff --git a/components/03_Organisms/linkList/_linkList.scss b/components/03_Organisms/linkList/_linkList.scss index be93cd2..ed73717 100644 --- a/components/03_Organisms/linkList/_linkList.scss +++ b/components/03_Organisms/linkList/_linkList.scss @@ -1,7 +1,5 @@ .LP-LinkList{ - @include RV-FlexGrid(300px, 3em); - @include RV-ElementList; - @include RV-Spacing__Inner--small; + @include RV-Grid; align-items: center; .LP-LinkList__Item{ @@ -11,7 +9,7 @@ transition: background .3s, color .5s; @include RV-Alignment--verticalCenter; - @include RV-FlexRow__Container; + @include RV-Flex; .LP-LinkList__ItemHover { opacity: 0.5; diff --git a/components/04_Templates/_templates.scss b/components/04_Templates/_templates.scss index e6e3f43..1a3a1c1 100644 --- a/components/04_Templates/_templates.scss +++ b/components/04_Templates/_templates.scss @@ -1,3 +1,3 @@ -@import 'home/home'; -@import 'placeDetail/placeDetail'; -@import 'codex/codex'; +//@import 'home/home'; +//@import 'placeDetail/placeDetail'; +//@import 'codex/codex'; diff --git a/components/05_Pages/_pages.scss b/components/05_Pages/_pages.scss index 5b26260..caf3ccc 100644 --- a/components/05_Pages/_pages.scss +++ b/components/05_Pages/_pages.scss @@ -1 +1 @@ -@import 'place/place'; +//@import 'place/place'; diff --git a/components/main.scss b/components/main.scss index 4a994f9..54ddd26 100644 --- a/components/main.scss +++ b/components/main.scss @@ -1,4 +1,4 @@ -@import './rcss.bundled.scss'; +@import 'rcss.bundled'; // Include primary fonts in regular, italic and bold each. @font-face { @@ -197,4 +197,4 @@ body { @import '04_Templates/templates'; @import '05_Pages/pages'; -@import './tagify'; +//@import './tagify'; diff --git a/components/rcss.bundled.scss b/components/rcss.bundled.scss index f76fc20..dee2fbf 100644 --- a/components/rcss.bundled.scss +++ b/components/rcss.bundled.scss @@ -4,577 +4,1088 @@ $-spacing-small: 10px; $-spacing-medium: 25px; $-spacing-large: 35px; -.pink { - background-color: pink; +// + +.RV-Dummy { + overflow: hidden; + &--orange { + background-color: #F4A460 !important; + } + + &--blue { + background-color: #6495ED !important; + } + + &--green { + background-color: #90EE90 !important; + } + + &--red { + background-color: #ce6d6d !important; + } + + &--yellow{ + background-color: #eae144 !important; + } + + background-color: #F4A460; + + &:nth-child(2n){ + background-color: #6495ED; + } + + &:nth-child(3n){ + background-color: #90EE90; + } + + &__Landscape { + min-width: 200px; + width: 100%; + min-height: 130px; + } + + &__Portrait{ + min-width: 130px; + width: 100%; + min-height: 200px; + } + + &__Square { + min-width: 300px; + width: 100%; + min-height: 300px; + + &--large { + height: 500px; + width: 500px; + } + + &--small{ + height: 100px; + width: 100px; + } + } + + &--square { + height: 350px; + width: 350px; + } + + &--portrait { + height: 350px; + width: 150px; + } + + &--landscape { + width: 350px; + height: 150px; + } + + &--red { + background-color: #d8583e; + } } -@mixin RV-Reset { - margin: 0; - padding: 0; - top: 0; - bottom: 0; - left: 0; - right: 0; - border: none; +/** + * Mixins to maintain aspect ratio of an element. + */ + +@mixin RV-AspectRatio--XtoY($aspectX: 1, $aspectY: 1) { + --aspectX: #{$aspectX}; + --aspectY: #{$aspectY}; + + padding-top: calc(100% * calc(var(--aspectY) / var(--aspectX))); +} + +@mixin RV-AspectRatio--1to2 { + @include RV-AspectRatio--XtoY(1, 2); +} + +@mixin RV-AspectRatio--2to1 { + @include RV-AspectRatio--XtoY(2, 1); +} + +@mixin RV-AspectRatio--3to2 { + @include RV-AspectRatio--XtoY(3, 2); +} + +@mixin RV-AspectRatio--4to3 { + @include RV-AspectRatio--XtoY(4, 3); +} + +@mixin RV-AspectRatio--16to9 { + @include RV-AspectRatio--XtoY(16, 9); +} + +@mixin RV-AspectRatio { + position: relative; + overflow: hidden; + height: unset; + width: unset; + + * { + object-fit: cover; + position: absolute; + top: 0; + left: 0; + bottom: 0; + right: 0; + } +} + +.RV-AspectRatio { + @include RV-AspectRatio; + + &--1to2 { + @include RV-AspectRatio--1to2; + } + + &--2to1 { + @include RV-AspectRatio--2to1; + } + + &--3to2 { + @include RV-AspectRatio--3to2; + } + + &--4to3 { + @include RV-AspectRatio--4to3; + } + + &--16to9 { + @include RV-AspectRatio--16to9; + } + +} + + +/** + * This mixins helps you positioning objects (i.e. images, videos) to a 'focal point'. + * A focal point is a manual choosen point in an object that will be in the center of the cropped object. + * If the object is not cropped, the focal point does not apply. Best used with RV-AspectRatio. + * The focal point is given in percentages relative to the objects size. + + * To set the focal point either use one the the predefined classes or set them using inline CSS: + * class="RV-FocalPoint" style="--focalX: 44%; --focalY: 16.66%" + * + */ + +@mixin RV-FocalPoint--upperHalf { + --focalY: 25%; +} + +@mixin RV-FocalPoint--lowerHalf { + --focalY: 75%; +} + +@mixin RV-FocalPoint--leftHalf { + --focalX: 25%; +} + +@mixin RV-FocalPoint--rightHalf { + --focalX: 75%; +} + +@mixin RV-FocalPoint($focalX: 50%, $focalY: 50%) { + --focalX: #{$focalX}; + --focalY: #{$focalY}; + + height: 100%; + width: 100%; + display: block; + object-fit: cover; + object-position: var(--focalX) var(--focalY); +} + +.RV-FocalPoint { + @include RV-FocalPoint; + + &--upperHalf { + @include RV-FocalPoint--upperHalf; + } + + &--lowerHalf { + @include RV-FocalPoint--lowerHalf; + } + + &--leftHalf { + @include RV-FocalPoint--leftHalf; + } + + &--rightHalf { + @include RV-FocalPoint--rightHalf; + } +} + + + + +@mixin RV-Rotation--degree($degree) { + --rotationDegree: #{$degree}; +} + +@mixin RV-Rotation--left { + @include RV-Rotation--degree(-90deg); +} + +@mixin RV-Rotation--right { + @include RV-Rotation--degree(90deg); +} + +@mixin RV-Rotation--upsideDown { + @include RV-Rotation--degree(180deg); +} + +@mixin RV-Rotation { + --rotationDegree: 0deg; + transform: rotate(var(--rotationDegree)); +} + +.RV-Rotation { + @include RV-Rotation; + + &--left { + @include RV-Rotation--left; + } + + &--right { + @include RV-Rotation--right; + } + + &--upsideDown { + @include RV-Rotation--upsideDown; + } +} +/** + * This mixins lets to shape elements to squares or circles. + * Note: Even if the class RV-Shape itself is not nessecary (at this point) + * you still should use it to maintain compatiblity: + * CSS: class="RV-Shape RV-Shape--square" + * Stylues: + * RV-Shape() + * RV-Shape--square() + * You may want to combine this mixin with RV-FocalPoint. + */ +@mixin RV-Shape--square{ + width: 100%; + position: relative; + + &:after { + padding-bottom: 100%; + content: ''; + display: block; + } + + * { + position: absolute; + width: 100%; + height: 100%; + } +} + +@mixin RV-Shape--circle { + @include RV-Shape--square; + + &, * { + clip-path: circle() + } +} + +.RV-Shape{ + &--square { + @include RV-Shape--square; + } + + &--circle { + @include RV-Shape--circle; + } } @mixin RV-Alignment--top { - display: grid; + display: flex; align-content: start; } @mixin RV-Alignment--bottom { - display: grid; + display: flex; align-content: end; } @mixin RV-Alignment--left { - display: grid; + display: flex; justify-content: start; } @mixin RV-Alignment--right { - display: grid; + display: flex; justify-content: end; } @mixin RV-Alignment--horizontalCenter { - display: grid; - justify-content: center; + display: flex; + justify-content:0 center; } @mixin RV-Alignment--verticalCenter { - display: grid; + display: flex; align-items: center; } @mixin RV-Alignment--center { - @include RV-Alignment--horizontalCenter; - @include RV-Alignment--verticalCenter; + display: flex; + align-items: center; + justify-content: center; } -@mixin RV-Alignment__Container { - display: grid; +.RV-Alignment { &--top { @include RV-Alignment--top; } - + &--bottom { @include RV-Alignment--bottom; } - + &--left { @include RV-Alignment--left; } - + &--right { @include RV-Alignment--right; } - + &--horizontalCenter { @include RV-Alignment--horizontalCenter; } - + &--verticalCenter { @include RV-Alignment--verticalCenter; } - + &--center { @include RV-Alignment--center; } } - -@mixin RV-Alignment { - &__Container { - @include RV-Alignment__Container; - } -} - -.RV-Alignment { - @include RV-Alignment; -} - - -@mixin RV-FlexRow__Container--column { - display: flex; - flex-direction: column; -} - -@mixin RV-FlexRow__Container--multiRow { - flex-wrap: wrap; -} - -@mixin RV-FlexRow__Container { - display: flex; - flex-direction: row; - height: 100%; - - &--multiRow { - @include RV-FlexRow__Container--multiRow; - } - - &--column { - @include RV-FlexRow__Container--column; - } -} - -@mixin RV-FlexRow__Item--normal { - flex-grow: 3; - flex-shrink: 3; -} - -@mixin RV-FlexRow__Item--narrower { - flex-grow: 1; - flex-shrink: 5; -} - -@mixin RV-FlexRow__Item--narrow { - flex-grow: 2; - flex-shrink: 4; -} - -@mixin RV-FlexRow__Item--wide { - flex-grow: 4; - flex-shrink: 2; -} -@mixin RV-FlexRow__Item--wider { - flex-grow: 5; - flex-shrink: 1; -} -@mixin RV-FlexRow__Item--fixedSize($-width: 100px) { - flex-grow: 0; - flex-shrink: 0; - width: min-content; - flex-basis: $-width; -} - -@mixin RV-FlexRow__Item { - @include RV-Alignment; - - min-width: min-content; - width: 100%; - - &,&--normal { - @include RV-FlexRow__Item--normal; - } - - &--narrower { - @include RV-FlexRow__Item--narrower; - } - - &--narrow { - @include RV-FlexRow__Item--narrow; - } - - &--wide { - @include RV-FlexRow__Item--wide; - } - - &--wider { - @include RV-FlexRow__Item--wider; - } - - &--fixedSize { - @include RV-FlexRow__Item--fixedSize; - } -} - -@mixin RV-FlexRow--multiRow { - &__Container { - @include RV-FlexRow__Container--multiRow; - } -} - -@mixin RV-FlexRow { - &__Container { - @include RV-FlexRow__Container; - } - - &__Item { - @include RV-FlexRow__Item; - } -} - -.RV-FlexRow{ - @include RV-FlexRow; -} -@mixin RV-FlexGrid__Container($-item_width: 300px, $-item_height: 300px) { - display: grid; - grid-template-columns: repeat(auto-fill, minmax($-item_width, 1fr)); - grid-template-rows: repeat(auto-fill, minmax($-item_height, 1fr)); - grid-auto-rows: minmax($-item_height, 1fr); -} - -@mixin RV-FlexGrid($-item_width: 300px, $-item_height: 300px) { - &__Container { - @include RV-FlexGrid__Container($-item_width, $-item_height); - } - - &__Item { - @include RV-Alignment; - } -} - -.RV-FlexGrid{ - @include RV-FlexGrid; -} - -@mixin RV-ContentCrop--bottom { - img { - object-position: botom; - } -} - -@mixin RV-ContentCrop--top { - img { - object-position: top; - } -} - -@mixin RV-ContentCrop--right { - img { - object-position: right; - } -} - -@mixin RV-ContentCrop--left { - img { - object-position: left; - } -} - -@mixin RV-ContentCrop--center { - img { - object-position: center; - } -} - -@mixin RV-ContentCrop{ - &,* { - overflow: hidden; - word-break: break-all; - } - - img { - width: 100%; - height: 100%; - object-fit: cover; - } - - &--left { - @include RV-ContentCrop--left; - } - - &--center { - @include RV-ContentCrop--center; - } - - &--top { - @include RV-ContentCrop--top; - } - - &--bottom { - @include RV-ContentCrop--bottom; - } - - &--center { - @include RV-ContentCrop--center; - } -} - -.RV-ContentCrop__Container { - @include RV-ContentCrop; -} -@mixin RV-Fan--horizontal($-base_height, $-base_width, $-suffix: '') { +html { + --spacing-factor: 1.5; - &__Container#{$-suffix} { - flex-direction: row; - } - - &__Container#{$-suffix} &__Surface { - min-width: $-base_width; - height: $-base_height; - } -} - -@mixin RV-Fan--vertical($-base_height, $-base_width, $-suffix: '') { - &__Container#{$-suffix} { - flex-direction: column; - width:max-content; - } - - &__Container#{$-suffix} &__Surface { - width: $-base_width; - min-height: $-base_height; - } -} - -@mixin RV-Fan--auto($-base_height, $-base_width, $-suffix: '') { - - &__Container#{$-suffix} { - flex-flow: row wrap; - } - - &__Container#{$-suffix} &__Surface { - width: calc(100% - #{$-base_width}); - min-width: $-base-width; - height: $-base_height; - } -} - -@mixin RV-Fan--fullWidth($-base_height, $-base_width, $-suffix: '') { - &__Container#{$-suffix} &__Base, &__Container#{$-suffix} &__Surface { - flex-grow: 1; - } -} - -@mixin RV-Fan ($-base_height, $-base_width) { - @include RV-Fan--vertical($-base_height, $-base_width, '--vertical'); - @include RV-Fan--horizontal($-base_height, $-base_width, '--horizontal'); - @include RV-Fan--auto($-base_height, $-base_width, '--auto'); - @include RV-Fan--fullWidth($-base_height, $-base_width, '--fullWidth'); - - &__Container { - display: flex; - } - - &__Base { - height: $-base_height; - width: $-base_width; - flex: 0 0 auto; - } - - &__Surface { - @include RV-ContentCrop; - } -} - -.RV-Fan { - @include RV-Fan(280px, 320px); -} -@mixin RV-FullWidthContent__Container { - width: 100%; -} - -@mixin RV-FullWidthContent__Item { - width: 100%; - @include RV-ContentCrop; -} - -@mixin RV-FullWidthContent { - &__Container { - @include RV-FullWidthContent__Container; - } - - &__Item { - @include RV-FullWidthContent__Item; - } -} - -.RV-FullWidthContent { - @include RV-FullWidthContent; -} -@mixin RV-BoxShadow--simple($-color) { - box-shadow: 0 0 10px $-color; -} - -@mixin RV-BoxShadow($-color) { - - position:relative; - float:left; - - &:before, &:after { - content:""; - position:absolute; - z-index:-2; - } - - &--simple { - @include RV-BoxShadow--simple($-color); - } - - &--raised { - &:after { - box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; - } - } - - &--liftedCorners { - - &:before, &:after { - bottom:15px; - left:10px; - width:50%; - height:20%; - max-width:300px; - box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); - transform:rotate(-3deg); - } - - &:after{ - right:10px; - left:auto; - transform:rotate(3deg); - } - } -} - -.RV-BoxShadow { - @include RV-BoxShadow(#6b5690); -} -@mixin RV-ElementList { - &__Container { - list-style-type: none; - @include RV-Reset; - } - - &__Item { - @include RV-Reset; - } -} - -.RV-ElementList { - @include RV-ElementList; -} -@mixin RV-Spacing__Outer--small { - margin: $-spacing-small; -} - -@mixin RV-Spacing__Outer--medium { - margin: $-spacing-medium; -} - -@mixin RV-Spacing__Outer--large { - margin: $-spacing-large; -} - - -@mixin RV-Spacing__Inner--small($-container-suffix: '__Container') { - padding: $-spacing-small; - &#{$-container-suffix} { - gap: $-spacing-small; - } -} - -@mixin RV-Spacing__Inner--medium($-container-suffix: '__Container') { - padding: $-spacing-medium; - &#{$-container-suffix} { - gap: $-spacing-medium; - } -} - -@mixin RV-Spacing__Inner--large($-container-suffix: '__Container') { - padding: $-spacing-large; - &#{$-container-suffix} { - gap: $-spacing-large; - } -} - -@mixin RV-Spacing { - &__Outer{ - &--small { - @include RV-Spacing__Outer--small; - } - - &--medium { - @include RV-Spacing__Outer--medium; - } - - &--large { - @include RV-Spacing__Outer--large; - } - } - - &__Inner{ - &--small { - @include RV-Spacing__Inner--small(''); - } - - &--medium { - @include RV-Spacing__Inner--medium(''); - } - - &--large { - @include RV-Spacing__Inner--large(''); - } - } + --spacing-none: 0; + + --spacing-small: calc(var(--spacing-regular) / var(--spacing-factor)); + --spacing-regular: 1em; + --spacing-medium: calc(var(--spacing-regular) * var(--spacing-factor)); + --spacing-large: calc(var(--spacing-regular) * (var(--spacing-factor) * var(--spacing-factor))); + --spacing-extra-large: calc(var(--spacing-regular) * (var(--spacing-factor) * var(--spacing-factor) * var(--spacing-factor))); + + --spacing: var(--spacing-regular); } .RV-Spacing { - @include RV-Spacing; + &--none { + --spacing: var(--spacing-none); + } + + &--small { + --spacing: var(--spacing-small); + } + + &--regular { + --spacing: var(--spacing-regular); + } + + &--medium { + --spacing: var(--spacing-medium); + } + + &--large { + --spacing: var(--spacing-large); + } + + &--extra-large { + --spacing: var(--spacing-extra-large); + } } -.RV-Iconized { - &__Container { +/* + * Classes for easy flexrow usage + */ + +/* + * Orientation + */ + +@mixin RV-Flex--horizontal { + flex-direction: row; +} + +@mixin RV-Flex--vertical { + flex-direction: column; +} + +/* + * Typical Flexbox behavior, Row is horizontal, but item are wraped individualy + */ +@mixin RV-Flex--wrap { + flex-direction: row; + flex-wrap: wrap; +} + +/* + * Varios relative width of items to each other + */ + +@mixin RV-Flex__Item--narrower { + flex-grow: 2; + flex-shrink: 10; +} + +@mixin RV-Flex__Item--narrow { + flex-grow: 4; + flex-shrink: 8; +} + +@mixin RV-Flex__Item--wide { + flex-grow: 8; + flex-shrink: 4; +} + +@mixin RV-Flex__Item--wider { + flex-grow: 10; + flex-shrink: 2; +} + +/* + * Item has always the given width + */ +@mixin RV-Flex__Item--fixedSize { + flex-basis: var(--fixedSize); + flex-grow: 0; + flex-shrink: 0; +} + +/* + * Item width relativ to the container + */ +@mixin RV-Flex__Item--half { + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 50%; +} + +@mixin RV-Flex__Item--third { + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; + flex-basis: calc(100%/3); +} + +@mixin RV-Flex__Item--quarter { + overflow: hidden; + flex-grow: 0; + flex-shrink: 0; + flex-basis: 25%; +} + +@mixin RV-Flex__Item--content { + flex-grow: 0; + flex-shrink: 0; + flex-basis: max-content; +} + +/* ########## + * Item class + * ########## +*/ + +@mixin RV-Flex__Item { + flex-grow: 5; + flex-shrink: 5; +} + +@mixin RV-Flex { + display: flex; + gap: var(--gap); +} + +/* ########## + * Block + ########### */ + +.RV-Flex { + $block: &; + --gap: 0; + @include RV-Flex; + + &__Item { + --fixedSize: 100px; + @include RV-Flex__Item; + + &--narrower { + @include RV-Flex__Item--narrower; + } + + &--narrow { + @include RV-Flex__Item--narrow; + } + + &--wide { + @include RV-Flex__Item--wide; + } + + &--wider { + @include RV-Flex__Item--wider; + } + + &--half { + @include RV-Flex__Item--half; + } + + &--third { + @include RV-Flex__Item--third; + } + + &--quarter { + @include RV-Flex__Item--quarter; + } + + &--fixedSize { + @include RV-Flex__Item--fixedSize; + } + + &--content { + @include RV-Flex__Item--content; + } + } + +} + +/* + * #### + * Item + * #### + */ +@mixin RV-BreakPoint__Item--outside { + flex-shrink: 999; +} + +@mixin RV-BreakPoint__Item--inside { + flex-grow: 0; +} + +@mixin RV-BreakPoint__Item { + @include RV-Flex__Item; + flex-basis: calc(var(--breakPoint) * 999 - 100% * 999); + overflow: hidden; + --outer-spacing: 0; + --inner-spacing: 0; +} + +/* + * #### + * Wrap + * #### + */ + +@mixin RV-BreakPoint--wrap__Item--outside { + margin-bottom: -100vh; +} + +/* + * ########## + * Horizontal + * ########## + */ + +@mixin RV-BreakPoint--horizontal__Item--outside{ + margin-bottom: unset; + height: unset; +} + +@mixin RV-BreakPoint--horizontal { + flex-wrap: nowrap; + flex-direction: row; +} + +/* + * ######## + * Vertical + * ######## + */ + +@mixin RV-BreakPoint--vertical__Item--outside { + margin-bottom: unset; + height: unset; +} + +@mixin RV-BreakPoint--vertical { + flex-direction: column; + flex-wrap: nowrap; + height: 100vh; +} + +/* + * ##### + * Block + * ##### + */ + +@mixin RV-BreakPoint{ + @include RV-Flex; + @include RV-Flex--wrap; + + overflow-y: hidden; + + //RV-Reset() + gap: 0px; +} +.RV-BreakPoint { + $block: &; + --breakPoint: 500px; + + @include RV-BreakPoint; + + &__Item { + @include RV-BreakPoint__Item; + + &--outside { + @include RV-BreakPoint__Item--outside; + } + + &--inside { + @include RV-BreakPoint__Item--inside; + } + + } + + &--wrap &__Item{ + &--outside { + @include RV-BreakPoint--wrap__Item--outside; + } + } + + &--horizontal { + @include RV-BreakPoint--horizontal; + + & #{$block}__Item { + &--outside { + @include RV-BreakPoint--wrap__Item--outside; + } + } + } + + &--vertical { + @include RV-BreakPoint--vertical; + + & #{$block}__Item { + &--outside { + @include RV-BreakPoint--vertical__Item--outside; + } + } + + } +} + +@mixin RV-Grid--autoWidth { + grid-template-columns: repeat(auto-fit, minmax(var(--itemMinWidth), 1fr)); + grid-template-rows: repeat(auto-fill, minmax(var(--itemHeight), 1fr)); + grid-auto-rows: minmax(var(--itemHeight), 1fr); +} + +@mixin RV-Grid--fixedSize{ + grid-template-rows: repeat(auto-fill, minmax(var(--itemHeight), 1fr)); + grid-auto-rows: minmax(var(--itemHeight), 1fr); + grid-template-columns: repeat(auto-fill, var(--itemWidth)); + justify-content: space-between; +} + +@mixin RV-Grid--masonry__Item { + width: 100%; + margin-bottom: var(--gap); + + &:last-child { + margin-bottom: 0; + } +} + +@mixin RV-Grid--masonry { + display: block; + column-count: auto; + column-width: var(--itemWidth); +} + +@mixin RV-Grid__Item{ + height: calc(var(--itemHeight) - calc(2*var(--inner-spacing))); + & > * { + height: 100%; + width: 100%; + } +} + +@mixin RV-Grid{ + display: grid; + grid-template-columns: repeat(auto-fill, var(--itemWidth)); + gap: var(--gap); +} + +.RV-Grid { + $block: &; + --itemHeight: 300px; + --itemWidth: 300px; + --itemMinWidth: 300px; + --gap: 15px; + + @include RV-Grid; + &__Item { + @include RV-Grid__Item; + } + + &--autoWidth { + @include RV-Grid--autoWidth; + } + + &--masonry { + @include RV-Grid--masonry; + & #{$block}__Item { + @include RV-Grid--masonry__Item; + } + } + + &--fixedSize { + @include RV-Grid--fixedSize; + } +} +/* ############# + * Element Mixins + * ############# */ + +@mixin RV-Turner__Base{ + height: var(--base-height); + flex-basis: var(--base-width); + flex-shrink: 0; + flex-grow: 1; +} + +@mixin RV-Turner__Content { + flex-grow: 9999; + flex-basis: var(--base-width); + min-width: var(--base-width); + max-height: var(--base-height); + overflow: hidden; +} + +/* ############ + * Block Mixin + * ############ */ +@mixin RV-Turner($base-height, $base-width) { + --base-height: #{$base-height}; + --base-width: #{$base-width}; + display: flex; + max-width: calc(3 * var(--base-width)); + min-width: var(--base-width); +} + +@mixin RV-Turner--horizontal__Base { + width: var(--base-width); +} + +@mixin RV-Turner--horizontal { + flex-wrap: nowrap; + flex-direction: row; + overflow: hidden; + height: var(--base-height); +} + +@mixin RV-Turner--vertical { + flex-wrap: nowrap; + flex-direction: column; +} + +@mixin RV-Turner--auto { + flex-wrap: wrap; +} + +.RV-Turner { + $block: &; + @include RV-Turner(300px, 300px); + + &--horizontal { + @include RV-Turner--horizontal; + + #{$block}__Base { + @include RV-Turner--horizontal__Base; + } + } + + &--vertical { + @include RV-Turner--vertical; + } + + &--auto { + @include RV-Turner--auto; + } + + &__Base { + @include RV-Turner__Base; + } + + &__Content { + @include RV-Turner__Content; + } +} + +.RV-Label { + display: contents; +} +@mixin RV-Icon { + @include RV-Shape--square; + background-repeat: no-repeat; + display: block; + background-size: contain; + color: transparent; + height: 100%; + + * { + width: 0; + } + + img, .RV-Image { + height: 100%; + width: unset; + } +} + +.RV-Icon { + @include RV-Icon; +} +.RV-Field { + display: flex; + flex-direction: row; + justify-content: space-between; + + &--vertical { + flex-direction: column; + } + + &--horizontal { + flex-direction: row; + } +} +@mixin RV-Button { + @include RV-Flex; + @include RV-Flex--horizontal; + align-items: center; + height: var(--height); +} + +@mixin RV-Button__Icon { + height: 1.5em; + img, .RV-Image { + position: unset; + } +} + +.RV-Button { + @include RV-Button; + white-space: nowrap; + overflow: hidden; + --height: 2rem; + + &__Icon { + @include RV-Button__Icon; + } +} +.RV-Link { + $block: &; + text-align: center; + + width: max-content; + &__Anchor { + text-decoration: none; + } + + &--button { position: relative; - - &--small { - top: -.25em; + background-color: gray; + padding: 10px; + #{$block}__Anchor::after { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } + } +} +@mixin RV-Iconized__Text { + order: 10; +} - &--medium { - top: -.5em; - } +@mixin RV-Iconized__Icon--small { + --icon-size: var(--spacing-small); +} - &--large { - top: -1.03073em; - } +@mixin RV-Iconized__Icon--regular { + --icon-size: var(--spacing-regular); +} - &--huge { - top: -2.05em; - } +@mixin RV-Iconized__Icon--medium { + --icon-size: var(--spacing-medium); +} + +@mixin RV-Iconized__Icon--large { + --icon-size: var(--spacing-large); +} + +@mixin RV-Iconized__Icon--extraLarge { + --icon-size: var(--spacing-extra-large); +} + +@mixin RV-Iconized__Icon--left { + * { + order: 5; + } +} + +@mixin RV-Iconized__Icon--right { + * { + order: 15; + } +} + +@mixin RV-Iconized__Icon { + display: contents; + * { + height: 100%; + height: var(--icon-size); + } +} + +@mixin RV-Iconized { + --icon-size: var(--spacing-regular); + + display: inline-flex; + position: relative; + align-items: center; + gap: calc(var(--icon-size) / 2); +} + +.RV-Iconized { + @include RV-Iconized; + + &__Text { + @include RV-Iconized__Text; } &__Icon { - @include RV-Reset; + @include RV-Iconized__Icon; + + &--small { + @include RV-Iconized__Icon--small; + } + + &--regular { + @include RV-Iconized__Icon--regular; + } + + &--medium { + @include RV-Iconized__Icon--medium; + } + + &--large { + @include RV-Iconized__Icon--large; + } + + &--extraLarge { + @include RV-Iconized__Icon--extraLarge; + } + + &--right { + @include RV-Iconized__Icon--right; + } + + &--left { + @include RV-Iconized__Icon--left; + } } +} +// +// +@mixin RV-LinkList--horizontal { + --itemHeight: var(--linkHeight); + --itemMinWidth: var(--linkWidth); - &__Container--extraSmall &__Icon{ - width: 1em; - height: 1em; - position: relative; - top: .125em; + .RV-LinkList__List { + @include RV-Grid; + @include RV-Grid--autoWidth; + + gap: var(--spacing); + } +} + +@mixin RV-LinkList__List { + list-style-type: none; + padding: 0; + margin: 0; + + display: flex; + flex-direction: column; + gap: var(--spacing); +} + +@mixin RV-LinkList__Item { + .RV-Link { + padding: var(--linkHeight); + box-sizing: border-box; + width: 100%; } +} - &__Container--small &__Icon{ - width: 1.5em; - height: 1.5em; - position: relative; - top: .45em; +@mixin RV-LinkList { +} + +.RV-LinkList { + --linkWidth: 12em; + --linkHeight: 1em; + + &__List { + @include RV-LinkList__List; } - &__Container--medium &__Icon{ - width: 2em; - height: 2em; - position: relative; - top: .625em; + &__Item { + @include RV-LinkList__Item; } - &__Container--large &__Icon{ - width: 3em; - height: 3em; - position: relative; - top: 1.15573em; - } - &__Container--huge &__Icon{ - width: 5em; - height: 5em; - position: relative; - top: 2.175em; - } -} - -@mixin RV-ImageGrid { - @include RV-ElementList; - @include RV-FlexGrid; - - &__Container { - @include RV-Spacing__Inner--medium; - } - - &__Item { - @include RV-ContentCrop; - @include RV-ContentCrop--center; + + &--horizontal { + @include RV-LinkList--horizontal; } } +.RV-Teaser { + $block: &; + @include RV-Turner(300px, 300px); + + &__Image { + @include RV-Turner__Base; + } + + &__Content { + @include RV-Turner__Content; + @include RV-Flex; + @include RV-Flex--vertical; + } + + &--auto { + @include RV-Turner--auto; + } + + &--horizontal { + @include RV-Turner--horizontal; + + #{$block}__Image { + @include RV-Turner--horizontal__Base; + } + } -.RV-ImageGrid { - @include RV-ImageGrid; -} + &--vertical { + @include RV-Turner--vertical; + } +} \ No newline at end of file diff --git a/package.json b/package.json index a300a57..946028b 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "sass-loader": "^10.0.5" }, "scripts": { - "sass": "node-sass -w components/main.scss -o public/ --recursive", + "sass": "sass components/main.scss public/main.css --watch", "styleguide": "fractal start --sync", "suite": "npm run sass & npm run styleguide" }