Vines Sans Showcase Website
By
@Visott
- 1 Devlogs
- 4 Total hours
I am building a website to showcase my Vines themed font I made using Calligraphr.
Ship #1
@Visott
on
Vines Sans Showcase Website
I made a website to showcase my Vines themed font! It has a marquee feature, a editable text box where you can tryout the font, and a grid to showcase all the glyphs that the font supports!
@Visott
on
Vines Sans Showcase Website
4h 22m 11s logged
Devlog #1
Context & What I built
I made a website to showcase a font I drew using Calligraphr and ibis Paint.
Unfortunately I didn’t use Lapse to record my font drawing process 😭 so I am unable to publish the font itself as a project.
Process
I learned how to add a editable text block using contenteditable="true" within the div. I also learned how to add a coding snippet using <pre><code>...</code></pre>.
Marquee Feature
Since the marquee tag was deprecated, I built a marquee of text using an animation keyframe that I defined in CSS. I used white-space: no-wrap in order to stop the text in the marquee from wrapping and instead flow on one horizontal line. overflow-x: auto was used to fix a bug where the text would overflow to the right side of the screen.
Bugs
I ran into an issue where the vines background image in hero section was distracting and made the font unreadable. I fixed this by adding the linear gradient property to background in CSS.
I initially deployed the website using Github pages, but I ran into a https issue that I wasn’t sure how to fix, so I decided to switch to Vercel deployment instead which was a lot more convenient and straightforward.
Aesthetics
I made the website transition from green (at the hero section) to brown (at the footer) to resemble the green grass and brown soil.
I plan to make more fonts in the future!