sbrl-github/GalleryShare
1
0
Fork 0
mirror of https://gitlab.com/sbrl/GalleryShare.git synced 2018-06-12 22:45:16 +00:00
Code Activity

Start footer and tweak even more xslt / css

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
GalleryShare/Embed/Background-Caption.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 50 KiB

1
GalleryShare/Embed/Badge-License.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 746 B

9
GalleryShare/Embed/DirectoryListing.xslt
View file

@ -6,18 +6,19 @@
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1" /> <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> </head>
<body> <body>
<h1><xsl:value-of select="/DirectoryListing/CurrentDirectory" /> - GalleryShare</h1> <h1><xsl:value-of select="/DirectoryListing/CurrentDirectory" /></h1>
<main> <main>
<xsl:apply-templates select="//ListingEntry" /> <xsl:apply-templates select="//ListingEntry" />
</main> </main>
<!-- <footer> <footer>
Built by Starbeamrainbowlabs Built by Starbeamrainbowlabs
</footer> --> <img src="/!images/Badge-License.svg" />
</footer>
<link rel="stylesheet" href="/!Theme.css" /> <link rel="stylesheet" href="/!Theme.css" />
</body> </body>

33
GalleryShare/Embed/Theme.css
View file

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

4
GalleryShare/RequestRouter/RouteSpecialFile.cs
View file

@ -17,7 +17,9 @@ namespace GalleryShare.RequestRouter
{ {
{ "Transform-DirListing.xslt", new SpecialFileEntry(@"GalleryShare.Embed.DirectoryListing.xslt", "text/xsl") }, { "Transform-DirListing.xslt", new SpecialFileEntry(@"GalleryShare.Embed.DirectoryListing.xslt", "text/xsl") },
{ "Theme.css", new SpecialFileEntry(@"GalleryShare.Embed.Theme.css", "text/css") }, { "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() public RouteSpecialFile()