Add text to extension tag icons

This commit is contained in:
Ray Schamp 2015-08-10 10:29:05 -04:00
parent e31e10b422
commit 402bd506c3
4 changed files with 59 additions and 43 deletions

View file

@ -1603,10 +1603,9 @@ body.page-home > main > header {
aside + .gallery { aside + .gallery {
margin-top: -1.5em; } margin-top: -1.5em; }
.tag { .tag:before {
font-size: 1.5em; padding-right: 0.375em; }
line-height: 1; } .tag.web:before {
.tag.web:before {
content: ""; content: "";
font-family: "ScratchX"; font-family: "ScratchX";
speak: none; speak: none;
@ -1618,8 +1617,11 @@ aside + .gallery {
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale;
.tag.hardware:before { font-size: 1.25em;
display: inline-block;
vertical-align: baseline; }
.tag.hardware:before {
content: ""; content: "";
font-family: "ScratchX"; font-family: "ScratchX";
speak: none; speak: none;
@ -1631,6 +1633,9 @@ aside + .gallery {
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; } -moz-osx-font-smoothing: grayscale;
font-size: 1.5em;
display: inline-block;
vertical-align: middle; }
/*# sourceMappingURL=scratchx.css.map */ /*# sourceMappingURL=scratchx.css.map */

File diff suppressed because one or more lines are too long

View file

@ -150,7 +150,7 @@
<a href="http://khanning.github.io/scratch-arduino-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-arduino-extension/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension"></span> <span class="tag hardware" data-action="load-url">Sample Project</span>
</section> </section>
</li> </li>
<li> <li>
@ -167,7 +167,7 @@
<a href="http://technoboy10.tk/mesh/">Documentation</a> <a href="http://technoboy10.tk/mesh/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension"></span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
</section> </section>
</li> </li>
<li> <li>
@ -184,7 +184,7 @@
<a href="http://intel-realsense-extension-for-scratch.github.io/public">Documentation</a> <a href="http://intel-realsense-extension-for-scratch.github.io/public">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension"></span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
</section> </section>
</li> </li>
<li> <li>
@ -201,7 +201,7 @@
<a href="http://khanning.github.io/scratch-isstracker-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-isstracker-extension/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension"></span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
</section> </section>
</li> </li>
<li> <li>
@ -218,7 +218,7 @@
<a href="http://khanning.github.io/scratch-leapmotion-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-leapmotion-extension/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension"></span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
</section> </section>
</li> </li>
<li> <li>
@ -235,7 +235,7 @@
<a href="http://khanning.github.io/scratch-littlebits-extension/">Documentation</a> <a href="http://khanning.github.io/scratch-littlebits-extension/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension"></span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
</section> </section>
</li> </li>
<li> <li>
@ -252,7 +252,7 @@
<a href="http://sayamindu.github.io/scratch-extensions/text-to-speech">Documentation</a> <a href="http://sayamindu.github.io/scratch-extensions/text-to-speech">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension"></span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
</section> </section>
</li> </li>
<li> <li>
@ -269,7 +269,7 @@
<a href="http://ericrosenbaum.github.io/tone-synth-extension">Documentation</a> <a href="http://ericrosenbaum.github.io/tone-synth-extension">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension"></span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
</section> </section>
</li> </li>
<li> <li>
@ -286,7 +286,7 @@
<a href="http://technoboy10.tk/twitter/">Documentation</a> <a href="http://technoboy10.tk/twitter/">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag web" title="Web Extension"></span> <span class="tag web" title="Web Extension">Requires Internet Connection</span>
</section> </section>
</li> </li>
<li> <li>
@ -303,7 +303,7 @@
<a href="https://github.com/MrYsLab/xi">Documentation</a> <a href="https://github.com/MrYsLab/xi">Documentation</a>
</section> </section>
<section class="tags"> <section class="tags">
<span class="tag hardware" title="Hardware Extension"></span> <span class="tag hardware" title="Hardware Extension">Requires Hardware</span>
</section> </section>
</li> </li>
</ul> </ul>

View file

@ -79,13 +79,24 @@ aside + .gallery {
} }
.tag { .tag {
font-size: 1.5em;
line-height: 1; &:before {
padding-right: $vertical-base;
}
&.web { &.web {
@include icon(before, wifi); @include icon(before, wifi) {
font-size: 1.25em;
display: inline-block;
vertical-align: baseline;
}
} }
&.hardware { &.hardware {
@include icon(before, gear); @include icon(before, gear) {
font-size: 1.5em;
display: inline-block;
vertical-align: middle;
}
} }
} }