Split up CSS into multiple files and use CSS imports (#206)
This splits up our `styles.css` file into multiple CSS files that sit alongside the TSX files that use their classes. All "generic" CSS that isn't used by any one particular component, such as our `thingy` class, is currently being put into `page.css`. The CSS files are imported via `import` statements in their associated TSX files. As such, this fixes #164. This also starts formatting our CSS using Prettier. It also moves some of our `<head>` tags back into `index.html`, reverting a tiny bit of #205, to ensure that some of the metadata can be recognized by browsers, and start loading asynchronously, independently of the page's JavaScript (I see no reason why any of those elements need to change dynamically based on the app's state, so there don't seem to be any downsides to this).pull/207/head
rodzic
86a39b56e0
commit
ea7673f70e
|
@ -5,3 +5,4 @@ lib/_svg-vocabulary.ts
|
|||
lib/**/*.avsc.ts
|
||||
dist/browser-main.js
|
||||
dist/browser-main.js.map
|
||||
dist/browser-main.css
|
||||
|
|
|
@ -17,4 +17,8 @@
|
|||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[css]": {
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
}
|
|
@ -0,0 +1 @@
|
|||
module.exports = {};
|
|
@ -1,4 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="img/mystic-symbolic-icon.png" />
|
||||
<link rel="stylesheet" href="browser-main.css" />
|
||||
<noscript>
|
||||
<p>Alas, you need JavaScript to peruse this page.</p>
|
||||
</noscript>
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
.sidebar .color-widget {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .color-widget label {
|
||||
flex-grow: 1;
|
||||
}
|
|
@ -1,6 +1,8 @@
|
|||
import React from "react";
|
||||
import { slugify } from "./util";
|
||||
|
||||
import "./color-widget.css";
|
||||
|
||||
type ColorWidgetProps = {
|
||||
label: string;
|
||||
value: string;
|
||||
|
|
|
@ -0,0 +1,13 @@
|
|||
.overlay-wrapper {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
|
@ -3,6 +3,8 @@ import { renderToStaticMarkup } from "react-dom/server";
|
|||
import { createGIF } from "./animated-gif";
|
||||
import { getSvgMetadata, SvgWithBackground } from "./auto-sizing-svg";
|
||||
|
||||
import "./export-svg.css";
|
||||
|
||||
function getSvgDocument(svgMarkup: string): string {
|
||||
return [
|
||||
`<?xml version="1.0" encoding="utf-8"?>`,
|
||||
|
|
|
@ -0,0 +1,8 @@
|
|||
.hover-debug-helper {
|
||||
font-family: "Consolas", "Monaco", monospace;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
|
@ -1,5 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import "./hover-debug-helper.css";
|
||||
|
||||
function getTargetPathInfo(target: SVGElement): string[] {
|
||||
const path: string[] = [];
|
||||
let node = target;
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
.sidebar .numeric-slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider input {
|
||||
flex-basis: 90%;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider .slider-value {
|
||||
/**
|
||||
* We want to keep a minimum width for the value or else
|
||||
* there will be a "jitter" effect where the slider will
|
||||
* contract as a result of the label getting smaller,
|
||||
* which will then change the value of the slider, which
|
||||
* will then change the width of the label, ad infinitum.
|
||||
*/
|
||||
min-width: 2em;
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
html, body {
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
|
||||
|
@ -31,8 +32,8 @@ header h1 {
|
|||
}
|
||||
|
||||
.MSlogo {
|
||||
height:50px;
|
||||
vertical-align:middle;
|
||||
height: 50px;
|
||||
vertical-align: middle;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
@ -45,25 +46,11 @@ footer {
|
|||
grid-area: footer;
|
||||
}
|
||||
|
||||
select, input[type="text"] {
|
||||
select,
|
||||
input[type="text"] {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.checkerboard-bg {
|
||||
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
|
||||
background: #eee url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.hover-debug-helper {
|
||||
font-family: "Consolas", "Monaco", monospace;
|
||||
color: white;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
padding: 4px;
|
||||
margin-top: 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/** Stupid class we're using instead of <p> to avoid ValidateDOMNesting warnings. */
|
||||
.thingy {
|
||||
margin-top: 10px;
|
||||
|
@ -125,49 +112,3 @@ ul.navbar li:last-child {
|
|||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sidebar .color-widget {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .color-widget label {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider input {
|
||||
flex-basis: 90%;
|
||||
}
|
||||
|
||||
.sidebar .numeric-slider .slider .slider-value {
|
||||
/**
|
||||
* We want to keep a minimum width for the value or else
|
||||
* there will be a "jitter" effect where the slider will
|
||||
* contract as a result of the label getting smaller,
|
||||
* which will then change the value of the slider, which
|
||||
* will then change the width of the label, ad infinitum.
|
||||
*/
|
||||
min-width: 2em;
|
||||
}
|
||||
|
||||
.overlay-wrapper {
|
||||
position: fixed;
|
||||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
|
@ -2,6 +2,8 @@ import React, { MouseEvent, useContext } from "react";
|
|||
import { Helmet } from "react-helmet";
|
||||
import type { PageName } from "./pages";
|
||||
|
||||
import "./page.css";
|
||||
|
||||
export type PageContext = {
|
||||
currPage: PageName;
|
||||
allPages: PageName[];
|
||||
|
@ -68,10 +70,7 @@ export const Page: React.FC<PageProps> = ({ title, children }) => {
|
|||
return (
|
||||
<div className="page">
|
||||
<Helmet>
|
||||
<meta charSet="utf-8" />
|
||||
<title>{fullTitle}</title>
|
||||
<link rel="icon" href="img/mystic-symbolic-icon.png" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
</Helmet>
|
||||
<header>
|
||||
<h1>
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
.checkerboard-bg {
|
||||
/* https://codepen.io/pascalvgaal/pen/jPXPNP/ */
|
||||
background: #eee
|
||||
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" fill-opacity=".1" ><rect x="200" width="200" height="200" /><rect y="200" width="200" height="200" /></svg>');
|
||||
background-size: 20px 20px;
|
||||
}
|
|
@ -11,6 +11,8 @@ import { SymbolContextWidget } from "../symbol-context-widget";
|
|||
import { HoverDebugHelper } from "../hover-debug-helper";
|
||||
import { Page } from "../page";
|
||||
|
||||
import "./vocabulary-page.css";
|
||||
|
||||
type SvgSymbolProps = {
|
||||
data: SvgSymbolData;
|
||||
scale?: number;
|
||||
|
|
|
@ -5,8 +5,8 @@
|
|||
"main": "index.js",
|
||||
"scripts": {
|
||||
"deploy": "npm run build && gh-pages -d dist",
|
||||
"prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx",
|
||||
"prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx",
|
||||
"prettier:check": "prettier --check lib/**/*.ts lib/**/*.tsx lib/**/*.css",
|
||||
"prettier:fix": "prettier --write lib/**/*.ts lib/**/*.tsx lib/**/*.css",
|
||||
"typecheck": "tsc --noemit",
|
||||
"eslint": "eslint lib --ext .ts,.tsx --max-warnings 1",
|
||||
"lint": "npm run prettier:check && npm run typecheck && npm run eslint",
|
||||
|
@ -22,6 +22,9 @@
|
|||
"author": "",
|
||||
"license": "ISC",
|
||||
"jest": {
|
||||
"moduleNameMapper": {
|
||||
"\\.(css)$": "<rootDir>/__mocks__/css-mock.js"
|
||||
},
|
||||
"testPathIgnorePatterns": [
|
||||
"dist",
|
||||
".cache"
|
||||
|
|
Ładowanie…
Reference in New Issue