Update site brand to new name and style

hack-pad · Aug 1, 2021 · 4946bfb · 4946bfb
1 parent cbcd7e2
commit 4946bfb
Show file tree

Hide file tree

Showing 8 changed files with 21 additions and 23 deletions.
diff --git a/cmd/editor/ide/window.css b/cmd/editor/ide/window.css
@@ -73,7 +73,7 @@
 }
 
 .ide .controls .control:hover {
- color: var(--app-title-highlight);
+ color: var(--app-accent);
  background-color: var(--app-controls-highlight);
 }
 

diff --git a/cmd/editor/ide/window.html b/cmd/editor/ide/window.html
@@ -1,7 +1,6 @@
 <header>
  <h1 class="app-title">
- <span class="app-title-go">go</span>
- <span class="app-title-wasm">wasm</span>
+ <span class="app-title-hack">hack</span><span class="app-title-pad">pad</span>
  </h1>
  <div class="controls">
  <button class="control" title="build"><span class="fa fa-hammer"></span></button>

diff --git a/server/package-lock.json b/server/package-lock.json
diff --git a/server/package.json b/server/package.json
@@ -4,6 +4,7 @@
  "private": true,
  "homepage": ".",
  "dependencies": {
+ "@fontsource/roboto": "^4.5.0",
  "@fortawesome/fontawesome-free": "^5.15.1",
  "@testing-library/jest-dom": "^4.2.4",
  "@testing-library/react": "^9.3.2",

diff --git a/server/src/App.css b/server/src/App.css
@@ -7,7 +7,7 @@
  --app-controls-background: #fff;
  --app-controls-background-light: rgba(224, 224, 224, 0.5);
  --app-controls-highlight: rgba(119, 0, 136, 0.1);
- --app-title-highlight: var(--app-accent);
+ --app-title-highlight: rgba(199, 146, 234);
  --app-accent-alternate: rgba(50, 0, 135);
 }
 
@@ -38,7 +38,7 @@ h1 pre, h2 pre, h3 pre, h4 pre, h5 pre, h6 pre {
 }
 
 h1.app-title {
- font-size: 1em;
+ font-size: 1.1em;
  cursor: default;
  user-select: none;
 
@@ -49,38 +49,29 @@ h1.app-title {
 }
 
 .app-title {
- font-family: var(--font-mono);
- font-weight: 800;
+ font-family: var(--font-title);
+ font-weight: 400;
+ letter-spacing: 0.03em;
  margin: 0 0.3em;
 }
 
-.app-title-go {
- color: var(--app-title-highlight);
+.app-title-hack {
  display: inline-block;
- transition: transform 0.2s 0s ease-in;
 }
 
-.app-title:hover .app-title-go {
- transform: matrix(1, 0, -0.25, 1, 2, 0);
+.app-title-hack {
+ color: #f07178;
 }
 
-.app-title-wasm:after {
- content: "()";
+.app-title-pad {
+ color: var(--app-title-highlight);
 }
 
 @media screen and (prefers-color-scheme: dark) {
  h1.app-title {
  border-right: 1px solid rgb(45, 45, 45);
  }
 
- .app-title-wasm {
- color: #f07178;
- }
-
- .app-title-wasm:after {
- color: white;
- content: "()";
- }
 }
 
 .console {

diff --git a/server/src/App.js b/server/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import './App.css';
 
 import './Tabs.css';
+import "@fontsource/roboto";
 import '@fortawesome/fontawesome-free/css/all.css';
 import Compat from './Compat';
 import Loading from './Loading';

diff --git a/server/src/Loading.js b/server/src/Loading.js
@@ -14,7 +14,7 @@ export default function Loading({ percentage }) {
  </div>
  <p>
  installing <span className="app-title">
- <span className="app-title-go">go</span> <span className="app-title-wasm">wasm</span>
+ <span className="app-title-hack">hack</span><span className="app-title-pad">pad</span>
  </span>
  </p>
  <p><em>please wait...</em></p>

diff --git a/server/src/index.css b/server/src/index.css
@@ -1,5 +1,6 @@
 :root {
  --font-mono: Menlo, Courier, monospace;
+ --font-title: Roboto, Menlo, Courier, monospace;
 }
 
 html, body {