Add support for mobile screen styles

Dockerfile

@@ -0,0 +1,21 @@
+# Use Debian Buster Slim as the base image
+FROM debian:buster-slim
+
+# Update package lists and install necessary packages
+RUN apt-get update && apt-get install -y python3 imagemagick ffmpeg git rsync
+
+# Clear APT package lists
+RUN rm -rf /var/lib/apt/lists/*
+
+# Clone the code and add an alias
+RUN git clone https://github.com/fankangsong/Expose.git /root/gallery
+RUN echo "alias expose=/root/gallery/expose.sh" >> ~/.bashrc
+
+# Create a directory for generated files
+RUN mkdir /root/dist
+
+# Set the working directory
+WORKDIR /root/dist/
+
+# Execute expose.sh script when the container starts
+CMD ["sh", "-c", "/root/gallery/expose.sh"]

readme.md

@@ -8,7 +8,7 @@ If you're into photography, you probably have folders of images and videos like
 
 ![a bunch of images](http://jack.works/exposeimages/folder.jpg)
 
-Expose is a Bash script that turns those images *and videos* into a photoessay similar to [jack.ventures](http://jack.ventures) or [jack.works](http://jack.works) (my personal blogs)
+Expose is a Bash script that turns those images _and videos_ into a photoessay similar to [jack.ventures](http://jack.ventures) or [jack.works](http://jack.works) (my personal blogs)
 
 If you're not a fan of that look, a [Medium-style theme](http://jack.ventures/sample/inner-mongolia) is included
 
@@ -20,16 +20,16 @@ The only dependency is Imagemagick. For videos FFmpeg is also required.
 
 Download the repo and alias the script
 
-	alias expose=/script/location/expose.sh
+    alias expose=/script/location/expose.sh
 
 for permanent use add this line to your ~/.profiles, ~/.bashrc etc depending on system
 
 ### Basic usage
 
-	cd ~/folderofimages
-	expose
+    cd ~/folderofimages
+    expose
 
-The script operates on your current working directory, and outputs a _site directory.
+The script operates on your current working directory, and outputs a \_site directory.
 
 ### Configuration
 
@@ -45,11 +45,11 @@ backgroundcolor="#ffffff"
 
 ### Flags
 
-	expose -d
+    expose -d
 
 The -d flag enables draft mode, where only a single low resolution is encoded. This can be used for a quick preview or for layout purposes.
 
-Generated images and videos are not overwritten, to do a completely clean build delete the existing _site directory first.
+Generated images and videos are not overwritten, to do a completely clean build delete the existing \_site directory first.
 
 ### Adding text
 
@@ -67,7 +67,7 @@ You can put images in folders to organize them. The folders can be nested any nu
 
 To arbitrarily order folders, add a numerical prefix to the folder name. Any numerical prefixes are stripped from the url.
 
-Any folders, images or videos with an "_" prefix are ignored and excluded from the build.
+Any folders, images or videos with an "\_" prefix are ignored and excluded from the build.
 
 ![folders](http://jack.works/exposeimages/folders.jpg)
 
@@ -77,36 +77,36 @@ YAML in the text file is read and made available to the theme. The variables dep
 
 ### Theme-1 specific options
 
-	---
-	top: 30
-	left: 5
-	width: 30
-	height: 20
-	textcolor: #ffffff
-	---
+    ---
+    top: 30
+    left: 5
+    width: 30
+    height: 20
+    textcolor: #ffffff
+    ---
 
 ![content dimensions](http://jack.works/exposeimages/dimensionvariables.jpg)
 
 The units are in percentages
 
-	---
-	top: 12
-	left: 50
-	width: 40
-	height: 50
-	polygon:[{"x":5, "y":0},{"x":100, "y":0},{"x":100, "y":100},{"x":7, "y":55}, {"x":0, "y":16}]
-	textcolor: #ff9518
-	---
+    ---
+    top: 12
+    left: 50
+    width: 40
+    height: 50
+    polygon:[{"x":5, "y":0},{"x":100, "y":0},{"x":100, "y":100},{"x":7, "y":55}, {"x":0, "y":16}]
+    textcolor: #ff9518
+    ---
 
 Use a polygon to wrap text around shapes. The polygon is defined by 3 or more points in a JSON blob. Units are again in percentages.
 
 ![content polygon](http://jack.works/exposeimages/polygon2.jpg)
 
 ### Theme-2 specific options
 
-	---
-	width: 32.5
-	---
+    ---
+    width: 32.5
+    ---
 
 In theme-2 the width variable acts on the image rather than the content. You can use this to tile images in a row:
 
@@ -122,7 +122,7 @@ CSS classes can be passed to the template via the "class" property. eg: use `cla
 
 If you want certain variables to apply to an entire gallery, place a metadata.txt (this is configurable) file in the gallery directory. eg. in metadata.txt:
 
-	width: 19
+    width: 19
 
 ![image grid](http://jack.works/exposeimages/grid.jpg)
 
@@ -134,15 +134,15 @@ This sets all image widths to form a grid. Metadata file parameters are override
 
 Since we're using FFMpeg for video, we can leverage its filter framework for quick effects. This also saves a re-encode from a video editor workflow. Not all the FFmpeg options are applicable, but here are a few I found useful:
 
-	---
-	video-options: -ss 10 -t 5
-	---
+    ---
+    video-options: -ss 10 -t 5
+    ---
 
 This will cut the video 10 seconds from the start, with a duration of 5 seconds.
 
-	---
-	video-filters: lut3d=file=fuji3510.cube
-	---
+    ---
+    video-filters: lut3d=file=fuji3510.cube
+    ---
 
 If you're like me and shoot video in log profile, doing post work can be a pain. I like to globally apply a [film print emulation LUT](http://juanmelara.com.au/print-film-emulation-luts-for-download/) for a consistent look. Note that FFmpeg will look for the LUT file in the working directory you started the script in.
 FFmpeg does not support .look LUTs, so you'll have to convert them to one of .cube .3dl .dat or .m3d
@@ -151,9 +151,9 @@ FFmpeg does not support .look LUTs, so you'll have to convert them to one of .cu
 
 Here I use a nice low-contrast LUT I [found online](http://caseywilsondp.com/2015/03/25/a7s-slog2-rec709-lut/) with excellent highlight rolloff for a cinematic look.
 
-	---
-	video-filters: deshake,unsharp=6:6:3,lutyuv="u=128:v=128"
-	---
+    ---
+    video-filters: deshake,unsharp=6:6:3,lutyuv="u=128:v=128"
+    ---
 
 Applies stabilization to the video and a slight sharpen filter, then converts to grayscale. Separate filters with commas.
 
@@ -165,27 +165,27 @@ Similar to videos, we can leverage the image editing features of Imagemagick.
 
 Things like cropping and color correction are very visual operations that are hard to do in command line. Most people would shoot in RAW and export as jpeg anyways, so a lot of ImageMagick's CLI options won't be very useful. However, it is very handy for non-destructively applying effects across an entire gallery, eg:
 
-	---
-	image-options: watermark.png -gravity SouthEast -geometry +50+50 -composite
-	---
+    ---
+    image-options: watermark.png -gravity SouthEast -geometry +50+50 -composite
+    ---
 
 You can use this to apply a watermark on the bottom right corner, with a 50 pixel margin from the edge.
 
-	---
-	image-options: -sharpen 0x1.5
-	---
+    ---
+    image-options: -sharpen 0x1.5
+    ---
 
 Sharpens the image with a 1.5 pixel radius
 
-	---
-	image-options: -hald-clut transform.png
-	---
+    ---
+    image-options: -hald-clut transform.png
+    ---
 
 Imagemagick does not read LUTs natively, but will accept a Hald color lookup image. This image can be created in photoshop or other graphics package by applying your LUT to the [Hald identity CLUT image](http://www.quelsolaar.com/technology/clut.html)
 
-	---
-	image-options: -colorspace Gray -sigmoidal-contrast 5,50%
-	---
+    ---
+    image-options: -colorspace Gray -sigmoidal-contrast 5,50%
+    ---
 
 Convert to a black-and-white image. Typically you would want to enhance contrast as well, which can be done by the sigmoidal contrast modifier. The first number controls contrast intensity.
 
@@ -218,10 +218,10 @@ If the two built-in themes aren't your thing, you can create a new theme. There
 
 **post-template.html** contains the html fragment for each individual image. It has access to the following built-in variables:
 
-- {{imageurl}} - url of the *directory* which contains the image/video resources, relative to the current html file.
-	- For images, this folder will contain all the scaled versions of the images, where the file name is simply the width of the image - eg. 640.jpg
-	- For videos, this folder will contain scaled videos for each resolution *and* video codec. The naming convention here is size-codec.extension - eg. 640-h264.mp4
-	- For videos, this folder will additionally contain scaled images in the same nomenclature (eg. 640.jpg) to be used as posters prior to video load
+- {{imageurl}} - url of the _directory_ which contains the image/video resources, relative to the current html file.
+  - For images, this folder will contain all the scaled versions of the images, where the file name is simply the width of the image - eg. 640.jpg
+  - For videos, this folder will contain scaled videos for each resolution _and_ video codec. The naming convention here is size-codec.extension - eg. 640-h264.mp4
+  - For videos, this folder will additionally contain scaled images in the same nomenclature (eg. 640.jpg) to be used as posters prior to video load
 - {{imagewidth}} - maximum width that the source image can be downscaled to
 - {{imageheight}} - maximum height, based on aspect ratio and max width
 - {{type}} - the type of media to display, this is a string that can either be "image" or "video"
@@ -230,22 +230,29 @@ If the two built-in themes aren't your thing, you can create a new theme. There
 
 in addition to these, any variables specified in the YAML metadata of the post will also be available to the post template, eg:
 
-	---
-	mycustomvar: foo
-	---
+    ---
+    mycustomvar: foo
+    ---
 
 this will cause {{mycustomvar}} to be replaced by "foo", in this particular post
 
 #### Additional notes:
 
 Specify default values, in case of unset template variables in the form {{foo:bar}} eg:
 
-	{{width:50}}
+    {{width:50}}
 
 will set width to 50 if no specific value has been assigned to it by the time page generation has finished.
 
 Any unused {{xxx}} variables that did not have defaults are removed from the generated page.
 
-Any non-template files (css, images, javascript) in the theme directory are simply copied into the _site directory.
+Any non-template files (css, images, javascript) in the theme directory are simply copied into the \_site directory.
 
 To avoid additional dependencies, the YAML parser and template engine is simply a sed regex. This means that YAML metadata must take the form of simple key:value pairs, and more complex liquid template syntax are not available.
+
+#### Docker
+
+```
+docker run -it -v /root/gallery/test:/root/dist fankangsong/expose:0.0.1
+
+```

theme1/global.css

@@ -667,3 +667,75 @@ display: inline-block;
 height: 10px;
 min-width: 1px;
 }
+
+
+@media (max-width: 768px) {
+	#sidebar {
+		position: static;
+		width: 100%;
+		height: auto;
+		font-size: 16px;
+}
+
+#profile {
+		display: block;
+		float: none;
+		margin: 20px auto 0;
+}
+
+#profile img {
+		opacity: 1;
+}
+
+.foreground, .background {
+		position: static;
+		width: 100%;
+		height: auto;
+}
+
+#sidebar h1 {
+		float: none;
+		padding: 20px 0;
+		width: auto;
+		text-align: center;
+		font-size: 20px;
+		font-weight: bold;
+		color: #fff;
+}
+
+#nav-wrapper {
+	width: 100vw;
+	width: 100vw;
+		overflow-y: hidden;
+		overflow-x: auto;
+}
+
+#nav {
+		padding: 0 0 10px 0;
+		float: none;
+		text-align: center;
+}
+
+#nav li {
+		text-align: center;
+		display: inline-block;
+}
+
+#nav li a {
+		display: block;
+		padding: 10px;
+}
+
+#control, #marker {
+		display: none;
+}
+
+#main {
+	padding: 0;
+	min-width: auto;
+	min-height: auto;
+	overflow: auto;
+	position: relative;
+}
+}
+

theme1/template.html

@@ -3,6 +3,7 @@
 	<head>
 		<meta http-equiv="X-UA-Compatible" content="IE=Edge"/> 
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
 		<title>{{sitetitle}} - {{gallerytitle}}</title>
 		<link href='https://fonts.googleapis.com/css?family=Lato:300,100' rel='stylesheet' type='text/css' />