diff --git a/_layouts/default.html b/_layouts/default.html
index afde408..04cc5b3 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -8,7 +8,7 @@ layout: compress
-
+
{%- if page.title %}
@@ -36,10 +36,16 @@ layout: compress
<meta name="twitter:card" content="summary">
{%- endif -%}
{%- endif %}
+ <!-- Hide site using inline styling until CSS loads -->
<style>
html, body {
visibility: hidden;
}
+ {% if page.wide or layout.wide %}
+ body {
+ max-width: 60em !important;
+ }
+ {% endif %}
</style>
</head>
<body>
@@ -50,19 +56,19 @@ layout: compress
<a href="/projects/">~/projects/</a>
</nav>
{% if page.title %}
- {% if page.date %}
- {% if page._link %}
- <h1>
- <a href="{{ page._link }}">
- {{ page.title }}
- </a>
- </h1>
- {% else %}
- <h1>{{ page.title }}</h1>
- {% endif %}
- {% else %}
- <h1>{{ page.title }}</h1>
- {% endif %}
+{% if page.date %}
+{% if page._link %}
+<h1>
+ <a href="{{ page._link }}">
+ {{ page.title }}
+ </a>
+</h1>
+{% else %}
+<h1>{{ page.title }}</h1>
+{% endif %}
+{% else %}
+<h1>{{ page.title }}</h1>
+{% endif %}
{% endif %}
{% if page.date %}
@@ -78,10 +84,20 @@ layout: compress
</i>
{% endif %}
<article>
-
{{ content }}
-
</article>
<p>
+ {% if page.custom_js %}
+ {% for file in page.custom_js %}
+ <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ file }}"></script>
+ {% endfor %}
+ {% endif %}
+ {% if layout.medium_zoom %}
+ <script src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"
+ integrity="sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM=" crossorigin="anonymous"></script>
+ <script type="text/javascript">
+ mediumZoom('[data-zoomable]', {background: "#0e0e0e"})
+ </script>
+ {% endif %}
</body>
</html>
diff --git a/_layouts/photos.html b/_layouts/photos.html
new file mode 100644
index 0000000..9e97048
--- /dev/null
+++ b/_layouts/photos.html
@@ -0,0 +1,19 @@
+---
+layout: default
+medium_zoom: true
+wide: true
+---
+
+{{ content }}
+
+<div class="media-grid">
+ {% for photo in page.photos %}
+ <figure class="photo">
+ <img
+ data-zoomable
+ loading="lazy"
+ src="{{ site.baseurl }}/assets/img/{{ photo }}.jpg"
+ alt="..."/>
+ </figure>
+ {% endfor %}
+</div>
diff --git a/_sass/main.scss b/_sass/main.scss
index 0bfbc94..b4f8d40 100644
--- a/_sass/main.scss
+++ b/_sass/main.scss
@@ -28,6 +28,8 @@ body {
padding: 0 1em;
font-family: CMU Serif, serif;
line-height: 1.5;
+ background: #0e0e0e;
+ color: white;
}
p, table {
@@ -118,7 +120,7 @@ pre code {
}
a, hr {
- color: black;
+ color: white;
}
hr {
@@ -182,7 +184,7 @@ nav {
}
nav a {
- color: black;
+ color: white;
}
.post_summary {
@@ -231,6 +233,7 @@ nav a {
width: 100%;
}
+// Show site with proper CSS styling
html, body {
visibility: visible !important;
}
\ No newline at end of file
diff --git a/_sass/photos.scss b/_sass/photos.scss
new file mode 100644
index 0000000..2bba5c5
--- /dev/null
+++ b/_sass/photos.scss
@@ -0,0 +1,26 @@
+.media-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
+ grid-column-gap: 20px;
+ grid-row-gap: 60px;
+ align-items: center;
+ justify-content: center;
+}
+
+.photo {
+ position: relative;
+ display: block;
+}
+
+.photo img {
+ display:block;
+ width:100%;
+ height:auto;
+ border-radius:12px
+}
+
+//.photo img[data-zoomable]:hover {
+// transition:transform 60ms linear;
+// transform:scale(1.01);
+// box-shadow:0 6px 12px rgba(0,0,0,.14)
+//}
diff --git a/assets/img/photography/1.jpg b/assets/img/photography/1.jpg
new file mode 100644
index 0000000..8d1fe28
Binary files /dev/null and b/assets/img/photography/1.jpg differ
diff --git a/assets/img/photography/10.jpg b/assets/img/photography/10.jpg
new file mode 100644
index 0000000..c287d1c
Binary files /dev/null and b/assets/img/photography/10.jpg differ
diff --git a/assets/img/photography/11.jpg b/assets/img/photography/11.jpg
new file mode 100644
index 0000000..60386e5
Binary files /dev/null and b/assets/img/photography/11.jpg differ
diff --git a/assets/img/photography/12.jpg b/assets/img/photography/12.jpg
new file mode 100644
index 0000000..72c36ea
Binary files /dev/null and b/assets/img/photography/12.jpg differ
diff --git a/assets/img/photography/13.jpg b/assets/img/photography/13.jpg
new file mode 100644
index 0000000..758863d
Binary files /dev/null and b/assets/img/photography/13.jpg differ
diff --git a/assets/img/photography/14.jpg b/assets/img/photography/14.jpg
new file mode 100644
index 0000000..1c462df
Binary files /dev/null and b/assets/img/photography/14.jpg differ
diff --git a/assets/img/photography/15.jpg b/assets/img/photography/15.jpg
new file mode 100644
index 0000000..fd55df9
Binary files /dev/null and b/assets/img/photography/15.jpg differ
diff --git a/assets/img/photography/2.jpg b/assets/img/photography/2.jpg
new file mode 100644
index 0000000..7be9f49
Binary files /dev/null and b/assets/img/photography/2.jpg differ
diff --git a/assets/img/photography/3.jpg b/assets/img/photography/3.jpg
new file mode 100644
index 0000000..c69c3fe
Binary files /dev/null and b/assets/img/photography/3.jpg differ
diff --git a/assets/img/photography/4.jpg b/assets/img/photography/4.jpg
new file mode 100644
index 0000000..9c4a1ab
Binary files /dev/null and b/assets/img/photography/4.jpg differ
diff --git a/assets/img/photography/5.jpg b/assets/img/photography/5.jpg
new file mode 100644
index 0000000..fb77183
Binary files /dev/null and b/assets/img/photography/5.jpg differ
diff --git a/assets/img/photography/6.jpg b/assets/img/photography/6.jpg
new file mode 100644
index 0000000..533838c
Binary files /dev/null and b/assets/img/photography/6.jpg differ
diff --git a/assets/img/photography/7.jpg b/assets/img/photography/7.jpg
new file mode 100644
index 0000000..9b228c9
Binary files /dev/null and b/assets/img/photography/7.jpg differ
diff --git a/assets/img/photography/8.jpg b/assets/img/photography/8.jpg
new file mode 100644
index 0000000..0aea425
Binary files /dev/null and b/assets/img/photography/8.jpg differ
diff --git a/assets/img/photography/9.jpg b/assets/img/photography/9.jpg
new file mode 100644
index 0000000..c8a4d60
Binary files /dev/null and b/assets/img/photography/9.jpg differ
diff --git a/assets/main.scss b/assets/main.scss
index 84fb762..f5c35d6 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -2,4 +2,5 @@
---
@import "main";
-@import "fonts";
\ No newline at end of file
+@import "fonts";
+@import "photos";
\ No newline at end of file
diff --git a/photography.md b/photography.md
new file mode 100644
index 0000000..56f052e
--- /dev/null
+++ b/photography.md
@@ -0,0 +1,28 @@
+---
+layout: photos
+title: Photography
+permalink: /photography/
+photos:
+ - photography/1
+ - photography/2
+ - photography/3
+ - photography/4
+ - photography/5
+ - photography/6
+ - photography/7
+ - photography/9
+ - photography/8
+ - photography/10
+ - photography/11
+ - photography/12
+ - photography/13
+ - photography/14
+ - photography/15
+---
+From a young age I accepted that I was a technically inclined person and art was not in my blood...
+Pens, pencils and paints all failed to reflect my vision for art, and I became disinterested in dedicating myself further to it.
+
+From then on art was a world I was not privy to - this all changed when I picked up <abbr title="a Nikon D3300, also my first camera">my sister's camera</abbr>.
+
+Since then, I've slowly been dedicating myself more and more to photography as a way of artistic expression and out of technical curiosity.
+