misc style updates

This commit is contained in:
Joseph Montanaro 2021-10-19 21:03:31 -07:00
parent 6a856c1942
commit d1d707bb6a
7 changed files with 51 additions and 17 deletions

View File

@ -2,10 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="preload" href="/Tajawal-Regular.woff2" as="font" type="font/woff2" />
<link rel="icon" href="/favicon.png" /> <link rel="icon" href="/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/style.css" /> <link rel="stylesheet" href="/style.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head% %svelte.head%

View File

@ -8,6 +8,9 @@
let pDate = new Date(date); let pDate = new Date(date);
</script> </script>
<svelte:head>
<title>{title}</title>
</svelte:head>
<div id="post"> <div id="post">
<h1>{title}</h1> <h1>{title}</h1>

23
src/lib/datefmt.js Normal file
View File

@ -0,0 +1,23 @@
const months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
const ordinals = [
'first', 'second', 'third', 'fourth', 'fifth', 'sixth', 'seventh',
'eighth', 'ninth', 'tenth', 'eleventh', 'twelfth', 'thirteenth',
'fourteenth', 'fifteenth', 'sixteenth', 'seventeenth', 'eighteenth',
'nineteenth', 'twentieth', 'twenty-first', 'twenty-second', 'twenty-third',
'twenty-fourth', 'twenty-fifth', 'twenty-sixth', 'twenty-seventh',
'twenty-eighth', 'twenty-ninth', 'thirtieth', 'thirty-first'
];
const weekdays = [
'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'
];
export function formatDate(datestr) {
const date = new Date(datestr);
const w = date.get
}

View File

@ -2,6 +2,7 @@
:global(main) { :global(main) {
max-width: 42rem; max-width: 42rem;
margin: 0 auto; margin: 0 auto;
padding: 0 15px;
} }
#header { #header {
@ -13,7 +14,6 @@
margin: 0 auto; margin: 0 auto;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
column-gap: 40px;
} }
#nav-main a { #nav-main a {
@ -21,7 +21,8 @@
color: white; color: white;
text-decoration: none; text-decoration: none;
text-align: center; text-align: center;
padding: 6px 0; padding: 0.25rem 0;
max-width: 8rem;
} }
#nav-main a:hover { #nav-main a:hover {

View File

@ -27,6 +27,10 @@
} }
</style> </style>
<svelte:head>
<title>Posts</title>
</svelte:head>
<div id="posts"> <div id="posts">
<h1>All Posts</h1> <h1>All Posts</h1>
{#each postData as post} {#each postData as post}

Binary file not shown.

View File

@ -1,4 +1,11 @@
/* ### TYPOGRAPHY ### */ /* ### TYPOGRAPHY ### */
@font-face {
font-family: 'Tajawal';
font-style: normal;
font-weight: 400;
src: url(/Tajawal-Regular.woff2) format('woff2');
}
html { html {
font-family: 'Tajawal', sans-serif; font-family: 'Tajawal', sans-serif;
font-size: 20px; font-size: 20px;
@ -16,20 +23,13 @@ h1, h2, h3, h4, h5, h6 {
color: #464646; color: #464646;
} }
h1, h2 {
margin-bottom: 0.75rem;
}
h3, h4 {
margin-bottom: 0.5rem;
}
h5, h6 {
margin-bottom: 0;
}
h1 { h1 {
font-variant: petite-caps; font-variant: petite-caps;
margin-top: 0.75rem;
}
h1, h2 {
margin-bottom: 0.75rem;
} }
h3 { h3 {
@ -40,8 +40,13 @@ h4 {
font-size: 1.1rem; font-size: 1.1rem;
} }
h3, h4 {
margin-bottom: 0.5rem;
}
h5, h6 { h5, h6 {
font-size: 1rem; font-size: 1rem;
margin-bottom: 0;
} }
p { p {