mirror of
https://github.com/oupala/apaxy.git
synced 2025-08-21 12:32:13 +02:00
initial gh-pages commit
This commit is contained in:
Adam Whitcroft
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
.DS_Store
|
||||
BIN
img/apaxy.png
Normal file
BIN
img/apaxy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
img/birdy.png
Normal file
BIN
img/birdy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
img/bttn-bg.png
Normal file
BIN
img/bttn-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
img/example.png
Normal file
BIN
img/example.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
img/icon.png
Normal file
BIN
img/icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 985 B |
64
index.html
Normal file
64
index.html
Normal file
@@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Apaxy: A simple, customisable Apache directory theme</title>
|
||||
<meta name="description" content="Apaxy: A simple, customisable Apache directory theme.">
|
||||
<link rel="shortcut icon" href="img/icon.png">
|
||||
<!-- Stylesheets -->
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400' rel='stylesheet' type='text/css'>
|
||||
<!-- Google -->
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
||||
|
||||
ga('create', 'UA-18418896-7', 'auto');
|
||||
ga('send', 'pageview');
|
||||
</script>
|
||||
</head>
|
||||
<body class="fadeDown">
|
||||
|
||||
<div class="island header">
|
||||
<img class="fadeDown" src="img/apaxy.png" alt="Apaxy logo" width="40"/>
|
||||
<h1>This is Apaxy.</h1>
|
||||
</div><!--/.header-->
|
||||
|
||||
<div class="example">
|
||||
<img src="img/example.png" alt="Apaxy example" />
|
||||
</div><!--/.example-->
|
||||
|
||||
<div class="island content">
|
||||
<p>Apaxy is a customisable theme built to enhance the experience of browsing web directories. It uses the <code>mod_autoindex</code> Apache module—and some CSS—to override the default style of a directory listing.</p>
|
||||
<p>View the <a href="https://github.com/AdamWhitcroft/package-Apaxy">GitHub repo</a>.</p>
|
||||
<h2>Features</h2>
|
||||
<p>Apaxy may be basic, but it gives you a great deal of creative freedom when styling your directory.</p>
|
||||
<ul>
|
||||
<li>Style your directory listing with CSS.</li>
|
||||
<li>Make it pop with Javascript or jQuery.</li>
|
||||
<li>Add welcome messages, download instructions or copyright notices.</li>
|
||||
<li>Add custom mime type icons (requires editing the <code>.htaccess</code> file).</li>
|
||||
</ul>
|
||||
<p><small><span>!</span>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.</small></p>
|
||||
<h2>Installation</h2>
|
||||
<p>Apaxy is super easy to install, simply follow the instructions in the in the <a href="https://github.com/AdamWhitcroft/package-Apaxy">GitHub repo</a> or in <code>README.md</code> found in the download package.</p>
|
||||
</div><!--/.content-->
|
||||
|
||||
<div class="tweetThis">
|
||||
<a data-tip="Tweet this?" class="bttn tweet" href="http://twitter.com/share?url=http://adamwhitcroft.com/apaxy/&text=Apaxy: A simple, customisable Apache directory theme by @adamwhitcroft:" id="tweet-button"><img src="img/birdy.png" width="50" height="50" /></a>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>Apaxy by <a href="https://twitter.com/adamwhitcroft">Adam Whitcroft</a>.</p>
|
||||
</div><!--/.footer-->
|
||||
<script type="text/javascript">
|
||||
var tweetButton = document.getElementById('tweet-button');
|
||||
tweetButton.onclick = function(){
|
||||
ga('send', 'event', 'Tweet button', 'Tweet about Apaxy');
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
341
style.css
Normal file
341
style.css
Normal file
@@ -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;
|
||||
}*/
|
||||
Reference in New Issue
Block a user