chore: use builtin proseimg over custom element
This commit is contained in:
eggy
@@ -13,13 +13,11 @@ First, what is Linux? At its heart, it is a [kernel](https://en.wikipedia.org/wi
|
||||
|
||||
However, this article will largely focus on **desktop Linux**, which competes with other operating systems such as Windows and macOS.
|
||||
|
||||
# Complete freedom
|
||||
## Complete freedom
|
||||
|
||||
Perhaps the biggest feature of Linux is its ability to do whatever you want, however you want. After a *tiny* bit of tinkering, you'll be able to set up your computer exactly how you'd like it!
|
||||
|
||||
::image{src=sway-desktop.webp}
|
||||
A terminal, an emulated Switch game, a game launcher, and a browser all automagically arranged by a tiling window manager. The currently playing song is in the top bar.
|
||||
::
|
||||
|
||||
|
||||
Or, if you aren't the type to spend hours fiddling every little thing, you can choose from a variety of existing default desktop interfaces.
|
||||
|
||||
@@ -33,8 +31,7 @@ Or Plasma's endless customisation:
|
||||
|
||||
|
||||
|
||||
::image{src=https://www.omgubuntu.co.uk/wp-content/uploads/2019/07/kde-plasma-desktop.jpg}
|
||||
::
|
||||
|
||||
|
||||
And this is only the beginning — it's not just appearance you have control over, although both GNOME and Plasma also come with their assortment of applications that have designs that perfectly mesh with the desktop, with global theming letting you click a single button in your settings menu to change colours or styles across all your apps.
|
||||
|
||||
@@ -42,7 +39,7 @@ Don't like your file manager? Swap it out for one of the dozens out there. Don't
|
||||
|
||||
**You can do anything.**
|
||||
|
||||
# The package manager
|
||||
## The package manager
|
||||
|
||||
Speaking of the update manager…
|
||||
|
||||
@@ -56,22 +53,20 @@ Here are just a couple of the graphical stores available:
|
||||
|
||||
GNOME Software for GNOME:
|
||||
|
||||
::image{src=https://www.omgubuntu.co.uk/wp-content/uploads/2021/02/gnome-software-refresh.jpg}
|
||||
::
|
||||
|
||||
|
||||
Discover for Plasma:
|
||||
|
||||
::image{src=https://userbase.kde.org/images.userbase/thumb/2/2d/Discoverappfocus.png/500px-Discoverappfocus.png}
|
||||
::
|
||||
|
||||
|
||||
By contrast, the Microsoft Store was (is) a complete and utter mess that is nowhere near the integration and experience Linux has had for decades.
|
||||
|
||||
# Open source
|
||||
## Open source
|
||||
|
||||
Not only that, desktop Linux was built by thousands of volunteers, each contributing their own code to make the best product they can. Because it's completely open source (anyone can see or edit the source code), it's inherently more secure as simply more people are looking at it to fix issues and squash bugs.
|
||||
|
||||
Learning Linux is a great opportunity to jump into learning more about computers because of the knowledge you gain over time of how your computer works on a fundamental level as you inevitably start troubleshooting *when* something breaks. And perhaps you'll be the one to contribute back upstream to the project too, if you fix a bug or add a new feature, and have your own code distributed around to millions of other users.
|
||||
|
||||
# Try it now!
|
||||
## Try it now!
|
||||
|
||||
With dozens of well-maintained versions of Linux operating systems out there, you'll be sure to find one that suits your needs. To try GNOME, [Pop!_OS](https://pop.system76.com/) or [Fedora](https://getfedora.org/en/workstation/download/) provide a seamless out-of-the-box experience. To try Plasma, [Kubuntu](https://kubuntu.org/) is a fantastic starting point. To get a macOS-like feel, [Elementary OS](https://elementary.io/) gives you that Apple vibe while, like every other Linux OS, is completely free of charge, and lets you try it out before you decide to install it.
|
||||
|
||||
@@ -9,6 +9,4 @@ On the desktop, dark mode is an abomination that should be eradicated from appli
|
||||
|
||||
Browsers, IDEs, and other applications must be freed from their shadowy chains and returned to light — where they truly belong.
|
||||
|
||||
::image{src=light-discord.webp}
|
||||
Perfect.
|
||||
::
|
||||
|
||||
@@ -35,13 +35,11 @@ At the time, coming from Python/Java, I opted in to the class components plugin
|
||||
|
||||
The [first few commits](https://github.com/potatoeggy/primoprod/commit/ed9d94b61bf91ea9b82ac4d832dfb2b9ff2efc59) had me playing around until I was comfortable enough to introduce my very [first component](https://github.com/potatoeggy/primoprod/commit/fcbb4068dd3b018db2809ccfcc5381d4ea3ae727): the WishButton.
|
||||
|
||||
::image{src=wish-button-emulated.webp}
|
||||
::
|
||||
|
||||
|
||||
I'd say it turned out pretty well! Since I wanted to emulate Genshin's UI, I wanted to match it as closely as I could. These two buttons are made of an image inside of a div relatively positioned with text absolutely positioned inside. Original image for comparison:
|
||||
|
||||
::image{src=wish-button-original.webp}
|
||||
::
|
||||
|
||||
|
||||
There are still some differences between the texts since Genshin uses antialiasing, and the alignment and shadow of the icon beside the wish quantity is slightly off too, but I would consider this result to be acceptable.
|
||||
|
||||
@@ -59,10 +57,7 @@ See [GemCounter](https://github.com/potatoeggy/primoprod/blob/master/src/compone
|
||||
|
||||
Although I had read up on [MDN's](https://developer.mozilla.org/en-US/) fantastic tutorials/documentation a fair bit and used flexboxes and `rem` everywhere, I apparently did not catch `box-sizing: border-box` and the margins and padding just did not arrange themselves how they should have.
|
||||
|
||||
::image{src=mdn-box-sizing-tip.webp}
|
||||
::
|
||||
|
||||
:/ thanks MDN for letting me know
|
||||
|
||||
|
||||
[Some foreshadowing](https://github.com/potatoeggy/primoprod/blob/master/src/components/ItemRevealScreen.vue#L224)
|
||||
|
||||
@@ -70,13 +65,11 @@ Although I had read up on [MDN's](https://developer.mozilla.org/en-US/) fantasti
|
||||
|
||||
Designing the basic screen was pretty straightforward. For all its woes, pure CSS still works and is intuitive enough that my git history was only slightly too messy and I got my results.
|
||||
|
||||
::image{src=primoprod-wishbanners.webp}
|
||||
::
|
||||
|
||||
|
||||
Pretty good, right? Now, the design still isn't adaptive enough *since things get cut off for who knows why I thought flexboxes were supposed to solve all this* but for the most part it looks good enough. It appears I'll have to make a lot of exceptions for mobile devices…
|
||||
|
||||
::image{src=primoprod-wishbanners-scaled.webp}
|
||||
::
|
||||
|
||||
|
||||
With some help taken by examining the assets of https://genshin.thekima.com and https://gi-wish-simulator.uzairashraf.dev, I grabbed a static background image as well as the videos!
|
||||
|
||||
@@ -145,11 +138,9 @@ In fact, I consider those two to be 100% done unless I can find a way to apply a
|
||||
|
||||
But it looks great!
|
||||
|
||||
::image{src=itemdescriptionoverlay.webp}
|
||||
::
|
||||
|
||||
|
||||
::image{src=itemobtainoverlay.webp}
|
||||
::
|
||||
|
||||
|
||||
## Wrapping up
|
||||
|
||||
|
||||
Reference in New Issue
Block a user