Skip to content
Snippets Groups Projects
Commit c9ff673c authored by Tomáš Valenta's avatar Tomáš Valenta
Browse files

add new icons - forum, zulip, helios, redmine

parent f716cb19
Branches
Tags
1 merge request!5Add icons for Helios, Redmine, Zulip, Forum, Mastodon
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 186 additions and 43 deletions
source/_patterns/00-atoms/02-icons/icons.mustache
+ 36
− 0
View file @ c9ff673c
...@@ -980,6 +980,42 @@ ...@@ -980,6 +980,42 @@
</div> </div>
</div> </div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--forum"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--forum</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--helios"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--helios</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--redmine"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--redmine</code>
</div>
</div>
<div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--zulip"></i>
</div>
<div class="card__body p-2 text-2xs">
<code>.ico--zulip</code>
</div>
</div>
<div class="card"> <div class="card">
<div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2"> <div class="flex justify-center items-center h-16 text-2xl border-b border-grey-100 bg-grey-50 p-2">
<i class="ico--open-source"></i> <i class="ico--open-source"></i>
......
source/css/atoms/icons.pcss
+ 18
− 31
View file @ c9ff673c
@font-face { @font-face {
font-family: 'pirati-ui'; font-family: 'pirati-ui';
src: url('../fonts/pirati-ui.eot?16cba54ca38938d07a34607a0eb2fcb6'); src: url('../fonts/pirati-ui.eot?32zfqp');
src: url('../fonts/pirati-ui.eot?16cba54ca38938d07a34607a0eb2fcb6#iefix') format('embedded-opentype'), src: url('../fonts/pirati-ui.eot?32zfqp#iefix') format('embedded-opentype'),
url('../fonts/pirati-ui.ttf?16cba54ca38938d07a34607a0eb2fcb6') format('truetype'), url('../fonts/pirati-ui.ttf?32zfqp') format('truetype'),
url('../fonts/pirati-ui.woff?16cba54ca38938d07a34607a0eb2fcb6') format('woff'), url('../fonts/pirati-ui.woff?32zfqp') format('woff'),
url('../fonts/pirati-ui.svg?16cba54ca38938d07a34607a0eb2fcb6#pirati-ui') format('svg'); url('../fonts/pirati-ui.svg?32zfqp#pirati-ui') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
...@@ -26,33 +25,18 @@ ...@@ -26,33 +25,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
@font-face { .ico--helios:before {
font-family: 'pirati-ui'; content: "\e96e";
src: url('fonts/pirati-ui.eot?uv2v4l');
src: url('fonts/pirati-ui.eot?uv2v4l#iefix') format('embedded-opentype'),
url('fonts/pirati-ui.ttf?uv2v4l') format('truetype'),
url('fonts/pirati-ui.woff?uv2v4l') format('woff'),
url('fonts/pirati-ui.svg?uv2v4l#pirati-ui') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
} }
.ico--redmine:before {
[class^="ico--"], [class*=" ico--"] { content: "\e96f";
/* use !important to prevent issues with browser extensions that change fonts */ }
font-family: 'pirati-ui' !important; .ico--zulip:before {
speak: never; content: "\e970";
font-style: normal; }
font-weight: normal; .ico--forum:before {
font-variant: normal; content: "\e971";
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
.ico--pirati:before { .ico--pirati:before {
content: "\e90d"; content: "\e90d";
} }
...@@ -359,6 +343,9 @@ ...@@ -359,6 +343,9 @@
.ico--facebook:before { .ico--facebook:before {
content: "\e902"; content: "\e902";
} }
.ico--envelop:before {
content: "\e972";
}
.ico--bed:before { .ico--bed:before {
content: "\e969"; content: "\e969";
} }
......
source/icons/demo.html
+ 71
− 1
View file @ c9ff673c
...@@ -9,10 +9,66 @@ ...@@ -9,10 +9,66 @@
<link rel="stylesheet" href="style.css"></head> <link rel="stylesheet" href="style.css"></head>
<body> <body>
<div class="bgc1 clearfix"> <div class="bgc1 clearfix">
<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;110)</small></h1> <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> pirati-ui <small class="fgc1">(Glyphs:&nbsp;115)</small></h1>
</div> </div>
<div class="clearfix mhl ptl"> <div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: Unknown</h1> <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ico--helios"></span>
<span class="mls"> ico--helios</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e96e" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe96e;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ico--redmine"></span>
<span class="mls"> ico--redmine</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e96f" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe96f;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ico--zulip"></span>
<span class="mls"> ico--zulip</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e970" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe970;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1">
<div class="clearfix bshadow0 pbs">
<span class="ico--forum"></span>
<span class="mls"> ico--forum</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e971" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe971;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="" class="liga unitRight" />
</div>
</div>
<div class="glyph fs1"> <div class="glyph fs1">
<div class="clearfix bshadow0 pbs"> <div class="clearfix bshadow0 pbs">
<span class="ico--pirati"></span> <span class="ico--pirati"></span>
...@@ -1453,6 +1509,20 @@ ...@@ -1453,6 +1509,20 @@
<input type="text" readonly value="" class="liga unitRight" /> <input type="text" readonly value="" class="liga unitRight" />
</div> </div>
</div> </div>
<div class="glyph fs5">
<div class="clearfix bshadow0 pbs">
<span class="ico--envelop"></span>
<span class="mls"> ico--envelop</span>
</div>
<fieldset class="fs0 size1of1 clearfix hidden-false">
<input type="text" readonly value="e972" class="unit size1of2" />
<input type="text" maxlength="1" readonly value="&#xe972;" class="unitRight size1of2 talign-right" />
</fieldset>
<div class="fs0 bshadow0 clearfix hidden-true">
<span class="unit pvs fgc1">liga: </span>
<input type="text" readonly value="envelop, mail" class="liga unitRight" />
</div>
</div>
</div> </div>
<div class="clearfix mhl ptl"> <div class="clearfix mhl ptl">
<h1 class="mvm mtn fgc1">Grid Size: 14</h1> <h1 class="mvm mtn fgc1">Grid Size: 14</h1>
......
source/icons/fonts/pirati-ui.eot
+ 0
− 0
View file @ c9ff673c
No preview for this file type
source/icons/fonts/pirati-ui.svg
+ 5
− 0
View file @ c9ff673c
This diff is collapsed.
source/icons/fonts/pirati-ui.ttf
+ 0
− 0
View file @ c9ff673c
No preview for this file type
source/icons/fonts/pirati-ui.woff
+ 0
− 0
View file @ c9ff673c
No preview for this file type
source/icons/selection.json
+ 1
− 1
View file @ c9ff673c
Source diff could not be displayed: it is too large. Options to address this: view the blob.
source/icons/style.css
+ 20
− 5
View file @ c9ff673c
@font-face { @font-face {
font-family: 'pirati-ui'; font-family: 'pirati-ui';
src: url('fonts/pirati-ui.eot?uv2v4l'); src: url('fonts/pirati-ui.eot?oizdph');
src: url('fonts/pirati-ui.eot?uv2v4l#iefix') format('embedded-opentype'), src: url('fonts/pirati-ui.eot?oizdph#iefix') format('embedded-opentype'),
url('fonts/pirati-ui.ttf?uv2v4l') format('truetype'), url('fonts/pirati-ui.ttf?oizdph') format('truetype'),
url('fonts/pirati-ui.woff?uv2v4l') format('woff'), url('fonts/pirati-ui.woff?oizdph') format('woff'),
url('fonts/pirati-ui.svg?uv2v4l#pirati-ui') format('svg'); url('fonts/pirati-ui.svg?oizdph#pirati-ui') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
...@@ -25,6 +25,18 @@ ...@@ -25,6 +25,18 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.ico--helios:before {
content: "\e96e";
}
.ico--redmine:before {
content: "\e96f";
}
.ico--zulip:before {
content: "\e970";
}
.ico--forum:before {
content: "\e971";
}
.ico--pirati:before { .ico--pirati:before {
content: "\e90d"; content: "\e90d";
} }
...@@ -331,6 +343,9 @@ ...@@ -331,6 +343,9 @@
.ico--facebook:before { .ico--facebook:before {
content: "\e902"; content: "\e902";
} }
.ico--envelop:before {
content: "\e972";
}
.ico--bed:before { .ico--bed:before {
content: "\e969"; content: "\e969";
} }
......
source/icons/style.scss
+ 30
− 5
View file @ c9ff673c
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
@font-face { @font-face {
font-family: '#{$icomoon-font-family}'; font-family: '#{$icomoon-font-family}';
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?uv2v4l'); src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?oizdph');
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?uv2v4l#iefix') format('embedded-opentype'), src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?oizdph#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?uv2v4l') format('truetype'), url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?oizdph') format('truetype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?uv2v4l') format('woff'), url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?oizdph') format('woff'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?uv2v4l##{$icomoon-font-family}') format('svg'); url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?oizdph##{$icomoon-font-family}') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
...@@ -27,6 +27,26 @@ ...@@ -27,6 +27,26 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.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 { .ico--pirati {
&:before { &:before {
content: $ico--pirati; content: $ico--pirati;
...@@ -537,6 +557,11 @@ ...@@ -537,6 +557,11 @@
content: $ico--facebook; content: $ico--facebook;
} }
} }
.ico--envelop {
&:before {
content: $ico--envelop;
}
}
.ico--bed { .ico--bed {
&:before { &:before {
content: $ico--bed; content: $ico--bed;
......
source/icons/variables.scss
+ 5
− 0
View file @ c9ff673c
$icomoon-font-family: "pirati-ui" !default; $icomoon-font-family: "pirati-ui" !default;
$icomoon-font-path: "fonts" !default; $icomoon-font-path: "fonts" !default;
$ico--helios: "\e96e";
$ico--redmine: "\e96f";
$ico--zulip: "\e970";
$ico--forum: "\e971";
$ico--pirati: "\e90d"; $ico--pirati: "\e90d";
$ico--jitsi: "\e90f"; $ico--jitsi: "\e90f";
$ico--open-source: "\e90e"; $ico--open-source: "\e90e";
...@@ -103,6 +107,7 @@ $ico--location: "\e906"; ...@@ -103,6 +107,7 @@ $ico--location: "\e906";
$ico--phone: "\e907"; $ico--phone: "\e907";
$ico--linkedin: "\e903"; $ico--linkedin: "\e903";
$ico--facebook: "\e902"; $ico--facebook: "\e902";
$ico--envelop: "\e972";
$ico--bed: "\e969"; $ico--bed: "\e969";
$ico--train: "\e96a"; $ico--train: "\e96a";
$ico--bus: "\e96b"; $ico--bus: "\e96b";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft