hack.less gallery wip

config.yaml

@@ -42,7 +42,7 @@ menu:
       title: Articles mostly about computer stuff
 
     - name:  "art"
-      url: "/art/"
+      url: "/art/graffiti-wallpapers"
       identifier: "art"
       weight: 3
       title: Artistic stuff of mine

content/nixos/new-design.md

@@ -64,6 +64,18 @@ card body
 {{% flexitem %}}{{% card text="6/2" /%}}{{% /flexitem %}}
 {{< /flexbox-half >}}
 
+
+### flexbox half
+
+{{< flexbox-half >}}
+{{% flexitem %}}{{% card header="header" text="1/2" /%}}{{% /flexitem %}}
+{{% flexitem %}}{{% card header="header" text="2/2" /%}}{{% /flexitem %}}
+{{% flexitem %}}{{% card header="header" text="3/2" /%}}{{% /flexitem %}}
+{{% flexitem %}}{{% card header="header" text="4/2" /%}}{{% /flexitem  %}}
+{{% flexitem %}}{{% card header="header" text="5/2" /%}}{{% /flexitem  %}}
+{{% flexitem %}}{{% card header="header" text="6/2" /%}}{{% /flexitem %}}
+{{< /flexbox-half >}}
+
 ### flexbox thrid
 
 {{< flexbox-third >}}

layouts/404.html

@@ -0,0 +1 @@
+yolo 404

layouts/_default/baseof.html

@@ -24,4 +24,4 @@ empty
 
 </body>
 
-</html>
+</html>

layouts/_default/list.html

@@ -2,19 +2,17 @@
 <div class="content">
     <h1>{{ .Title }}</h1>
     {{ .Content }}
-
-    <ul class="pages-list">
-        {{ range (where site.RegularPages "Type" "in" site.Params.mainSections).ByDate.Reverse }}
-        <li>
-            <a href="{{.URL}}">
+    <div class="flexbox box-size-third">
+        {{ range .Pages.ByDate.Reverse }}
+        <a href="{{.RelPermalink}}" class="flexitem card">
+            <div class="card-header">
                 {{ .Title }}
-                <p>
-                    {{ .Param "summary" }}
-                </p>
-            </a>
-        </li>
+            </div>
+            <div class="card-body">
+                {{ .Param "summary" }}
+            </div>
+        </a>
         {{ end }}
-    </ul>
-
+    </div>
 </div>
 {{ end }}

layouts/shortcodes/card.html

@@ -1,5 +1,5 @@
 <div class="card">
-{{ with .Get "header" }}<header class="card-header">{{ . }}</header>{{ end }}
+{{ with .Get "header" }}<div class="card-header">{{ . }}</div>{{ end }}
 <div class="card-body">
 {{ with .Get "text" }}{{ . }}{{ end }}
 {{ .Inner }}

layouts/shortcodes/wallpaper-gallery.html

@@ -3,8 +3,13 @@
 <div class="flexbox box-size-third {{ $class }}">
     {{ range . }}
     <div class="flexitem">
-        {{- $image := .Resize "100x" -}}
-        <img src="{{ $image.RelPermalink }}">
+        {{- $original := . -}}
+        {{- $image := .Resize "300x" -}}
+        <a download="{{ $original.Name }}" href="{{ $original.RelPermalink }}" title="ImageName">
+            <img alt="Image" src="{{ $image.RelPermalink }}">
+        </a>
+        <div class="time">13:37</div>
+        <div class="label">Sunday, 1 January</div>
     </div>
     {{ end }}
 </div>

layouts/slides/list.html

@@ -1,20 +0,0 @@
-{{ define "main" }}
-  <div class="content">
-
-    {{ .Content }}
-
-    <ul class="pages-list">
-      {{ range .Pages.ByDate.Reverse }}
-        <li class="page-list-item">
-          <a href="{{.URL}}">
-            <h3> {{ .Title }} </h3>
-            <p>
-              {{ .Param "summary" }}
-            </p>
-          </a> 
-        </li>
-      {{ end }}
-    </ul>
-
-  </div>
-{{ end }}

src/lessc/page/color.less

@@ -32,4 +32,7 @@
 // todo
 @color-pages-list: rgb(159, 197, 159);
 @color-pages-list-border: rgb(15, 49, 15);
-@color-pages-list-text: rgb(0, 0, 0);
+@color-pages-list-text: rgb(0, 0, 0);
+
+
+@color-card-border: @gb-lm-bg2;

src/lessc/page/custom-iphone.less

@@ -2,6 +2,7 @@
 
   &.box-size-third {
     .flexitem {
+      position: relative;
       margin: 1%;
       flex: 0 0 31%;
     }
@@ -9,15 +10,41 @@
 
   &.box-size-half {
     .flexitem {
+      position: relative;
       margin: 1%;
       flex: 0 0 49%;
     }
   }
 
+  a {
+    border: 0px;
+
+    &:hover {
+      color: inherit;
+      background-color: inherit;
+    }
+  }
+
   img {
     border-radius: 20px;
     width: 100%;
   }
 
+  .label {
+    color: white;
+    font-size: small;
+    position: absolute;
+    top: 25%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 
+  .time {
+    color: white;
+    font-size: xxx-large;
+    position: absolute;
+    top: 18%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
 }

src/lessc/page/main-hack-flex.less

@@ -3,18 +3,23 @@
 
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
 
   &.box-size-half {
     .flexitem {
-      -ms-flex: 0 0 50%;
-      flex: 0 0 50%
+      -ms-flex: 1 0 45%;
+      flex: 1 0 45%
     }
   }
 
   &.box-size-third {
     .flexitem {
-      -ms-flex: 0 0 33.3%;
-      flex: 0 0 33.3%
+      -ms-flex: 1 0 30%;
+      flex: 1 0 30%
     }
   }
+
+  .flexitem{
+    flex-grow: 1;
+  }
 }

src/lessc/page/main-hack.less

@@ -105,21 +105,26 @@ a:hover {
 
 // cards
 .card {
-  border: 1px solid #ccc;
+  border: 1px solid @color-card-border;
   padding: 0px;
   margin: 0px;
   text-align: center;
 
   .card-header {
-    color: #333;
     text-align: center;
-    background-color: #ddd;
+    border-bottom: 1px solid @color-card-border;
+    margin-top: 7px;
+    margin-bottom: 7px;
+    padding-left: 4px;
+    padding-right: 4px;
   }
 
   .card-body{
     text-align: center;
     margin-top: 4px;
     margin-bottom: 4px;
+    padding-left: 4px;
+    padding-right: 4px;
   }
 }
 

src/lessc/page/main-listing.less

@@ -1,37 +1 @@
 
-// listings of articles
-ul.pages-list{
-  list-style-type: none;
-  margin-left: .0em;
-  padding-left: .0em;
-
-  li {
-    a {
-      padding-left: 1.3em;
-      padding-right: 1.0em;
-      padding-top: 1.0em;
-      padding-bottom: 1.0em;
-
-      margin-top: 0.5em;
-      margin-bottom: 0em;
-      background-color: @color-pages-list;
-
-      border-left: 3px solid @color-pages-list-border;
-
-      display: block;
-      text-align: left;
-      text-decoration: none;
-      color: @color-pages-list-text;
-
-      h1,h2,h3,h4,h5 {
-        margin-top: 10px;
-        margin-bottom: 0px;
-        text-decoration: underline;
-      }
-
-      p {
-        margin-top: 10px;
-      }
-    }
-  }
-}

static/nixos/tinc/2subnets.nwdiag

@@ -1,21 +0,0 @@
-
-nwdiag {
-
-  internet [shape = cloud];
-
-  internet -- Gibson [address = "my.awesome.dns.com"]
-
-  network private {
-      address = "10.1.1.0/24";
-
-      Gibson    [address = "10.1.1.1"];
-      Hackbardt [address = "10.1.1.2"];
-      HAL       [address = "10.1.1.3"];
-  }
-
-  network "private (subnet)" {
-      Hackbardt [address = "10.2.2.0/24"];
-      HAL       [address = "10.2.3.0/24"];
-  }
-
-}

static/nixos/tinc/3computers.nwdiag

@@ -1,16 +0,0 @@
-
-nwdiag {
-
-  internet [shape = cloud];
-
-  internet -- Gibson [address = "my.awesome.dns.com"]
-
-  network private {
-      address = "10.1.1.0/24";
-
-      Gibson    [address = "10.1.1.1"];
-      Hackbardt [address = "10.1.1.2"];
-      HAL       [address = "10.1.1.3"];
-  }
-
-}