hack.less gallery wip

Rakefile

@@ -141,8 +141,13 @@ end
 # publish
 #
 desc "publish"
-task :publish do
-  sh "./upload.ion"
+task :publish => [:all] do
+  sh "./preview.ion"
+end
+
+desc "preview"
+task :preview => [:all] do
+  sh "./preview.ion"
 end
 
 

content/art/graffiti-wallpapers/index.md

@@ -5,5 +5,5 @@ date: 2021-08-27
 
 Hier meine bilder
 
-{{< wallpaper-gallery >}}
+{{< wallpaper-gallery class="iphone-overlay" >}}
 

layouts/shortcodes/wallpaper-gallery.html

@@ -1,9 +1,10 @@
+{{ $class := .Get "class" }}
 {{ with .Page.Resources.ByType "image" }}
-<div class="flexbox box-size-third">
+<div class="flexbox box-size-third {{ $class }}">
     {{ range . }}
     <div class="flexitem">
         {{- $image := .Resize "100x" -}}
-        <img src="{{ $image.RelPermalink }}" width="100%" >
+        <img src="{{ $image.RelPermalink }}">
     </div>
     {{ end }}
 </div>

preview.ion

@@ -0,0 +1,29 @@
+#!/usr/bin/env ion
+
+set -e
+
+let server      = sputnik.private
+let server_path = /srv/www/tech_preview
+let syncfolder  = sync
+
+echo
+echo "create page"
+echo
+hugo
+
+echo
+echo "copy stuff"
+echo
+rsync \
+  --recursive \
+  --compress \
+  --checksum \
+  --verbose \
+  --human-readable \
+  --partial --progress \
+  --protect-args \
+  --delete-after \
+  public/ $server:$server_path/
+
+
+

src/lessc/page/custom-iphone.less

@@ -0,0 +1,23 @@
+.flexbox.iphone-overlay {
+
+  &.box-size-third {
+    .flexitem {
+      margin: 1%;
+      flex: 0 0 31%;
+    }
+  }
+
+  &.box-size-half {
+    .flexitem {
+      margin: 1%;
+      flex: 0 0 49%;
+    }
+  }
+
+  img {
+    border-radius: 20px;
+    width: 100%;
+  }
+
+
+}

src/lessc/page/main.less

@@ -10,6 +10,8 @@
 @import "main-listing.less";
 @import "chroma-highlighting-syntax.less";
 
+@import "custom-iphone.less";
+
 // left and right for notes and warning and and code blocks
 @special-info-padding-side: 0.5em;