DanilaFe
/
Abacus
mirror of https://github.com/DanilaFe/abacus
1
0
Fork 0
Code Issues Releases Wiki Activity

Move button styling into scss.

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 {
background-color: white;
color: #06e8a4;
padding: 10px;
text-decoration: none;
border-radius: 2px;
margin: 10px;
transition: background-color .25s;
}
a:hover {
@ -40,10 +34,10 @@
<h1>Abacus</h1>
<h2>The programmer's calculator</h2>
<div id="buttons">
<a href="https://github.com/DanilaFe/abacus/releases">Download</a>
<a href="{{ "/about" | relative_url }}">Learn More</a>
<a 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/releases">Download</a>
<a class="button inverted" href="{{ "/about" | relative_url }}">Learn More</a>
<a class="button inverted" href="https://github.com/DanilaFe/abacus">Contribute</a>
<a class="button inverted" href="https://github.com/DanilaFe/abacus/wiki">Wiki</a>
</div>
<img src="http://i.imgur.com/Min70QY.png" title="source: imgur.com" />
</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');
$background-color: #06e8a4;
$background-color: #19d69e;
$code-color: #efefef;
$accent-color: #00AFE8;
$clear-color: white;
$title-font: "Open Sans";
$text-font: Raleway;
$text-font: Helvetica;
$code-font: "Source Code Pro";
$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 {
font: {
family: $title-font;