Front page build project for 73k.us, with pug templates, inline SVG fonts, and PurgeCSS configured via webpack. https://73k.us/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

3.8 KiB

73k.us front page

Front page/home for Adam at 73k.us.

Webpack setup derived from WeAreAthlon/frontend-webpack-boilerplate with extra modifications.

dev building:

npm run build

live dev server

npm run dev

production build:

npm run production

w.73k.us blog CSS

Blog is managed separately by WriteFreely. Coordinated CSS for the blog follows:

@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Righteous&display=swap');

/* Entire page background */
body {
  background-color: #363636;
  color: #ddd;
}

/* Blog header on index and post pages */
#blog-title a {
  color: #00b0b0;
  font-family: Righteous, Lato, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: 125%;
}
#blog-title a:hover {
  color: rgb(0, 125, 125);
}

/* Blog header on post pages ONLY */
body#post #blog-title a {
  padding: 4px 8px;
}

/* Blog description (underneath title) on index page */
header p.description {
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
}

/* Post titles on blog index */
.post-title {
  font-weight: normal;
}
.post-title a.u-url:link,
.post-title a.u-url:visited {
  color: #fff;
}

/* "Read more..." links */
body#collection a.read-more {
  color: #00b0b0;
  text-decoration: none;
  border-bottom: 1px solid rgb(228, 134, 99);
}

/* Blockquote text */
body#collection blockquote, body#post blockquote, body#subpage blockquote {
  border-left: 4px solid hsl(0, 0%, 48%);
  color: hsl(0, 0%, 71%);
}

/* Links inside blog posts */
a, ul li a,
nav a.pinned,
article p a {
  color: rgb(228, 134, 99);
  text-decoration: none;
}
article p a:hover {
  color: white;
  text-decoration: none;
}

/* footer */
body footer nav {
  color: hsl(0, 0%, 93%);
}

/* Code */
body#post article code,
body#collection pre, body#post pre, body#subpage pre,
code {
  background-color: hsl(0, 0%, 14%);
  color: hsl(0, 0%, 93%);
  font-family: 'Fira Code', 'Ubuntu Mono', monospace
}
body#post article code, body#post article h1, body#post article h2, body#post article h3, body#post article h4, body#post article h5, body#post article h6, body#post article ol, body#post article p, body#post article ul,
body#collection pre, body#post pre, body#subpage pre {
  border: 0;
}

/********************/
/* highlight.js css */
/* a11y-dark theme */
/* Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css */
/* @author: ericwbailey */

/* Comment */
.hljs-comment,
.hljs-quote {
  color: #d4d0ab;
}

/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
  color: #ffa07a;
}

/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
  color: #f5ab35;
}

/* Yellow */
.hljs-attribute {
  color: #ffd700;
}

/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
  color: #abe338;
}

/* Blue */
.hljs-title,
.hljs-section {
  color: #00e0e0;
}

/* Purple */
.hljs-keyword,
.hljs-selector-tag {
  color: #dcc6e0;
}

.hljs {
  display: block;
  overflow-x: auto;
  background: #2b2b2b;
  color: #f8f8f2;
  padding: 0.5em;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

@media screen and (-ms-high-contrast: active) {
  .hljs-addition,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-builtin-name,
  .hljs-bullet,
  .hljs-comment,
  .hljs-link,
  .hljs-literal,
  .hljs-meta,
  .hljs-number,
  .hljs-params,
  .hljs-string,
  .hljs-symbol,
  .hljs-type,
  .hljs-quote {
        color: highlight;
    }

    .hljs-keyword,
    .hljs-selector-tag {
        font-weight: bold;
    }
}