From 53f3c712f3a26f5cc4cf38f7bb62b7797d91afc5 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Sat, 26 Jun 2021 01:24:02 +0800 Subject: [PATCH] feat: typography changes --- _includes/head.html | 136 +++++++++++++++++++++++------------ _posts/2020-04-09-reading.md | 8 ++- assets/main.scss | 38 ++++++++-- 3 files changed, 126 insertions(+), 56 deletions(-) diff --git a/_includes/head.html b/_includes/head.html index 8a878dc..d380dd5 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,60 +1,102 @@ - {{page.title}} - Web Technologies and Productivity Hacks - {{site.title}} - - - - + + {{page.title}} - Web Technologies and Productivity Hacks - {{site.title}} + + + + + - - - - + + + + - - - - - - - - {% if page.image != '' %} - - {% else %} - - {% endif %} + + + + + + + + {% if page.image != '' %} + + {% else %} + + {% endif %} - - - {% if page.type == "post" %} - {% else %}{% endif %} - - {% if page.image != '' %} - - {% else %} - - {% endif %} - - - - - + + {% if page.type == "post" %} + + {% else %} + + {% endif %} + + {% if page.image != '' %} + + {% else %} + + {% endif %} + + + + + - {% if jekyll.environment == 'production' and site.google_analytics %} - {% include google-analytics.html %} - {% endif %} + {% if jekyll.environment == 'production' and site.google_analytics %} {% + include google-analytics.html %} {% endif %} - - - - - + + + + + - - + crossorigin="anonymous" + > diff --git a/_posts/2020-04-09-reading.md b/_posts/2020-04-09-reading.md index bb04533..2c46ed2 100644 --- a/_posts/2020-04-09-reading.md +++ b/_posts/2020-04-09-reading.md @@ -40,7 +40,9 @@ Because of this, I had to stop doing some things I "loved". For instance, I deactivated my Facebook for a time, and playing computer games had to be at a minimum. -> “The only people who achieve much are those who want knowledge so badly that they seek it while the conditions are still unfavorable. Favorable conditions never come.” C.S. Lewis +> The only people who achieve much are those who want knowledge so badly that they seek it while the conditions are still unfavorable. Favorable conditions never come. +> +> C.S. Lewis ## Next Goal: Find Others @@ -56,4 +58,6 @@ The only qualification of sorts is that you are currently reading a book. If you think this is something that interests you too, or if you simply want more details about it, please reach out to me on Twitter: [@ayoayco](https://twitter.com/ayoayco) or send me an email: [ramon.aycojr+reading@gmail.com](mailto:ramon.aycojr+reading@gmail.com) -> "the most famous example is The Inklings, a group started in the 1930s by a handful of friends living in Oxford, England (the two most famous being C. S. Lewis and J. R. R. Tolkien). They gathered to read selections from their own works and then to discuss them. The Inklings model is pretty simple: bring what occupies your mind and read it aloud. Stimulating the minds of others and generating conversation makes it possible to learn from one another." Tony Reinke, Lit! +> ...the most famous example is The Inklings, a group started in the 1930s by a handful of friends living in Oxford, England (the two most famous being C. S. Lewis and J. R. R. Tolkien). They gathered to read selections from their own works and then to discuss them. The Inklings model is pretty simple: bring what occupies your mind and read it aloud. Stimulating the minds of others and generating conversation makes it possible to learn from one another. +> +> Tony Reinke, Lit! diff --git a/assets/main.scss b/assets/main.scss index f09d0a5..1c357ca 100644 --- a/assets/main.scss +++ b/assets/main.scss @@ -534,13 +534,12 @@ table.image caption { &__title { --x-height-multiplier: 0.342; --baseline-multiplier: 0.22; - font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, - Arial, sans-serif; + font-family: "Source Serif Pro", serif; letter-spacing: -0.02em; - font-weight: 700; + font-weight: 900; font-style: normal; letter-spacing: 0; - font-size: 36px; + font-size: 56px; margin: 10px 0 10px -2.63px; line-height: 1.04; letter-spacing: -0.015em; @@ -576,6 +575,7 @@ table.image caption { font-weight: bold; } p:first-of-type::first-letter { + font-weight: 900; font-size: 75px; line-height: 60px; float: left; @@ -586,14 +586,37 @@ table.image caption { margin-top: 21px; } + blockquote:before { + content: "\201C"; + font-size: 75px; + line-height: 30px; + float: left; + padding: 0px 10px 0 3px; + margin-left: -15px; + color: #ccc; + font-family: medium-content-serif-font, Georgia, Cambria, + "Times New Roman", Times, serif; + } + + blockquote p:first-of-type::first-letter { + color: #555 !important; + padding: 0; + } + + blockquote p { + color: #555; + } + p, ul li, - ol li { + ol li, + blockquote p:first-of-type::first-letter { --x-height-multiplier: 0.375; --baseline-multiplier: 0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; letter-spacing: 0.01rem; + color: #333; font-weight: 400; font-style: normal; font-size: 21px; @@ -620,10 +643,11 @@ table.image caption { margin-bottom: 15px; &__title { margin: 10px 0; + font-family: "Source Serif Pro", serif; + font-weight: 900; + font-size: 36px; a { color: #222 !important; - font-weight: bold; - font-size: 36px; } a:hover {