зеркало из https://github.com/mozilla/bedrock.git
Build out basic style-guide for Sandstone
This commit is contained in:
Steven Garrity
Родитель
3da0230c23
Коммит
adae134897
|
|
@ -0,0 +1,230 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block page_title %}Sandstone - Bedrock’s Layer of CSS Love{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('sandstone-guide') }}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<hgroup id="main-feature" class="huge center">
|
||||
<h1>Sandstone</h1>
|
||||
<h2>Visual style for the Mozilla web universe</h2>
|
||||
</hgroup>
|
||||
|
||||
<nav class="menu-bar billboard">
|
||||
<ul>
|
||||
<li><a href="#grid">Less framework</a></li>
|
||||
<li><a href="#tabzilla-demo">Tabzilla</a></li>
|
||||
<li><a href="#buttons">Buttons</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="grid" class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<hgroup>
|
||||
<h2 class="mozilla-red">Less Framework</h2>
|
||||
<h4 class="mozilla-red">Responsive Grid</h4>
|
||||
</hgroup>
|
||||
|
||||
<p>Pages are built on a responsive gride, with 10, 6, or 3 columns, depending on the viewer. Columns are 68px wide with a 24px gutter. CSS classes for grids (<code>.row</code>, <code>.span1</code>, <code>.span2</code> etc.) are provided, or you can roll-your-own. If you’re using <a href="http://lesscss.org/">LESS</a> (the dynamic style sheet language, not to be confused with the <a href="http://lessframework.com/">Less Framework</a>, mixins are provided for columns (<code>.span(1)</code>, <code>.span(2)</code>, etc.).</p>
|
||||
<a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Grid Information</h4>
|
||||
<p><a href="http://www.lessframework.com">Less framework website</a></p>
|
||||
<p><a href="javascript:(function(){window.javascriptgrid={columns:{'default':{columns:10},a:{minWidth:768,maxWidth:991,columns:8},b:{minWidth:480,maxWidth:767,columns:5},c:{minWidth:1,maxWidth:479,columns:3}},columnWidth:68,gapWidth:24};var%20script=document.createElement('script');script.src='http://jsg.javascriptgrid.org/jsg.js';document.getElementsByTagName('HEAD')[0].appendChild(script);})();">Less Grid Overlay</a> (drag this link to your bookmarks bar and click it!)</p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
|
||||
<h4>Grid Notes</h4>
|
||||
|
||||
<ul>
|
||||
<li>CSS Media queries based layout for Smartphone, Landscape Smartphone, Tablet, Desktop</li>
|
||||
<li>Max width on smartphone is 252px (3 grid columns)</li>
|
||||
<li>Ideal main body copy width on Tablet and Desktop is 528px (6 columns)</li>
|
||||
<li>.Org style uses vertical spacing gutters of multiples of 24px to separate sections</li>
|
||||
<li>View CSS source on this site for example of grid usage</li>
|
||||
</ul>
|
||||
|
||||
<ul id="template-downloads">
|
||||
<li><a class="button" href="">Download page template PSD</a></li>
|
||||
<li><a class="button" href="">Download subpage template PSD</a></li>
|
||||
</ul>
|
||||
|
||||
<img src="grid-example-1.jpg" alt="">
|
||||
<img src="grid-example-2.jpg" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="tabzilla-demo" class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<hgroup>
|
||||
<h2 class="mozilla-red">Tabzilla</h2>
|
||||
<h4 class="mozilla-red">Universal Tab</h4>
|
||||
</hgroup>
|
||||
|
||||
<p>Tabzilla is the universal tab that appears on all Mozilla websites. A simple set of HTML/CSS/JS is provided for easy integration.</p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Tabzilla Live</h4>
|
||||
<p>View tabzilla live at <a href="">www.mozilla.org</a> or at the top of this page.</p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Tabzilla Code</h4>
|
||||
<p>
|
||||
Find the <a href="https://github.com/mozilla/tabzilla">Tabzilla Documentation and code on GitHub</a>.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="typefaces" class="typefaces container">
|
||||
<div class="row">
|
||||
<div class="span3">
|
||||
|
||||
<hgroup>
|
||||
<h2 class="mozilla-red">Typefaces</h2>
|
||||
<h4>Open Sans + Georgia</h4>
|
||||
</hgroup>
|
||||
|
||||
<p>Body copy is set in 16px Georgia with a 24px baseline. Headlines are set in Open Sans Light. The Open Sans font family is avaiable as a hosted web font from mozilla.org. The Sandstone CSS provides headings styled with Open Sans and you can add the LESS mixin <code>.open-sans</code> or <code>.open-sans-light</code> to any element.</p>
|
||||
|
||||
<a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>LESS mixins</h4>
|
||||
|
||||
<p><code>
|
||||
.open-sans;<br>
|
||||
.open-sans-light;
|
||||
</code></p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
|
||||
<h4>Type Examples</h4>
|
||||
|
||||
<h1 class="huge">huge</p>
|
||||
<h1 class="large">large</p>
|
||||
<h1>headline 1</h1>
|
||||
<h2>headline 2</h2>
|
||||
<h3>headline 3</h3>
|
||||
<h4>headline 4</h4>
|
||||
|
||||
<p>body text</p>
|
||||
<p class="small">small</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="backgrounds" class="background container">
|
||||
<div class="row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Backgrounds</h2>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code bg small">
|
||||
<h4 class="pad">Background CSS</h4>
|
||||
<p class="pad"><code>
|
||||
background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;
|
||||
</code></p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Background Example</h4>
|
||||
<p>
|
||||
|
||||
<a class="button" href="">Download the default backgrounds</a>
|
||||
<a class="button" href="">Download the background PSD</a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="buttons" class="container">
|
||||
<div class="row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<hgroup>
|
||||
<h2 class="mozilla-red">Buttons</h2>
|
||||
<h4 class="mozilla-red">Gumdrop Style</h4>
|
||||
</hgroup>
|
||||
|
||||
<p>Button styles with hover/active states and CSS transitions are provided. Green buttons should be used for download actions, blue for other primary functions.</p>
|
||||
|
||||
<a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Button CSS</h4>
|
||||
<p><code>
|
||||
.button<br>
|
||||
.button-blue
|
||||
</code></p>
|
||||
<p><code>
|
||||
.button-white
|
||||
</code></p>
|
||||
<p><code>
|
||||
<a class="button"><br>
|
||||
Primary<br>
|
||||
<small><br>
|
||||
Optional<br>
|
||||
</small><br>
|
||||
</a>
|
||||
</code></p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Button Examples</h4>
|
||||
<p>
|
||||
<a class="button" href="">Primary Button</a>
|
||||
<a class="button-blue" href="">Primary Button</a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button" href="">Button <small>With secondary text</small></a>
|
||||
</p>
|
||||
<p>
|
||||
<a class="button-white" href="">Secondary Button</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,204 +0,0 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block page_title %}Sandstone - Bedrock’s Layer of CSS Love{% endblock %}
|
||||
|
||||
{% block site_css %}
|
||||
{{ css('styleguide') }}
|
||||
<link rel="stylesheet/less" href="/media/css/sandstone/styleguide.less">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
<div id="main-content">
|
||||
|
||||
<hgroup>
|
||||
<h1>Sandstone</h1>
|
||||
<h2>Bedrock’s Layer of CSS Love</h2>
|
||||
</hgroup>
|
||||
|
||||
|
||||
<section id="grid" class="row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Less Framework</h2>
|
||||
<h4 class="mozilla-red">Responsive Grid</h4>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis.</p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Grid Information</h4>
|
||||
<p><a href="http://www.lessframework.com">Less framework website</a></p>
|
||||
<p><a href="javascript:(function(){window.javascriptgrid={columns:{'default':{columns:10},a:{minWidth:768,maxWidth:991,columns:8},b:{minWidth:480,maxWidth:767,columns:5},c:{minWidth:1,maxWidth:479,columns:3}},columnWidth:68,gapWidth:24};var%20script=document.createElement('script');script.src='http://jsg.javascriptgrid.org/jsg.js';document.getElementsByTagName('HEAD')[0].appendChild(script);})();">Less Grid Overlay</a> (drag this link to your bookmarks bar and click it!)</p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
|
||||
<h4>Grid Notes</h4>
|
||||
|
||||
<p>
|
||||
|
||||
<ul>
|
||||
<li>CSS Media queries based layout for Smartphone, Landscape Smartphone, Tablet, Desktop</li>
|
||||
<li>Max width on smartphone is 252px (3 grid columns)</li>
|
||||
<li>Ideal main body copy width on Tablet and Desktop is 528px (6 columns)</li>
|
||||
<li>.Org style uses vertical spacing gutters of multiples of 24px to separate sections</li>
|
||||
<li>View CSS source on this site for example of grid usage</li>
|
||||
</ul>
|
||||
|
||||
<a class="button" href="">Download page template PSD</a>
|
||||
<a class="button" href="">Download subpage template PSD</a>
|
||||
|
||||
<img src="grid-example-1.jpg" alt="">
|
||||
<img src="grid-example-2.jpg" alt="">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="tabzilla-demo" class="row">
|
||||
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Tabzilla</h2>
|
||||
<h4 class="mozilla-red">Universal Tab</h4>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Tabzilla Live</h4>
|
||||
<p>View tabzilla live at <a href="">www.mozilla.org</a></p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Tabzilla Code</h4>
|
||||
<p>
|
||||
<a class="button" href="">Download Tabzilla on GitHub</a>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="typefaces" class="typefaces row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Typefaces</h2>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Type CSS</h4>
|
||||
<p><code>
|
||||
|
||||
@font-face {
|
||||
font-family: "OpenSans";
|
||||
src: url(OpenSans-Light.ttf) format("truetype");
|
||||
}
|
||||
|
||||
<br>body {font: 16px/24px Georgia, serif;}
|
||||
<br>
|
||||
|
||||
<br>.huge, .large, h1, h2, h3, h4 {font-family: 'OpenSans', "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; font-weight: normal; text-shadow: 0px 1px 0px rgba(255,255,255,0.75);}
|
||||
<br>
|
||||
<br>.huge {font-size: 108px; letter-spacing: -4px; line-height: 100%;}
|
||||
<br>.large {font-size: 72px; letter-spacing: -3px; line-height: 100%;}
|
||||
<br>h1 {font-size: 48px; letter-spacing: -2px; line-height: 100%;}
|
||||
<br>h2 {font-size: 32px; letter-spacing: -1px; line-height: 100%;}
|
||||
<br>h3 {font-size: 28px; letter-spacing: -0.5px; line-height: 100%;}
|
||||
<br>h4 {font-size: 24px; letter-spacing: -0.25px; line-height: 100%;}
|
||||
<br>.small, small { font-size: 12px; line-height: 100%;}
|
||||
|
||||
</code></p>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
|
||||
<h4>Type Examples</h4>
|
||||
|
||||
<h1 class="huge">huge</p>
|
||||
<h1 class="large">large</p>
|
||||
<h1>headline 1</h1>
|
||||
<h2>headline 2</h2>
|
||||
<h3>headline 3</h3>
|
||||
<h4>headline 4</h4>
|
||||
|
||||
<p>body text</p>
|
||||
<p class="small">small</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="backgrounds" class="backgrounds row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Backgrounds</h2>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code bg small">
|
||||
<h4 class="pad">Background CSS</h4>
|
||||
<p class="pad"><code>
|
||||
background: rgb(245,241,232) url('background-gradient.png') repeat-x top center;
|
||||
</code></p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Background Example</h4>
|
||||
<p>
|
||||
|
||||
<a class="button" href="">Download the default backgrounds</a>
|
||||
<a class="button" href="">Download the background PSD</a>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<section id="buttons" class="buttons row">
|
||||
|
||||
<div class="span3">
|
||||
|
||||
<h2 class="mozilla-red">Buttons</h2>
|
||||
<h4 class="mozilla-red">Gumdrop Style</h4>
|
||||
|
||||
<p>Stumptown marfa bicycle rights cray. Occupy synth seitan magna, banh mi ut pour-over exercitation tofu keytar officia artisan VHS tempor qui. Accusamus excepteur banksy, dreamcatcher occupy stumptown eu before they sold out artisan small batch raw denim. Viral nulla four loko, nisi ad 3 wolf moon dolor seitan leggings PBR beard thundercats. Polaroid pitchfork brunch labore, aliqua mollit duis. </p><a class="top" href="#top">back to top</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="span2 css-code small">
|
||||
<h4>Button CSS</h4>
|
||||
<p>There is so much awesome baked into these buttons with the transitions and the box-shadows and the love that I recommend viewing the CSS for this page <a href="screen.css">here</a>. Go to the section titled "Oh yes, your Gumdrop Buttons"</p>
|
||||
<p>The style is there for these buttons, but the positioning for layout is custom for this site, so some tweaking is obviously needed to suit the needs of your layouts.</p>
|
||||
</div>
|
||||
|
||||
<div class="span5">
|
||||
<h4>Button Style</h4>
|
||||
<p>
|
||||
<a class="button" href="">Hey look, a button.</a>
|
||||
<a class="button" href="">Hover. *avoids phone eye contact*</a>
|
||||
<a class="button" href="">Press me.</a>
|
||||
<a class="button" href="">eh? EH? nice.</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
|
@ -1,12 +1,12 @@
|
|||
from django.conf.urls.defaults import *
|
||||
from views import contribute, channel, button, new, styleguide, geolocation
|
||||
from views import contribute, channel, button, new, sandstone, geolocation
|
||||
|
||||
urlpatterns = patterns('',
|
||||
(r'^button/', button),
|
||||
(r'^channel/', channel),
|
||||
(r'^contribute/', contribute),
|
||||
(r'^new/', new),
|
||||
(r'^styleguide/', styleguide),
|
||||
(r'^sandstone/', sandstone),
|
||||
|
||||
(r'^firefox/geolocation/', geolocation)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ def button(request):
|
|||
def new(request):
|
||||
return l10n_utils.render(request, "mozorg/new.html")
|
||||
|
||||
def styleguide(request):
|
||||
return l10n_utils.render(request, "mozorg/styleguide.html")
|
||||
def sandstone(request):
|
||||
return l10n_utils.render(request, "mozorg/sandstone.html")
|
||||
|
||||
def geolocation(request):
|
||||
return l10n_utils.render(request, "mozorg/geolocation.html",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,7 @@
|
|||
}
|
||||
|
||||
#welcome p {
|
||||
.open-sans;
|
||||
font-weight: 300;
|
||||
.open-sans-light;
|
||||
font-size: 22px;
|
||||
line-height: 120%;
|
||||
margin: @baseLine;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ hgroup {
|
|||
|
||||
h1 {
|
||||
font-size: 62px;
|
||||
margin-bottom: @baseLine / 3;
|
||||
margin-bottom: @baseLine / 3;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
|
|||
|
|
@ -30,8 +30,7 @@
|
|||
|
||||
p {
|
||||
margin: 0;
|
||||
.open-sans;
|
||||
font-weight: 300;
|
||||
.open-sans-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
@import "sandstone/sandstone.less";
|
||||
|
||||
section.container {
|
||||
border-bottom: 1px dotted @borderColor;
|
||||
padding-bottom: @baseLine * 2;
|
||||
margin-bottom: @baseLine * 2;
|
||||
}
|
||||
|
||||
section.container:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
#template-downloads li {
|
||||
list-style-type: none;
|
||||
margin: 0 0 @baseLine / 3 0;
|
||||
}
|
||||
|
|
@ -62,3 +62,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.button,
|
||||
.button-blue,
|
||||
.button-white {
|
||||
|
||||
small {
|
||||
display: block;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,16 +35,16 @@ a {
|
|||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, .huge, .large {
|
||||
.open-sans;
|
||||
.open-sans-light;
|
||||
display: block;
|
||||
font-weight: 300;
|
||||
margin: 0 0 12px 0;
|
||||
line-height: 100%;
|
||||
text-shadow: 0px 1px 0px rgba(255,255,255,0.75);
|
||||
color: @textColorSecondary;
|
||||
}
|
||||
|
||||
.huge {
|
||||
.huge,
|
||||
.huge h1 {
|
||||
font-size: 108px;
|
||||
letter-spacing: -4px;
|
||||
line-height: 100%;
|
||||
|
|
@ -111,8 +111,7 @@ li {
|
|||
}
|
||||
|
||||
dl dt {
|
||||
.open-sans;
|
||||
font-weight: 300;
|
||||
.open-sans-light;
|
||||
font-size: 32px;
|
||||
line-height: 100%;
|
||||
letter-spacing: -1px;
|
||||
|
|
@ -123,6 +122,10 @@ dl dd {
|
|||
margin-bottom: @baseLine * 2;
|
||||
}
|
||||
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
/* {{{ forms */
|
||||
|
||||
|
|
@ -271,10 +274,10 @@ input[type=text]:focus {
|
|||
nav.menu-bar {
|
||||
line-height: @baseLine * 3;
|
||||
text-align: center;
|
||||
.open-sans;
|
||||
font-weight: 300;
|
||||
.open-sans-light;
|
||||
margin-bottom: @baseLine * 2;
|
||||
padding: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
|
|
@ -289,7 +292,7 @@ nav.menu-bar {
|
|||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* }}} */
|
||||
|
|
@ -298,9 +301,8 @@ nav.menu-bar {
|
|||
.sidebar {
|
||||
|
||||
nav {
|
||||
.open-sans;
|
||||
.open-sans-light;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: @textColorSecondary;
|
||||
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,11 @@
|
|||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
.open-sans-light {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
&:after {
|
||||
|
|
|
|||
|
|
@ -79,9 +79,8 @@ MINIFY_BUNDLES = {
|
|||
'persona': (
|
||||
'css/persona.less',
|
||||
),
|
||||
'styleguide': (
|
||||
'css/sandstone/sandstone.less',
|
||||
'css/sandstone/styleguide.less',
|
||||
'sandstone-guide': (
|
||||
'css/sandstone-guide.less',
|
||||
),
|
||||
'video': (
|
||||
'css/sandstone/video.less',
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче