mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-10-22 16:49:19 +02:00
fixed pagination, fixed cookiebar dark mode, fixed rendering issues during ssr, moved all test blog code to a test folder
This commit is contained in:
parent
b82bef5e0f
commit
74082cd463
@ -1,21 +0,0 @@
|
||||
---
|
||||
title: Perfecting the Art of Perfection
|
||||
date: "2016-09-01T23:46:37.121Z"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "perfecting-the-art-of-perfection"
|
||||
category: "Design Inspiration"
|
||||
tags:
|
||||
- "Handwriting"
|
||||
- "Learning to write"
|
||||
description: "Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum."
|
||||
socialImage: "/media/notebook.jpg"
|
||||
---
|
||||
|
||||
Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. Sed non quam. In vel mi sit amet augue congue elementum.
|
||||
|
||||
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
|
||||
|
||||
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
@ -1,51 +0,0 @@
|
||||
---
|
||||
title: The Origins of Social Stationery Lettering
|
||||
date: "2016-12-01T22:40:32.169Z"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "the-origins-of-social-stationery-lettering"
|
||||
category: "Design Culture"
|
||||
description: "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante."
|
||||
socialImage: "/media/square.jpg"
|
||||
---
|
||||
|
||||
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. _Aenean ultricies mi vitae est._ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
|
||||
|
||||
|
||||
|
||||
## Header Level 2
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
||||
<footer>
|
||||
<cite>— Aliquam tincidunt mauris eu risus.</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
### Header Level 3
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
```css
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
---
|
||||
title: "A Brief History of Typography"
|
||||
date: "2016-02-02T22:40:32.169Z"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "a-brief-history-of-typography"
|
||||
category: "Design Inspiration"
|
||||
tags:
|
||||
- "Linotype"
|
||||
- "Helvetica"
|
||||
- "History of typography"
|
||||
description: "Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat."
|
||||
socialImage: "/media/cherry.jpg"
|
||||
---
|
||||
|
||||
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. _Aenean ultricies mi vitae est._ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
|
||||
|
||||
|
||||
|
||||
## Header Level 2
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
||||
<footer>
|
||||
<cite>— Aliquam tincidunt mauris eu risus.</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
### Header Level 3
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
```css
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
@ -1,80 +0,0 @@
|
||||
---
|
||||
title: Humane Typography in the Digital Age
|
||||
date: "2017-08-19T22:40:32.169Z"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "humane-typography-in-the-digital-age"
|
||||
category: "Typography"
|
||||
tags:
|
||||
- "Design"
|
||||
- "Typography"
|
||||
- "Web Development"
|
||||
description: "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts."
|
||||
socialImage: "/media/42-line-bible.jpg"
|
||||
---
|
||||
|
||||
- [The first transition](#the-first-transition)
|
||||
- [The digital age](#the-digital-age)
|
||||
- [Loss of humanity through transitions](#loss-of-humanity-through-transitions)
|
||||
- [Chasing perfection](#chasing-perfection)
|
||||
|
||||
An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.
|
||||
|
||||
The typography of this industrial age was no longer handcrafted. Mass production and profit became more important. Quantity mattered more than the quality. The books and printed works in general lost a part of its humanity. The typefaces were not produced by craftsmen anymore. It was the machines printing and tying the books together now. The craftsmen had to let go of their craft and became a cog in the process. An extension of the industrial machine.
|
||||
|
||||
But the victory of the industrialism didn’t mean that the craftsmen were completely extinct. The two worlds continued to coexist independently. Each recognising the good in the other — the power of industrialism and the humanity of craftsmanship. This was the second transition that would strip typography of a part of its humanity. We have to go 500 years back in time to meet the first one.
|
||||
|
||||
## The first transition
|
||||
|
||||
A similar conflict emerged after the invention of the first printing press in Europe. Johannes Gutenberg invented movable type and used it to produce different compositions. His workshop could print up to 240 impressions per hour. Until then, the books were being copied by hand. All the books were handwritten and decorated with hand drawn ornaments and figures. A process of copying a book was long but each book, even a copy, was a work of art.
|
||||
|
||||
The first printed books were, at first, perceived as inferior to the handwritten ones. They were smaller and cheaper to produce. Movable type provided the printers with flexibility that allowed them to print books in languages other than Latin. Gill describes the transition to industrialism as something that people needed and wanted. Something similar happened after the first printed books emerged. People wanted books in a language they understood and they wanted books they could take with them. They were hungry for knowledge and printed books satisfied this hunger.
|
||||
|
||||
|
||||
|
||||
_The 42–Line Bible, printed by Gutenberg._
|
||||
|
||||
But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.
|
||||
|
||||
## The digital age
|
||||
|
||||
The first transition took away a large part of humanity from written communication. Industrialisation, the second transition described by Eric Gill, took away most of what was left. But it’s the third transition that stripped it naked. Typefaces are faceless these days. They’re just fonts on our computers. Hardly anyone knows their stories. Hardly anyone cares. Flicking through thousands of typefaces and finding the “right one” is a matter of minutes.
|
||||
|
||||
> In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.
|
||||
>
|
||||
> — Massimo Vignelli
|
||||
|
||||
Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.
|
||||
|
||||
## Loss of humanity through transitions
|
||||
|
||||
Each transition took away a part of humanity from written language. Handwritten books being the most humane form and the digital typefaces being the least. Overuse of Helvetica is a good example. Messages are being told in a typeface just because it’s a safe option. It’s always there. Everyone knows it but yet, nobody knows it. Stop someone on the street and ask him what Helvetica is? Ask a designer the same question. Ask him where it came from, when, why and who designed it. Most of them will fail to answer these questions. Most of them used it in their precious projects but they still don’t spot it in the street.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect.</p>
|
||||
<footer>
|
||||
<cite>— Josef Mueller-Brockmann</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
Typefaces don’t look handmade these days. And that’s all right. They don’t have to. Industrialism took that away from them and we’re fine with it. We’ve traded that part of humanity for a process that produces more books that are easier to read. That can’t be bad. And it isn’t.
|
||||
|
||||
> Humane typography will often be comparatively rough and even uncouth; but while a certain uncouthness does not seriously matter in humane works, uncouthness has no excuse whatever in the productions of the machine.
|
||||
>
|
||||
> — Eric Gill
|
||||
|
||||
We’ve come close to “perfection” in the last five centuries. The letters are crisp and without rough edges. We print our compositions with high–precision printers on a high quality, machine made paper.
|
||||
|
||||
|
||||
|
||||
_Type through 5 centuries._
|
||||
|
||||
We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.
|
||||
|
||||
## Chasing perfection
|
||||
|
||||
Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?
|
||||
|
||||
_Originally published by [Matej Latin](http://matejlatin.co.uk/) on [Medium](https://medium.com/design-notes/humane-typography-in-the-digital-age-9bd5c16199bd?ref=webdesignernews.com#.lygo82z0x)._
|
||||
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: "Server management tips: Keep 1 sata port available"
|
||||
date: "2017-12-01"
|
||||
template: "post"
|
||||
category: "homelab"
|
||||
tags:
|
||||
- "servers"
|
||||
- "homelab"
|
||||
description: "What was meant to be a simple hard drive migration turned into a long night due to a rogue sata cable"
|
||||
disqusId: "25"
|
||||
---
|
||||
|
||||
Servers.... Both a joy and a pain. This week my server has just been a pain though.... What should've been a relaxing night with some easy peasy hard drive replacements quickly turned into hours of downtime and lots of yelling and screaming :(
|
||||
@ -3,7 +3,6 @@ title: Scala Day 4 - A challenge!
|
||||
date: "2017-04-05"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "slsw-day4"
|
||||
category: "Development"
|
||||
tags:
|
||||
- "Development"
|
||||
@ -0,0 +1,20 @@
|
||||
---
|
||||
title: My blog hasn't gotten an update in 5 years, here's why.
|
||||
date: "2022-09-17"
|
||||
template: "post"
|
||||
category: "blog"
|
||||
tags:
|
||||
- "software development"
|
||||
- "architecture"
|
||||
- "writing"
|
||||
description: "Good software design practices and a few perfectionistic tendencies lead to almost 5 years without any writing. This blog is a deep dive into a few of the struggles of the past 5 years"
|
||||
# draft: false
|
||||
---
|
||||
|
||||
Wanting to perfect a site ...
|
||||
lots of theming issues
|
||||
|
||||
## The posts query bug
|
||||
|
||||
My website has a lot more pages than the official example on Github.
|
||||
Their postsQuery retrieves everything with a slug
|
||||
@ -1,18 +1,87 @@
|
||||
---
|
||||
title: "Johannes Gutenberg: The Birth of Movable Type"
|
||||
date: "2017-08-18T22:12:03.284Z"
|
||||
title: Test blog
|
||||
date: "1970-01-01T00:00:00"
|
||||
template: "post"
|
||||
draft: false
|
||||
slug: "the-birth-of-movable-type"
|
||||
slug: "humane-typography-in-the-digital-age"
|
||||
category: "Typography"
|
||||
tags:
|
||||
- "Open source"
|
||||
- "Gatsby"
|
||||
- "Design"
|
||||
- "Typography"
|
||||
description: "German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible."
|
||||
socialImage: "/media/gutenberg.jpg"
|
||||
- "Web Development"
|
||||
description: "An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts."
|
||||
socialImage: "/media/42-line-bible.jpg"
|
||||
---
|
||||
|
||||
- [The first transition](#the-first-transition)
|
||||
- [The digital age](#the-digital-age)
|
||||
- [Loss of humanity through transitions](#loss-of-humanity-through-transitions)
|
||||
- [Chasing perfection](#chasing-perfection)
|
||||
|
||||
An Essay on Typography by Eric Gill takes the reader back to the year 1930. The year when a conflict between two worlds came to its term. The machines of the industrial world finally took over the handicrafts.
|
||||
|
||||
The typography of this industrial age was no longer handcrafted. Mass production and profit became more important. Quantity mattered more than the quality. The books and printed works in general lost a part of its humanity. The typefaces were not produced by craftsmen anymore. It was the machines printing and tying the books together now. The craftsmen had to let go of their craft and became a cog in the process. An extension of the industrial machine.
|
||||
|
||||
But the victory of the industrialism didn’t mean that the craftsmen were completely extinct. The two worlds continued to coexist independently. Each recognising the good in the other — the power of industrialism and the humanity of craftsmanship. This was the second transition that would strip typography of a part of its humanity. We have to go 500 years back in time to meet the first one.
|
||||
|
||||
## The first transition
|
||||
|
||||
A similar conflict emerged after the invention of the first printing press in Europe. Johannes Gutenberg invented movable type and used it to produce different compositions. His workshop could print up to 240 impressions per hour. Until then, the books were being copied by hand. All the books were handwritten and decorated with hand drawn ornaments and figures. A process of copying a book was long but each book, even a copy, was a work of art.
|
||||
|
||||
The first printed books were, at first, perceived as inferior to the handwritten ones. They were smaller and cheaper to produce. Movable type provided the printers with flexibility that allowed them to print books in languages other than Latin. Gill describes the transition to industrialism as something that people needed and wanted. Something similar happened after the first printed books emerged. People wanted books in a language they understood and they wanted books they could take with them. They were hungry for knowledge and printed books satisfied this hunger.
|
||||
|
||||
|
||||
|
||||
_The 42–Line Bible, printed by Gutenberg._
|
||||
|
||||
But, through this transition, the book lost a large part of its humanity. The machine took over most of the process but craftsmanship was still a part of it. The typefaces were cut manually by the first punch cutters. The paper was made by hand. The illustrations and ornaments were still being hand drawn. These were the remains of the craftsmanship that went almost extinct in the times of Eric Gill.
|
||||
|
||||
## The digital age
|
||||
|
||||
The first transition took away a large part of humanity from written communication. Industrialisation, the second transition described by Eric Gill, took away most of what was left. But it’s the third transition that stripped it naked. Typefaces are faceless these days. They’re just fonts on our computers. Hardly anyone knows their stories. Hardly anyone cares. Flicking through thousands of typefaces and finding the “right one” is a matter of minutes.
|
||||
|
||||
> In the new computer age the proliferation of typefaces and type manipulations represents a new level of visual pollution threatening our culture. Out of thousands of typefaces, all we need are a few basic ones, and trash the rest.
|
||||
>
|
||||
> — Massimo Vignelli
|
||||
|
||||
Typography is not about typefaces. It’s not about what looks best, it’s about what feels right. What communicates the message best. Typography, in its essence, is about the message. “Typographical design should perform optically what the speaker creates through voice and gesture of his thoughts.”, as El Lissitzky, a famous Russian typographer, put it.
|
||||
|
||||
## Loss of humanity through transitions
|
||||
|
||||
Each transition took away a part of humanity from written language. Handwritten books being the most humane form and the digital typefaces being the least. Overuse of Helvetica is a good example. Messages are being told in a typeface just because it’s a safe option. It’s always there. Everyone knows it but yet, nobody knows it. Stop someone on the street and ask him what Helvetica is? Ask a designer the same question. Ask him where it came from, when, why and who designed it. Most of them will fail to answer these questions. Most of them used it in their precious projects but they still don’t spot it in the street.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Knowledge of the quality of a typeface is of the greatest importance for the functional, aesthetic and psychological effect.</p>
|
||||
<footer>
|
||||
<cite>— Josef Mueller-Brockmann</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
Typefaces don’t look handmade these days. And that’s all right. They don’t have to. Industrialism took that away from them and we’re fine with it. We’ve traded that part of humanity for a process that produces more books that are easier to read. That can’t be bad. And it isn’t.
|
||||
|
||||
> Humane typography will often be comparatively rough and even uncouth; but while a certain uncouthness does not seriously matter in humane works, uncouthness has no excuse whatever in the productions of the machine.
|
||||
>
|
||||
> — Eric Gill
|
||||
|
||||
We’ve come close to “perfection” in the last five centuries. The letters are crisp and without rough edges. We print our compositions with high–precision printers on a high quality, machine made paper.
|
||||
|
||||
|
||||
|
||||
_Type through 5 centuries._
|
||||
|
||||
We lost a part of ourselves because of this chase after perfection. We forgot about the craftsmanship along the way. And the worst part is that we don’t care. The transition to the digital age made that clear. We choose typefaces like clueless zombies. There’s no meaning in our work. Type sizes, leading, margins… It’s all just a few clicks or lines of code. The message isn’t important anymore. There’s no more “why” behind the “what”.
|
||||
|
||||
## Chasing perfection
|
||||
|
||||
Human beings aren’t perfect. Perfection is something that will always elude us. There will always be a small part of humanity in everything we do. No matter how small that part, we should make sure that it transcends the limits of the medium. We have to think about the message first. What typeface should we use and why? Does the typeface match the message and what we want to communicate with it? What will be the leading and why? Will there be more typefaces in our design? On what ground will they be combined? What makes our design unique and why? This is the part of humanity that is left in typography. It might be the last part. Are we really going to give it up?
|
||||
|
||||
_Originally published by [Matej Latin](http://matejlatin.co.uk/) on [Medium](https://medium.com/design-notes/humane-typography-in-the-digital-age-9bd5c16199bd?ref=webdesignernews.com#.lygo82z0x)._
|
||||
|
||||
<h1>Second post</h1>
|
||||
<hr />
|
||||
|
||||
German inventor Johannes Gutenberg developed a method of movable type and used it to create one of the western world’s first major printed books, the “Forty–Two–Line” Bible.
|
||||
|
||||
**Johannes Gensfleisch zur Laden zum Gutenberg** (c. 1398 – 1468) was a German blacksmith, goldsmith, printer, and publisher who introduced printing to Europe. His invention of mechanical movable type printing started the Printing Revolution and is widely regarded as the most important event of the modern period. It played a key role in the development of the Renaissance, Reformation, the Age of Enlightenment, and the Scientific revolution and laid the material basis for the modern knowledge-based economy and the spread of learning to the masses.
|
||||
@ -108,3 +177,45 @@ A 1568 history by Hadrianus Junius of Holland claims that the basic idea of the
|
||||
The 19th century printer and typefounder Fournier Le Jeune suggested that Gutenberg might not have been using type cast with a reusable matrix, but possibly wooden types that were carved individually. A similar suggestion was made by Nash in 2004. This remains possible, albeit entirely unproven.
|
||||
|
||||
It has also been questioned whether Gutenberg used movable types at all. In 2004, Italian professor Bruno Fabbiani claimed that examination of the 42-line Bible revealed an overlapping of letters, suggesting that Gutenberg did not in fact use movable type (individual cast characters) but rather used whole plates made from a system somewhat like a modern typewriter, whereby the letters were stamped successively into the plate and then printed. However, most specialists regard the occasional overlapping of type as caused by paper movement over pieces of type of slightly unequal height.
|
||||
|
||||
<h1>Third post</h1>
|
||||
<hr />
|
||||
|
||||
**Pellentesque habitant morbi tristique** senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. _Aenean ultricies mi vitae est._ Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. [Donec non enim](#) in turpis pulvinar facilisis.
|
||||
|
||||
|
||||
|
||||
## Header Level 2
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat.
|
||||
|
||||
<figure>
|
||||
<blockquote>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p>
|
||||
<footer>
|
||||
<cite>— Aliquam tincidunt mauris eu risus.</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</figure>
|
||||
|
||||
### Header Level 3
|
||||
|
||||
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
||||
- Aliquam tincidunt mauris eu risus.
|
||||
|
||||
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.
|
||||
|
||||
```css
|
||||
#header h1 a {
|
||||
display: block;
|
||||
width: 300px;
|
||||
height: 80px;
|
||||
}
|
||||
```
|
||||
|
||||
Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
|
||||
|
Before Width: | Height: | Size: 656 KiB After Width: | Height: | Size: 656 KiB |
|
Before Width: | Height: | Size: 645 KiB After Width: | Height: | Size: 645 KiB |
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 151 KiB |
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 546 KiB After Width: | Height: | Size: 546 KiB |
|
Before Width: | Height: | Size: 273 KiB After Width: | Height: | Size: 273 KiB |
|
Before Width: | Height: | Size: 350 KiB After Width: | Height: | Size: 350 KiB |
|
Before Width: | Height: | Size: 115 KiB After Width: | Height: | Size: 115 KiB |
@ -74,8 +74,7 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
|
||||
offset: page * limit,
|
||||
pagination: {
|
||||
currentPage: page,
|
||||
prevPagePath:
|
||||
page <= 1 ? path : getPaginationPath(path, utils.decrement(page)),
|
||||
prevPagePath: page <= 1 ? path : getPaginationPath(path, utils.decrement(page)),
|
||||
nextPagePath: getPaginationPath(path, utils.increment(page)),
|
||||
hasNextPage: page !== utils.decrement(total),
|
||||
hasPrevPage: page !== 0,
|
||||
@ -93,7 +92,7 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
|
||||
const path = utils.concat(
|
||||
constants.routes.categoryRoute,
|
||||
"/",
|
||||
utils.toKebabCase(category.fieldValue),
|
||||
utils.toKebabCase(category.fieldValue)
|
||||
);
|
||||
|
||||
for (let page = 0; page < total; page += 1) {
|
||||
@ -111,11 +110,7 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
|
||||
const tags = await queries.tagsQuery(graphql);
|
||||
|
||||
tags.forEach((tag) => {
|
||||
const path = utils.concat(
|
||||
constants.routes.tagRoute,
|
||||
"/",
|
||||
utils.toKebabCase(tag.fieldValue),
|
||||
);
|
||||
const path = utils.concat(constants.routes.tagRoute, "/", utils.toKebabCase(tag.fieldValue));
|
||||
|
||||
const total = Math.ceil(tag.totalCount / postsLimit);
|
||||
|
||||
|
||||
@ -11,7 +11,9 @@ export interface PostsQueryResult {
|
||||
const postsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
|
||||
const result = await graphql<PostsQueryResult>(`
|
||||
{
|
||||
allMarkdownRemark(filter: { frontmatter: { draft: { ne: true } } }) {
|
||||
allMarkdownRemark(
|
||||
filter: { frontmatter: { draft: { ne: true }, template: { eq: "post" } } }
|
||||
) {
|
||||
edges {
|
||||
node {
|
||||
fields {
|
||||
|
||||
@ -4,14 +4,14 @@ $shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
|
||||
|
||||
.cookieBar {
|
||||
align-items: baseline;
|
||||
background: #fff;
|
||||
border-top: 1px solid #808080;
|
||||
background: $color-bg;
|
||||
border-top: 1px solid $color-gray-border;
|
||||
bottom: 0px;
|
||||
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
color: #000;
|
||||
color: $color-base;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
@ -27,7 +27,7 @@ $shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
|
||||
}
|
||||
|
||||
.button {
|
||||
background: #fff;
|
||||
background: $color-bg;
|
||||
border: 1px solid $color-gray-border;
|
||||
border-radius: $button-border-radius;
|
||||
color: $color-base;
|
||||
|
||||
@ -19,7 +19,7 @@ exports[`Pagination renders correctly 1`] = `
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
NEXT →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -12,7 +12,11 @@ const Author = () => {
|
||||
<a href="/pages/about">
|
||||
<strong>{author.name}</strong>
|
||||
</a>
|
||||
<span className="showInPrintView"> {`@ ${window.location}`}</span>
|
||||
{typeof window !== "undefined" ? (
|
||||
<span className="showInPrintView"> {window ? `@ ${window.location}` : ""}</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,6 +9,9 @@ import { Themes } from "./Themes";
|
||||
type Props = { showLabel: boolean };
|
||||
|
||||
export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
|
||||
if (typeof document === "undefined") {
|
||||
return null;
|
||||
}
|
||||
const initTheme = document.documentElement.dataset.theme;
|
||||
const [theme, setTheme] = useState(initTheme);
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
const PAGINATION = {
|
||||
PREV_PAGE: "← PREV",
|
||||
NEXT_PAGE: "→ NEXT",
|
||||
NEXT_PAGE: "NEXT →",
|
||||
};
|
||||
|
||||
export default PAGINATION;
|
||||
|
||||
@ -336,7 +336,7 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
NEXT →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,14 +19,11 @@ interface Props {
|
||||
|
||||
const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
|
||||
const { title: siteTitle, subtitle: siteSubtitle } = useSiteMetadata();
|
||||
|
||||
const { pagination } = pageContext;
|
||||
const { currentPage, hasNextPage, hasPrevPage, prevPagePath, nextPagePath } =
|
||||
pagination;
|
||||
const { currentPage, hasNextPage, hasPrevPage, prevPagePath, nextPagePath } = pagination;
|
||||
|
||||
const { edges } = data.allMarkdownRemark;
|
||||
const pageTitle =
|
||||
currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
|
||||
const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
|
||||
|
||||
return (
|
||||
<Layout title={pageTitle} description={siteSubtitle}>
|
||||
|
||||
@ -333,7 +333,7 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
NEXT →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -336,7 +336,7 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
href="/typography/page/3"
|
||||
rel="next"
|
||||
>
|
||||
→ NEXT
|
||||
NEXT →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user