Apaxy: A simple, customisable Apache directory theme

commit 9de7cd750865fc90e8872e52e9ab36041b796bef Author: Adam Whitcroft Date: Tue Nov 15 08:50:53 2016 +0000 initial gh-pages commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e43b0f9 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.DS_Store diff --git a/img/apaxy.png b/img/apaxy.png new file mode 100644 index 0000000..2bef308 Binary files /dev/null and b/img/apaxy.png differ diff --git a/img/birdy.png b/img/birdy.png new file mode 100644 index 0000000..6a81a01 Binary files /dev/null and b/img/birdy.png differ diff --git a/img/bttn-bg.png b/img/bttn-bg.png new file mode 100644 index 0000000..d55f3fc Binary files /dev/null and b/img/bttn-bg.png differ diff --git a/img/example.png b/img/example.png new file mode 100644 index 0000000..57df888 Binary files /dev/null and b/img/example.png differ diff --git a/img/icon.png b/img/icon.png new file mode 100644 index 0000000..702a606 Binary files /dev/null and b/img/icon.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..d88cc52 --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + Apaxy: A simple, customisable Apache directory theme + + + + + + + + + + + + +

+ +

Apaxy is a customisable theme built to enhance the experience of browsing web directories. It uses the mod_autoindex Apache module—and some CSS—to override the default style of a directory listing.

View the GitHub repo.

Features

Apaxy may be basic, but it gives you a great deal of creative freedom when styling your directory.

Style your directory listing with CSS.
Make it pop with Javascript or jQuery.
Add welcome messages, download instructions or copyright notices.
Add custom mime type icons (requires editing the .htaccess file).

!Sadly, visual style is all you can work with. It's not possible to alter the generated table structure of the listing directory with Apaxy.

Installation

Apaxy is super easy to install, simply follow the instructions in the in the GitHub repo or in README.md found in the download package.

+ +

+ + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..a4a853a --- /dev/null +++ b/style.css @@ -0,0 +1,341 @@ +/*//////////////////////////////////////////////// +-------------------------------------------------- +* Apaxy by @adamwhitcroft +* http://adamwhitcroft.com/apaxy/ +-------------------------------------------------- +////////////////////////////////////////////////*/ + +* { + margin:0; + padding:0; + -webkit-box-sizing:border-box; + -moz-box-sizing:border-box; + box-sizing: border-box; +} + +/*//////////////////////////////////////////////// +-------------------------------------------------- +* Base +-------------------------------------------------- +////////////////////////////////////////////////*/ + +html { + min-height:100%; + border:10px solid #ECEEF1; + color:#61666c; + font-weight:400; + font-size:1em; + font-family:'Open Sans', sans-serif; + line-height:2em; +} + +body { + padding:20px; + -webkit-backface-visibility:hidden; +} + +/*//////////////////////////////////////////////// +-------------------------------------------------- +* Type +-------------------------------------------------- +////////////////////////////////////////////////*/ + +h1,h2 { + color:#2a2a2a; + font-weight:400; +} + +h1 { + margin-bottom:1em; +} + +h2 { + margin-bottom:1em; +} + +p { + margin-bottom:1.5em; +} + +small { + font-size:.75em; +} + + small span { + display:inline-block; + margin-right:5px; + width:20px; + height:20px; + border:1px solid #f32236; + -webkit-border-radius:40px; + -moz-border-radius:40px; + -ms-border-radius:40px; + -o-border-radius:40px; + border-radius:40px; + color:#f32236; + text-align:center; + font-weight:bold; + line-height:20px; + } + +a { + color:#f32236; + text-decoration:none; +} + +a:hover { + color:#f37c4c; +} + +ul { + margin:0 0 1.5em 3em; +} + +code,pre { + color:#2a2a2a; + font-family:consolas,monospace; +} + +pre { + overflow:auto; + margin-bottom:1.5em; + padding:1em; + -webkit-border-radius:3px; + -moz-border-radius:3px; + -ms-border-radius:3px; + -o-border-radius:3px; + border-radius:3px; + background:#ECEEF1; + font-size:inherit; +} + +.bttn { + display:inline-block; + margin-top:35px; + padding:.5em 4em; + -webkit-border-radius:3px; + -moz-border-radius:3px; + -ms-border-radius:3px; + -o-border-radius:3px; + border-radius:3px; + border-radius:3px; + background:#f32236 url(img/bttn-bg.png) repeat center left; + color:white; + text-align:center; + -webkit-transition:background-position 4s linear; + -moz-transition:background-position 4s linear; + -ms-transition:background-position 4s linear; + -o-transition:background-position 4s linear; + transition:background-position 4s linear; +} + + .bttn:hover { + background:#f32236 url(img/bttn-bg.png) repeat center right; + text-decoration:none; + } + +.tweetThis { + text-align:center; +} + + .tweetThis .tweet { + padding:0; + width:204px; + } + + .tweetThis img { + display:block; + margin-left:77px; + } + + /* Adapted from https://github.com/AdamWhitcroft/CSS.Tooltips/blob/master/css-tooltips.css */ + + [data-tip] { + position:relative; + } + + [data-tip]:after { + position:absolute; + top:-35px; + left:50%; + z-index:9; + display:none; + margin-left:-102px; + padding:.5em 0; + width:204px; + height:18px; + -webkit-border-radius:3px; + -moz-border-radius:3px; + -ms-border-radius:3px; + -o-border-radius:3px; + border-radius:3px; + background:#ECEEF1; + color:#61666c; + content:attr(data-tip); + font-size: 0.875em; + line-height:18px; + } + + [data-tip]:hover:after { + display:block; + } + + [data-tip]:active:after { + content:"Thanks!"; + } + +/*//////////////////////////////////////////////// +-------------------------------------------------- +* Structure +-------------------------------------------------- +////////////////////////////////////////////////*/ + +.island { + margin:0 auto 1.5em auto; + max-width:800px; +} + +.header { + margin-top:20px; + margin-bottom:20px; + text-align:center; +} + + .header img { + margin-bottom:1em; + } + + .header p { + text-align:left; + } + +.example { + text-align:center; +} + + .example img { + max-width:100%; + } + +.demo { + margin-bottom:1.5em; + padding:1em; + background:#ECEEF1; + text-align:center; +} + + .demo p { + margin:0; + } + +.footer { + padding:2em; + font-size:80%; + text-align:center; +} + + .footer p { + margin:0; + } + +/*//////////////////////////////////////////////// +-------------------------------------------------- +* Animations +-------------------------------------------------- +////////////////////////////////////////////////*/ + +@-webkit-keyframes fadeDown { + 0% { + opacity: 0; + -webkit-transform: translateY(-20px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + } +} + +@-moz-keyframes fadeDown { + 0% { + opacity: 0; + -moz-transform: translateY(-20px); + } + 100% { + opacity: 1; + -moz-transform: translateY(0); + } +} + +@-ms-keyframes fadeDown { + 0% { + opacity: 0; + -ms-transform: translateY(-20px); + } + 100% { + opacity: 1; + -ms-transform: translateY(0); + } +} + +@-o-keyframes fadeDown { + 0% { + opacity: 0; + -o-transform: translateY(-20px); + } + 100% { + opacity: 1; + -o-transform: translateY(0); + } +} + +@keyframes fadeDown { + 0% { + opacity: 0; + transform: translateY(-20px); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.fadeDown { + -webkit-animation:fadeDown 1s ease; + -moz-animation:fadeDown 1s ease; + -ms-animation:fadeDown 1s ease; + -o-animation:fadeDown 1s ease; + animation:fadeDown 1s ease; +} + +@-webkit-keyframes bewton { + 0% {background-position:0 0;} + 100% {background-position:-440px 0;} +} + +@-moz-keyframes bewton { + 0% {background-position:0 0;} + 100% {background-position:-440px 0;} +} + +@-ms-keyframes bewton { + 0% {background-position:0 0;} + 100% {background-position:-440px 0;} +} + +@-o-keyframes bewton { + 0% {background-position:0 0;} + 100% {background-position:-440px 0;} +} + +@keyframes bewton { + 0% {background-position:0 0;} + 100% {background-position:-440px 0;} +} + +/*.bewton:hover { + -webkit-animation: bewton 20s infinite linear; + -moz-animation: bewton 20s infinite linear; + -ms-animation: bewton 20s infinite linear; + -o-animation: bewton 20s infinite linear; + animation: bewton 20s infinite linear; +}*/ \ No newline at end of file

This is Apaxy.

Features

Installation