Commit 34fa285f authored by Alexander Kratzsch's avatar Alexander Kratzsch

Shorted intro text, commented solarized colors

parent 7c5eb86f
......@@ -16,7 +16,7 @@
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
//-->
-->
<html>
<head>
<meta charset="utf-8" />
......@@ -24,15 +24,35 @@
<title>SplitIt</title>
<style type="text/css">
body {
color: #586e75;
background-color: #fdf6e3;
color: #586e75; /* base01 */
background-color: #fdf6e3; /* base3 */
max-width: 1000px;
padding: 1rem;
margin: 0px auto;
}
h1, h2, h3, h4, h5, h6 {
color: #b58900;
color: #b58900; /* yellow */
}
em {
color: #2aa198; /* cyan */
}
a {
color: #b58900; /* yellow */
}
a:visited {
color: #cb4b16; /* orange */
}
a:hover {
background-color: #eee8d5; /* base2 */
}
label {
float: right;
}
.error {
......@@ -50,6 +70,7 @@
}
form#persons > .header {
margin-top: 0.5em;
margin-bottom: 0.5em;
order: 1;
}
......@@ -60,7 +81,7 @@
form#persons > .footer {
padding-top: 0.5em;
border-top: 1px solid #586e75;
border-top: 1px solid #586e75; /* base01 */
order: 3;
}
......@@ -70,57 +91,53 @@
input {
margin: 0px;
font-size: 1rem;
line-height: 1.5;
padding: 0.375rem 0px;
font-family: sans-serif;
font-size: 1rem;
font-weight: 400;
border: 1px solid #586e75; /* base01 */
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
}
.button {
.button, a.button:visited {
display: inline-block;
margin: 0px;
text-align: center;
vertical-align: middle;
text-decoration: none;
font-family: sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #fdf6e3;
border 1px solid black;
color: #fdf6e3; /* base3 */
border: 1px solid transparent;
border-radius: 0.25rem;
padding: 0.375rem 0.75rem;
}
.button.submit{
background-color: #268bd2;
border-color: transparent;
background-color: #268bd2; /* blue */
}
.button.add {
background-color: #859900;
border-color: darkgreen;
background-color: #859900; /* green */
}
.button.remove {
background-color: #dc322f;
border-color: darkred;
background-color: #dc322f; /* red */
}
.person {
margin-bottom: 0.5em;
padding-top: 0.5em;
border-top: 1px solid #586e75;
border-top: 1px solid #586e75; /* base01 */
display: flex;
flex-direction: column;
}
label {
float: right;
}
.person > .header {
order: 1;
margin-bottom: 0.25em;
vertical-align: middle;
}
.person .expense {
......@@ -135,8 +152,8 @@
}
#distribution {
color: #657b83;
background-color: #eee8d5;
color: #657b83; /* base00 */
background-color: #eee8d5; /* base2 */
padding: 0.5em;
border-radius: 0.25rem;
max-width: 800px;
......@@ -170,16 +187,20 @@
}
#distribution > table thead th {
border-bottom: 1px solid #657b83;
border-bottom: 1px solid #657b83; /* base00 */
}
#distribution > table tbody td ul {
margin: 0px;
list-style: '☐ ';
list-style: none;
}
#distribution > table tbody td ul li:before {
content: '☐ ';
}
#distribution > table .result-summary td {
border-top: 1px solid #657b83;
border-top: 1px solid #657b83; /* base00 */
font-style: italic;
}
......@@ -202,10 +223,11 @@
<h1>SplitIt</h1>
<p class="noprint">
Split expenses between a group of people.
No data is sent to the server, JavaScript is used to make the calculations on the client.
If <em>localStorage</em> is enabled, performing the calculation of the distribution will persist the input data on your device. Whenever you open the page, it will use the stored values if available, so that you can continue where you left.
The <em>scale factor</em> is by default 100, which will result in accuracy to the 1/100 part of the original unit. If more precision is need, you can increase it.
No data is sent to the server, <em>JavaScript</em> is used to make the calculations on the client.
If <em>localStorage</em> is enabled, performing the calculation will store the input data on your device. Whenever you open the page, it will load the stored values, so that you can continue where you left.
The <em>scale factor</em> is by default 100, which will result in accuracy to the <sup>1</sup>&frasl;<sub>100</sub> part of the original unit. If more precision is need, you can increase it.
<span id="license">Licensed under the <a href="https://www.gnu.org/licenses/gpl-3.0.txt">GPLv3</a>.</span>
<span id="source">You can find the source code <a href="https://git.devrandom.se/klump/splitit">over here</a>.</span>
</p>
<noscript class="error noprint" data-columns="12">
This page relies on JavaScript to perform the calcuations on the client. Without JavaScript this page is unusable.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment