evan/ewpratten.com
1
Fork 0
Code Actions

Typographical improvements

Browse Source
This commit is contained in:
Evan Pratten 2024-01-13 16:06:30 -05:00
parent a01a62b64e
commit f59662d95a
6 changed files with 41 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
sass/elements/code.scss
View File

@ -24,6 +24,7 @@ del {
border-radius: 5px; border-radius: 5px;
padding: 0 5px; padding: 0 5px;
font-size: 85%; font-size: 85%;
white-space: nowrap;
} }
kbd { kbd {

14
sass/elements/header.scss
View File

@ -1,4 +1,4 @@
header { header.intro-card {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; flex-direction: row;
@ -10,6 +10,8 @@ header {
margin: 2em auto; margin: 2em auto;
font-family: "IBM Plex Serif", serif;
// Image Controls // Image Controls
&[data-size="large"] { &[data-size="large"] {
img { img {
@ -80,3 +82,13 @@ header {
} }
} }
} }
header.page-header {
margin-bottom: 1em;
.subtitle {
font-family: "IBM Plex Serif", serif;
font-size: 1.25em;
color: gray;
}
}

5
sass/elements/headings.scss
View File

@ -1,3 +1,4 @@
h1, h1,
h2, h2,
h3, h3,
@ -12,6 +13,10 @@ h6 {
border-bottom: 1px solid #d7dde3; border-bottom: 1px solid #d7dde3;
font-family: "IBM Plex Serif", serif;
font-kerning: normal;
font-variant-ligatures: normal;
code { code {
padding: 0 0.2em; padding: 0 0.2em;
font-size: inherit; font-size: inherit;

9
sass/elements/text.scss
View File

@ -1,15 +1,14 @@
p,
li,
span {
font-family: sans-serif;
}
p { p {
margin-top: 0; margin-top: 0;
margin-bottom: 16px; margin-bottom: 16px;
padding: 0 0.25em;
text-align: justify; text-align: justify;
hyphens: auto; hyphens: auto;
font-kerning: normal; font-kerning: normal;
font-variant-ligatures: normal;
// font-variant-ligatures: common-ligatures contextual discretionary-ligatures historical-ligatures; // font-variant-ligatures: common-ligatures contextual discretionary-ligatures historical-ligatures;
} }

10
sass/styles.scss
View File

@ -1,12 +1,17 @@
// Note: Some things are broken out into smaller files // Note: Some things are broken out into smaller files
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
$content-max-width: 800px; $content-max-width: 800px;
@import "elements/header.scss"; @import "elements/header.scss";
body { body {
margin: 1em; margin: 1em;
font-family: serif; // font-family: serif;
font-family: "Noto Sans", sans-serif;
font-optical-sizing: auto;
} }
a { a {
@ -25,6 +30,9 @@ nav {
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
font-family: "IBM Plex Serif", serif;
font-weight: 500;
ul { ul {
max-width: 100%; max-width: 100%;
display: flex; display: flex;

17
templates/base.html
View File

@ -73,7 +73,7 @@
<body> <body>
{# Heading section (profile photo & name) #} {# Heading section (profile photo & name) #}
<header data-size="{% if path == '/' %}large{% else %}small{% endif %}"> <header data-size="{% if path == '/' %}large{% else %}small{% endif %}" class="intro-card">
<img src="{{config.extra.profile_photo}}" alt="Evan Pratten"> <img src="{{config.extra.profile_photo}}" alt="Evan Pratten">
<div class="header-text"> <div class="header-text">
<span class="header-name">Evan Pratten</span><br> <span class="header-name">Evan Pratten</span><br>
@ -131,13 +131,14 @@
<main> <main>
{% block content %} {% block content %}
<article> <article>
{% if not extra.no_auto_title %} <header class="page-header">
<h1 class="title">{{title}}</h1> {% if not extra.no_auto_title %}
{% endif %} <h1 class="title">{{title}}</h1>
{% if page.description %} {% endif %}
<em class="subtitle">{{page.description}}</em><br> {% if page.description %}
{% endif %} <span class="subtitle">{{page.description}}</span>
<br> {% endif %}
</header>
{{ content | safe }} {{ content | safe }}
</article> </article>