Add /photography/ page
Xevion
@@ -8,7 +8,7 @@ layout: compress
|
|||||||
<meta name="viewport" content="width=device-width">
|
<meta name="viewport" content="width=device-width">
|
||||||
<link rel="preload" as="style" href="/assets/main.css">
|
<link rel="preload" as="style" href="/assets/main.css">
|
||||||
<link rel="stylesheet" href="/assets/main.css">
|
<link rel="stylesheet" href="/assets/main.css">
|
||||||
<!-- <link rel="stylesheet" href="/assets/print.css" media="print">-->
|
<!-- <link rel="stylesheet" href="/assets/print.css" media="print">-->
|
||||||
<link rel="stylesheet" href="/assets/rouge.css">
|
<link rel="stylesheet" href="/assets/rouge.css">
|
||||||
<title>
|
<title>
|
||||||
{%- if page.title %}
|
{%- if page.title %}
|
||||||
@@ -36,10 +36,16 @@ layout: compress
|
|||||||
<meta name="twitter:card" content="summary">
|
<meta name="twitter:card" content="summary">
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- endif %}
|
{%- endif %}
|
||||||
|
<!-- Hide site using inline styling until CSS loads -->
|
||||||
<style>
|
<style>
|
||||||
html, body {
|
html, body {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
{% if page.wide or layout.wide %}
|
||||||
|
body {
|
||||||
|
max-width: 60em !important;
|
||||||
|
}
|
||||||
|
{% endif %}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -50,19 +56,19 @@ layout: compress
|
|||||||
<a href="/projects/">~/projects/</a>
|
<a href="/projects/">~/projects/</a>
|
||||||
</nav>
|
</nav>
|
||||||
{% if page.title %}
|
{% if page.title %}
|
||||||
{% if page.date %}
|
{% if page.date %}
|
||||||
{% if page._link %}
|
{% if page._link %}
|
||||||
<h1>
|
<h1>
|
||||||
<a href="{{ page._link }}">
|
<a href="{{ page._link }}">
|
||||||
{{ page.title }}
|
{{ page.title }}
|
||||||
</a>
|
</a>
|
||||||
</h1>
|
</h1>
|
||||||
{% else %}
|
{% else %}
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% else %}
|
{% else %}
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.date %}
|
{% if page.date %}
|
||||||
@@ -78,10 +84,20 @@ layout: compress
|
|||||||
</i>
|
</i>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<article>
|
<article>
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
</article>
|
</article>
|
||||||
<p>
|
<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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
19
_layouts/photos.html
Normal file
@@ -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>
|
||||||
@@ -28,6 +28,8 @@ body {
|
|||||||
padding: 0 1em;
|
padding: 0 1em;
|
||||||
font-family: CMU Serif, serif;
|
font-family: CMU Serif, serif;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background: #0e0e0e;
|
||||||
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
p, table {
|
p, table {
|
||||||
@@ -118,7 +120,7 @@ pre code {
|
|||||||
}
|
}
|
||||||
|
|
||||||
a, hr {
|
a, hr {
|
||||||
color: black;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
@@ -182,7 +184,7 @@ nav {
|
|||||||
}
|
}
|
||||||
|
|
||||||
nav a {
|
nav a {
|
||||||
color: black;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.post_summary {
|
.post_summary {
|
||||||
@@ -231,6 +233,7 @@ nav a {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show site with proper CSS styling
|
||||||
html, body {
|
html, body {
|
||||||
visibility: visible !important;
|
visibility: visible !important;
|
||||||
}
|
}
|
||||||
26
_sass/photos.scss
Normal file
@@ -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)
|
||||||
|
//}
|
||||||
BIN
assets/img/photography/1.jpg
Normal file
|
After Width: | Height: | Size: 13 MiB |
BIN
assets/img/photography/10.jpg
Normal file
|
After Width: | Height: | Size: 15 MiB |
BIN
assets/img/photography/11.jpg
Normal file
|
After Width: | Height: | Size: 12 MiB |
BIN
assets/img/photography/12.jpg
Normal file
|
After Width: | Height: | Size: 6.8 MiB |
BIN
assets/img/photography/13.jpg
Normal file
|
After Width: | Height: | Size: 12 MiB |
BIN
assets/img/photography/14.jpg
Normal file
|
After Width: | Height: | Size: 16 MiB |
BIN
assets/img/photography/15.jpg
Normal file
|
After Width: | Height: | Size: 15 MiB |
BIN
assets/img/photography/2.jpg
Normal file
|
After Width: | Height: | Size: 12 MiB |
BIN
assets/img/photography/3.jpg
Normal file
|
After Width: | Height: | Size: 16 MiB |
BIN
assets/img/photography/4.jpg
Normal file
|
After Width: | Height: | Size: 18 MiB |
BIN
assets/img/photography/5.jpg
Normal file
|
After Width: | Height: | Size: 13 MiB |
BIN
assets/img/photography/6.jpg
Normal file
|
After Width: | Height: | Size: 24 MiB |
BIN
assets/img/photography/7.jpg
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
assets/img/photography/8.jpg
Normal file
|
After Width: | Height: | Size: 5.7 MiB |
BIN
assets/img/photography/9.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
@@ -3,3 +3,4 @@
|
|||||||
|
|
||||||
@import "main";
|
@import "main";
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
|
@import "photos";
|
||||||
28
photography.md
Normal file
@@ -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.
|
||||||
|
|
||||||