diff --git a/.eleventy.js b/.eleventy.js index 82450fa..c1859e3 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -46,9 +46,12 @@ module.exports = function(eleventyConfig) { return `
${content}
`; }); - eleventyConfig.addShortcode('rectangle', function(width) { + // `direction` can be `hor` or `ver` + eleventyConfig.addShortcode('rectangle', function(dir, size, width) { + const direction = dir || 'hor'; + const s = size || 'sm'; const w = width || randomInteger(1, 4) * 20; - return `
`; + return `
`; }); eleventyConfig.addShortcode('square', function() { return `
`; diff --git a/contents/_includes/patterns/fixed-at-side.njk b/contents/_includes/patterns/fixed-at-side.njk new file mode 100644 index 0000000..a3963bf --- /dev/null +++ b/contents/_includes/patterns/fixed-at-side.njk @@ -0,0 +1,4 @@ +
+
{% rectangle "ver", "md", 100 %}
+
{% rectangle "ver", "md", 100 %}
+
\ No newline at end of file diff --git a/contents/fixed-at-side.md b/contents/fixed-at-side.md new file mode 100644 index 0000000..8ddead2 --- /dev/null +++ b/contents/fixed-at-side.md @@ -0,0 +1,40 @@ +--- +layout: layouts/post.njk +title: Fixed at side +description: Fix an element at the middle of side with CSS +keywords: css fixed +--- + +## HTML + +```html + +
+ ... +
+ + +
+ ... +
+``` + +## CSS + +```css +.fixed-at-side { + position: fixed; + top: 50%; + transform: translate(0px, -50%); +} +.fixed-at-side--l { + left: 0; +} +.fixed-at-side--r { + right: 0; +} +``` + +{% demo %} +{% include "patterns/fixed-at-side.njk" %} +{% enddemo %} diff --git a/contents/index.njk b/contents/index.njk index 1ee4219..d331999 100644 --- a/contents/index.njk +++ b/contents/index.njk @@ -145,6 +145,12 @@ eleventyExcludeFromCollections: true
Fixed at corner
+
+ +
{% include "patterns/fixed-at-side.njk" %}
+
Fixed at side
+ +
diff --git a/pages/fixed-at-side/index.tsx b/pages/fixed-at-side/index.tsx deleted file mode 100644 index 4498ad8..0000000 --- a/pages/fixed-at-side/index.tsx +++ /dev/null @@ -1,264 +0,0 @@ -import * as React from 'react'; -import Head from 'next/head'; -import { Heading, Spacer } from '@1milligram/design'; - -import { RelatedPatterns } from '../../components/RelatedPatterns'; -import { Pattern } from '../../constants/Pattern'; -import { PatternLayout } from '../../layouts/PatternLayout'; -import BrowserFrame from '../../placeholders/BrowserFrame'; - -const Details: React.FC<{}> = () => { - return ( - - - - - - - - -
- ... -
-`} - css={` - .container { - right: 0; - position: fixed; - top: 50%; - transform: translate(0px, -50%); - } - `} - > -
-
-
- - - -
- Use cases - -
-
-

A Feedback button

-
- Feedback -
-
- -
-

Navgiate between full page sections

-
-
-
-
-
-
-
- -
-

Social sharing toolbar

-
-
- - - -
-
- - - -
-
- - - -
-
-
-
-
- - - - - ); -}; - -export default Details; diff --git a/patterns/fixed-at-side/Cover.tsx b/patterns/fixed-at-side/Cover.tsx deleted file mode 100644 index 6480892..0000000 --- a/patterns/fixed-at-side/Cover.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; - -import Frame from '../../placeholders/Frame'; - -const Cover: React.FC<{}> = () => { - return ( - -
-
-
- - ); -}; - -export default Cover; diff --git a/styles/index.scss b/styles/index.scss index 28be893..3bb78f7 100644 --- a/styles/index.scss +++ b/styles/index.scss @@ -33,6 +33,7 @@ @import './patterns/feature-comparison'; @import './patterns/feature-list'; @import './patterns/fixed-at-corner'; +@import './patterns/fixed-at-side'; // Placeholders @import './placeholders/circle'; diff --git a/styles/patterns/_fixed-at-side.scss b/styles/patterns/_fixed-at-side.scss new file mode 100644 index 0000000..df96171 --- /dev/null +++ b/styles/patterns/_fixed-at-side.scss @@ -0,0 +1,21 @@ +.fixed-at-side { + width: 100%; + height: 100%; + border: 1px solid rgba(0, 0, 0, .3); + border-radius: 0.25rem; + + position: relative; +} + +.fixed-at-side__side { + height: 40%; + position: absolute; + top: 50%; + transform: translate(0px, -50%); +} +.fixed-at-side__side--l { + left: 0; +} +.fixed-at-side__side--r { + right: 0; +} \ No newline at end of file diff --git a/styles/placeholders/_rectangle.scss b/styles/placeholders/_rectangle.scss index 2d0988f..8118a35 100644 --- a/styles/placeholders/_rectangle.scss +++ b/styles/placeholders/_rectangle.scss @@ -1,20 +1,56 @@ .rectangle { background: rgba(0, 0, 0, .3); border-radius: 0.25rem; - height: 0.5rem; } -.rectangle--20 { - width: 20%; +.rectangle--hor { + &.rectangle--20 { + width: 20%; + } + &.rectangle--40 { + width: 40%; + } + &.rectangle--60 { + width: 60%; + } + &.rectangle--80 { + width: 80%; + } + &.rectangle--100 { + width: 100%; + } + &.rectangle--sm { + height: 0.5rem; + } + &.rectangle--md { + height: 2rem; + } + &.rectangle--lg { + height: 4rem; + } } -.rectangle--40 { - width: 40%; -} -.rectangle--60 { - width: 60%; -} -.rectangle--80 { - width: 80%; -} -.rectangle--100 { - width: 100%; +.rectangle--ver { + &.rectangle--20 { + height: 20%; + } + &.rectangle--40 { + height: 40%; + } + &.rectangle--60 { + height: 60%; + } + &.rectangle--80 { + height: 80%; + } + &.rectangle--100 { + height: 100%; + } + &.rectangle--sm { + width: 0.5rem; + } + &.rectangle--md { + width: 2rem; + } + &.rectangle--lg { + width: 4rem; + } } \ No newline at end of file