misc style updates
This commit is contained in:
parent
6a856c1942
commit
d1d707bb6a
@ -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%
|
||||||
|
@ -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
23
src/lib/datefmt.js
Normal 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
|
||||||
|
}
|
@ -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 {
|
||||||
|
@ -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}
|
||||||
|
BIN
static/Tajawal-Regular.woff2
Normal file
BIN
static/Tajawal-Regular.woff2
Normal file
Binary file not shown.
@ -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 {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user