jake/jarv.is
jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-04-26 13:18:26 -04:00
Code Issues

clean up styles

Browse Source
This commit is contained in:
Jake Jarvis 2022-01-02 07:56:45 -05:00
parent ddb48ef2ab
commit 5c1d1dbc58
Signed by: jake
GPG Key ID: 2B0C9CF251E69A39
7 changed files with 59 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
next.config.js
View File

@ -2,6 +2,7 @@
* @type {import('next').NextConfig}
*/
const path = require("path");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
@ -22,6 +23,8 @@ module.exports = withBundleAnalyzer({
webpack: (config) => {
config.module.rules.push({
test: /\.svg$/,
issuer: { and: [/\.(js|ts)x?$/] },
include: [path.resolve(__dirname, "components/icons")],
use: [
{
loader: "@svgr/webpack",

7
pages/_app.tsx
View File

@ -6,10 +6,15 @@ import * as Fathom from "fathom-client";
import * as config from "../lib/config";
import type { AppProps } from "next/app";
import meJpg from "../public/static/images/me.jpg";
import faviconIco from "../public/static/images/favicon.ico";
import appleTouchIconPng from "../public/static/images/apple-touch-icon.png";
import meJpg from "../public/static/images/me.jpg";
// global styles
import "modern-normalize/modern-normalize.css";
import "../styles/colors.scss";
import "../styles/typography.scss";
import "../styles/highlight.scss";
import "../styles/index.scss";
export default function App({ Component, pageProps }: AppProps) {

1
styles/_reset.scss
View File

@ -1 +0,0 @@
@import "~modern-normalize/modern-normalize.css";

0
styles/_colors.scss → styles/colors.scss
View File

0
styles/_syntax.scss → styles/highlight.scss
View File

51
styles/index.scss
View File

@ -1,60 +1,9 @@
@use "reset";
@use "typography";
@use "syntax";
@use "colors";
// Global Styles
body {
width: 100%;
height: 100%;
margin: 0 auto;
scroll-behavior: smooth;
background-color: var(--background-outer);
font-family: typography.$font-stack-sans;
font-kerning: normal;
font-variant-ligatures: normal;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
}
code,
kbd,
samp,
pre,
.monospace {
font-family: typography.$font-stack-mono;
}
// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
@supports (font-variation-settings: normal) {
body {
font-family: typography.$font-stack-sans-variable;
font-optical-sizing: auto;
}
code,
kbd,
samp,
pre,
.monospace {
font-family: typography.$font-stack-mono-variable;
}
// Chrome doesn't automatically slant multi-axis Inter var, for some reason.
// Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
em {
font-style: normal !important;
font-variation-settings: "ital" 1, "slnt" -10;
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
code,
kbd,
samp,
pre,
.monospace {
font-style: italic !important;
}
}
}
a {

54
styles/_typography.scss → styles/typography.scss
View File

@ -1,12 +1,12 @@
@use "sass:list";
// stylelint-disable value-keyword-case, scss/operator-no-unspaced
@use "sass:list";
@use "~@fontsource/inter/scss/mixins" as Inter;
@use "~@fontsource/roboto-mono/scss/mixins" as RobotoMono;
@use "~@fontsource/comic-neue/scss/mixins" as ComicNeue;
// System fonts:
// https://primer.style/design/foundations/typography#font-stack
// stylelint-disable-next-line value-keyword-case
$system-fonts-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif;
$system-fonts-mono: ui-monospace, "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier", monospace;
@ -16,12 +16,10 @@ $font-stack-sans-variable: list.join("Inter var", $system-fonts-sans);
$font-stack-mono: list.join("Roboto Mono", $system-fonts-mono);
$font-stack-mono-variable: list.join("Roboto Mono var", $system-fonts-mono);
// stylelint-disable scss/operator-no-unspaced
// prettier-ignore
$unicode-latin-only: (
latin: (U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD),
);
// stylelint-enable scss/operator-no-unspaced
// Inter
@include Inter.fontFaceVariable($fontName: "Inter var", $type: "full", $unicodeMap: $unicode-latin-only);
@ -39,3 +37,51 @@ $unicode-latin-only: (
// Comic Neue
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 400, $unicodeMap: $unicode-latin-only);
@include ComicNeue.fontFace($fontName: "Comic Neue", $weight: 700, $unicodeMap: $unicode-latin-only);
body {
font-family: $font-stack-sans;
font-kerning: normal;
font-variant-ligatures: normal;
font-feature-settings: "kern", "liga", "calt", "clig", "ss01";
}
code,
kbd,
samp,
pre,
.monospace {
font-family: $font-stack-mono;
}
// override above font-family if browser supports variable fonts
// https://caniuse.com/#feat=variable-fonts
@supports (font-variation-settings: normal) {
body {
font-family: $font-stack-sans-variable;
font-optical-sizing: auto;
}
code,
kbd,
samp,
pre,
.monospace {
font-family: $font-stack-mono-variable;
}
// Chrome doesn't automatically slant multi-axis Inter var, for some reason.
// Adding "slnt" -10 fixes Chrome but then over-italicizes in Firefox. AHHHHHHHHHH.
em {
font-style: normal !important;
font-variation-settings: "ital" 1, "slnt" -10;
// Roboto Mono doesn't have this problem, but the above fix breaks it, of course.
code,
kbd,
samp,
pre,
.monospace {
font-style: italic !important;
}
}
}