library-mirrors/Font-Awesome
1
0
Fork 0
mirror of https://github.com/FortAwesome/Font-Awesome.git synced 2024-11-20 11:14:28 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

playing around with styles

Browse Source
This commit is contained in:
davegandy 2013-10-09 17:00:49 -04:00
parent 6817d287fc
commit c1359ab53d
9 changed files with 62 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/_includes/examples/buttons.html
View File

@ -25,7 +25,7 @@
<i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
</p>
<p>
<a class="btn btn-primary" href="#">
<a class="btn btn-warning" href="#">
<i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
</p>
</div>
@ -49,7 +49,7 @@
<i class="fa-icon fa-icon-cog"></i> Settings</a>
<a class="btn btn-lg btn-danger" href="#">
<i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a>
<a class="btn btn-primary" href="#">
<a class="btn btn-warning" href="#">
<i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a>
{% endhighlight %}
</div>

11
src/assets/img/houndstooth.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
<g>
<polygon fill="#FFFFFF" points="0,0 24,0 16,8 16,16 0,32 0,24 8,16 0,16 "/>
<polygon fill="#FFFFFF" points="32,0 16,16 24,16 32,8 "/>
<polygon fill="#FFFFFF" points="8,32 16,24 16,32 "/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 684 B

1
src/assets/less/site-3.0.0.less
View File

@ -4,6 +4,7 @@
@import "site/bootstrap/variables";
@import "site/bootstrap/navbar";
@import "site/bootstrap/buttons";
@import "site/bootstrap/jumbotron";
@import "site/bootstrap/code";
@import "site/bootstrap/wells";

3
src/assets/less/site/bootstrap/buttons.less Normal file
View File

@ -0,0 +1,3 @@
.btn { box-shadow: inset 0 1px 0 rgba(255,255,255,0.2); }
.btn-default { text-shadow: 0 1px 0 #fff; }
.btn-primary, .btn-success, .btn-warning, .btn-danger, .btn-info { text-shadow: 0 1px 0 rgba(0,0,0,0.2); }

53
src/assets/less/site/bootstrap/jumbotron.less
View File

@ -1,38 +1,44 @@
.jumbotron {
background: @red;
border-bottom: 1px solid @red-dark;
background-color: @jumbotron-bg;
#gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 50%), -40deg);
border-bottom: 1px solid @jumbotron-bg-dark;
margin-bottom: 0;
&, h1 { color: #fff; }
padding: 30px 0;
#gradient > .directional(@red, mix(@red, @red-dark, 90%), -40deg);
// background-color: @red;
position: relative;
// &:after {
// content:'';
// display:block;
// position:absolute;
// top:0;
// right:0;
// bottom:0;
// left:0;
// background:url(../img/grain-tm400.png);
// opacity:.5;
// }
&:after {
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(../img/houndstooth.svg);
background-size: 50px 50px;
opacity: .03;
}
.container {
position: relative;
z-index: 2;
}
h1 {
font-size: 80px;
letter-spacing: -2px;
line-height: 1;
text-shadow: 2px 2px 2px @red-dark;
text-shadow: 2px 2px 2px @jumbotron-bg-dark;
}
p {
color: mix(#fff, @red, 75%);
font-family: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: mix(#fff, @jumbotron-bg, 75%);
margin-top: 15px;
margin-bottom: 15px;
font-size: 30px;
line-height: 1.3;
font-weight: lighter;
text-shadow: 1px 1px 1px @red-dark;
text-shadow: 1px 1px 1px @jumbotron-bg-dark;
}
.actions { margin-top: 25px;}
// unsure if block below still in use
@ -56,19 +62,20 @@
}
.btn-default {
color: #fff;
background-color: @red;
background-color: @jumbotron-bg;
border-color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
&:hover {
background-color: #fff;
color: @red;
color: @jumbotron-bg;
}
}
.shameless-self-promotion {
font-size: 14px;
margin-top: 25px;
color: mix(#fff, @red, 40%);
a { color: mix(#fff, @red, 70%); }
a:hover { color: mix(#fff, @red, 100%); }
color: mix(#fff, @jumbotron-bg, 40%);
a { color: mix(#fff, @jumbotron-bg, 70%); }
a:hover { color: mix(#fff, @jumbotron-bg, 100%); }
}
}

11
src/assets/less/site/bootstrap/variables.less
View File

@ -4,8 +4,8 @@
// -------------------
// Links
@link-color: lighten(@red, 10%);
@link-hover-color: @red;
@link-color: lighten(@jumbotron-bg, 10%);
@link-hover-color: @jumbotron-bg;
// Typography
@font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -34,7 +34,14 @@
@navbar-height: 40px;
@navbar-inverse-brand-color: #fff;
@jumbotron-bg: @red;
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
//@brand-primary: @blue-dark;
//@brand-success: @green;
//@brand-warning: @yellow-dark;
//@brand-danger: @red;
//@brand-info: @blue;
// SITE VARIABLES
// --------------

6
src/assets/less/site/footer.less
View File

@ -1,7 +1,7 @@
#footer {
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
background-color: @red;
border-top: 1px solid mix(@red, @red-dark, 50%);
background-color: @jumbotron-bg;
border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%);
a {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
@ -15,7 +15,7 @@
padding-top: 40px;
}
color: mix(@red, #fff, 35%);
color: mix(@jumbotron-bg, #fff, 35%);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.project { margin-top: 10px; }
}

2
src/assets/less/site/jumbotron-carousel.less
View File

@ -4,7 +4,7 @@
font-size: @size;
text-align: center;
line-height: @size + 5;
text-shadow: 2px 2px 2px @red-dark;
text-shadow: 2px 2px 2px @jumbotron-bg-dark;
.carousel-control {
top: @size + 23px;
.square(30px);

4
src/assets/less/site/responsive/screen-lg.less
View File

@ -22,7 +22,7 @@
font-size: 90px;
}
p {
font-size: 35px;
font-size: 28px;
margin: 35px 0 20px;
}
}
@ -31,7 +31,7 @@
padding: 50px 0;
h1 { font-size: 100px; }
p {
font-size: 40px;
font-size: 32px;
margin: 20px 0;
}
.btn-large {