evan/ewpratten.com
1
Fork 0
Code Actions

Photo grid

Browse Source
This commit is contained in:
Evan Pratten 2024-11-27 14:53:26 -05:00
parent 419570c53b
commit 7ead99f55a
4 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/_layouts/default.html
View File

@ -14,6 +14,11 @@
<link rel="canonical" href="{{ site.url }}{{ page.url | replace: '.html', '' }}" /> <link rel="canonical" href="{{ site.url }}{{ page.url | replace: '.html', '' }}" />
<link rel="stylesheet" href="/assets/css/default_compiled.css"> <link rel="stylesheet" href="/assets/css/default_compiled.css">
<link rel="stylesheet" href="/assets/css/highlight/vs.css"> <link rel="stylesheet" href="/assets/css/highlight/vs.css">
{% if page.custom_css %}
<!--noformat-->
<style>{{ page.custom_css }}</style>
<!--noformat-->
{% endif %}
</head> </head>
<body> <body>
@ -61,7 +66,7 @@
<div class="page-title"> <div class="page-title">
<h1>{{ page.title }}</h1> <h1>{{ page.title }}</h1>
{% if page.description %} {% if page.description %}
<span>{{ page.description }}</span> <span>{{ page.description }}</span>
{% endif %} {% endif %}
</div> </div>
{% endif %} {% endif %}

3
src/_sass/default.scss
View File

@ -4,6 +4,7 @@ body {
// Keep websites thin! // Keep websites thin!
max-width: 800px; max-width: 800px;
margin: auto; margin: auto;
padding: 0 1em;
// Default font // Default font
font-family: $body-font; font-family: $body-font;
@ -113,7 +114,7 @@ body {
p, p,
li { li {
// font-size: 1.25rem; font-size: 1.1rem;
} }
p { p {

2
src/blog.html
View File

@ -12,7 +12,7 @@ title: Blog
<ul> <ul>
{% for post in group.items %} {% for post in group.items %}
<li> <li>
<span>{{ post.date | date: "%Y-%m-%d" }}:</span> <span style="color: gray;">{{ post.date | date: "%Y-%m-%d" }}:</span>
<a href="{{ post.url }}">{{ post.title }}</a> <a href="{{ post.url }}">{{ post.title }}</a>
</li> </li>
{% endfor %} {% endfor %}

21
src/photography.html
View File

@ -1,12 +1,31 @@
--- ---
layout: default layout: default
title: Photography title: Photography
custom_css: |
.photo-feed {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
}
.photo-feed-entry {
margin: 1em;
max-width: calc(max(45%, 300px));
}
@media screen and (max-width: calc(((300px + 2em) * 2) + 2em)) {
.photo-feed-entry {
max-width: calc(100% - 2em);
}
}
--- ---
<div class="photo-feed"> <div class="photo-feed">
{% assign photos_sorted = site.photos | sort: "date" | reverse %} {% assign photos_sorted = site.photos | sort: "date" | reverse %}
{% for photo in photos_sorted %} {% for photo in photos_sorted %}
<div class="photo-feed-entry" style="margin-bottom: 1em;"> <div class="photo-feed-entry">
<a href="{{ photo.url }}"> <a href="{{ photo.url }}">
<img src="/assets/photography/{{ photo.file }}" alt="A photo titled: {{ photo.title }}" style="width: 100%;"> <img src="/assets/photography/{{ photo.file }}" alt="A photo titled: {{ photo.title }}" style="width: 100%;">
</a> </a>