1
0
Fork 0

Start footer and tweak even more xslt / css

I'm so undecided and such a perfectionist when it comes to web page
design :D
This commit is contained in:
Starbeamrainbowlabs 2016-07-17 21:38:31 +01:00
parent 442db404f9
commit e551dc274f
5 changed files with 31 additions and 16 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="106" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="106" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h51v20H0z"/><path fill="#007ec6" d="M51 0h55v20H51z"/><path fill="url(#b)" d="M0 0h106v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="25.5" y="15" fill="#010101" fill-opacity=".3">License</text><text x="25.5" y="14">License</text><text x="77.5" y="15" fill="#010101" fill-opacity=".3">MPL-2.0</text><text x="77.5" y="14">MPL-2.0</text></g></svg>

After

Width:  |  Height:  |  Size: 746 B

View File

@ -6,18 +6,19 @@
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><xsl:value-of select="/DirectoryListing/CurrentDirectory" /> - GalleryShare</title>
<title><xsl:value-of select="/DirectoryListing/CurrentDirectory" /> <xsl:text disable-output-escaping="yes"><![CDATA[ &#x95; ]]></xsl:text> GalleryShare</title>
</head>
<body>
<h1><xsl:value-of select="/DirectoryListing/CurrentDirectory" /> - GalleryShare</h1>
<h1><xsl:value-of select="/DirectoryListing/CurrentDirectory" /></h1>
<main>
<xsl:apply-templates select="//ListingEntry" />
</main>
<!-- <footer>
<footer>
Built by Starbeamrainbowlabs
</footer> -->
<img src="/!images/Badge-License.svg" />
</footer>
<link rel="stylesheet" href="/!Theme.css" />
</body>

View File

@ -5,7 +5,7 @@
--transparent-checkerboard-size: 2.5em;
--checkerboard-bg: rgba(200, 200, 200, 0.2);
--figcaption-bg-size: 13em;
--figcaption-bg-position-y: 0.9em;
--figcaption-bg-position-y: 0.7em;
}
html, body { font-size: 100%; }
@ -15,7 +15,7 @@ body
font-family: sans-serif;
background: url('/!Background-Texture.png'),
background: url('/!images/Background-Texture.png'),
/* Adapted from http://www.webcore-it.com/colorful-background */
linear-gradient(45deg, hsla(30, 92%, 46%, 1) 0%, hsla(30, 92%, 46%, 0) 70%),
linear-gradient(135deg, hsla(330, 96%, 50%, 1) 10%, hsla(330, 96%, 50%, 0) 80%),
@ -40,7 +40,7 @@ main
text-align: center;
line-height: 0.8em;
background: rgba(75, 75, 75, 0.4);
/*background: rgba(75, 75, 75, 0.4);*/
/*background: rgba(125, 125, 125, 0.4);*/
}
@ -77,19 +77,30 @@ figcaption
text-align: center;
line-height: 1em;
color: rgba(255, 255, 255, 0.3);
color: white;
background:
url('https://www.transparenttextures.com/patterns/lined-paper-2.png') 0 var(--figcaption-bg-position-y),
rgba(10, 10, 10, 0.2);
background-image: url('/!images/Background-Caption.png');
background-color: rgba(10, 10, 10, 0.2);
background-size: var(--figcaption-bg-size) var(--figcaption-bg-size);
background-position: 0 var(--figcaption-bg-position-y);
transition: all 0.25s;
}
figure:hover figcaption
{
background:
url('https://www.transparenttextures.com/patterns/lined-paper-2.png') 0 var(--figcaption-bg-position-y),
rgb(25, 25, 25);
background-size: var(--figcaption-bg-size) var(--figcaption-bg-size);
color: white;
background-color: rgb(25, 25, 25);
}
footer
{
padding: 1em;
text-align: center;
color: white;
}
footer img
{
vertical-align: middle;
}

View File

@ -17,7 +17,9 @@ namespace GalleryShare.RequestRouter
{
{ "Transform-DirListing.xslt", new SpecialFileEntry(@"GalleryShare.Embed.DirectoryListing.xslt", "text/xsl") },
{ "Theme.css", new SpecialFileEntry(@"GalleryShare.Embed.Theme.css", "text/css") },
{ "Background-Texture.png", new SpecialFileEntry(@"GalleryShare.Embed.Background-Texture.png", "image/png") }
{ "images/Background-Texture.png", new SpecialFileEntry(@"GalleryShare.Embed.Background-Texture.png", "image/png") },
{ "images/Background-Caption.png", new SpecialFileEntry(@"GalleryShare.Embed.Background-Caption.png", "image/png") },
{ "images/Badge-License.svg", new SpecialFileEntry(@"GalleryShare.Embed.Badge-License.svg", "image/svg+xml") }
};
public RouteSpecialFile()