alvierahman90/comic-mono-font
1
0
Fork 0
mirror of https://github.com/dtinth/comic-mono-font.git synced 2026-02-21 22:43:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update style for mobile

Browse Source
This commit is contained in:
kaBeech
2023-03-18 16:13:55 -07:00
parent 36c669f60f
commit bf9ae5904e
2 changed files with 245 additions and 227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@@ -10,19 +10,20 @@
</head> </head>
<body> <body>
<div id="main">
<h1>Serious Sans</h1> <h1>Serious Sans</h1>
<p> <p>
A legible monospace font for playful professionals. Comic Sans for hackers A legible monospace font for playful professionals. Comic Sans for
hackers
</p> </p>
<p> <p>
This font is a fork of <a href="https://github.com/dtinth">dtinth</a>’s This font is a fork of <a href="https://github.com/dtinth">dtinth</a>’s
<a href="https://github.com/dtinth/comic-mono-font">Comic Mono</a>, which <a href="https://github.com/dtinth/comic-mono-font">Comic Mono</a>,
in turn is a fork of which in turn is a fork of
<a href="https://github.com/shannpersand">Shannon Miwa</a>’s <a href="https://github.com/shannpersand">Shannon Miwa</a>’s
<a href="https://github.com/shannpersand/comic-shanns">Comic Shanns</a> <a href="https://github.com/shannpersand/comic-shanns">Comic Shanns</a>
(version 1) (version 1)
</p> </p>
<h2>Example Text</h2> <h2>Example Text</h2>
<div id="exampleText" class="serious"> <div id="exampleText" class="serious">
<p>The five tall boxing wizards jump quickly.</p> <p>The five tall boxing wizards jump quickly.</p>
@@ -35,8 +36,10 @@
<button id="seriousBoldItalicButton">Serious Sans Bold Italic</button> <button id="seriousBoldItalicButton">Serious Sans Bold Italic</button>
<button id="seriousLightButton">Serious Sans Light</button> <button id="seriousLightButton">Serious Sans Light</button>
<button id="seriousLightItalicButton">Serious Sans Light Italic</button> <button id="seriousLightItalicButton">Serious Sans Light Italic</button>
<br />
<h2>Downloads</h2> <h2>Downloads</h2>
<div id="downloads">
<div>
<h3>TrueType Format</h3> <h3>TrueType Format</h3>
<ul> <ul>
<li> <li>
@@ -78,6 +81,8 @@
> >
</li> </li>
</ul> </ul>
</div>
<div>
<h3>OpenType Format</h3> <h3>OpenType Format</h3>
<ul> <ul>
<li> <li>
@@ -119,7 +124,8 @@
> >
</li> </li>
</ul> </ul>
</div>
</div>
<h2>What?</h2> <h2>What?</h2>
<p> <p>
Serious Sans is a legible monospaced font made to resemble the classic Serious Sans is a legible monospaced font made to resemble the classic
@@ -146,29 +152,26 @@
style="max-width: 100%" style="max-width: 100%"
/></a> /></a>
</p> </p>
<h2>Why?</h2> <h2>Why?</h2>
<p> <p>
To overcome writer's block, some writers change the font of their word To overcome writer's block, some writers change the font of their word
processor to Comic Sans. Perhaps the jaunty style helps put our brains in processor to Comic Sans. Perhaps the jaunty style helps put our brains
a playful mood so we can just write without getting hung up in in a playful mood so we can just write without getting hung up in
self-criticism self-criticism
</p> </p>
<p> <p>
Serious Sans aims to provide that same experience for programmers and Serious Sans aims to provide that same experience for programmers and
their IDE's. As coders, we also enjoy playful styling and tools that help their IDE's. As coders, we also enjoy playful styling and tools that
us just get to work. But most of us like to have certain standards that help us just get to work. But most of us like to have certain standards
make our work easier. Monospacing and legibility are important factors that make our work easier. Monospacing and legibility are important
that facilitate quick scanning of many lines of code factors that facilitate quick scanning of many lines of code
</p> </p>
<h3>Legibility</h3> <h3>Legibility</h3>
<p> <p>
Legibility means being able to quickly tell which character is which. In Legibility means being able to quickly tell which character is which. In
fonts with low legibility, for example, it can be difficult to tell the fonts with low legibility, for example, it can be difficult to tell the
difference between an upper case 'I' and a numeral '1' difference between an upper case 'I' and a numeral '1'
</p> </p>
<h3>Monospacing</h3> <h3>Monospacing</h3>
<p> <p>
Monospacing means ensuring every character has the same width. This is Monospacing means ensuring every character has the same width. This is
@@ -191,15 +194,13 @@
Without a monospaced font, getting all those numbers to line up for easy Without a monospaced font, getting all those numbers to line up for easy
adding would be a pain! adding would be a pain!
</p> </p>
<h3>Origins</h3> <h3>Origins</h3>
<p> <p>
I originally changed the font in my IDE to Comic Mono as a joke. I decided I originally changed the font in my IDE to Comic Mono as a joke. I
to leave it that way for a while for fun, and found that it actually seems decided to leave it that way for a while for fun, and found that it
to help my mindset while working. I made Serious Sans as my own leetle actually seems to help my mindset while working. I made Serious Sans as
fork to improve the usability of the font ^_^ my own leetle fork to improve the usability of the font ^_^
</p> </p>
<h2>Differences from Comic Mono</h2> <h2>Differences from Comic Mono</h2>
<ol> <ol>
<li>I edited the 'a' to make it look less like an 'o'</li> <li>I edited the 'a' to make it look less like an 'o'</li>
@@ -211,9 +212,9 @@
<br /> <br />
<p> <p>
Note: you can ignore the generate.py file - it generates the original Note: you can ignore the generate.py file - it generates the original
Comic Mono font. I haven't decided yet if I'm going to modify or remove it Comic Mono font. I haven't decided yet if I'm going to modify or remove
it
</p> </p>
<h2>Any issues?</h2> <h2>Any issues?</h2>
<p>If you notice any, please feel free to open an issue!</p> <p>If you notice any, please feel free to open an issue!</p>
<p> <p>
@@ -221,13 +222,11 @@
SeriousSans.tff. The other styles have been reviewed but are largely SeriousSans.tff. The other styles have been reviewed but are largely
untested untested
</p> </p>
<h2>License</h2> <h2>License</h2>
<p> <p>
Serious Sans is licensed under the Serious Sans is licensed under the
<a href="/kaBeech/serious-sans/blob/main/LICENSE">MIT License</a>. <a href="/kaBeech/serious-sans/blob/main/LICENSE">MIT License</a>.
</p> </p>
<h2>Disclaimer</h2> <h2>Disclaimer</h2>
<p> <p>
Please note that this font is in no way affiliated with the delightful Please note that this font is in no way affiliated with the delightful
@@ -238,5 +237,6 @@
> >
font. I just like classic PC games ^_^ font. I just like classic PC games ^_^
</p> </p>
</div>
</body> </body>
</html> </html>

18
style.css
View File

@@ -28,17 +28,35 @@
src: url("./SeriousSans/ttf/SeriousSansLightItalic.ttf"); src: url("./SeriousSans/ttf/SeriousSansLightItalic.ttf");
} }
@media (min-width: 440px) {
#main {
max-width: 70%;
}
#downloads {
display: flex;
justify-content: space-evenly;
}
}
body { body {
background-color: #1e1e1e; background-color: #1e1e1e;
color: #d4d4d4; color: #d4d4d4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 100%;
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
} }
#main {
display: flex;
flex-direction: column;
padding: 0 1em;
}
ul, ul,
ol { ol {
list-style: none; list-style: none;