View 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%; |
View block3.css
html, | |
body { | |
line-height: 1.5; // <- this will depend on your font | |
} | |
main { | |
width: 50%; | |
margin: 6% 25%; | |
} |
View 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 { |
View block1.css
html, | |
body { | |
font-size: 1rem; | |
} | |
h1 { | |
font-size: 2.25rem; | |
} | |
h2 { |
View 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 { |
View 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; |
View 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; |
View initial-main.css
:root { | |
font-size: calc(0.75rem + 0.5vw); | |
} | |
.grotesk { | |
width: 60%; | |
margin: 5% 20% 0 20%; | |
} | |
@media (max-width: 500px) { |
View 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) { |
NewerOlder