Permalink
Browse files

Updated readme and about page

  • Loading branch information...
davidmerfield committed Jan 10, 2019
1 parent 29d9a94 commit 87882bbe27a6c21b87d257931edac6a3cf16182e
Showing with 39 additions and 55 deletions.
  1. +18 −27 app/templates/photos/folder/Pages/about.txt
  2. +18 −27 app/templates/photos/readme.txt
  3. +3 −1 app/templates/photos/style.css
@@ -1,53 +1,44 @@
# About

{>|} This page describes the design and research invovled for this template, the Photos template. You can start a site with this template right now on [Blot](https://blot.im).
{>|} [Download the folder](/folder.zip) (22mb) from which this website is generated. [View the source](https://github.com/davidmerfield/Blot/tree/master/app/templates/photos) for the photos template to see how it works.

"The purpose of this theme is to display photos. Its navigation should get out of the way when you are looking at photos." It should offer a way to browse photos at different sizes. The [homepage](/) shows a feed a of recently published photos. The [archives](/archives) give an overview of all the photos published on this site.
The purpose of the 'Photos' template is to display photos. Its navigation should get out of the way when you are looking at photos. It should offer a way to browse photos at different sizes. The [homepage](/) shows a feed a of recently published photos. The [archives](/archives) give an overview of all the photos published on this site.

{>|} [Download a copy of the folder](/folder.zip) (22mb) from which this site is generated. [View the source for this template](). Blot's source code, including this template, is dedicated to the public domain.
All of the the images on this site are courtesy of the [IEMS](http://iems-ferox.com). Many thanks to Dr Rudolph H. Obrist and the brave souls on the [Ferox expedition](http://iems-ferox.com) for their kind contributions to the public domain.

'The images on this site are courtesy' of the [IEMS](http://iems-ferox.com). Many thanks to the brave souls on the [Ferox expedition](http://iems-ferox.com) for their kind contributions to the public domain.
## Theft

Gavin Atkinson's [compilation of image user interfaces](https://www.are.na/gavin-atkinson-1489764520/image-ui) has been useful to discover some interesting techniques to navigate and index images in a browser.
Georgia Kareola's [website](https://notapipe.today) is the source of the layout for this template. I like the menu's grid and the typography of the subpages in particular.

For the archives page, I like this hover effect:
Gavin Atkinson's [compilation of image user interfaces](https://www.are.na/gavin-atkinson-1489764520/image-ui) was a useful source of interesting techniques to navigate and index images.

I like the radio button filters for the archives page: http://www.hofstede.com.au/
Hofstede's [archives page](http://www.hofstede.com.au/) has a really pleasing hover effect, with the thumbnail for the hovered link displayed to the left.

{>|} Line me up, bitch.
The good work of the people at [Are.na](https://are.na) and [Cargo Collective](https://cargocollective.com/) is a constant source of motivation.


- The 'Close' button which dumps you back into the previous index page is rather useful.
- The fade-on-load feature for the grid of images is rather nice. It's a pretty simple technique and I'm going to use it here.
## The design

{>|} [View the source file for this page](?source=true) to see how the layout for this page was marked up.
I tried to keep things as quiet as possible. When designing a theme, it's easy to get lost in the ornamentation of the theme's *chrome*, its menu bar, its search field. I tried to focus on the details. Here are a few things which I have done to this template which might not meet the eye:

- Thumbnails are never cropped. They are always displayed in the aspect ratio chosen by the photographer. To do otherwise seemes rude. Of course, this complicates the layout but that is my job. I think that layouts which do not respect the aspect ratio chosen by the photographer are lazy.

- The pagination on the index page uses your system typeface's [tabular numbers](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures) feature, where possible. This prevents the width of the page indicator changing.

***
- The years in the footer indicate the range of published works. It sometimes looks a little silly if you have only published this year but just be patient!

I have tried to keep things as quiet as possible. When designing a theme, it's easy to get lost in the ornamentation of the theme's *chrome*, its menu bar, its search field. It's colors. I like the menu and page typography of [Georgia Kareola's website](https://notapipe.today)
- When there is no pagination, we instead list the number of entries displayed on the page to maintain the balance of the navigation's layout.

I've been trying hard to focus on getting the details right. Here are a few things which I have done to this template which might not meet the eye:

- The pagination on the index page uses your system typeface's tabular numbers feature, where possible. This prevents the width of the page indicator changing.
## Technical details

- This template just hides all of Blot's search functionality, since it's not as useful for photos.

- The years in the footer indicate the range of published works. It sometimes looks a little silly if you have only published stuff this year but just you wait.

- When there is no pagination, we instead list the number of entries displayed on the page to maintain the balance of the navigation's layout.

- The thumbnail's computed width and height to block out the layout quickly so nothing has to be recalculated as each image makes its way down the tubes.

- Thumbnails are never cropped. They are always displayed in the aspect ratio chosen by the photographer. To do otherwise seemes rude. Of course, this complicates the layout but that is my job.

{<>} I'm going to borrow a few of the features of the archive's template[^footnote]
- The thumbnail's computed width and height is used to block out the layout of the index page before the images load. This means that nothing has to be recalculated as each image makes its way down the tubes. This prevents the layout 'shifting', something I think makes websites feel flimsy.

{>|} ![Image](/_image_cache/560717cb-4ad7-4fb3-923d-09ad705eb282.jpg)
- The fade-on-load feature for the grid of images uses a tiny amount of JavaScript and a css class.

Things to do:
*Please [contact me](https://blot.im/contact) if you have any questions. I'm always happy to hear about bugs. [View the source file for this page](?source=true) to see how the layout for this page was marked up.*

http://spectorbooks.com/under-the-radar

[^footnote]: Test, [Link](https://google.com).
@@ -1,53 +1,44 @@
# About

{>|} This page describes the design and research invovled for this template, the Photos template. You can start a site with this template right now on [Blot](https://blot.im).
{>|} [Download the folder](/folder.zip) (22mb) from which this website is generated. [View the source](https://github.com/davidmerfield/Blot/tree/master/app/templates/photos) for the photos template to see how it works.

The purpose of this theme is to display photos. Its navigation should get out of the way when you are looking at photos. It should offer a way to browse photos at different sizes. The [homepage](/) shows a feed a of recently published photos. The [archives](/archives) give an overview of all the photos published on this site.
The purpose of the 'Photos' template is to display photos. Its navigation should get out of the way when you are looking at photos. It should offer a way to browse photos at different sizes. The [homepage](/) shows a feed a of recently published photos. The [archives](/archives) give an overview of all the photos published on this site.

{>|} [Download a copy of the folder](/folder.zip) (22mb) from which this site is generated. [View the source for this template](). Blot's source code, including this template, is dedicated to the public domain.
All of the the images on this site are courtesy of the [IEMS](http://iems-ferox.com). Many thanks to Dr Rudolph H. Obrist and the brave souls on the [Ferox expedition](http://iems-ferox.com) for their kind contributions to the public domain.

The images on this site are courtesy of the [IEMS](http://iems-ferox.com). Many thanks to the brave souls on the [Ferox expedition](http://iems-ferox.com) for their kind contributions to the public domain.
## Theft

Gavin Atkinson's [compilation of image user interfaces](https://www.are.na/gavin-atkinson-1489764520/image-ui) has been useful to discover some interesting techniques to navigate and index images in a browser.
Georgia Kareola's [website](https://notapipe.today) is the source of the layout for this template. I like the menu's grid and the typography of the subpages in particular.

For the archives page, I like this hover effect:
Gavin Atkinson's [compilation of image user interfaces](https://www.are.na/gavin-atkinson-1489764520/image-ui) was a useful source of interesting techniques to navigate and index images.

I like the radio button filters for the archives page: http://www.hofstede.com.au/
Hofstede's [archives page](http://www.hofstede.com.au/) has a really pleasing hover effect, with the thumbnail for the hovered link displayed to the left.

{>|} Line me up, bitch.
The good work of the people at [Are.na](https://are.na) and [Cargo Collective](https://cargocollective.com/) is a constant source of motivation.


- The 'Close' button which dumps you back into the previous index page is rather useful.
- The fade-on-load feature for the grid of images is rather nice. It's a pretty simple technique and I'm going to use it here.
## The design

{>|} [View the source file for this page](?source=true) to see how the layout for this page was marked up.
I tried to keep things as quiet as possible. When designing a theme, it's easy to get lost in the ornamentation of the theme's *chrome*, its menu bar, its search field. I tried to focus on the details. Here are a few things which I have done to this template which might not meet the eye:

- Thumbnails are never cropped. They are always displayed in the aspect ratio chosen by the photographer. To do otherwise seemes rude. Of course, this complicates the layout but that is my job. I think that layouts which do not respect the aspect ratio chosen by the photographer are lazy.

- The pagination on the index page uses your system typeface's [tabular numbers](https://www.fonts.com/content/learning/fontology/level-3/numbers/proportional-vs-tabular-figures) feature, where possible. This prevents the width of the page indicator changing.

***
- The years in the footer indicate the range of published works. It sometimes looks a little silly if you have only published this year but just be patient!

I have tried to keep things as quiet as possible. When designing a theme, it's easy to get lost in the ornamentation of the theme's *chrome*, its menu bar, its search field. It's colors. I like the menu and page typography of [Georgia Kareola's website](https://notapipe.today)
- When there is no pagination, we instead list the number of entries displayed on the page to maintain the balance of the navigation's layout.

I've been trying hard to focus on getting the details right. Here are a few things which I have done to this template which might not meet the eye:

- The pagination on the index page uses your system typeface's tabular numbers feature, where possible. This prevents the width of the page indicator changing.
## Technical details

- This template just hides all of Blot's search functionality, since it's not as useful for photos.

- The years in the footer indicate the range of published works. It sometimes looks a little silly if you have only published stuff this year but just you wait.

- When there is no pagination, we instead list the number of entries displayed on the page to maintain the balance of the navigation's layout.

- The thumbnail's computed width and height to block out the layout quickly so nothing has to be recalculated as each image makes its way down the tubes.

- Thumbnails are never cropped. They are always displayed in the aspect ratio chosen by the photographer. To do otherwise seemes rude. Of course, this complicates the layout but that is my job.

{<>} I'm going to borrow a few of the features of the archive's template[^footnote]
- The thumbnail's computed width and height is used to block out the layout of the index page before the images load. This means that nothing has to be recalculated as each image makes its way down the tubes. This prevents the layout 'shifting', something I think makes websites feel flimsy.

{>|} ![Image](/_image_cache/560717cb-4ad7-4fb3-923d-09ad705eb282.jpg)
- The fade-on-load feature for the grid of images uses a tiny amount of JavaScript and a css class.

Things to do:
*Please [contact me](https://blot.im/contact) if you have any questions. I'm always happy to hear about bugs. [View the source file for this page](?source=true) to see how the layout for this page was marked up.*

http://spectorbooks.com/under-the-radar

[^footnote]: Test, [Link](https://google.com).
@@ -317,6 +317,8 @@ font-feature-settings: 'tnum';
margin: 1.4em 0
}

.body h2 {margin: 2.8em 0 1.4em; font-size: inherit;font-weight: 600}

.entry.page .body {
text-align: left;
}
@@ -435,7 +437,7 @@ the absolutely positioned stuff is off the viewport.
}

.margin:first-child> :first-child {
margin-top: 2em
margin-top: 2.4em
}

.margin> :first-child {

0 comments on commit 87882bb

Please sign in to comment.