Compare commits

...

13 Commits

Author SHA1 Message Date
8533f44378 make newsletter secret 2023-07-25 09:42:21 +00:00
db31780c91 add read more pointer. 2023-07-13 21:46:32 +00:00
88bd77fd09 add line height to h1 2023-07-13 21:14:24 +00:00
d145779ed0 further css tweaks 2023-07-09 02:15:50 +00:00
0a5c23079d Increase fontsize on mobile. Explicitly use Garamond 2023-07-09 02:12:16 +00:00
b06249161a played around with style after reading typography guide
https://practicaltypography.com/typography-in-ten-minutes.html
problem is, loading a custom font results in flashing.
I could preload the font, or load it from a cdn,
but that would add complexity
2023-07-09 01:57:34 +00:00
39e830e1e1 do hacky if/if else 2023-06-26 12:32:12 +00:00
2173603b0c gartzea special case 2023-06-25 14:32:48 +00:00
0856fbb5b3 make scaling of central image continuous & parsimonious. 2023-06-24 23:41:34 +00:00
4b9952e3d5 don't display footer 2023-06-18 01:44:51 +00:00
1578212da8 use a slightly less dark black 2023-06-18 00:43:37 +00:00
9eab227fbe preserve previous blue style. 2023-06-18 00:41:14 +00:00
0ce0990473 make style monochrome (blue => black) 2023-06-18 00:39:42 +00:00
28 changed files with 539 additions and 25 deletions

View File

@ -80,18 +80,28 @@ fn blagh_body {
# Direct links to feeds are disabled because they are not very useful, add clutter and might waste pagerank. # Direct links to feeds are disabled because they are not very useful, add clutter and might waste pagerank.
# An user can add this on their own using handlers_body_head anyway. # An user can add this on their own using handlers_body_head anyway.
echo '<p><a href="index.rss">RSS Feed</a>, <a href="../.subscribe">subscribe per email</a>, <a href="../sitemap">all content</a></p>' if (! ~ $base_url 'https://gartzea.com')
# echo '<p style="font-size: 25px;"><a href="index.rss">RSS Feed</a>, <a href="../.newsletter">subscribe per email</a>, <a href="../sitemap">all content</a></p>'
echo '<p style="font-size: 25px;"><a href="index.rss">RSS Feed</a>, <a href="../sitemap">all content</a></p>'
if (~ $base_url 'https://gartzea.com')
echo '<p><a href="index.rss">RSS</a>, <a href="../gaceta">gaceta</a>, <a href="../sitemap">todo</a></p>'
# echo "$base_url"
# |<a href="index.atom">Atom Feed</a></div>' # |<a href="index.atom">Atom Feed</a></div>'
# Markdown posts # Markdown posts
# XXX Not sure why this fixes issues with blog setup, probably bug in fltr_cache! # XXX Not sure why this fixes issues with blog setup, probably bug in fltr_cache!
for(p in `{get_post_list $blagh_root^$blagh_dirs}) { for(p in `{get_post_list $blagh_root^$blagh_dirs}) {
l=`{echo -n $p|sed 's!'$sitedir^'/?(.*)([0-9][0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9])(/[^/]+/)!\2 /\1\2\3!'} l=`{echo -n $p|sed 's!'$sitedir^'/?(.*)([0-9][0-9][0-9][0-9]/[0-9][0-9]/[0-9][0-9])(/[^/]+/)!\2 /\1\2\3!'}
sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' < $p/index.md sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' < $p/index.md | head -n 10
echo
echo '<p style="text-align: left; margin-right: 10%; font-size: 28px;"><a style="text-decoration: none;" href="'^$l(2)^'"><b>&rarr;</b> &#42604; ...</a></p>'
# &rArr;
# &#x27A1;
# https://www.smashingmagazine.com/2009/07/designing-read-more-and-continue-reading-links/
# cat $p/index.md | sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' | sed -n '/^.\{15\}/p' | echo # cat $p/index.md | sed '1s!.*![&]('^$l(2)^') ('^$l(1)^')!' | sed -n '/^.\{15\}/p' | echo
echo # Needed extra \n so markdown doesn't mess up the formatting, probably can be done in sed. echo # Needed extra \n so markdown doesn't mess up the formatting, probably can be done in sed.
echo # echo #
} | head -n 9 | $formatter | sed 's/h[2-9]/i/g'| sed 's/h1/h3/g' } | head -n 12 | $formatter | sed 's/h[2-9]/i/g'| sed 's/h1/h3/g'
# HTML posts # HTML posts
for(p in `{get_post_list $blagh_root^$blagh_dirs}) { for(p in `{get_post_list $blagh_root^$blagh_dirs}) {
cat < $p/index.html cat < $p/index.html

View File

@ -0,0 +1,3 @@
This is a copy of the Charter fonts which Bitstream contributed to the X consortium. This is the original notice included with the fonts:
(c) Copyright 1989-1992, Bitstream Inc., Cambridge, MA. You are hereby granted permission under all Bitstream propriety rights to use, copy, modify, sublicense, sell, and redistribute the 4 Bitstream Charter (r) Type 1 outline fonts and the 4 Courier Type 1 outline fonts for any purpose and without restriction; provided, that this notice is left intact on all copies of such fonts and that Bitstream's trademark is acknowledged as shown below on all unmodified copies of the 4 Charter Type 1 fonts. BITSTREAM CHARTER is a registered trademark of Bitstream Inc.

View File

@ -0,0 +1,11 @@
MB Type: Quick Start Instructions
Open one of the adjacent subdirectories to reveal the font files, which all have the .otf file extension.
Option 1: From the main directory of your system drive, open the folder `Library`, then the folder `Fonts`. Drag the fonts into this folder.
Option 2: Open Applications > Font Book. Drag the fonts into the font list that appears.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

View File

@ -0,0 +1,11 @@
MB Type: Quick Start Instructions
Open one of the adjacent subdirectories to reveal the font files, which all have the .ttf file extension.
Option 1: Select the fonts you want to install. Right-click the fonts and select `Install` from the popup menu.
Option 2: Go to the `Start` menu and open `Control Panel > Appearance and Personalization > Fonts`. Drag the fonts into this folder.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

View File

@ -0,0 +1,31 @@
@font-face {
font-family: charter;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url('charter_regular.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: normal;
font-stretch: normal;
src: url('charter_italic.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url('charter_bold.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: bold;
font-stretch: normal;
src: url('charter_bold_italic.woff2') format('woff2');
}

View File

@ -0,0 +1,11 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="sample.css" />
</head>
<body style="font-size: 24px">
<p style="font-family: charter">charter_regular.woff2</p>
<p style="font-family: charter"><em>charter_italic.woff2</em></p>
<p style="font-family: charter"><strong>charter_bold.woff2</strong></p>
<p style="font-family: charter"><strong><em>charter_bold_italic.woff2</em></strong></p>
</body>
</html>

View File

@ -0,0 +1,19 @@
MB Type: Quick Start Instructions
The process of getting WOFF2 fonts onto your website varies depending on how you're publishing your site.
Roughly, however:
1) Each HTML page needs to load a CSS file that contains `@font-face` declarations for each style of the font that you want to use. The text of the HTML page needs to be annotated with formatting tags that invoke the font.
2) Each `@font-face` declaration needs to map a distinct combination of attributes — `font-family` (= the name of the family), `font-weight` (= regular or bold weight) and `font-style` (= roman or italic) — to a specific WOFF2 file on disk.
THE GOLDEN RULE: The regular, italic, bold, and bold italic styles of a family should all be declared with the same `font-family` name in the respective `@font-face` declarations, so that the web browser understands them as related styles of a single family.
3) The WOFF2 files need to be at the locations specified by the `@font-face` declarations.
There's more than one way to do this. But each subdirectory here contains a "sample.css" and "sample.html" file that shows a simple working example.
For more details on how to use the fonts, see the FAQ at https://mbtype.com/faq
This font was not designed by me. The license is in the top level of this zip archive. I can't offer technical support for this font.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

337
pub/style/style-blue.css Normal file
View File

@ -0,0 +1,337 @@
/* Font */
@font-face {
font-family: 'Source Serif Pro';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://nunosempere.com/.resources/source-serif-pro-latin-ext.woff2) format('woff2'),
url(https://nunosempere.com/.resources/source-serif-pro-latin.woff2) format('woff2');
unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Body */
body {
display: flex;
flex-wrap: wrap;
font-family: serif;
font-size: 1.5em;
background-color: #fcfcfc;
color:#333;
}
* { /* incorporates the padding and borders into the object size*/
box-sizing: border-box;
}
/* header */
header {
flex-basis: 100%;
border-bottom: 2px solid #eee;
}
header h1 {
margin-left: 0.7em;
color:#333;
}
header a {
text-decoration: none;
color: #333;
}
header h1 span {
margin-left: 0em;
color: #555;
/*
font-size: 70%;
font-style: italic;
*/
}
header nav { /* Not used by me, but used by suckless.org */
display: flex;
justify-content: space-between;
}
/* Navigation bar */
nav {
display: flex;
flex-basis: 20%;
max-width: 20%;
min-width: 20%;
float: left;
margin: 0 1px 0 0;
border-right: 2px solid #eee;
/* width: 350px; */
}
nav a{
text-decoration: none;
color: #005386;
}
nav a:hover {
background-color: #ddd;
}
nav ul {
display: flex;
flex-direction: column;
list-style-type: none;
list-style-position: outside;
padding-left: 0;
}
nav li ul {
padding-left: 0.6em;
}
nav li a {
display: block;
margin: 0;
padding: 0.3em 2em 0.8ex 1em;
}
/* article */
article{
flex-basis: 70%;
max-width: 70%;
min-width: 70%;
padding-left: 1em;
color: #333;
/* padding: 0.3em 0 0 0; */
}
/* footer */
footer {
/* display: block; */
flex-grow: 1;
flex-basis: 100%;
flex-shrink: 0;
justify-content: space-between;
padding: 0.1em 0em 1em 1em;
border-top: 2px solid #eee
}
/* links */
a {
color: #005386;
}
/* Images and figures */
figure figcaption {
display: block;
margin-left: auto;
margin-right: auto;
}
figcaption {
text-align: center;
font-size: 16px;
}
.img-frontpage-center,
.img-medium-center,
img {
display: block;
margin-left: auto;
margin-right: auto;
}
img {
width: 80%;
}
.img-frontpage-center {
width: 40%;
}
.img-medium-center {
width: 50%;
}
/* Block quotes */
blockquote{
width:60%;
margin: 5px auto;
color: #555555;
padding: 1.2em 30px 1.2em 75px;
border-left:8px solid #005386 ;
line-height:1.3;
position: relative;
background: #F0F0F0;
}
blockquote::before{
font-family:Arial;
content: "\201C";
color:#005386;
font-size:4em;
position: absolute;
left: 10px;
top:-10px;
}
/* Code bloocks */
pre {
background-color: #eeeeee;
border: 2px solid;
overflow-x: auto;
}
pre,
code {
display: block;
padding: 0.5em;
}
/* Lists */
/* this aligns the sitemap */
ul {
margin-left: 15px;
}
li{
list-style-position: outside;
/* list-style-type: '- ' /* ndash, a*/
}
/* Tables */
/* old style:
table {
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
}
td,
th {
border: 1px solid var(--border);
text-align: left;
padding: 0.5rem;
}
th {
background: var(--accent-bg);
font-weight: bold;
}
*/
table {
border: 3px solid #005386;
border-collapse: collapse;
table-layout: fixed;
text-align: left;
width: 100%;
}
table thead {
/* position: sticky;
top: 0; */
}
table tbody tr:nth-child(even) {
background: #E9F1F4;
}
table th {
background: #005386;
color: #fcfcfc;
font-weight: bold;
}
table th, table td {
padding: 1em 1em 1em 1em;
/* border: 3px solid #005386; */
}
/* Newsletter stuff */
.subscribe-button {
background: #0055d4;
padding: 15px 30px;
border-radius: 3px;
border: 0;
cursor: pointer;
text-decoration: none;
color: #ffff;
display: inline-block;
min-width: 150px;
font-size: 20px;
text-align: center;
}
.subscribe-input {
padding: 10px 15px;
border: 1px solid #888;
border-radius: 3px;
width: 33%;
box-shadow: 2px 2px 0 #f3f3f3;
border: 1px solid #ddd;
font-size: 20px;
}
input:focus {
border-color: #0055d4;
}
input:focus::placeholder {
color: transparent;
}
/* Figcaptions for markdown
* Per <https://stackoverflow.com/questions/19331362/using-an-image-caption-in-markdown-jekyll>
*/
img + em {
display: block;
text-align: center;
font-size: 1em;
}
/* Isso comments */
/* You can see the general comments style: <https://comments.nunosempere.com/css/isso.css> */
.isso-textarea, #isso-postbox-author, #isso-postbox-email, #isso-postbox-website, .isso-post-action > input {
font-size: 20px;
}
.isso-textarea {
height: 15em;
resize: vertical !important;
}
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */
@media screen and (max-width: 1400px) {
body {
display: block;
}
.hidden-mobile {
display: none;
}
article {
flex-basis: 100%;
max-width: 100%;
min-width: 100%;
padding: 5px;
}
header h1 {
margin-left: 0;
}
.img-frontpage-center {
width: 28%; /* 40% * 70%, so that the relative size stays the same*/
}
}
@media screen and (min-width: 1400px) {
.hide-not-mobile {
display: none;
}
}

View File

@ -1,25 +1,68 @@
/* Font */ /* Fonts */
/*
@font-face {
font-family: charter;
font-style: normal;
font-weight: normal;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_regular.woff2') format('woff2');
}
@font-face { @font-face {
font-family: 'Source Serif Pro'; font-family: 'Source Serif Pro';
font-style: normal; font-style: normal;
font-weight: 400; font-weight: 400;
font-display: swap; font-display: swap;
src: url(https://nunosempere.com/.resources/source-serif-pro-latin-ext.woff2) format('woff2'), src: url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin-ext.woff2) format('woff2'),
url(https://nunosempere.com/.resources/source-serif-pro-latin.woff2) format('woff2'); url(https://nunosempere.com/pub/fonts/source-serif/source-serif-pro-latin.woff2) format('woff2');
unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; unicode-range: U+0000-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
} }
@font-face {
font-family: charter;
font-style: italic;
font-weight: normal;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_italic.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: normal;
font-weight: bold;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_bold.woff2') format('woff2');
}
@font-face {
font-family: charter;
font-style: italic;
font-weight: bold;
font-stretch: normal;
src: url('/pub/fonts/charter/charter_bold_italic.woff2') format('woff2');
}
*/
/* Body */ /* Body */
body { body {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
font-family: serif; /* font-family: 'Source Serif Pro'; */
font-size: 1.5em; /* font-family: 'Times New Roman'; */
font-family: "Garamond", 'serif';
/* font-family: 'charter'; */
font-size: 25px;
background-color: #fcfcfc; background-color: #fcfcfc;
line-height: 130%;
color:#333; color:#333;
} }
* { /* incorporates the padding and borders into the object size*/
box-sizing: border-box;
}
/* header */ /* header */
header { header {
flex-basis: 100%; flex-basis: 100%;
@ -27,7 +70,7 @@ header {
} }
header h1 { header h1 {
margin-left: 0.7em; margin: 0.5em 0 0.5em 0.7em;
color:#333; color:#333;
} }
@ -50,6 +93,12 @@ header nav { /* Not used by me, but used by suckless.org */
justify-content: space-between; justify-content: space-between;
} }
/* Header */
h1 {
line-height: 110%;
}
/* Navigation bar */ /* Navigation bar */
nav { nav {
@ -65,7 +114,8 @@ nav {
nav a{ nav a{
text-decoration: none; text-decoration: none;
color: #005386; /* color: #005386; */
color: #333;
} }
nav a:hover { nav a:hover {
@ -102,19 +152,23 @@ article{
/* footer */ /* footer */
footer { footer {
display: none;
/* display: block; */ /* display: block; */
/*
flex-grow: 1; flex-grow: 1;
flex-basis: 100%; flex-basis: 100%;
flex-shrink: 0; flex-shrink: 0;
justify-content: space-between; justify-content: space-between;
padding: 0.1em 0em 1em 1em; padding: 0.1em 0em 1em 1em;
border-top: 2px solid #eee border-top: 2px solid #eee
*/
} }
/* links */ /* links */
a { a {
color: #005386; /* color: #005386; */
color: #333;
} }
/* Images and figures */ /* Images and figures */
@ -155,9 +209,11 @@ img {
blockquote{ blockquote{
width:60%; width:60%;
margin: 5px auto; margin: 5px auto;
color: #555555; /* color: #555555; */
color: #333;
padding: 1.2em 30px 1.2em 75px; padding: 1.2em 30px 1.2em 75px;
border-left:8px solid #005386 ; /* border-left: 8px solid #005386 ; */
border-left: 8px solid #333;
line-height:1.3; line-height:1.3;
position: relative; position: relative;
background: #F0F0F0; background: #F0F0F0;
@ -166,7 +222,8 @@ blockquote{
blockquote::before{ blockquote::before{
font-family:Arial; font-family:Arial;
content: "\201C"; content: "\201C";
color:#005386; /* color:#005386; */
color: #333;
font-size:4em; font-size:4em;
position: absolute; position: absolute;
left: 10px; left: 10px;
@ -221,7 +278,8 @@ th {
*/ */
table { table {
border: 3px solid #005386; /* border: 3px solid #005386; */
border: 3px solid #333;
border-collapse: collapse; border-collapse: collapse;
table-layout: fixed; table-layout: fixed;
text-align: left; text-align: left;
@ -234,11 +292,13 @@ table thead {
} }
table tbody tr:nth-child(even) { table tbody tr:nth-child(even) {
background: #E9F1F4; /* background: #E9F1F4; */
background: #ededed;
} }
table th { table th {
background: #005386; /* background: #005386; */
background: #333;
color: #fcfcfc; color: #fcfcfc;
font-weight: bold; font-weight: bold;
} }
@ -250,7 +310,8 @@ table th {
/* Newsletter stuff */ /* Newsletter stuff */
.subscribe-button { .subscribe-button {
background: #0055d4; /* background: #0055d4; */
background: #333;
padding: 15px 30px; padding: 15px 30px;
border-radius: 3px; border-radius: 3px;
border: 0; border: 0;
@ -304,8 +365,31 @@ img + em {
} }
/* If the screen size is 600px wide or less, set the font-size of <div> to 30px */ /* Set image-frontpage-center size across devices */
@media screen and (max-width: 1400px) { @media screen and (max-width: 1000px) {
body {
display: block;
font-size: 40px;
}
.img-frontpage-center {
width: 60%; /* 700px * 0.6 = 420px */
}
}
@media screen and (min-width: 1000px) and (max-width: 1500px) {
.img-frontpage-center {
width: 420px
}
}
@media screen and (min-width: 1500px) {
.img-frontpage-center {
width: 40%; /* 1500px * 0.7 (article) * 0.4 = 420px */
}
}
/* General media stuff */
@media screen and (max-width: 1500px) {
body { body {
display: block; display: block;
} }
@ -321,12 +405,9 @@ img + em {
header h1 { header h1 {
margin-left: 0; margin-left: 0;
} }
.img-frontpage-center {
width: 28%; /* 40% * 70%, so that the relative size stays the same*/
}
} }
@media screen and (min-width: 1400px) { @media screen and (min-width: 1500px) {
.hide-not-mobile { .hide-not-mobile {
display: none; display: none;
} }