scratchfoundation/scratchx
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Style social media icons

Browse source
This commit is contained in:
Ray Schamp 2015-05-05 16:22:29 -04:00
parent c8acb945f6
commit 53d0b66025
4 changed files with 92 additions and 3 deletions

57
css/scratchx.css
View file

@ -691,6 +691,63 @@ article header h1 + p {
article header h1 + p:last-child { article header h1 + p:last-child {
margin-right: 0; } margin-right: 0; }
.twitter, .github {
display: block;
float: left;
margin-right: 24px; }
.twitter span, .github span {
display: none; }
.twitter:before {
content: "";
font-family: "ScratchX";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 1.5em;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.375em;
width: 0.75em;
height: 0.75em;
text-align: center;
display: inline-block;
line-height: 1.875em;
width: 1.875em;
height: 1.875em;
border-radius: 0.9375em;
background-color: #21b4f0;
color: #fff; }
.github:before {
content: "";
font-family: "ScratchX";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size: 1.5em;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
border-radius: 0.375em;
width: 0.75em;
height: 0.75em;
text-align: center;
display: inline-block;
line-height: 1.875em;
width: 1.875em;
height: 1.875em;
border-radius: 0.9375em;
background-color: #21b4f0;
color: #fff; }
a[href=""] { a[href=""] {
outline: 1px solid red; } outline: 1px solid red; }

2
css/scratchx.css.map
View file

File diff suppressed because one or more lines are too long

4
index.html
View file

@ -163,8 +163,8 @@
<p>Extensions on ScratchX are experimental and are not reviewed by the Scratch Team or the MIT Media Lab.</p> <p>Extensions on ScratchX are experimental and are not reviewed by the Scratch Team or the MIT Media Lab.</p>
<p><a href="https://scratch.mit.edu/">Scratch</a> is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p> <p><a href="https://scratch.mit.edu/">Scratch</a> is a project of the Lifelong Kindergarten Group at the MIT Media Lab.</p>
<p> <p>
<a class="twitter" title="Follow us on Twitter" href="https://twitter.com/scratch/" target="_blank">@scratch on Twitter</a> <a class="twitter" title="Follow us on Twitter" href="https://twitter.com/scratch/" target="_blank"><span>@scratch on Twitter</span></a>
<a class="github" title="Fork us on GitHub" href="https://twitter.com/scratch/" target="_blank">LLK on GitHub</a> <a class="github" title="Fork us on GitHub" href="https://twitter.com/scratch/" target="_blank"><span>LLK on GitHub</span></a>
</p> </p>
</section> </section>

32
sass/base/_base.scss
View file

@ -81,3 +81,35 @@ article header h1 + p {
@include shift(1); @include shift(1);
} }
.twitter, .github {
display: block;
float: left;
margin-right: 2 * $gutter;
span {
display: none;
}
}
.twitter {
@include icon(before, twitter, circular, false, 4 * $vertical-base){
display: inline-block;
line-height: 5 * $vertical-base;
width: 5 * $vertical-base;
height: 5 * $vertical-base;
border-radius: 2.5 * $vertical-base;
background-color: $blue;
color: $white;
}
}
.github {
@include icon(before, github, circular, false, 4 * $vertical-base){
display: inline-block;
line-height: 5 * $vertical-base;
width: 5 * $vertical-base;
height: 5 * $vertical-base;
border-radius: 2.5 * $vertical-base;
background-color: $blue;
color: $white;
}
}