schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity

Move variables to separated less file.

Browse source 
This allows to customize Flex more easily.
This commit is contained in:
Alexandre Vicenzi 2016-09-14 00:04:22 -03:00
parent 46318f9281
commit 49e0a6880a
8 changed files with 111 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
static/stylesheet/style.less
View file

@ -1,12 +1,4 @@
@orange: #D9411E; @import "variables.less";
@light-orange: #FF5A09;
@white: #ffffff;
@grey: #333333;
@light-grey: #eeeeee;
@med-grey: #999999;
@dark-grey: #242121;
@sans: 'Source Sans Pro', 'Verdana', sans-serif;
@mono: 'Source Code Pro', 'Consolas', monospace;
html, body { html, body {
width: 100%; width: 100%;
@ -50,20 +42,20 @@ h6 {
body { body {
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: @white; background-color: @body-bg;
color: @dark-grey; color: @text-color;
font-family: @sans; font-family: @sans;
font-size: 1.02em; font-size: 1.02em;
line-height: 1.2em; line-height: 1.2em;
} }
a { a {
color: @orange; color: @link-color;
text-decoration: none; text-decoration: none;
} }
a:hover { a:hover {
color: @light-orange; color: @link-hover-color;
} }
hr { hr {
@ -80,16 +72,16 @@ img {
} }
aside { aside {
background-color: @grey; background-color: @sidebar-bg;
color: @white; color: @sidebar-text-color;
text-align: center; text-align: center;
a { a {
color: @white; color: @sidebar-link-color;
} }
a:hover { a:hover {
color: @light-grey; color: @sidebar-link-hover-color;
} }
div { div {
@ -129,15 +121,15 @@ main {
text-transform: uppercase; text-transform: uppercase;
font-size: .72em; font-size: .72em;
padding: 14px 0 14px 0; padding: 14px 0 14px 0;
border-bottom: @light-grey 1px solid; border-bottom: @nav-border-color 1px solid;
a { a {
padding: 0 4px 0 4px; padding: 0 4px 0 4px;
border-right: @light-grey 1px solid; border-right: @nav-border-color 1px solid;
} }
:first-child { :first-child {
border-left: @light-grey 1px solid; border-left: @nav-border-color 1px solid;
} }
} }
@ -161,7 +153,7 @@ main {
} }
p { p {
color: @med-grey; color: @header-text-color;
font-size: 0.86em; font-size: 0.86em;
} }
} }
@ -242,13 +234,13 @@ main {
footer { footer {
padding-top: 4px; padding-top: 4px;
border-top: @light-grey 1px solid; border-top: @footer-border-color 1px solid;
p { p {
margin: 2px; margin: 2px;
text-align: center; text-align: center;
padding: 0 40px 0 40px; padding: 0 40px 0 40px;
color: @med-grey; color: @footer-text-color;
font-size: 11px; font-size: 11px;
} }
} }
@ -256,11 +248,11 @@ main {
.tag-cloud { .tag-cloud {
a { a {
background-color: @orange; background-color: @tag-bg;
padding: .2em .6em .2em; padding: .2em .6em .2em;
font-size: .74em; font-size: .74em;
line-height: 1; line-height: 1;
color: @white; color: @tag-text-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -268,16 +260,16 @@ main {
} }
a:hover { a:hover {
background-color: @light-orange; background-color: @tag-hover-color;
} }
} }
a.btn { a.btn {
background-color: @orange; background-color: @btn-bg;
padding: .6em .6em; padding: .6em .6em;
font-size: .8em; font-size: .8em;
line-height: 1; line-height: 1;
color: @white; color: @btn-text-color;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
vertical-align: baseline; vertical-align: baseline;
@ -285,7 +277,7 @@ a.btn {
} }
a.btn:hover { a.btn:hover {
background-color: @light-orange; background-color: @btn-hover-color;
} }
.center, .text-center { .center, .text-center {
@ -305,8 +297,8 @@ a.btn:hover {
div.related-posts { div.related-posts {
margin: 15px 0 15px 0; margin: 15px 0 15px 0;
padding-bottom: 20px; padding-bottom: 20px;
border-top: @light-grey 1px solid; border-top: @rel-post-border-color 1px solid;
border-bottom: @light-grey 1px solid; border-bottom: @rel-post-border-color 1px solid;
h4 { h4 {
margin: 20px 0 25px 0; margin: 20px 0 25px 0;
@ -361,51 +353,51 @@ ul.social {
} }
a.sc-facebook { a.sc-facebook {
background-color: #3e5b98; background-color: @facebook-bg-color;
} }
a.sc-google { a.sc-google {
background-color: #d93e2d; background-color: @google-bg-color;
} }
a.sc-pinterest { a.sc-pinterest {
background-color: #c92619; background-color: @pinterest-bg-color;
} }
a.sc-linkedin { a.sc-linkedin {
background-color: #3371b7; background-color: @linkedin-bg-color;
} }
a.sc-rss { a.sc-rss {
background-color: #f26109; background-color: @rss-bg-color;
} }
a.sc-stack-overflow { a.sc-stack-overflow {
background-color: #ff9900; background-color: @stack-overflow-bg-color;
} }
a.sc-twitter { a.sc-twitter {
background-color: #4da7de; background-color: @twitter-bg-color;
} }
a.sc-youtube { a.sc-youtube {
background-color: #e02a20; background-color: @youtube-bg-color;
} }
a.sc-github, a.sc-github-alt { a.sc-github, a.sc-github-alt {
background-color: #111010; background-color: @github-bg-color;
} }
a.sc-envelope-o { a.sc-envelope-o {
background-color: #578AD6; background-color: @email-bg-color;
} }
a.sc-reddit { a.sc-reddit {
background-color: #ff4500; background-color: @reddit-bg-color;
} }
a.sc-soundcloud { a.sc-soundcloud {
background-color: #ff5500; background-color: @soundcloud-bg-color;
} }
} }
@ -442,13 +434,17 @@ ul.social {
main { main {
width: 75%; width: 75%;
height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 25%; left: 25%;
overflow-x: hidden;
overflow-y: hidden;
article { article {
&.single {
min-height: 80%;
}
ul.list { ul.list {
li { li {
padding: 2px; padding: 2px;

64
static/stylesheet/variables.less Normal file
View file

@ -0,0 +1,64 @@
// Flex colors
@orange: #D9411E;
@light-orange: #FF5A09;
@white: #ffffff;
@grey: #333333;
@light-grey: #eeeeee;
@med-grey: #999999;
@dark-grey: #242121;
// Font family
@sans: 'Source Sans Pro', 'Verdana', sans-serif;
@mono: 'Source Code Pro', 'Consolas', monospace;
// Body
@body-bg: @white;
@text-color: @dark-grey;
// Links
@link-color: @orange;
@link-hover-color: @light-orange;
// Sidebar (aside)
@sidebar-bg: @grey;
@sidebar-text-color: @white;
@sidebar-link-color: @white;
@sidebar-link-hover-color: @light-grey;
// Buttons
@btn-bg: @orange;
@btn-text-color: @white;
@btn-hover-color: @light-orange;
// Tag cloud
@tag-bg: @orange;
@tag-text-color: @white;
@tag-hover-color: @light-orange;
// Header
@header-text-color: @med-grey;
// Footer
@footer-text-color: @med-grey;
@footer-border-color: @light-grey;
// Relativer posts
@rel-post-border-color: @light-grey;
// Nav
@nav-border-color: @light-grey;
// Social buttons
@email-bg-color: #578AD6;
@facebook-bg-color: #3e5b98;
@github-bg-color: #111010;
@google-bg-color: #d93e2d;
@linkedin-bg-color: #3371b7;
@pinterest-bg-color: #c92619;
@reddit-bg-color: #ff4500;
@rss-bg-color: #f26109;
@soundcloud-bg-color: #ff5500;
@stack-overflow-bg-color: #ff9900;
@twitter-bg-color: #4da7de;
@youtube-bg-color: #e02a20;

2
templates/archives.html
View file

@ -2,7 +2,7 @@
{% block title %} – {{ _('Archives') }}{% endblock %} {% block title %} – {{ _('Archives') }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1>{{ _('Archives') }}</h1> <h1>{{ _('Archives') }}</h1>
</header> </header>

2
templates/article.html
View file

@ -10,7 +10,7 @@
{% block title %} &ndash; {{ article.title|striptags }}{% endblock %} {% block title %} &ndash; {{ article.title|striptags }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1 id="{{ article.slug }}">{{ article.title }}</h1> <h1 id="{{ article.slug }}">{{ article.title }}</h1>
<p> <p>

2
templates/authors.html
View file

@ -2,7 +2,7 @@
{% block title %} &ndash; {{ _('Authors') }}{% endblock %} {% block title %} &ndash; {{ _('Authors') }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1>{{ _('Authors') }}</h1> <h1>{{ _('Authors') }}</h1>
</header> </header>

2
templates/categories.html
View file

@ -2,7 +2,7 @@
{% block title %} &ndash; {{ _('Categories') }}{% endblock %} {% block title %} &ndash; {{ _('Categories') }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1>{{ _('Categories') }}</h1> <h1>{{ _('Categories') }}</h1>
</header> </header>

2
templates/page.html
View file

@ -2,7 +2,7 @@
{% block title %} &ndash; {{ page.title }}{% endblock %} {% block title %} &ndash; {{ page.title }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1 id="{{ page.slug }}">{{ page.title }}</h1> <h1 id="{{ page.slug }}">{{ page.title }}</h1>
</header> </header>

2
templates/tags.html
View file

@ -2,7 +2,7 @@
{% block title %} &ndash; {{ _('Tags') }}{% endblock %} {% block title %} &ndash; {{ _('Tags') }}{% endblock %}
{% block content %} {% block content %}
<article> <article class="single">
<header> <header>
<h1>{{ _('Tags') }}</h1> <h1>{{ _('Tags') }}</h1>
</header> </header>