Skip to content

Instantly share code, notes, and snippets.

Avatar
✍️
Blogging at https://blog.kartikn.me

Kartik Nair kartiknair

✍️
Blogging at https://blog.kartikn.me
View GitHub Profile
@kartiknair
kartiknair / index.html
Created Sep 20, 2020
Nice Avatars with Random Gradients
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 spa-navigation-for-static-links.js
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) {
You can’t perform that action at this time.