DanilaFe/Abacus
1
0
Fork 0
mirror of https://github.com/DanilaFe/abacus synced 2024-11-19 08:54:25 -08:00
Code Issues Releases Wiki Activity

Move button styling into scss.

Browse Source
This commit is contained in:
Danila Fedorin 2017-08-15 00:31:47 -07:00
parent bcd3e3b68a
commit beae822d76
2 changed files with 37 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
docs/_layouts/home.html
View File

@ -23,12 +23,6 @@
a { a {
background-color: white; background-color: white;
color: #06e8a4; color: #06e8a4;
padding: 10px;
text-decoration: none;
border-radius: 2px;
margin: 10px;
transition: background-color .25s;
} }
a:hover { a:hover {
@ -40,10 +34,10 @@
<h1>Abacus</h1> <h1>Abacus</h1>
<h2>The programmer's calculator</h2> <h2>The programmer's calculator</h2>
<div id="buttons"> <div id="buttons">
<a href="https://github.com/DanilaFe/abacus/releases">Download</a> <a class="button inverted" href="https://github.com/DanilaFe/abacus/releases">Download</a>
<a href="{{ "/about" | relative_url }}">Learn More</a> <a class="button inverted" href="{{ "/about" | relative_url }}">Learn More</a>
<a href="https://github.com/DanilaFe/abacus">Contribute</a> <a class="button inverted" href="https://github.com/DanilaFe/abacus">Contribute</a>
<a href="https://github.com/DanilaFe/abacus/wiki">Wiki</a> <a class="button inverted" href="https://github.com/DanilaFe/abacus/wiki">Wiki</a>
</div> </div>
<img src="http://i.imgur.com/Min70QY.png" title="source: imgur.com" /> <img src="http://i.imgur.com/Min70QY.png" title="source: imgur.com" />
</body> </body>

35
docs/assets/css/main.scss
View File

@ -2,15 +2,46 @@
--- ---
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans|Raleway'); @import url('https://fonts.googleapis.com/css?family=Source+Code+Pro|Open+Sans|Raleway');
$background-color: #06e8a4; $background-color: #19d69e;
$code-color: #efefef; $code-color: #efefef;
$accent-color: #00AFE8; $accent-color: #00AFE8;
$clear-color: white; $clear-color: white;
$title-font: "Open Sans"; $title-font: "Open Sans";
$text-font: Raleway; $text-font: Helvetica;
$code-font: "Source Code Pro"; $code-font: "Source Code Pro";
$max-width: 850px; $max-width: 850px;
a {
text-decoration: none;
color: $background-color;
&.button {
background-color: $background-color;
color: $clear-color;
padding: 10px;
text-decoration: none;
border-radius: 2px;
margin: 10px;
transition: background-color .25s;
&:hover {
background-color: $clear-color;
color: $background-color;
}
&.inverted {
background-color: $clear-color;
color: $background-color;
&:hover {
background-color: $background-color;
color: $clear-color;
}
}
}
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font: { font: {
family: $title-font; family: $title-font;