mirror of
https://github.com/eigilnikolajsen/commit-mono.git
synced 2024-11-23 19:44:38 +03:00
mostly css, but also playing with nav
This commit is contained in:
Eigil Nikolajsen
parent
228385bd91
commit
3c445ecb8d
@ -1,5 +1,5 @@
|
||||
{
|
||||
"printWidth": 150,
|
||||
"printWidth": 120,
|
||||
"tabs": 4,
|
||||
"useTabs": true,
|
||||
"semi": false
|
||||
|
||||
88
index.html
88
index.html
@ -16,20 +16,42 @@
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="src/css/style.css" />
|
||||
<link rel="stylesheet" href="src/css/section_1.css" />
|
||||
<link rel="stylesheet" href="src/css/section_2.css" />
|
||||
<link rel="stylesheet" href="src/css/section_3.css" />
|
||||
<link rel="stylesheet" href="src/css/section_4.css" />
|
||||
<link rel="stylesheet" href="src/css/section_5.css" />
|
||||
<link rel="stylesheet" href="src/css/section_6.css" />
|
||||
<link rel="stylesheet" href="src/css/section_7.css" />
|
||||
<link rel="stylesheet" href="src/css/section_8.css" />
|
||||
<link rel="stylesheet" href="src/css/section_9.css" />
|
||||
<link rel="stylesheet" href="src/css/section_10.css" />
|
||||
|
||||
<!-- JS -->
|
||||
<script src="src/js/utility_functions.js" defer></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/opentype.js" defer></script>
|
||||
<script src="src/js/t.js" defer></script>
|
||||
<script src="src/js/website_data.js" defer></script>
|
||||
<script src="src/js/dynamic_favicon.js" defer></script>
|
||||
<script src="src/js/nav.js" defer></script>
|
||||
<script src="src/js/section.js" defer></script>
|
||||
<script src="src/js/focus.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<section>
|
||||
<form onchange="updateOptions(event, this)">
|
||||
<output id="weight_output" for="weight">450</output>
|
||||
<input type="range" name="weight" id="weight" min="300" max="700" step="25" value="450" oninput="updateLabel(this)" />
|
||||
<input
|
||||
type="range"
|
||||
name="weight"
|
||||
id="weight"
|
||||
min="300"
|
||||
max="700"
|
||||
step="25"
|
||||
value="450"
|
||||
oninput="updateLabel(this)"
|
||||
/>
|
||||
|
||||
<!-- select alternates -->
|
||||
<fieldset>
|
||||
@ -94,16 +116,60 @@
|
||||
<nav></nav>
|
||||
</header>
|
||||
<div id="section_container">
|
||||
<section id="section_1"></section>
|
||||
<section id="section_2"></section>
|
||||
<section id="section_3"></section>
|
||||
<section id="section_4"></section>
|
||||
<section id="section_5"></section>
|
||||
<section id="section_6"></section>
|
||||
<section id="section_7"></section>
|
||||
<section id="section_8"></section>
|
||||
<section id="section_9"></section>
|
||||
<section id="section_10"></section>
|
||||
<section id="section_1">
|
||||
<div class="content_container">
|
||||
<h1>Commit Mono. <br />Neutral programming typeface.</h1>
|
||||
<blockquote></blockquote>
|
||||
<figure>
|
||||
<blockquote cite="https://jaspermorrison.com/publications/essays/super-normal">
|
||||
<p>
|
||||
There are better ways to design than putting a big effort into making something look special. Special
|
||||
is generally less useful than normal, and less rewarding in the long term. Special things demand
|
||||
attention for the wrong reasons, interrupting potentially good atmosphere with their awkward presence.
|
||||
</p>
|
||||
</blockquote>
|
||||
<figcaption>
|
||||
<p>—Jasper Morrison, <cite>Super Normal Manifesto</cite></p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section id="section_2">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_3">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_4">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_5">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_6">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_7">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_8">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_9">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
<section id="section_10">
|
||||
<div class="top_container"></div>
|
||||
<div class="content_container"></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
@ -35,10 +35,7 @@
|
||||
const precision = document.querySelector("#precision")
|
||||
const resultButton = document.querySelector("#resultButton")
|
||||
submit.addEventListener("click", () => {
|
||||
const result = generateAxisValue(
|
||||
[+start.value, +end.value],
|
||||
+precision.value
|
||||
)
|
||||
const result = generateAxisValue([+start.value, +end.value], +precision.value)
|
||||
resultButton.textContent = result
|
||||
navigator.clipboard.writeText(result)
|
||||
})
|
||||
|
||||
1776
package-lock.json
generated
1776
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
3
src/css/section_1.css
Normal file
3
src/css/section_1.css
Normal file
@ -0,0 +1,3 @@
|
||||
#section_1 h1 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
0
src/css/section_10.css
Normal file
0
src/css/section_10.css
Normal file
0
src/css/section_2.css
Normal file
0
src/css/section_2.css
Normal file
0
src/css/section_3.css
Normal file
0
src/css/section_3.css
Normal file
0
src/css/section_4.css
Normal file
0
src/css/section_4.css
Normal file
0
src/css/section_5.css
Normal file
0
src/css/section_5.css
Normal file
0
src/css/section_6.css
Normal file
0
src/css/section_6.css
Normal file
0
src/css/section_7.css
Normal file
0
src/css/section_7.css
Normal file
0
src/css/section_8.css
Normal file
0
src/css/section_8.css
Normal file
0
src/css/section_9.css
Normal file
0
src/css/section_9.css
Normal file
@ -2,13 +2,13 @@
|
||||
font-family: "CommitMono";
|
||||
src: url("/fonts/CommitMonoV100-450.otf");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 450;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "CommitMonoNum";
|
||||
src: url("data:font/woff2;charset=url-8;base64,d09GMk9UVE8AAATUAAkAAAAAB5wAAASNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAADYZUBmAAgVIBNgIkAyYEBgWDSQcgG/QGESSTEyf7UIKIlRMKyeUDAQAMAAAAAAD007tZk5CEKl1LtxdawqpQMZH9c/cHNxWCaGzNHl5NOpkEnVLEYiDp/6fyqYiXjLT7497x33Wez0dFsBHWBhnL5sS1LZAsTKMxpoZZGEcBawqwM0kL/MMIVEKEcaLmLCsjIyXfIyszy7MgY4lvQlJBekxu6cNLHzpILiHlvECuRbWrEThCTXBPraht3nDiOiSNrOMv0/fFGmA4ebfiRB0dhJKG9tiyIDNlOaX0htkHJuTmpWRlSmVLU9nTENLsgpcgREQTgQhocg2JEiJQhJSpilFlf1CEXhTGAeISOUq/pMIsEVaIpOYgOFHDwoI3wEEhwdQFDi8I08McLuStT2t9gzlYIMY8pLHVexoPn+bA9fSvb4d35oWvk2B6tIkNi199OIeHbsD0YHx3mDeHXf1mz5eInmvKg+9hJwXtyswtSszHM8UuQnBspUcdsZdQJF+reQ//FEIiVNP3nm+9foX7LXuI1ch/d5nV3CbJS+Zcz6m9N8V3jkU4h+eEejnzuBVvoE2EIjCTb2TPdZzYd1N892SYs0twpD3vZ3GReXbO39LC3U/f1PPwlWbehMHoixmwoP3lNai/CLtislZydfXOUzc5QHq/WIRVDWxmS0QwoaDYpoi2+GgO9+IGITTIp9KjURQ2fQqmMPk+niyPxIwQ7x4Noo2FogfgyGKy/70FqItB/OUzcMAu/4Q1giPLMtL4NVBEw7Z7GJjY0Sn3Kuh9qw6uOSl+ecFNpuvpZmjre/BaHS+Ck1dYE48rL15euvLk6UVXQwMPVxN+pWIqi2U4l3bXTdUz57DO5/nwH2h9/wqaMGnZJ6wam1idlyiBdDhFr36Z5msGViqU6VujkVZySnh2bwDP2WcX/aysPHyMjT3O3r9/8fQzHs5SN4+HurgEhTo4BB25evX4kZv8GEfB9B+vgXkSdMN4I399/Z6zN7jfuo+wMnWcrvksxz0+17MkxhlBjqYcZn7owfT90R1fmAySbmCogH7yxStP+cKxqSzIoEcufenNllf/3F1n0Tfcw1rzFmBNPOnd4rvqnh2Dq3dKcDqG/a1mQN58Ad+BF3sGJw6sGRBmMKVlyvIvzbuCRVTiohvRPn8rGQxNvM4mttzCHiIhZYYgAZHuRCdAJoX6iSkkeEFP6j3kMB1BTAKEEBLYphV9LdoE4TdWYFRCCCHTUbPJtkmGFALHU2gMISXKVKhSo45iDKUsSsgZeNVJmeQsV5DlvSNf8+v8gSYnLyUgw7ei0Z2G+RUVCh8QhF4cNAb9MVM+oVG+JcN0CcpM9lAeUd/kHEKInGyXQccf4/+2rNVyS36c2ZvHnQMbdu405A2JIKSqtb+DoH4xAZKQegwU1jSgqVuwncEyJEAUlRGB40YASSQBBCLlAWWhm0Dj4G7GwmB/hHl/juo/ZoH/VM3v22MnS4aZmSKfhyyZ9rGeCmTwlSBJgXQxcgVKcC15UupjpWSWWk4jZgWOUGsJ7zGja7mt0ws9jtwZ043K+rZGilCi+VX3tuPEhtv7ciOEEAAA");
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-weight: 450;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
@ -17,15 +17,24 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
:root {
|
||||
--text: #111;
|
||||
--bg: #aaa;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: #aaa;
|
||||
background-color: #111;
|
||||
color: var(--bg);
|
||||
background-color: var(--text);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #aaa;
|
||||
background-color: var(--bg);
|
||||
font-family: CommitMono;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button_container {
|
||||
@ -57,7 +66,7 @@ button::before {
|
||||
|
||||
button:hover {
|
||||
background-color: #000;
|
||||
color: #aaa;
|
||||
color: var(--bg);
|
||||
/* animation: 200ms infinite steps(2, jump-none) flicker; */
|
||||
}
|
||||
|
||||
@ -82,8 +91,8 @@ button:focus-visible:active::before {
|
||||
|
||||
button:focus-visible {
|
||||
outline: none;
|
||||
background-color: #000;
|
||||
color: #aaa;
|
||||
background-color: var(--text);
|
||||
color: var(--bg);
|
||||
}
|
||||
|
||||
@keyframes focus_animation {
|
||||
@ -96,31 +105,46 @@ button:focus-visible {
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: fixed;
|
||||
inset: 2rem;
|
||||
display: grid;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
width: max-content;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
#section_container {
|
||||
position: fixed;
|
||||
inset: 2rem;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
#section_container > section {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
max-width: 50ch;
|
||||
}
|
||||
|
||||
#checker {
|
||||
width: 1000px;
|
||||
aspect-ratio: 1/1;
|
||||
background: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%, #000 0% 75%) 50% / 50px 50px;
|
||||
h1 {
|
||||
font-size: 1.5rem;
|
||||
line-height: 2rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.fill {
|
||||
font-size: 12px;
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.fill::before {
|
||||
content: "";
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background: repeating-conic-gradient(#000 0% 25%, transparent 0% 50%, transparent 0% 75%, transparent 0% 100%) 50% / 2px 2px;
|
||||
}
|
||||
|
||||
.numtest {
|
||||
font-size: 3rem;
|
||||
font-family: "CommitMonoNum", monospace;
|
||||
*:focus {
|
||||
color: var(--bg);
|
||||
background-color: var(--text);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
0
src/js/focus.js
Normal file
0
src/js/focus.js
Normal file
@ -3,10 +3,33 @@ const nav = document.querySelector("nav")
|
||||
websiteData.sections.forEach((section, index) => {
|
||||
const a = document.createElement("a")
|
||||
a.textContent = `${index + 1 < 10 ? `0${index + 1}` : index + 1} ${capitalize(section.name)}`
|
||||
a.tabIndex = 1000 + index
|
||||
a.classList.add("nav_element")
|
||||
a.dataset.sectionIndex = index + 1
|
||||
a.addEventListener("click", (e) => {
|
||||
console.log(e)
|
||||
})
|
||||
nav.append(a)
|
||||
})
|
||||
|
||||
function capitalize(string) {
|
||||
const stringArray = string.split("")
|
||||
return stringArray.shift().toUpperCase() + stringArray.join("")
|
||||
}
|
||||
window.addEventListener("keydown", (e) => {})
|
||||
|
||||
window.addEventListener("keyup", (e) => {
|
||||
console.log(`keyup: ${e.code}`)
|
||||
if (e.code == "Enter") {
|
||||
if (document.activeElement) {
|
||||
console.log(document.activeElement)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let active
|
||||
document.addEventListener("focusin", (e) => {
|
||||
active = document.activeElement
|
||||
if (active.classList.contains("nav_element")) {
|
||||
const sections = document.querySelectorAll("#section_container section")
|
||||
sections.forEach((section) => (section.style.visibility = "hidden"))
|
||||
const activeSection = document.querySelector(`#section_${active.dataset.sectionIndex}`)
|
||||
activeSection.style.visibility = "visible"
|
||||
}
|
||||
})
|
||||
|
||||
11
src/js/section.js
Normal file
11
src/js/section.js
Normal file
@ -0,0 +1,11 @@
|
||||
websiteData.sections.forEach((section, index) => {
|
||||
const topContainer = document.querySelector(`#section_${index + 1} .top_container`)
|
||||
if (topContainer) {
|
||||
const h1 = document.createElement("h1")
|
||||
h1.textContent = `${index + 1 < 10 ? `0${index + 1}` : index + 1} ${capitalize(section.name)}`
|
||||
const br = document.createElement("br")
|
||||
const p = document.createElement("p")
|
||||
p.textContent = section.description
|
||||
topContainer.append(h1, br, p)
|
||||
}
|
||||
})
|
||||
5
src/js/utility_functions.js
Normal file
5
src/js/utility_functions.js
Normal file
@ -0,0 +1,5 @@
|
||||
// takes a string and returns a string, where the first letter is uppercase
|
||||
function capitalize(string) {
|
||||
const stringArray = string.split("")
|
||||
return stringArray.shift().toUpperCase() + stringArray.join("")
|
||||
}
|
||||
@ -31,12 +31,14 @@ const websiteData = {
|
||||
},
|
||||
{
|
||||
name: "distinction",
|
||||
description: "With simple letter constructions Commit Mono emphasises character distinction without compromising style consistency.",
|
||||
description:
|
||||
"With simple letter constructions Commit Mono emphasises character distinction without compromising style consistency.",
|
||||
content: {},
|
||||
},
|
||||
{
|
||||
name: "features",
|
||||
description: "Commit Mono comes without coding ligatures by default. However, it comes with a few helpful features to enhance reading.",
|
||||
description:
|
||||
"Commit Mono comes without coding ligatures by default. However, it comes with a few helpful features to enhance reading.",
|
||||
content: {},
|
||||
},
|
||||
{
|
||||
@ -46,7 +48,8 @@ const websiteData = {
|
||||
},
|
||||
{
|
||||
name: "download",
|
||||
description: "Generate static font files with your alternates baked in for ease of use in all editors and terminals.",
|
||||
description:
|
||||
"Generate static font files with your alternates baked in for ease of use in all editors and terminals.",
|
||||
content: {},
|
||||
},
|
||||
{
|
||||
|
||||
Loading…
Reference in New Issue
Block a user