mirror of
https://github.com/oupala/apaxy.git
synced 2025-08-21 16:12:03 +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