diff --git a/source/_patterns/01-molecules/22-images/images.mustache b/source/_patterns/01-molecules/22-images/images.mustache index e2156b51d8ae9f790832788175b516c52a16dd75..4f7fcfa3c221446a35ca44e898b61937a20bea1a 100644 --- a/source/_patterns/01-molecules/22-images/images.mustache +++ b/source/_patterns/01-molecules/22-images/images.mustache @@ -1,5 +1,5 @@ -{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }} -{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }} -{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }} -{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }} -{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }} +{{> atoms-image(classes: "w-full mx-auto my-6 object-contain h-max lg:h-max lg:w-auto") }} +{{> atoms-image(classes: "float-left mr-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain") }} +{{> atoms-image(classes: "float-left mr-4 mb-6 mt-0 object-contain") }} +{{> atoms-image(classes: "float-right ml-4 mb-6 max-w-[400px] mt-0 sm:max-w-full object-contain") }} +{{> atoms-image(classes: "float-right ml-4 mb-6 mt-0 object-contain") }} diff --git a/source/icons/style.scss b/source/icons/style.scss new file mode 100644 index 0000000000000000000000000000000000000000..d50cbc5b6792b784967b69e36d9c07e6cf1bc997 --- /dev/null +++ b/source/icons/style.scss @@ -0,0 +1,630 @@ +@import "variables"; + +@font-face { + font-family: '#{$icomoon-font-family}'; + src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bna028'); + src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?bna028#iefix') format('embedded-opentype'), + url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?bna028') format('truetype'), + url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?bna028') format('woff'), + url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?bna028##{$icomoon-font-family}') format('svg'); + font-weight: normal; + font-style: normal; + font-display: block; +} + +[class^="ico--"], [class*=" ico--"] { + /* use !important to prevent issues with browser extensions that change fonts */ + font-family: '#{$icomoon-font-family}' !important; + speak: never; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.ico--twitter { + &:before { + content: $ico--twitter; + } +} +.ico--mastodon { + &:before { + content: $ico--mastodon; + } +} +.ico--helios { + &:before { + content: $ico--helios; + } +} +.ico--redmine { + &:before { + content: $ico--redmine; + } +} +.ico--zulip { + &:before { + content: $ico--zulip; + } +} +.ico--forum { + &:before { + content: $ico--forum; + } +} +.ico--pirati { + &:before { + content: $ico--pirati; + } +} +.ico--jitsi { + &:before { + content: $ico--jitsi; + } +} +.ico--open-source { + &:before { + content: $ico--open-source; + } +} +.ico--donation-full { + &:before { + content: $ico--donation-full; + } +} +.ico--donation-outline { + &:before { + content: $ico--donation-outline; + } +} +.ico--strategy { + &:before { + content: $ico--strategy; + } +} +.ico--pig { + &:before { + content: $ico--pig; + } +} +.ico--thermometer { + &:before { + content: $ico--thermometer; + } +} +.ico--menu { + &:before { + content: $ico--menu; + } +} +.ico--chevron-right { + &:before { + content: $ico--chevron-right; + } +} +.ico--chevron-left { + &:before { + content: $ico--chevron-left; + } +} +.ico--chevron-down { + &:before { + content: $ico--chevron-down; + } +} +.ico--chevron-up { + &:before { + content: $ico--chevron-up; + } +} +.ico--link-horizontal { + &:before { + content: $ico--link-horizontal; + } +} +.ico--beer { + &:before { + content: $ico--beer; + } +} +.ico--food { + &:before { + content: $ico--food; + } +} +.ico--dots-three-vertical { + &:before { + content: $ico--dots-three-vertical; + } +} +.ico--dots-three-horizontal { + &:before { + content: $ico--dots-three-horizontal; + } +} +.ico--log-out { + &:before { + content: $ico--log-out; + } +} +.ico--envelope { + &:before { + content: $ico--envelope; + } +} +.ico--pin { + &:before { + content: $ico--pin; + } +} +.ico--at { + &:before { + content: $ico--at; + } +} +.ico--glass { + &:before { + content: $ico--glass; + } +} +.ico--checkmark { + &:before { + content: $ico--checkmark; + } +} +.ico--info { + &:before { + content: $ico--info; + } +} +.ico--question { + &:before { + content: $ico--question; + } +} +.ico--warning { + &:before { + content: $ico--warning; + } +} +.ico--code { + &:before { + content: $ico--code; + } +} +.ico--checkbox-unchecked { + &:before { + content: $ico--checkbox-unchecked; + } +} +.ico--star-full { + &:before { + content: $ico--star-full; + } +} +.ico--star-empty { + &:before { + content: $ico--star-empty; + } +} +.ico--bookmark { + &:before { + content: $ico--bookmark; + } +} +.ico--cog { + &:before { + content: $ico--cog; + } +} +.ico--key { + &:before { + content: $ico--key; + } +} +.ico--zoom-in { + &:before { + content: $ico--zoom-in; + } +} +.ico--zoom-out { + &:before { + content: $ico--zoom-out; + } +} +.ico--shrink { + &:before { + content: $ico--shrink; + } +} +.ico--printer { + &:before { + content: $ico--printer; + } +} +.ico--file-openoffice { + &:before { + content: $ico--file-openoffice; + } +} +.ico--user { + &:before { + content: $ico--user; + } +} +.ico--file-excel { + &:before { + content: $ico--file-excel; + } +} +.ico--file-word { + &:before { + content: $ico--file-word; + } +} +.ico--file-pdf { + &:before { + content: $ico--file-pdf; + } +} +.ico--file-picture { + &:before { + content: $ico--file-picture; + } +} +.ico--file-blank { + &:before { + content: $ico--file-blank; + } +} +.ico--folder-upload { + &:before { + content: $ico--folder-upload; + } +} +.ico--upload { + &:before { + content: $ico--upload; + } +} +.ico--cloud-upload { + &:before { + content: $ico--cloud-upload; + } +} +.ico--folder-download { + &:before { + content: $ico--folder-download; + } +} +.ico--download { + &:before { + content: $ico--download; + } +} +.ico--cloud-download { + &:before { + content: $ico--cloud-download; + } +} +.ico--alarm { + &:before { + content: $ico--alarm; + } +} +.ico--calculator { + &:before { + content: $ico--calculator; + } +} +.ico--facebook-full { + &:before { + content: $ico--facebook-full; + } +} +.ico--feed { + &:before { + content: $ico--feed; + } +} +.ico--library { + &:before { + content: $ico--library; + } +} +.ico--office { + &:before { + content: $ico--office; + } +} +.ico--attachment { + &:before { + content: $ico--attachment; + } +} +.ico--enlarge { + &:before { + content: $ico--enlarge; + } +} +.ico--eye-off { + &:before { + content: $ico--eye-off; + } +} +.ico--eye { + &:before { + content: $ico--eye; + } +} +.ico--share { + &:before { + content: $ico--share; + } +} +.ico--search { + &:before { + content: $ico--search; + } +} +.ico--pencil { + &:before { + content: $ico--pencil; + } +} +.ico--lock-open { + &:before { + content: $ico--lock-open; + } +} +.ico--lock { + &:before { + content: $ico--lock; + } +} +.ico--equalizer { + &:before { + content: $ico--equalizer; + } +} +.ico--switch { + &:before { + content: $ico--switch; + } +} +.ico--loop { + &:before { + content: $ico--loop; + } +} +.ico--refresh { + &:before { + content: $ico--refresh; + } +} +.ico--bullhorn { + &:before { + content: $ico--bullhorn; + } +} +.ico--bin { + &:before { + content: $ico--bin; + } +} +.ico--cross { + &:before { + content: $ico--cross; + } +} +.ico--checkbox-checked { + &:before { + content: $ico--checkbox-checked; + } +} +.ico--globe { + &:before { + content: $ico--globe; + } +} +.ico--wikipedia { + &:before { + content: $ico--wikipedia; + } +} +.ico--youtube { + &:before { + content: $ico--youtube; + } +} +.ico--users { + &:before { + content: $ico--users; + } +} +.ico--book { + &:before { + content: $ico--book; + } +} +.ico--bubbles { + &:before { + content: $ico--bubbles; + } +} +.ico--map { + &:before { + content: $ico--map; + } +} +.ico--compass { + &:before { + content: $ico--compass; + } +} +.ico--folder-open { + &:before { + content: $ico--folder-open; + } +} +.ico--folder { + &:before { + content: $ico--folder; + } +} +.ico--drawer { + &:before { + content: $ico--drawer; + } +} +.ico--stop { + &:before { + content: $ico--stop; + } +} +.ico--github { + &:before { + content: $ico--github; + } +} +.ico--clock { + &:before { + content: $ico--clock; + } +} +.ico--calendar { + &:before { + content: $ico--calendar; + } +} +.ico--flickr { + &:before { + content: $ico--flickr; + } +} +.ico--instagram { + &:before { + content: $ico--instagram; + } +} +.ico--newspaper { + &:before { + content: $ico--newspaper; + } +} +.ico--cart { + &:before { + content: $ico--cart; + } +} +.ico--home { + &:before { + content: $ico--home; + } +} +.ico--link { + &:before { + content: $ico--link; + } +} +.ico--power { + &:before { + content: $ico--power; + } +} +.ico--rocket { + &:before { + content: $ico--rocket; + } +} +.ico--location { + &:before { + content: $ico--location; + } +} +.ico--phone { + &:before { + content: $ico--phone; + } +} +.ico--linkedin { + &:before { + content: $ico--linkedin; + } +} +.ico--facebook { + &:before { + content: $ico--facebook; + } +} +.ico--envelop { + &:before { + content: $ico--envelop; + } +} +.ico--file-text2 { + &:before { + content: $ico--file-text2; + } +} +.ico--price-tag { + &:before { + content: $ico--price-tag; + } +} +.ico--price-tags { + &:before { + content: $ico--price-tags; + } +} +.ico--stats-dots { + &:before { + content: $ico--stats-dots; + } +} +.ico--bed { + &:before { + content: $ico--bed; + } +} +.ico--train { + &:before { + content: $ico--train; + } +} +.ico--bus { + &:before { + content: $ico--bus; + } +} +.ico--wheelchair { + &:before { + content: $ico--wheelchair; + } +} +.ico--thumbs-down { + &:before { + content: $ico--thumbs-down; + } +} +.ico--thumbs-up { + &:before { + content: $ico--thumbs-up; + } +} +.ico--anchor { + &:before { + content: $ico--anchor; + } +} +.ico--paw { + &:before { + content: $ico--paw; + } +} + diff --git a/source/icons/variables.scss b/source/icons/variables.scss new file mode 100644 index 0000000000000000000000000000000000000000..a7e7fadbcdb8ad3ab5c3be898a11a9be85e391f5 --- /dev/null +++ b/source/icons/variables.scss @@ -0,0 +1,124 @@ +$icomoon-font-family: "pirati-ui" !default; +$icomoon-font-path: "fonts" !default; + +$ico--twitter: "\e977"; +$ico--mastodon: "\e973"; +$ico--helios: "\e96e"; +$ico--redmine: "\e96f"; +$ico--zulip: "\e970"; +$ico--forum: "\e971"; +$ico--pirati: "\e90d"; +$ico--jitsi: "\e90f"; +$ico--open-source: "\e90e"; +$ico--donation-full: "\e96c"; +$ico--donation-outline: "\e96d"; +$ico--strategy: "\e932"; +$ico--pig: "\e928"; +$ico--thermometer: "\e90a"; +$ico--menu: "\e933"; +$ico--chevron-right: "\e923"; +$ico--chevron-left: "\e924"; +$ico--chevron-down: "\e925"; +$ico--chevron-up: "\e926"; +$ico--link-horizontal: "\e910"; +$ico--beer: "\e909"; +$ico--food: "\e968"; +$ico--dots-three-vertical: "\e940"; +$ico--dots-three-horizontal: "\e941"; +$ico--log-out: "\e942"; +$ico--envelope: "\e908"; +$ico--pin: "\e943"; +$ico--at: "\e905"; +$ico--glass: "\e967"; +$ico--checkmark: "\e965"; +$ico--info: "\e901"; +$ico--question: "\e904"; +$ico--warning: "\e93f"; +$ico--code: "\e94a"; +$ico--checkbox-unchecked: "\e94e"; +$ico--star-full: "\e94f"; +$ico--star-empty: "\e950"; +$ico--bookmark: "\e951"; +$ico--cog: "\e952"; +$ico--key: "\e953"; +$ico--zoom-in: "\e954"; +$ico--zoom-out: "\e955"; +$ico--shrink: "\e956"; +$ico--printer: "\e957"; +$ico--file-openoffice: "\e958"; +$ico--user: "\e959"; +$ico--file-excel: "\e95a"; +$ico--file-word: "\e95b"; +$ico--file-pdf: "\e95c"; +$ico--file-picture: "\e95d"; +$ico--file-blank: "\e95e"; +$ico--folder-upload: "\e95f"; +$ico--upload: "\e960"; +$ico--cloud-upload: "\e961"; +$ico--folder-download: "\e962"; +$ico--download: "\e963"; +$ico--cloud-download: "\e964"; +$ico--alarm: "\e900"; +$ico--calculator: "\e911"; +$ico--facebook-full: "\e913"; +$ico--feed: "\e927"; +$ico--library: "\e929"; +$ico--office: "\e92a"; +$ico--attachment: "\e92b"; +$ico--enlarge: "\e92c"; +$ico--eye-off: "\e92e"; +$ico--eye: "\e92f"; +$ico--share: "\e931"; +$ico--search: "\e939"; +$ico--pencil: "\e93c"; +$ico--lock-open: "\e947"; +$ico--lock: "\e948"; +$ico--equalizer: "\e949"; +$ico--switch: "\e94b"; +$ico--loop: "\e94c"; +$ico--refresh: "\e94d"; +$ico--bullhorn: "\e944"; +$ico--bin: "\e945"; +$ico--cross: "\e937"; +$ico--checkbox-checked: "\e938"; +$ico--globe: "\e93a"; +$ico--wikipedia: "\e93b"; +$ico--youtube: "\e936"; +$ico--users: "\e934"; +$ico--book: "\e935"; +$ico--bubbles: "\e930"; +$ico--map: "\e914"; +$ico--compass: "\e915"; +$ico--folder-open: "\e916"; +$ico--folder: "\e917"; +$ico--drawer: "\e918"; +$ico--stop: "\e919"; +$ico--github: "\e91a"; +$ico--clock: "\e91b"; +$ico--calendar: "\e91c"; +$ico--flickr: "\e91d"; +$ico--instagram: "\e91e"; +$ico--newspaper: "\e920"; +$ico--cart: "\e921"; +$ico--home: "\e922"; +$ico--link: "\e912"; +$ico--power: "\e90c"; +$ico--rocket: "\e946"; +$ico--location: "\e906"; +$ico--phone: "\e907"; +$ico--linkedin: "\e903"; +$ico--facebook: "\e902"; +$ico--envelop: "\e972"; +$ico--file-text2: "\e974"; +$ico--price-tag: "\e975"; +$ico--price-tags: "\e976"; +$ico--stats-dots: "\e99b"; +$ico--bed: "\e969"; +$ico--train: "\e96a"; +$ico--bus: "\e96b"; +$ico--wheelchair: "\e966"; +$ico--thumbs-down: "\e93d"; +$ico--thumbs-up: "\e93e"; +$ico--anchor: "\e92d"; +$ico--paw: "\e90b"; +