diff --git a/README.md b/README.md index 2f5b1b3..b90afd9 100644 --- a/README.md +++ b/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) diff --git a/css/main-gruvbox.css b/css/main-gruvbox.css new file mode 100644 index 0000000..4e43e42 --- /dev/null +++ b/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; +}