Merge pull request #4 from RoToRx88/gruvbox-theme

Add gruvbox stylesheet

README.md

@@ -40,3 +40,8 @@ shall be changed to
 ```
 
 And the mounting point is now `/home/myuser/files-to-serve/` instead of `/opt/www/files/`.
+
+## Gruvbox theme
+
+A gruvbox theme is present in the css. You can use it by editing line 12 of the index.html. Simply change the link from `css/main.css` to `css/main-gruvbox.css`
+This theme is heavily inspired from iTerm2 color scheme that can be found here: [link](https://github.com/herrbischoff/iterm2-gruvbox)

css/main-gruvbox.css

@@ -0,0 +1,124 @@
+body {
+    background-color: #252525;
+}
+
+body > .container:first-child {
+    margin: 3rem auto 0;
+}
+
+h1 {
+    color: #9dd08e;
+}
+
+a {
+    text-decoration: none;
+    color: #549699;
+}
+
+a.file-name {
+    color: #ecdbb2;
+}
+
+
+.list-sort {
+    background: #413e3d;
+    border-radius: 1rem;
+    padding: 1.5rem 2rem .5rem;
+    color: #ecdbb2;
+}
+
+input[name="sort"] {
+    accent-color: #fe6142;
+}
+
+.list-sort label {
+    display: inline-block;
+    margin: 0 1rem 0 0;
+}
+
+.file-list {
+    list-style: none;
+}
+
+.file-list li {
+    margin: 1rem 0;
+}
+
+.file-list .file-name {
+    line-height: 4rem;
+    display: inline-block;
+    position: relative;
+    padding-left: 4rem;
+}
+
+.file-list .file-name::before {
+    background: no-repeat center center;
+    background-size: contain;
+    width: 3rem;
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+}
+
+.file-list .directory .file-name::before {
+    background-image: url(../image/directory.png);
+
+}
+
+.file-list .file .file-name::before {
+    background-image: url(../image/file.png);
+}
+
+.file-list .other .file-name::before {
+    background-image: url(../image/other.png);
+}
+
+.file-list .parent .file-name::before {
+    background-image: url(../image/parent.png);
+}
+
+.file-list .file-link {
+
+}
+
+.file-list .file-date {
+    padding: .25rem .5rem;
+    background: #549699;
+    border-radius: .5rem;
+    font-size: 70%;
+    margin: 0 .5rem;
+    color: #ecdbb2;
+}
+
+.file-list .directory .file-date {
+}
+
+.file-list .parent .file-date {
+    display: none;
+}
+
+.file-list .file-size {
+    padding: .25rem .5rem;
+    background: #79aa7d;
+    border-radius: .5rem;
+    font-size: 70%;
+    margin: 0 .5rem;
+    color: #ecdbb2;
+}
+
+.file-list .other .file-size,
+.file-list .parent .file-size,
+.file-list .directory .file-size {
+    display: none;
+}
+
+footer {
+    text-align: center;
+}
+
+footer small + small {
+    margin-left: 2rem;
+}