Kartik Nair kartiknair

## spa-navigation-for-static-links.js
window.onload = function () {
  console.log("page loaded!");
  updateLinks();

  async function updateDom(path) {
    console.log("Updating DOM with content from: ", path);
    const res = await fetch(path);
    const data = await res.text();

    const get = (o) => o;

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="//rsms.me/inter/inter.css" />
		<style>
			html,
			body {
				width: 100%;

## starter.css
@import url("https://fonts.xz.style/serve/inter.css");

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {

## block3.css
html,
body {
  line-height: 1.5; // <- this will depend on your font
}

main {
  width: 50%;
  margin: 6% 25%;
}

## block2.css
/* ↓ This one is for smaller phones ↓ */
@media (max-width: 350px) {
  html {
    font-size: 0.9rem;
  }
}

/* ↓ These are for high-res displays ↓ */
@media (min-width: 1900px) {
  html {

## block1.css
html,
body {
  font-size: 1rem;
}

h1 {
  font-size: 2.25rem;
}

h2 {

## fonts.scss
@font-face {
  font-family: lyon;
  src: url("../fonts/LyonDisplay-Bold.otf");
  font-weight: 800;
}

@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap");

$font-fam-main: "EB Garamond", serif;
$font-fam-headings: lyon, serif;

## grotesk-vars.scss
$bg: #1e3b5a;
$fg-body: #99b7c3;
$fg-headings: #c1d6df;

$hr-color: rgba(153, 183, 195, 0.2);

$a-color: #d8e9f0;

$pre-bg: rgba(153, 183, 195, 0.07);
$pre-color: $fg-body;

## initial-main.css
:root {
  font-size: calc(0.75rem + 0.5vw);
}

.grotesk {
  width: 60%;
  margin: 5% 20% 0 20%;
}

@media (max-width: 500px) {

## final-index.js
const fs = require("fs");
const postMethods = require("./posts");
const config = require("./config");
const addHomePage = require("./homepage");

const posts = fs
  .readdirSync(config.dev.postsdir)
  .map(post => post.slice(0, -3))
  .map(post => postMethods.createPost(post))
  .sort(function(a, b) {
	window.onload = function () {
	console.log("page loaded!");
	updateLinks();

	async function updateDom(path) {
	console.log("Updating DOM with content from: ", path);
	const res = await fetch(path);
	const data = await res.text();

	const get = (o) => o;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="//rsms.me/inter/inter.css" />
	<style>
	html,
	body {
	width: 100%;
	@import url("https://fonts.xz.style/serve/inter.css");

	* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

	html {
	html,
	body {
	line-height: 1.5; // <- this will depend on your font
	}

	main {
	width: 50%;
	margin: 6% 25%;
	}
	/* ↓ This one is for smaller phones ↓ */
	@media (max-width: 350px) {
	html {
	font-size: 0.9rem;
	}
	}

	/* ↓ These are for high-res displays ↓ */
	@media (min-width: 1900px) {
	html {
	@font-face {
	font-family: lyon;
	src: url("../fonts/LyonDisplay-Bold.otf");
	font-weight: 800;
	}

	@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:wght@500&display=swap");

	$font-fam-main: "EB Garamond", serif;
	$font-fam-headings: lyon, serif;
	$bg: #1e3b5a;
	$fg-body: #99b7c3;
	$fg-headings: #c1d6df;

	$hr-color: rgba(153, 183, 195, 0.2);

	$a-color: #d8e9f0;

	$pre-bg: rgba(153, 183, 195, 0.07);
	$pre-color: $fg-body;
	:root {
	font-size: calc(0.75rem + 0.5vw);
	}

	.grotesk {
	width: 60%;
	margin: 5% 20% 0 20%;
	}

	@media (max-width: 500px) {
	const fs = require("fs");
	const postMethods = require("./posts");
	const config = require("./config");
	const addHomePage = require("./homepage");

	const posts = fs
	.readdirSync(config.dev.postsdir)
	.map(post => post.slice(0, -3))
	.map(post => postMethods.createPost(post))
	.sort(function(a, b) {