Skip to content

Commit

Permalink
Update preview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@rishubil
rishubil committed Jun 5, 2024
1 parent 71ca50f commit 7a2f885
Showing 1 changed file with 260 additions and 41 deletions.
301 changes: 260 additions & 41 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,110 +1,329 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INAFFont - Unofficial Font for Ninomae Ina’nis</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
rel="stylesheet">
<style>
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}

/* Prevent font size inflation */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}

/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
font-family: "Montserrat", sans-serif;
color: var(--ink-black);
font-optical-sizing: auto;
margin: 0;
padding: 0;
}

/* Set shorter line heights on headings and interactive elements */
h1,
h2,
h3,
h4,
button,
input,
label {
line-height: 1.1;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
color: currentColor;
}

/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font-family: inherit;
font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
scroll-margin-block: 5ex;
}

@font-face {
font-family: "INAFFont Meconopsis Regular";
src: url("./dist/inaffont-meconopsis-regular.otf") format("opentype");
}

@font-face {
font-family: "INAFFont Meconopsis Bold";
src: url("./dist/inaffont-meconopsis-bold.otf") format("opentype");
}

:root {
--nai-white: #ffffff;
--ink-black: #000000;
--ika-purple: #575068;
--ina-orange: #f29a30;
--inai-purple: #e1d8ef;
}

a {
background-color: var(--ina-orange);
text-decoration: none;
padding: 0.1rem 0.1rem;
}

h1 {
font-family: "INAFFont Meconopsis Bold";
font-size: min(3rem, 10vw);
}

h2 {
margin-top: 3rem;
margin-bottom: 2rem;
}

.header {
background-color: var(--ika-purple);
color: var(--nai-white);
padding: 10rem 0 4rem;
}

.header .subtitle {
font-weight: 500;
font-size: 1.2rem;
margin: 1rem 0 4rem;
text-wrap: balance;
}

.container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
padding: 2rem;
}

.button {
font-weight: 700;
border-radius: 1rem;
line-height: 2.5rem;
padding: 0.4rem 1rem;
background-color: var(--ika-purple);
color: var(--nai-white);
}

.header .button {
background-color: var(--inai-purple);
color: var(--ika-purple);
}

.preview {
word-break: break-word;
font-size: 1.8rem;
font-size: 1.6rem;
}

.font-list ul {
list-style: none;
padding-left: 1rem;
}

.font-list .font-name {
font-weight: 500;
}

.preview.regular {
font-family: "INAFFont Meconopsis Regular";
}

.preview.bold {
font-family: "INAFFont Meconopsis Bold";
}
.demo {

.demo fieldset {
border: none;
padding: 0;
margin-bottom: 1rem;
}

.demo fieldset label {
display: inline-block;
font-weight: 500;
width: 4rem;
}

.demo fieldset select,
.demo fieldset input {
width: 20rem;
max-width: calc(100vw - 4rem);
}

.demo textarea {
width: 100%;
min-width: 100%;
max-width: 100%;
min-height: 200px;
font-family: "INAFFont Meconopsis Regular";
font-size: 1.8rem;
padding: 10px;
margin: 10px 0;
padding: 1rem;
border: none;
resize: none;
border-radius: 0.4rem;
color: var(--nai-white);
background-color: var(--ika-purple);
}

.demo textarea:focus-visible {
outline: none;
}
</style>
</head>

<body>
<div class="container">
<div class="title">
<h1>INAFFont</h1>
<p>Unofficial Font for Ninomae Ina’nis</p>
<a href="https://github.com/yf-dev/inaffont/tree/main/dist" target="_blank">Download</a>
<a href="https://github.com/yf-dev/inaffont" target="_blank">Github</a>
<div class="header">
<div class="container">
<div class="title">
<h1>INAFFont</h1>
<div class="subtitle">Unofficial Font for Ninomae Ina’nis</div>
<a class="button" href="https://github.com/yf-dev/inaffont/tree/main/dist" target="_blank">Download</a>
&nbsp;
<a class="button" href="https://github.com/yf-dev/inaffont" target="_blank">Github</a>
</div>
</div>
</div>
<div class="container">
<div>
<h2>Overview</h2>
<p>
INAFFont is a font that contains the distinctive glyphs used in
<a href="https://hololive.hololivepro.com/en/talents/ninomae-inanis/" target="_blank">Ninomae Ina’nis</a>'s artwork.
<br>
Some characters that are not represented in the artwork are estimated to look similar to other glyphs, so the actual glyphs may differ.
<a href="https://hololive.hololivepro.com/en/talents/ninomae-inanis/" target="_blank">Ninomae
Ina’nis</a>'s artwork.
</p>
<p>
Some characters that are not represented in the artwork are estimated to look similar to other glyphs,
so the actual glyphs may differ.
</p>
</div>
<div>
<div class="font-list">
<h2>Available Fonts</h2>
<ul>
<li>INAFFont Meconopsis: A font created based on the glyphs used in <a href="https://www.youtube.com/watch?v=XzkNg89Cq9Y" target="_blank">MECONOPSIS MV</a></li>
<li><span class="font-name">INAFFont Meconopsis</span>: A font created based on the glyphs used in <a
href="https://www.youtube.com/watch?v=XzkNg89Cq9Y" target="_blank">MECONOPSIS MV</a></li>
</ul>
</div>
<div>
<h2>Disclaimer</h2>
<p>
This project is not an official project of Hololive Production or Ninomae Ina’nis.
<br>
All rights to each glyph and artwork are assets of the respective owner and licensee.
</p>
</div>
<div>
<h2>License</h2>
<p>
SIL OPEN FONT LICENSE Version 1.1
</p>
</div>
<div>
<h2>Preview</h2>
<h3>INAFFont Meconopsis Regular</h3>
<p class="preview regular">
INAFFont Meconopsis Regular<br>
The Quick Brown Fox Jumps Over The Lazy Dog<br>
<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789.,'<br>
</p>
<h3>INAFFont Meconopsis Bold</h3>
<p class="preview bold">
INAFFont Meconopsis Bold<br>
The Quick Brown Fox Jumps Over The Lazy Dog<br>
<br>
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
abcdefghijklmnopqrstuvwxyz<br>
0123456789.,'<br>
</p>
</div>
<div class="demo">
<h2>Try it</h2>
<fieldset>
<label for="font">Font</label>
<select name="font" id="font" value="INAFFont Meconopsis Regular">
<option value="INAFFont Meconopsis Regular">INAFFont Meconopsis Regular</option>
<option value="INAFFont Meconopsis Bold">INAFFont Meconopsis Bold</option>
</select>
<br>
<label for="size">Size</label>
<input type="range" name="size" id="size" min="1" max="3" value="2" step="0.1">
</fieldset>
<textarea spellcheck="false">No, I won't keep praying endlessly</textarea>
<script>
const font = document.getElementById('font');
const size = document.getElementById('size');
const textarea = document.querySelector('textarea');

font.addEventListener('change', () => {
textarea.style.fontFamily = font.value;
});

size.addEventListener('input', () => {
textarea.style.fontSize = `${size.value}rem`;
});
</script>
</div>
<div>
<h2>Disclaimer</h2>
<p>
This project is not an official project of Hololive Production or Ninomae Ina’nis.
</p>
<p>
All rights to each glyph and artwork are assets of the respective owner and licensee.
</p>
</div>
<div>
<h2>Demo</h2>
<textarea class="demo">No, I won't keep praying endlessly
A world without love
Is not the world that I want to see
Tell me, how do I reconcile the joy in my memory</textarea>
<h2>License</h2>
<p>
SIL OPEN FONT LICENSE Version 1.1
</p>
</div>
</div>
</body>

</html>

0 comments on commit 7a2f885

Please sign in to comment.