From bf9ae5904e50ac0031a3bc6343853b526bba4a66 Mon Sep 17 00:00:00 2001 From: kaBeech Date: Sat, 18 Mar 2023 16:13:55 -0700 Subject: [PATCH] Update style for mobile --- index.html | 454 ++++++++++++++++++++++++++--------------------------- style.css | 18 +++ 2 files changed, 245 insertions(+), 227 deletions(-) diff --git a/index.html b/index.html index 843299d..67cc2cf 100644 --- a/index.html +++ b/index.html @@ -10,233 +10,233 @@ -

Serious Sans

-

- A legible monospace font for playful professionals. Comic Sans for hackers -

-

- This font is a fork of dtinth’s - Comic Mono, which - in turn is a fork of - Shannon Miwa’s - Comic Shanns - (version 1) -

- -

Example Text

-
-

The five tall boxing wizards jump quickly.

-

THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!

-

0123456789.:,;(*!?')

+
+

Serious Sans

+

+ A legible monospace font for playful professionals. Comic Sans for + hackers +

+

+ This font is a fork of dtinth’s + Comic Mono, + which in turn is a fork of + Shannon Miwa’s + Comic Shanns + (version 1) +

+

Example Text

+
+

The five tall boxing wizards jump quickly.

+

THE FIVE TALL BOXING WIZARDS JUMP QUICKLY!

+

0123456789.:,;(*!?')

+
+ + + + + + +
+

Downloads

+ +

What?

+

+ Serious Sans is a legible monospaced font made to resemble the classic + Comic Sans font we all know and love. It is designed to be suitable for + use in a professional coding environment while retaining the playfulness + of the original +

+

+ Here's what it looks like viewing one of + my Advent Of Code functions + in VS Code: +

+

+ Serious Sans in VS Code +

+

Why?

+

+ 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 a playful mood so we can just write without getting hung up in + self-criticism +

+

+ 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 us just get to work. But most of us like to have certain standards + that make our work easier. Monospacing and legibility are important + factors that facilitate quick scanning of many lines of code +

+

Legibility

+

+ 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 + difference between an upper case 'I' and a numeral '1' +

+

Monospacing

+

+ Monospacing means ensuring every character has the same width. This is + helpful to quickly line up rows of text. For an example of why this is + helpful, consider adding up a fancy dinner bill: +

+

+ Adding up a fancy dinner bill +

+

+ Without a monospaced font, getting all those numbers to line up for easy + adding would be a pain! +

+

Origins

+

+ I originally changed the font in my IDE to Comic Mono as a joke. I + decided to leave it that way for a while for fun, and found that it + actually seems to help my mindset while working. I made Serious Sans as + my own leetle fork to improve the usability of the font ^_^ +

+

Differences from Comic Mono

+
    +
  1. I edited the 'a' to make it look less like an 'o'
    2. +
  2. + I remade the Bold weight style and added a Light weight style as well +
    3. +
  3. I added Italic styles for each weight style
    4. +
+
+

+ 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 +

+

Any issues?

+

If you notice any, please feel free to open an issue!

+

+ Please note that so far I have only been using the original + SeriousSans.tff. The other styles have been reviewed but are largely + untested +

+

License

+

+ Serious Sans is licensed under the + MIT License. +

+

Disclaimer

+

+ Please note that this font is in no way affiliated with the delightful + Serious Sans Pro + font. I just like classic PC games ^_^ +

- - - - - - - -

Downloads

-

TrueType Format

- -

OpenType Format

- - -

What?

-

- Serious Sans is a legible monospaced font made to resemble the classic - Comic Sans font we all know and love. It is designed to be suitable for - use in a professional coding environment while retaining the playfulness - of the original -

-

- Here's what it looks like viewing one of - my Advent Of Code functions - in VS Code: -

-

- Serious Sans in VS Code -

- -

Why?

-

- 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 - a playful mood so we can just write without getting hung up in - self-criticism -

-

- 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 - us just get to work. But most of us like to have certain standards that - make our work easier. Monospacing and legibility are important factors - that facilitate quick scanning of many lines of code -

- -

Legibility

-

- 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 - difference between an upper case 'I' and a numeral '1' -

- -

Monospacing

-

- Monospacing means ensuring every character has the same width. This is - helpful to quickly line up rows of text. For an example of why this is - helpful, consider adding up a fancy dinner bill: -

-

- Adding up a fancy dinner bill -

-

- Without a monospaced font, getting all those numbers to line up for easy - adding would be a pain! -

- -

Origins

-

- I originally changed the font in my IDE to Comic Mono as a joke. I decided - to leave it that way for a while for fun, and found that it actually seems - to help my mindset while working. I made Serious Sans as my own leetle - fork to improve the usability of the font ^_^ -

- -

Differences from Comic Mono

-
    -
  1. I edited the 'a' to make it look less like an 'o'
    2. -
  2. - I remade the Bold weight style and added a Light weight style as well -
    3. -
  3. I added Italic styles for each weight style
    4. -
-
-

- 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 -

- -

Any issues?

-

If you notice any, please feel free to open an issue!

-

- Please note that so far I have only been using the original - SeriousSans.tff. The other styles have been reviewed but are largely - untested -

- -

License

-

- Serious Sans is licensed under the - MIT License. -

- -

Disclaimer

-

- Please note that this font is in no way affiliated with the delightful - Serious Sans Pro - font. I just like classic PC games ^_^ -

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