mirror of
https://github.com/System-End/riceathon.git
synced 2026-04-19 16:28:27 +00:00
Remove marked dependency, fixed code highlighting, fixed newlines not appearing in <code> blocks, fixed text in <code> blocks being noticeably smaller.
This commit is contained in:
some1
parent
e748e220b8
commit
dc5a31e5de
5 changed files with 933 additions and 46 deletions
|
|
@ -12,7 +12,6 @@
|
|||
name="description"
|
||||
content="Learn how to rice your Linux desktop"
|
||||
/>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css"
|
||||
|
|
@ -93,22 +92,17 @@
|
|||
</div>
|
||||
|
||||
<script>
|
||||
marked.setOptions({
|
||||
breaks: true,
|
||||
gfm: true,
|
||||
});
|
||||
|
||||
const guides = {
|
||||
1: {
|
||||
file: "./part-1/en-US.md",
|
||||
file: "./part-1/content.html",
|
||||
title: "Part 1: Installing Linux",
|
||||
},
|
||||
2: {
|
||||
file: "./part-2/en-US.md",
|
||||
file: "./part-2/content.html",
|
||||
title: "Part 2: Additional Packages",
|
||||
},
|
||||
3: {
|
||||
file: "./part-3/en-US.md",
|
||||
file: "./part-3/content.html",
|
||||
title: "Part 3: Ricing Your Desktop",
|
||||
},
|
||||
};
|
||||
|
|
@ -145,37 +139,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
function processMarkdown(md, basePath) {
|
||||
md = md.replace(
|
||||
/!\[([^\]]*)\]\(\.\/([^)]+)\)/g,
|
||||
``,
|
||||
);
|
||||
|
||||
md = md.replace(
|
||||
/>\s*\[!(IMPORTANT|CAUTION|TIP|NOTE|WARNING)\]\s*\n((?:>.*\n?)*)/g,
|
||||
(match, type, content) => {
|
||||
const cleanContent = content
|
||||
.replace(/^>\s*/gm, "")
|
||||
.trim();
|
||||
const icons = {
|
||||
IMPORTANT: "ℹ️",
|
||||
CAUTION: "⚠️",
|
||||
TIP: "💡",
|
||||
NOTE: "📝",
|
||||
WARNING: "⚠️",
|
||||
};
|
||||
return `<div class="alert alert-${type.toLowerCase()}"><strong>${icons[type]} ${type}</strong><br>${marked.parse(cleanContent)}</div>\n`;
|
||||
},
|
||||
);
|
||||
|
||||
md = md.replace(
|
||||
/\[([^\]]+)\]\(\.\.\/part-(\d)\/en-US\.md\)/g,
|
||||
"[$1](?part=$2)",
|
||||
);
|
||||
|
||||
return md;
|
||||
}
|
||||
|
||||
async function loadGuide(part) {
|
||||
const guide = guides[part];
|
||||
if (!guide) return;
|
||||
|
|
@ -187,13 +150,11 @@
|
|||
const response = await fetch(guide.file);
|
||||
if (!response.ok) throw new Error("Failed to load guide");
|
||||
|
||||
let markdown = await response.text();
|
||||
const basePath = guide.file.replace("en-US.md", "");
|
||||
markdown = processMarkdown(markdown, basePath);
|
||||
let content = await response.text();
|
||||
|
||||
contentEl.innerHTML = content;
|
||||
|
||||
contentEl.innerHTML = marked.parse(markdown);
|
||||
|
||||
document.querySelectorAll("pre code").forEach((block) => {
|
||||
document.querySelectorAll("pre code[class*='language-']").forEach((block) => {
|
||||
hljs.highlightElement(block);
|
||||
});
|
||||
|
||||
|
|
|
|||
222
docs/better-guide/part-1/content.html
Normal file
222
docs/better-guide/part-1/content.html
Normal file
|
|
@ -0,0 +1,222 @@
|
|||
<h1>Installing Linux</h1>
|
||||
<p>In this guide, I have chosen to install base Arch Linux. The following guides will assume that you are using Arch, but any Arch derivative should be able to follow the following guides too. If you aren't installing Arch, skip to the next guide <a href="?part=2">here</a>.</p>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p>Note: Commands prefixed with <code>#</code> should be run as root, and those prefixed with <code>$</code> should be run unprivileged.<br>In the ISO, all commands are run as root as default.<br>Lines prefixed with <code>//</code> are comments and should NOT be run.</p>
|
||||
</div>
|
||||
|
||||
<p>Psst! Can't be bothered to manually install? Try the <code>archinstall</code> command after connecting to internet in the live environment, or maybe try an Arch derivative :3</p>
|
||||
<h1>Downloading the ISO</h1>
|
||||
<p>First things first, we need to download the ISO file for Arch Linux. You can download it from <a href="https://archlinux.org/download/">here</a>. </p>
|
||||
<p>Next, scroll down to the mirror lists:
|
||||
<img src="./part-1/iso-mirrors.png" alt="image"></p>
|
||||
<p>Find your closest mirror, then click it.
|
||||
You should be met with a page similar to this:
|
||||
<img src="./part-1/iso-download.png" alt="image">
|
||||
Select <code>archlinux-202x.xx.xx-x86_64.iso</code>.</p>
|
||||
<h1>Preparing an installation medium</h1>
|
||||
<p>Next, we need to prepare something to boot from. I assume you don't have a CD, and I don't either, so we will use a USB drive. </p>
|
||||
<ol>
|
||||
<li>Download <a href="https://www.ventoy.net/en/download.html">ventoy</a>. </li>
|
||||
<li>Follow the instructions on the website to install ventoy.</li>
|
||||
<li>Plug in your USB drive.</li>
|
||||
<li>Open ventoy, select your USB drive, and install ventoy to the drive.</li>
|
||||
<li>Drag and drop the downloaded ISO onto your USB drive</li>
|
||||
</ol>
|
||||
<h1>Booting into the Arch live environment</h1>
|
||||
<p>Once you have flashed the USB, plug it into your computer and boot into the USB. You can do this by pressing the boot menu key on your computer. This is usually <code>F12</code> or <code>F2</code>, otherwise you can find your correct key <a href="https://www.wikihow.com/Enter-BIOS">here</a></p>
|
||||
<p>When you boot into the USB you will be greeted with this screen:
|
||||
<img src="./part-1/systemd-boot.png" alt="img">
|
||||
Hit <ENTER> to continue. You should see something like this:
|
||||
<img src="./part-1/initial-boot.png" alt="img"></p>
|
||||
<h1>Installing Arch Linux</h1>
|
||||
<div class="alert alert-caution"><strong>⚠️ CAUTION</strong><br><p>I recommend you follow the official installation guide <a href="https://wiki.archlinux.org/title/Installation_guide">here</a>, and research what options you want, but you can continue on if you just want to install. I will be picking options suitable for my hardware: 512GB nvme, Intel i7, Integrated graphics. Please do your own research and pick more sensible options if you have different hardware.</p>
|
||||
</div>
|
||||
|
||||
<p>Also note that I have opinions, and the packages I install may not be the best for you.</p>
|
||||
<h2>Connecting to the internet</h2>
|
||||
<p>This is much easier if you have ethernet. I don't, so I will be showing how to do it with wifi.</p>
|
||||
<ol>
|
||||
<li>First, check your network interface:</li>
|
||||
</ol>
|
||||
<pre style="white-space:pre-wrap;"><code># ip link
|
||||
</code></pre>
|
||||
<p>Look for <code>wlan0</code>.</p>
|
||||
<ol start="2">
|
||||
<li>Now we can use <code>iwctl</code> to connect.</li>
|
||||
</ol>
|
||||
<pre style="white-space:pre-wrap;"><code># iwctl
|
||||
// Scan for networks
|
||||
[iwd]# station wlan0 scan
|
||||
[iwd]# station wlan0 get-networks
|
||||
// Select your wifi
|
||||
[iwd]# station wlan0 connect <YOUR WIFI NETWORK NAME>
|
||||
[iwd]# quit
|
||||
</code></pre>
|
||||
<ol start="3">
|
||||
<li>Now, verify your connection:</li>
|
||||
</ol>
|
||||
<pre style="white-space:pre-wrap;"><code># ping ping.archlinux.org
|
||||
</code></pre>
|
||||
<h2>Update system clock</h2>
|
||||
<pre style="white-space:pre-wrap;"><code># timedatectl
|
||||
</code></pre>
|
||||
<h2>Disk Setup</h2>
|
||||
<p>When recognised by the live system, disks are assigned to a block device such as <code>/dev/sda</code>, <code>/dev/nvme0n1</code> or <code>/dev/mmcblk0</code>. </p>
|
||||
<div class="alert alert-caution"><strong>⚠️ CAUTION</strong><br><p>Partitioning should depend on your disk. Please don't blindly follow my steps, my setup is not optimal. See <a href="https://wiki.archlinux.org/title/Installation_guide#Partition_the_disks">here</a>. If you really just want to install, continue on.</p>
|
||||
</div>
|
||||
|
||||
<ol>
|
||||
<li>Identify your block device:</li>
|
||||
</ol>
|
||||
<pre style="white-space:pre-wrap;"><code># lsblk
|
||||
</code></pre>
|
||||
<p>For me, this will be <code>nvme0n1</code></p>
|
||||
<ol start="2">
|
||||
<li>Now, to partition:</li>
|
||||
</ol>
|
||||
<pre style="white-space:pre-wrap;"><code># fdisk /dev/nvme0n1
|
||||
Command (m for help): g
|
||||
|
||||
Created a new GPT disklabel (GUID: BEBC11C7-507C-4D2D-A069-656DED1F8ECD).
|
||||
|
||||
Command (m for help): n
|
||||
Partition number (1-128, default 1): 1
|
||||
First sector (2048-1000215182, default 2048): 2048
|
||||
Last sector, +/-sectors or +/-size{K,M,G,T,P} (2048-1000215182, default 1000214527): +1G
|
||||
|
||||
Created a new partition 1 of type 'Linux filesystem' and of size 1 GiB.
|
||||
|
||||
Command (m for help): t
|
||||
|
||||
Selected partition 1
|
||||
Partition type or alias (type L to list all): uefi
|
||||
Changed type of partition 'Linux filesystem' to 'EFI System'.
|
||||
|
||||
Command (m for help): n
|
||||
Partition number (2-128, default 2): 2
|
||||
First sector (2099200-1000215182, default 2099200): 2099200
|
||||
Last sector, +/-sectors or +/-size{K,M,G,T,P} (2099200-1000215182, default 1000214527): 1000214527
|
||||
|
||||
Created a new partition 2 of type 'Linux filesystem' and of size 475.9 GiB.
|
||||
|
||||
Command (m for help): w
|
||||
</code></pre>
|
||||
<p>Our resulting partition table:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th align="center">Mount point on the installed system</th>
|
||||
<th align="center">Partition</th>
|
||||
<th align="center">Partition type</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody><tr>
|
||||
<td align="center">/boot</td>
|
||||
<td align="center">/dev/nvme0n1p1</td>
|
||||
<td align="center">EFI system partition</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td align="center">/</td>
|
||||
<td align="center">/dev/nvme0n1p2</td>
|
||||
<td align="center">Linux x86-64 root (/)</td>
|
||||
</tr>
|
||||
</tbody></table>
|
||||
<ol start="3">
|
||||
<li>Now, we need to add filesystems:</li>
|
||||
</ol>
|
||||
<p>Format the boot partition</p>
|
||||
<pre style="white-space:pre-wrap;"><code># mkfs.fat -F 32 /dev/nvme0n1p1
|
||||
</code></pre>
|
||||
<p>Format our root partition. There are better filesystems, do your own research <a href="https://wiki.archlinux.org/title/File_system">here</a> please!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># mkfs.ext4 /dev/nvme0n1p2
|
||||
</code></pre>
|
||||
<h2>Mounting partitions</h2>
|
||||
<p>We need to mount our partitions so we can actually do things.</p>
|
||||
<pre style="white-space:pre-wrap;"><code># mount /dev/nvme0n1p2 /mnt
|
||||
# mount --mkdir /dev/nvme0n1p1 /mnt/boot
|
||||
</code></pre>
|
||||
<h2>Installation</h2>
|
||||
<p>Now for the actual installation...</p>
|
||||
<h3>1. Select mirrors</h3>
|
||||
<p>Packages to be installed must be downloaded from mirror servers, which are defined in /etc/pacman.d/mirrorlist. The higher a mirror is placed in the list, the more priority it is given when downloading a package.</p>
|
||||
<p>The topmost worldwide mirror should be fast enough for most people, but you may still want to inspect the file to see if it is satisfactory. If it is not, edit the file accordingly, and move the geographically closest mirrors to the top of the list, although other criteria should be taken into account. </p>
|
||||
<p>This file will later be copied to the new system by pacstrap, so it is worth getting right. </p>
|
||||
<pre style="white-space:pre-wrap;"><code># nano /etc/pacman.d/mirrorlist
|
||||
// Make your changes
|
||||
</code></pre>
|
||||
<h3>2. Install essential packages</h3>
|
||||
<div class="alert alert-caution"><strong>⚠️ CAUTION</strong><br><p>Please go <a href="https://wiki.archlinux.org/title/Installation_guide#Install_essential_packages">here</a> and make sure the right packages for YOU are installed.</p>
|
||||
</div>
|
||||
|
||||
<p>A base system:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacstrap -K /mnt base linux-firmware intel-ucode sudo fsck networkmanager nano man-db man-pages texinfo
|
||||
</code></pre>
|
||||
<h3>3. fstab</h3>
|
||||
<p>To get needed file systems (like the one used for the boot directory /boot) mounted on startup, generate an fstab file. Use -U or -L to define by UUID or labels, respectively: </p>
|
||||
<pre style="white-space:pre-wrap;"><code># genfstab -U /mnt >> /mnt/etc/fstab
|
||||
</code></pre>
|
||||
<p>Check the resulting /mnt/etc/fstab file, and edit it in case of errors. </p>
|
||||
<h3>4. chroot</h3>
|
||||
<p>To directly interact with the new system's environment, tools, and configurations for the next steps as if you were booted into it, change root into the new system: </p>
|
||||
<pre style="white-space:pre-wrap;"><code># arch-chroot /mnt
|
||||
</code></pre>
|
||||
<h3>5. Time</h3>
|
||||
<p>For human convenience (e.g. showing the correct local time or handling Daylight Saving Time), set the time zone:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># ln -sf /usr/share/zoneinfo/Australia/Sydney /etc/localtime
|
||||
# hwclock --systohc
|
||||
</code></pre>
|
||||
<h3>6. Localization</h3>
|
||||
<p>To use the correct region and language specific formatting (like dates, currency, decimal separators), edit /etc/locale.gen and uncomment the UTF-8 locales you will be using. Generate the locales by running:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># locale-gen
|
||||
</code></pre>
|
||||
<p>Create the <code>/etc/locale.conf</code> file, and set the LANG variable accordingly:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># nano /etc/locale.conf
|
||||
|
||||
LANG=en_US.UTF-8
|
||||
</code></pre>
|
||||
<h3>7. Network configuration</h3>
|
||||
<p>To assign a consistent, identifiable name to your system (particularly useful in a networked environment), create the hostname file:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># echo "yourhostname" > /etc/hostname
|
||||
</code></pre>
|
||||
<p>Now, lets enable NetworkManager:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># systemctl enable NetworkManager
|
||||
</code></pre>
|
||||
<h3>8. Bootloader</h3>
|
||||
<p>I opt for systemd-boot. You can find comparisons of some bootloaders <a href="https://wiki.archlinux.org/title/Arch_boot_process#Feature_comparison">here</a>.</p>
|
||||
<pre style="white-space:pre-wrap;"><code># bootctl install
|
||||
</code></pre>
|
||||
<h3>9. Root password</h3>
|
||||
<p>Set a secure password for the root user to allow performing administrative actions:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># passwd
|
||||
</code></pre>
|
||||
<h3>10. Final configuration</h3>
|
||||
<h4>1. Create an user</h4>
|
||||
<blockquote>
|
||||
<p>See <a href="https://apple.stackexchange.com/questions/192365/is-it-ok-to-use-the-root-user-as-a-normal-user/192422#192422">here</a> for why you shouldn't stay logged in as root</p>
|
||||
</blockquote>
|
||||
<p>Add an unprivileged user:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># useradd -m <yourusername>
|
||||
</code></pre>
|
||||
<p>Set a possword:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># passwd <yourusername>
|
||||
</code></pre>
|
||||
<p>Edit the <code>/etc/sudoers</code> file to allow yourself to use sudo:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># nano /etc/sudoers
|
||||
</code></pre>
|
||||
<p>Locate <code># User priveilege specification</code>. </p>
|
||||
<p>Add: <code><yourusername> ALL=(ALL)</code></p>
|
||||
<h4>2. Audio</h4>
|
||||
<p>We will use pipewire:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S wireplumber
|
||||
</code></pre>
|
||||
<p>Reboot, and log in to the user you created.</p>
|
||||
<p>We will need to enable wireplumber:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>$ systemctl --user enable wireplumber
|
||||
</code></pre>
|
||||
<h4>3. Shell Completions</h4>
|
||||
<p>Assuming you are using bash, install <code>bash-completion</code>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S bash-completion
|
||||
</code></pre>
|
||||
<p>Yippeee we now have a base system! </p>
|
||||
<p>Click <a href="?part=2">here</a> to advance to the next session.
|
||||
guide.html:199:29</p>
|
||||
|
||||
128
docs/better-guide/part-2/content.html
Normal file
128
docs/better-guide/part-2/content.html
Normal file
|
|
@ -0,0 +1,128 @@
|
|||
<h1>Installing additional packages</h1>
|
||||
<p>In this guide, I have chosen to install base Arch Linux. The following guide will assume that you are using Arch, but any Arch derivative should be able to follow the following guides too.</p>
|
||||
<p>Also, a reminder that I have opinions, so these packages may not be the best for you :3</p>
|
||||
<p>You can find alternatives <a href="https://github.com/rcalixte/awesome-wayland">here</a>, <a href="https://wiki.archlinux.org/title/Common_Applications/">here</a> and just searching!</p>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p>Note: Commands prefixed with <code>#</code> should be run as root, and those prefixed with <code>$</code> should be run unprivileged.<br>To run something as root, use <code>sudo <command></code>. If for some reason this doesn't work, try <code>sudo -E <command></code> and finally try <code>su</code> to get a root shell<br>Lines prefixed with <code>//</code> are comments and should NOT be run.</p>
|
||||
</div>
|
||||
|
||||
|
||||
<h1>Desktop Environment</h1>
|
||||
<p>Well, we have Linux, but all you see is a black console?? </p>
|
||||
<p>We need to install a desktop environment and/or a compositor!</p>
|
||||
<p>I have opted to use <a href="https://github.com/YaLTeR/niri">niri</a>, why? Because it's written in rust and looks nice :3</p>
|
||||
<pre style="white-space:pre-wrap;"><code># sudo pacman -Syu niri xwayland-satellite xdg-desktop-portal-gnome xdg-desktop-portal-gtk
|
||||
</code></pre>
|
||||
<p>See configuration options <a href="https://yalter.github.io/niri/">here</a></p>
|
||||
<p>Note that using a complete desktop environment like KDE plasma or GNOME will make setup much easier, but may restrict what you can rice.</p>
|
||||
<p>KDE Plasma:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S plasma
|
||||
</code></pre>
|
||||
<p>Gnome:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S gnome
|
||||
</code></pre>
|
||||
<h1>Greeter</h1>
|
||||
<p>Without a greeter, you'd have to use the ugly console to log in all the time.</p>
|
||||
<p>I choose sddm as a greeter.</p>
|
||||
<pre style="white-space:pre-wrap;"><code># sudo pacman -S sddm
|
||||
</code></pre>
|
||||
<h1>AUR helper</h1>
|
||||
<p>This simplifies using the AUR a lot!</p>
|
||||
<p>I choose to use yay:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S base-devel
|
||||
$ git clone https://aur.archlinux.org/yay.git
|
||||
$ cd yay
|
||||
$ makepkg
|
||||
# sudo pacman -U yay-12.5.6-1-x86_64.pkg.tar.zst yay-debug-12.5.6-1-x86_64.pkg.tar.zst
|
||||
</code></pre>
|
||||
<h1>File Manager</h1>
|
||||
<p>I persoanlly use thunar, but it isn't very riceable ;-;</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S thunar
|
||||
</code></pre>
|
||||
<h1>Browser</h1>
|
||||
<p>I use zen-browser</p>
|
||||
<pre style="white-space:pre-wrap;"><code>$ yay -S zen-browser
|
||||
// or
|
||||
$ yay -S zen-browser-bin
|
||||
</code></pre>
|
||||
<p>Zen documentation can be found <a href="https://docs.zen-browser.app/">here</a></p>
|
||||
<p>Zen can be riced using userChrome.css!</p>
|
||||
<h1>Code Editor</h1>
|
||||
<p>I use Zed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S zed
|
||||
</code></pre>
|
||||
<p>Zed documentation can be found <a href="https://zed.dev/docs/">here</a></p>
|
||||
<p>If you reallyyyy want to use vscode, see Arch wiki <a href="https://wiki.archlinux.org/title/Visual_Studio_Code">here</a></p>
|
||||
<p>You can find other IDEs/editors <a href="https://wiki.archlinux.org/title/List_of_applications/Utilities#Integrated_development_environments">here</a></p>
|
||||
<h1>Hackatime</h1>
|
||||
<p>With Zed:</p>
|
||||
<ol>
|
||||
<li><code>Ctrl+Shift+P</code></li>
|
||||
<li>Search for <code>zed: extensions</code></li>
|
||||
<li>Search for <code>wakatime</code></li>
|
||||
<li>Install!</li>
|
||||
</ol>
|
||||
<h1>Terminal Emulator</h1>
|
||||
<p>I like kitty, but I've heard that Hack Club is sponsoring ghostty!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S kitty
|
||||
// or
|
||||
# pacman -S ghostty
|
||||
</code></pre>
|
||||
<p>Kitty docs can be found <a href="https://sw.kovidgoyal.net/kitty/conf/">here</a></p>
|
||||
<p>Ghostty docs can be found <a href="https://ghostty.org/docs">here</a></p>
|
||||
<h1>Video Player</h1>
|
||||
<p>mpv is a lightweight video player:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S mpv
|
||||
</code></pre>
|
||||
<p>if you want, you can install VLC:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S vlc
|
||||
</code></pre>
|
||||
<p>On Arch, VLC and its plugins are split. I would recommend:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S vlc-plugins-all
|
||||
</code></pre>
|
||||
<h1>Status Bar</h1>
|
||||
<p>If you like, there are widget frameworks that help you build cool bars and other widgets.</p>
|
||||
<p>This includes:</p>
|
||||
<ul>
|
||||
<li>ags (Configured in JavaScript, docs <a href="https://aylur.github.io/ags/guide/quick-start.html">here</a>) - <code>$ yay -S aylurs-gtk-shell-git</code></li>
|
||||
<li>Quickshell (Configured in QML, docs <a href="https://quickshell.org/about/">here</a>) - <code>$ yay -S quickshell</code></li>
|
||||
<li>Fabric (Configured in Python, docs <a href="https://wiki.ffpy.org/getting-started/introduction/">here</a>) - <code>$ yay -S python-fabric-git</code></li>
|
||||
</ul>
|
||||
<p>If you only want a simple bar, I use waybar:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S waybar
|
||||
</code></pre>
|
||||
<p>Waybar docs can be found <a href="https://github.com/Alexays/Waybar/wiki">here</a></p>
|
||||
<h1>App Launcher</h1>
|
||||
<p>I use rofi:</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S rofi
|
||||
</code></pre>
|
||||
<p>Rofi docs can be found <a href="https://davatorium.github.io/rofi/">here</a></p>
|
||||
<h1>Clipboard</h1>
|
||||
<p>I use cliphist with wl-clipboard</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S cliphist
|
||||
</code></pre>
|
||||
<p>Docs <a href="https://github.com/sentriz/cliphist">here</a></p>
|
||||
<h1>Screen Locker</h1>
|
||||
<p>I use hyprlock</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S hyprlock
|
||||
</code></pre>
|
||||
<p>hyprlock docs can be found <a href="https://wiki.hypr.land/Hypr-Ecosystem/hyprlock/">here</a></p>
|
||||
<h1>System Monitor</h1>
|
||||
<p>I use btop, it runs in the terminal!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S btop
|
||||
</code></pre>
|
||||
<p>Docs can be found <a href="https://github.com/aristocratos/btop">here</a></p>
|
||||
<h1>Color Palettes</h1>
|
||||
<p>If you like having color palettes that change with your wallpaper, try <code>matugen</code> or <code>pywal</code>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>$ yay -S matugen
|
||||
// or
|
||||
# pacman -S python-pywal
|
||||
</code></pre>
|
||||
<p>Matugen docs can be found <a href="https://github.com/InioX/matugen/wiki/Configuration">here</a></p>
|
||||
<h1>Wallpaper Picker</h1>
|
||||
<p>I use waypaper!</p>
|
||||
<pre style="white-space:pre-wrap;"><code># pacman -S waypaper
|
||||
</code></pre>
|
||||
<p>Waypaper docs can be found <a href="https://anufrievroman.gitbook.io/waypaper/configuration">here</a></p>
|
||||
<p>Now that we have a more complete system, reboot and <a href="?part=3">continue to part 3</a> for the actual ricing!
|
||||
guide.html:199:29</p>
|
||||
|
||||
570
docs/better-guide/part-3/content.html
Normal file
570
docs/better-guide/part-3/content.html
Normal file
|
|
@ -0,0 +1,570 @@
|
|||
<h1>Ricing your desktop</h1>
|
||||
<p>What even is ricing?</p>
|
||||
<p>(Stolen off some website)
|
||||
"Ricing is a term that has been used in the computer and technology world to describe the act of customizing the appearance of Linux. The term originated from the practice of modifying a car’s appearance, specifically by adding decorative features such as spoilers or other embellishments to make it look more appealing. Ricing involves making changes to the user interface, icons, themes, fonts, and other visual elements of Linux to give it a unique and personalised look."</p>
|
||||
<h1>Getting Started</h1>
|
||||
<p>Because we are going to submit a git repo to riceathon, it's best to get organised before we start.</p>
|
||||
<p>Create a new directory for your dotfiles:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">mkdir -p ~/dotfiles
|
||||
</code></pre>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p><strong>What are dotfiles?</strong><br>On linux, configuration files are usually stored in "dot"config (~/.config).<br>Dotfiles are these configuration files!</p>
|
||||
</div>
|
||||
|
||||
<p>Create a GitHub repository:
|
||||
<img src="./part-3/github-repo.png" alt="img"></p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">cd ~/dotfiles
|
||||
git init
|
||||
git branch -M main
|
||||
git remote add origin github_url
|
||||
</code></pre>
|
||||
<p>Now, we've set up our folder.</p>
|
||||
<p>Whenever we want to add a configuration folder to this github repo, we can create a symbolic link:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>sln ~/.config/FOLDER_OR_FILE ~/dotfiles/FOLDER_OR_FILE
|
||||
</code></pre>
|
||||
<div class="alert alert-important"><strong>ℹ️ IMPORTANT</strong><br><p><strong>What is a symbolic link?</strong><br>A symbolic link (symlink) is a pointer to another file or folder.<br>So, if that file or folder changes, the symlinked contents also change!</p>
|
||||
</div>
|
||||
|
||||
<h1>Ricing</h1>
|
||||
<p>When ricing, it is nice to set a color palette or a theme that you want to center your rice around. </p>
|
||||
<p>Alternatively, you can try color palette generators - see <a href="https://github.com/InioX/matugen/wiki/Configuration">matugen</a>, or just go crazy!</p>
|
||||
<p>If you want inspiration, you can visit <a href="https://www.reddit.com/r/unixporn/">r/unixporn</a>, or look through <a href="https://github.com/x-9917638/dotfiles">my old dotfiles</a>!</p>
|
||||
<p>This guide will walk you through ricing a program that was installed in part 2, waybar :3</p>
|
||||
<p>Our end result should look somewhat like this!
|
||||
<img src="./part-3/waybar.png" alt="waybar"></p>
|
||||
<h2>Fonts</h2>
|
||||
<p>We've been using an ugly font this whole time ;-;</p>
|
||||
<p>Lets spice it up!</p>
|
||||
<p>The Arch wiki has a list of fonts <a href="https://wiki.archlinux.org/title/Fonts#Font_packages">here</a>, browse through them or search for a fun font!</p>
|
||||
<p>Personally, I use <a href="https://github.com/subframe7536/Maple-font">Maple Mono</a>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">yay -S maplemononormal-nf-cn
|
||||
</code></pre>
|
||||
<p>Also, install a Nerd Font for icons:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">pacman -S nerd-font
|
||||
</code></pre>
|
||||
<p>Pick your favourite! I use Jetbrains Mono (42) :3 </p>
|
||||
<h2>Waybar</h2>
|
||||
<p>Waybar docs can be found <a href="https://github.com/Alexays/Waybar/wiki">here</a>!</p>
|
||||
<p>Make sure waybar is installed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">pacman -S waybar
|
||||
</code></pre>
|
||||
<p>Now, create the folders and files for waybar's config files:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">mkdir -p ~/.config/waybar/{css,layouts}
|
||||
touch ~/.config/waybar/{config.jsonc,modules.jsonc,style.css}
|
||||
touch ~/.config/waybar/layouts/{with_music.jsonc,with_window.jsonc}
|
||||
touch ~/.config/waybar/css/{style.css,colors.css}
|
||||
</code></pre>
|
||||
<div class="alert alert-tip"><strong>💡 TIP</strong><br><p><strong>What did we do?</strong><br><code>mkdir</code> creates a directory. The <code>-p</code> option makes it create intermediate paths too! <code>touch</code> is a command that creates a file.<br>Whenever we use the <code>{}</code>, syntax, we are using <strong>brace expansions</strong>:</p>
|
||||
<blockquote>
|
||||
<p>"Brace expansions are a mechanism to generate arbitrary strings sharing a common prefix and suffix, either of which can be empty"<br>So:</p>
|
||||
</blockquote>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo a{d,c,b}e
|
||||
# RESULT: ade ace abe
|
||||
</code></pre>
|
||||
</div>
|
||||
|
||||
<p>Remember to symlink the waybar folder!</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">sln ~/.config/waybar ~/dotfiles/waybar
|
||||
</code></pre>
|
||||
<p>Now that we have our proper file layout, let's open our editor and do some coding :3</p>
|
||||
<p>To open Zed:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">zeditor ~/.config/waybar
|
||||
</code></pre>
|
||||
<p>Make sure that Hackatime is working!</p>
|
||||
<p>We've structured our waybar folder to be organised and modular:</p>
|
||||
<pre style="white-space:pre-wrap;"><code>~/.config/waybar/
|
||||
├── config.jsonc
|
||||
├── css
|
||||
│ ├── colors.css
|
||||
│ └── style.css
|
||||
├── layouts
|
||||
│ ├── with_music.jsonc
|
||||
│ └── with_window.jsonc
|
||||
├── modules.jsonc
|
||||
└── style.css
|
||||
</code></pre>
|
||||
<p>Waybar has 2 files that must exist: config.jsonc, and style.css.</p>
|
||||
<p>However, to make it easier to edit small things like modules or layout, we've separated out a <code>modules.jsonc</code> and a <code>layouts</code> folder.</p>
|
||||
<p>Our top-level config.jsonc is simple, because all we do is import a layout.
|
||||
Open the terminal from Zed (Ctrl + ~) and type:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo '{ "include": [ "~/.config/waybar/layouts/with_music.jsonc" ] }' > config.jsonc
|
||||
</code></pre>
|
||||
<div class="alert alert-tip"><strong>💡 TIP</strong><br><p><strong>What did we do?</strong><br><code>></code> is a redirection operator. Here, we redirect the output of a command (<code>echo</code>) into a file (<code>config.jsonc</code>).</p>
|
||||
</div>
|
||||
|
||||
<p>Next, lets make our modules. Open the <code>modules.jsonc</code> file in Zed.</p>
|
||||
<p>Enter this in and look at the comments. Don't worry if the icons aren't visible on GitHub, as their font doesn't include the nerd font icons! Remember that you can customise things to suit you:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">// You can find icons using the nerd font cheat sheet: https://nerdfonts.com/cheat_sheet
|
||||
{
|
||||
// Shows our workspaces!
|
||||
"niri/workspaces": {
|
||||
"format": "{icon}",
|
||||
"persistent-workspaces": { "*": 5 },
|
||||
"cursor": true,
|
||||
"format-icons": {
|
||||
// Our current workspace will be a star, workspaces with a window will be a filled dot
|
||||
// and empty workspaces will be empty dots!
|
||||
"active": "",
|
||||
"persistent": "",
|
||||
"empty": "",
|
||||
},
|
||||
},
|
||||
|
||||
"niri/window": {
|
||||
"max-length": 45,
|
||||
},
|
||||
|
||||
// A module for monitoring cpu usage
|
||||
"cpu": {
|
||||
// Polling interval, in ms
|
||||
"interval": 10,
|
||||
"format": " {usage}%",
|
||||
"states": {
|
||||
// Warning and critical change the class, which we can target in css.
|
||||
"warning": 80,
|
||||
"critical": 90,
|
||||
},
|
||||
},
|
||||
|
||||
"tray": {
|
||||
"icon-size": 13,
|
||||
"spacing": 10,
|
||||
"cursor": true,
|
||||
},
|
||||
|
||||
// cpu load
|
||||
"load": {
|
||||
"interval": 10,
|
||||
"format": " {load1}",
|
||||
"cursor": true,
|
||||
},
|
||||
|
||||
"memory": {
|
||||
"interval": 10,
|
||||
"format": " {used:0.1f}G/{total:0.1f}G",
|
||||
"states": {
|
||||
"warning": 80,
|
||||
"critical": 90,
|
||||
},
|
||||
},
|
||||
|
||||
// cpu temperatures
|
||||
"temperature": {
|
||||
"interval": 10,
|
||||
"format": "{icon} {temperatureC}°",
|
||||
"critical-threshold": 90,
|
||||
"hwmon-path": "/sys/class/hwmon/hwmon3/temp1_input",
|
||||
// Icons will change depending on temperature's value!
|
||||
"format-icons": ["", "", "", "", ""],
|
||||
},
|
||||
|
||||
"backlight": {
|
||||
"scroll-step": 2,
|
||||
"format": "{icon} {percent}%",
|
||||
"tooltip-format": "{percent}%",
|
||||
"format-icons": [
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
],
|
||||
},
|
||||
|
||||
"wireplumber": {
|
||||
"format": "{icon} {volume}%",
|
||||
"format-bluetooth": "{icon} {volume}%",
|
||||
// This will mute your volume
|
||||
"on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
|
||||
// Make sure you install pavucontrol!
|
||||
"on-click-right": "pavucontrol -t 4",
|
||||
// When scrolling, increase/decrease volume by 2
|
||||
"scroll-step": 2,
|
||||
"tooltip": true,
|
||||
"tooltip-format": "{volume}%",
|
||||
"format-muted": "{icon}",
|
||||
"format-icons": {
|
||||
"headphone": "",
|
||||
"headset": "",
|
||||
"headphone-muted": "",
|
||||
"headset-muted": "",
|
||||
"default": ["", ""],
|
||||
"default-muted": "",
|
||||
},
|
||||
},
|
||||
|
||||
"network": {
|
||||
"interval": 10,
|
||||
"format-wifi": " ",
|
||||
// Alt-format appears if you click the module.
|
||||
"format-alt": " {frequency}Ghz ({essid}) | {signalStrength}%",
|
||||
"format-disconnected": "",
|
||||
},
|
||||
|
||||
"bluetooth": {
|
||||
"format": "{}",
|
||||
"format-on": "",
|
||||
"format-off": "",
|
||||
"format-disabled": "",
|
||||
"tooltip-format": "{device_enumerate}",
|
||||
"tooltip-format-enumerate-connected": "{device_alias}",
|
||||
"tooltip-format-enumerate-connected-battery": "{device_alias}\t {device_battery_percentage}%",
|
||||
"on-click-right": "blueman-manager",
|
||||
},
|
||||
|
||||
"battery": {
|
||||
"interval": 20,
|
||||
"full-at": 100,
|
||||
"tooltip": true,
|
||||
"format": "{icon} {capacity}%",
|
||||
"format-time": "{H}:{M:02}",
|
||||
"format-charging": " {capacity}% ({time})",
|
||||
"format-icons": ["", "", "", "", "", "", "", "", ""],
|
||||
"states": {
|
||||
"warning": 30,
|
||||
"critical": 15,
|
||||
},
|
||||
},
|
||||
|
||||
"clock": {
|
||||
"tooltip-format": "<tt><small>{calendar}</small></tt>",
|
||||
"format-alt": "{:%H:%M %d %B %Y}",
|
||||
// You can have arbitrary commands to be execute on click and on right click
|
||||
"on-click-right": "kitty --app-id 'float-tty-clock' -e tty-clock -c",
|
||||
"calendar": {
|
||||
"mode": "month",
|
||||
"format": {
|
||||
"months": "<b>{}</b>",
|
||||
"days": "<span color='#acb0d0'><b>{}</b></span>",
|
||||
"today": "<span color='#41a6b5'><b><u>{}</u></b></span>",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
// mpris is a interface that lets programs poll playing media
|
||||
"mpris": {
|
||||
"format": "{artist} - {title}",
|
||||
"tooltip-format": "{album}",
|
||||
"format-paused": " {artist} - {title}",
|
||||
"on-click": "playerctl play-pause",
|
||||
"on-scroll-up": "playerctl previous",
|
||||
"on-scroll-down": "playerctl next",
|
||||
"max-length": 45,
|
||||
},
|
||||
|
||||
"power-profiles-daemon": {
|
||||
"format": "{icon}",
|
||||
"tooltip-format": "Power profile: {profile}",
|
||||
"format-icons": {
|
||||
"performance": "",
|
||||
"balanced": " ",
|
||||
"power-saver": "",
|
||||
},
|
||||
},
|
||||
}
|
||||
</code></pre>
|
||||
<p>Yippee! We finished our waybar modules!</p>
|
||||
<p>Now it's time for the layout.</p>
|
||||
<p>Open <code>layouts/with_music.jsonc</code> in Zed. Enter this:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">{
|
||||
"layer": "bottom",
|
||||
"position": "top",
|
||||
"margin": "0 0 0 0",
|
||||
"reload_style_on_change": true,
|
||||
|
||||
// We group modules for better organisation
|
||||
"group/gleft1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["battery", "cpu"],
|
||||
},
|
||||
|
||||
"group/gleft2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["niri/workspaces", "mpris"],
|
||||
},
|
||||
|
||||
"group/gright1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["memory", "temperature", "tray"],
|
||||
},
|
||||
|
||||
"group/gright2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["wireplumber", "bluetooth", "network"],
|
||||
},
|
||||
|
||||
"modules-left": ["power-profiles-daemon", "group/gleft1", "group/gleft2"],
|
||||
"modules-center": ["clock"],
|
||||
"modules-right": ["group/gright2", "group/gright1"],
|
||||
|
||||
// We need to include our modules to use them here.
|
||||
"include": ["~/.config/waybar/modules.jsonc"],
|
||||
}
|
||||
</code></pre>
|
||||
<p>Done! Optionally, you can place this into <code>layouts/with_window.jsonc</code>:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-json">{
|
||||
"layer": "top",
|
||||
"position": "top",
|
||||
"width": 1920,
|
||||
"margin": "5 0",
|
||||
|
||||
"group/gleft1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["battery", "cpu", "backlight"],
|
||||
},
|
||||
|
||||
"group/gleft2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["niri/workspaces", "niri/window"],
|
||||
},
|
||||
|
||||
"group/gright1": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["memory", "temperature", "tray"],
|
||||
},
|
||||
|
||||
"group/gright2": {
|
||||
"orientation": "horizontal",
|
||||
"modules": ["wireplumber", "bluetooth", "network"],
|
||||
},
|
||||
|
||||
"modules-left": ["power-profiles-daemon", "group/gleft1", "group/gleft2"],
|
||||
"modules-center": ["clock"],
|
||||
"modules-right": ["group/gright2", "group/gright1", "custom/ctlcenter"],
|
||||
|
||||
"include": ["~/.config/waybar/modules.jsonc"],
|
||||
}
|
||||
</code></pre>
|
||||
<p>Now that we've finished defining our layouts and modules, we can work on our styles.</p>
|
||||
<p>Like <code>config.jsonc</code>, our top level <code>style.css</code> is a simple 1 line import:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-sh">echo '@import "css/style.css";' > style.css
|
||||
</code></pre>
|
||||
<p>Now we can run <code>waybar</code> and see our edits live!</p>
|
||||
<p>In Zed, open <code>css/colors.css</code>. Here, we define our colour palette! Here are mine:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-css">/*
|
||||
Define your background, foreground, inactive colour
|
||||
(Lowkey doesn't have a big difference
|
||||
*/
|
||||
@define-color background rgba(20, 19, 24, 0.5);
|
||||
@define-color tooltip-bg @background;
|
||||
@define-color module-bg @background;
|
||||
@define-color inactive rgb(230, 225, 233);
|
||||
@define-color fg rgb(230, 225, 233);
|
||||
@define-color workspace-fg @fg;
|
||||
|
||||
/* You should copy these colours though! */
|
||||
@define-color red #c87878;
|
||||
@define-color blue #7878c8;
|
||||
@define-color yellow #c8c878;
|
||||
@define-color green #78c878;
|
||||
</code></pre>
|
||||
<p>Now, we can edit our styles. Open <code>css/style.css</code> in Zed and enter this:</p>
|
||||
<pre style="white-space:pre-wrap;"><code class="language-css">/* Import our color palette */
|
||||
@import "colors.css";
|
||||
|
||||
* {
|
||||
/* Your Nerd Font */
|
||||
font-family: "JetBrains Mono Nerd Font";
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
min-height: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
#waybar {
|
||||
font-weight: 700;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
color: @fg;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.modules-left,
|
||||
.modules-center,
|
||||
.modules-right {
|
||||
margin-bottom: -10px;
|
||||
margin-top: -10px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
padding: 8px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
tooltip label {
|
||||
padding: 8px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.popup * {
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#tray menu,
|
||||
menu {
|
||||
border-radius: 10px;
|
||||
font-weight: 700;
|
||||
color: @fg;
|
||||
}
|
||||
|
||||
#tray menu > *,
|
||||
menu > * {
|
||||
padding: 0 0;
|
||||
}
|
||||
|
||||
#tray menu > *:hover,
|
||||
menu > *:hover {
|
||||
border-radius: 10px;
|
||||
background-color: @inactive;
|
||||
}
|
||||
|
||||
/* global paddings */
|
||||
#backlight,
|
||||
#wireplumber,
|
||||
#network,
|
||||
#temperature,
|
||||
#bluetooth,
|
||||
#battery,
|
||||
#memory,
|
||||
#cpu,
|
||||
#load {
|
||||
padding: 0 7px;
|
||||
}
|
||||
|
||||
#workspaces,
|
||||
#bluetooth,
|
||||
#battery,
|
||||
#memory,
|
||||
#temperature,
|
||||
#network,
|
||||
#wireplumber,
|
||||
#backlight,
|
||||
#cpu,
|
||||
#load {
|
||||
background: transparent;
|
||||
border-radius: 15px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
|
||||
#network {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#custom-start,
|
||||
#custom-logout,
|
||||
#gright1,
|
||||
#gleft1,
|
||||
#gright2,
|
||||
#gleft2,
|
||||
#custom-ctlcenter,
|
||||
#power-profiles-daemon {
|
||||
padding: 0 9px;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#clock {
|
||||
padding: 0;
|
||||
border-radius: 15px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* single icons cool size */
|
||||
|
||||
#gright2,
|
||||
#gleft2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#gleft1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#gright1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#memory.critical,
|
||||
#cpu.critical,
|
||||
#temperature.critical,
|
||||
#battery.critical,
|
||||
#network.disconnected {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
#memory.warning,
|
||||
#cpu.warning,
|
||||
#temperature.warning,
|
||||
#battery.warning {
|
||||
color: @yellow;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
color: @workspace-fg;
|
||||
font-size: 14px;
|
||||
border-radius: 15px;
|
||||
margin: 0 7px;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
#mpris,
|
||||
#window {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#mpris.paused {
|
||||
color: @inactive;
|
||||
}
|
||||
|
||||
#power-profiles-daemon {
|
||||
margin-left: 5px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.performance {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
#power-profiles-daemon.power-saver {
|
||||
color: @green;
|
||||
}
|
||||
</code></pre>
|
||||
<h1>End</h1>
|
||||
<p>Yippeee! You've reached the end of the guide!</p>
|
||||
<h2>What's next?</h2>
|
||||
<p>Make all your other programs look nice :3</p>
|
||||
<p>This could include:</p>
|
||||
<ul>
|
||||
<li>Compositor</li>
|
||||
<li>Terminal Emulator</li>
|
||||
<li>App Launcher</li>
|
||||
<li>etc!</li>
|
||||
</ul>
|
||||
<h2>Helpful Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://www.reddit.com/r/unixporn/">r/unixporn</a> - This is the biggest online community for ricing! Go here for inspiration.</li>
|
||||
<li><a href="https://wiki.archlinux.org">Arch Wiki</a> - The Arch Linux wiki is incredibly helpful for everything related to Linux, with helpful information on tons of software.</li>
|
||||
<li><a href="https://github.com/fosslife/awesome-ricing">awesome-ricing</a> - A massive open-source list of ricing/Linux tools and software from window managers, to terminals, to colour schemes, to even wallpapers.
|
||||
guide.html:199:29</li>
|
||||
</ul>
|
||||
|
||||
|
|
@ -181,6 +181,7 @@ header > p > a {
|
|||
border-radius: var(--radii-default);
|
||||
padding: var(--spacing-3);
|
||||
overflow-x: auto;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.guide-content code {
|
||||
|
|
@ -188,6 +189,11 @@ header > p > a {
|
|||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.guide-content code:not([class*='language-']) {
|
||||
background: #00000000;
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.guide-content :not(pre) > code {
|
||||
background: var(--smoke);
|
||||
padding: 2px 6px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue