Skip to content

Commit 53cc397

Browse files
Hudson-LiuHudson-Liu
committed
first blog entry
1 parent 441d612 commit 53cc397

18 files changed

+201
-24
lines changed

‎.github/workflows/static.yml

100644100755
File mode changed.

‎.well-known/discord

100644100755
File mode changed.

‎CNAME

100644100755
File mode changed.

‎LICENSE

100644100755
File mode changed.

‎README.md

100644100755
File mode changed.

‎_config.yml

100644100755
File mode changed.

‎docs/readme_logo.png

100644100755
File mode changed.

‎docs/webpage.png

100644100755
File mode changed.

‎src/about.html

100644100755
File mode changed.

‎src/blog.html

100644100755
+201-24
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,20 @@
1010
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&display=swap" rel="stylesheet">
1111

1212
<style>
13+
/* Base Styles */
1314
body {
1415
background-color: #2e3440;
1516
margin-bottom: 2%;
1617
color: #eceff4;
1718
font-family: 'Fira Code', monospace;
19+
line-height: 1.6;
1820
}
1921

2022
#all {
21-
width: 60%;
23+
width: 90%;
24+
max-width: 1200px;
2225
margin: 0 auto;
26+
box-sizing: border-box;
2327
}
2428

2529
/* Navbar styling */
@@ -60,20 +64,18 @@
6064
font-weight: normal;
6165
}
6266

63-
.main {
64-
width: 100%;
65-
}
66-
67-
.post {
67+
.main, .post {
6868
width: 100%;
69+
box-sizing: border-box;
6970
}
7071

7172
.text {
72-
width: 84%;
73+
width: 100%;
7374
padding: 25px;
7475
border: 1px solid #81a1c1;
7576
margin-bottom: 20px;
7677
background-color: #434c5e;
78+
box-sizing: border-box;
7779
}
7880

7981
.textborder {
@@ -97,9 +99,10 @@
9799
border-bottom: 1px solid #81a1c1;
98100
margin-bottom: 0.25em;
99101
}
102+
100103
h1 {
101104
font-size: 2em;
102-
margin-bottom: -0.2em;
105+
margin-bottom: -0.2em;
103106
}
104107

105108
h2 {
@@ -118,12 +121,24 @@
118121
color: #8fbcbb;
119122
}
120123

124+
/* Updated icon styling */
121125
.icon {
122126
float: right;
123-
margin-top: 13px;
124-
margin-left: 10px;
125-
width: 125px;
126-
border: 1px solid #81a1c1;
127+
margin: 15px;
128+
width: 100px;
129+
border-radius: 15px;
130+
border: 2px solid #81a1c1;
131+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
132+
transition: transform 0.3s ease, box-shadow 0.3s ease;
133+
}
134+
.icon:hover {
135+
transform: scale(1.1);
136+
box-shadow: 0 6px 10px rgba(0,0,0,0.5);
137+
}
138+
139+
img {
140+
max-width: 100%;
141+
height: auto;
127142
}
128143

129144
::-webkit-scrollbar {
@@ -144,17 +159,55 @@
144159
bottom: 0;
145160
right: 0;
146161
}
162+
163+
/* Markdown-specific styling */
164+
h3 {
165+
color: #a3be8c; /* Soft green */
166+
}
167+
strong {
168+
color: #ebcb8b; /* Warm yellow */
169+
}
170+
em {
171+
color: #81a1c1; /* Cool blue */
172+
}
173+
174+
/* Responsive adjustments */
175+
@media screen and (max-width: 768px) {
176+
#all {
177+
width: 95%;
178+
padding: 0 5px;
179+
}
180+
.text {
181+
padding: 15px;
182+
}
183+
h1 {
184+
font-size: 1.8em;
185+
}
186+
h2 {
187+
font-size: 1.6em;
188+
}
189+
h3 {
190+
font-size: 1.4em;
191+
}
192+
#navbox li {
193+
font-size: 16px;
194+
margin: 5px;
195+
}
196+
.icon {
197+
width: 80px;
198+
margin: 10px;
199+
}
200+
}
147201
</style>
148202
</head>
149203

150204
<body>
151205
<div id="all">
152206
<!-- Top section now only contains the navbar -->
153-
154-
<header id="site-header">
155-
<h1> my_blog.py </h1>
156-
<h3 class="subtitle">__author__ = "Hudson Liu"</h2>
157-
</header>
207+
<header id="site-header">
208+
<h1> my_blog.py </h1>
209+
<h3 class="subtitle">__author__ = "Hudson Liu"</h3>
210+
</header>
158211
<div id="navbox">
159212
<ul>
160213
<li><a href="https://hudson.is-a.dev/">home</a></li>
@@ -169,34 +222,158 @@ <h3 class="subtitle">__author__ = "Hudson Liu"</h2>
169222
<div class="post">
170223
<!-- ENTRY START -->
171224
<!-- ICON -->
172-
<img class="icon" src="https://hudson.is-a.dev/imgs/arch_nord.png">
225+
<img class="icon" src="https://hudson.is-a.dev/imgs/arch_nord.png" alt="Arch Linux Icon">
173226

174227
<div class="text">
175228
<div class="textborder">
176229
<!-- ENTRY HEADER -->
177230
<h2 class="subheaders">Installing Arch from Scratch</h2>
178231
<p class="date">5/28/2022</p>
232+
233+
<h3>Step 1: Install Arch</h3>
234+
<p>Run Archinstall with the following configuration:</p>
235+
<ul>
236+
<li><strong>Install Language</strong>: English</li>
237+
<li><strong>Locales</strong>
238+
<ul>
239+
<li><em>Keyboard Layout</em>: us</li>
240+
<li><em>Locale language</em>: en_US</li>
241+
<li><em>Locale Encoding</em>: UTF-8</li>
242+
</ul>
243+
</li>
244+
<li><strong>Mirror Region</strong>: United States</li>
245+
<li><strong>Disk Config</strong>
246+
<ul>
247+
<li>&gt; Use a best-effort default partition layout</li>
248+
<li>Filesystem: ext4</li>
249+
<li>&gt; No separate partition for /home</li>
250+
</ul>
251+
</li>
252+
<li><strong>Disk Encryption</strong>: None</li>
253+
<li><strong>Swap</strong>: Enable swap on zram</li>
254+
<li><strong>Bootloader</strong>: Systemd-boot</li>
255+
<li><strong>UKI (Kernel)</strong>: Disabled</li>
256+
<li><strong>Profile</strong>
257+
<ul>
258+
<li><em>Type</em>: BSPWM</li>
259+
<li><em>Graphics Driver</em>: All open source (on intel)</li>
260+
<li><em>Display Server</em>: Lightdm-gtk-greeter</li>
261+
</ul>
262+
</li>
263+
<li><strong>Audio</strong>: Pipewire</li>
264+
<li><strong>Kernel</strong>: linux</li>
265+
<li><strong>Network Config</strong>: Use NetworkManager</li>
266+
<li><strong>Timezone</strong>: America/New_York</li>
267+
<li><strong>Auto Time Sync</strong>: Enabled</li>
268+
</ul>
269+
<p>Then, update the system:</p>
270+
<pre><code class="language-bash">sudo pacman -Syu</code></pre>
271+
272+
<h3>Step 2: Download Dotfiles</h3>
273+
<p>Enter TTY2 (not BSPWM) by pressing Ctrl + Alt + F2. We won't be using the GUI environment yet, since—as of this step—BSPWM is not usable.</p>
274+
<p>First, install Git:</p>
275+
<pre><code class="language-bash">sudo pacman -S git</code></pre>
276+
<p>Afterwards, clone the Dotfiles repo to the <code>Downloads</code> folder (this can be any folder):</p>
277+
<pre><code class="language-bash">git clone https://github.com/Hudson-Liu/Dotfiles.git ~/Downloads/Dotfiles
278+
mv -f ~/Downloads/Dotfiles/* ~/.config/
279+
sudo mv ~/Downloads/.git ~/.config/
280+
rm -rf ~/Downloads/Dotfiles</code></pre>
281+
282+
<h3>Step 3: Install Official Packages</h3>
283+
<p>Run the following to install all packages automatically. You can manually install them, too; for that—refer to the dotfiles' package list.</p>
284+
<pre><code class="language-bash">sudo pacman -S - &lt; ~/.config/_Extras/pkglist.txt</code></pre>
285+
286+
<h4>Microcodes</h4>
287+
<p>Install microcodes for Intel</p>
288+
<pre><code class="language-bash">sudo pacman -S intel-ucode</code></pre>
289+
<p>Or, for AMD:</p>
290+
<pre><code class="language-bash">sudo pacman -S amd-ucode</code></pre>
291+
292+
<h3>Step 4: Install AUR Packages</h3>
293+
<p>First, install yay for package managing.</p>
294+
<pre><code class="language-bash">sudo pacman -S --needed git base-devel
295+
git clone https://aur.archlinux.org/yay.git
296+
cd yay
297+
makepkg -si</code></pre>
298+
<p>The only AUR package directly referenced in these dotfiles is <code>flashfocus</code>. Other optional packages are listed in the last step.</p>
299+
<pre><code class="language-bash">yay -S flashfocus</code></pre>
300+
301+
<h3>Step 5: Install GTK Configs' Dependencies</h3>
302+
<p>This step can be skipped if the "Tela Nord" icon theme and "Nordic" GTK theme are already installed.</p>
303+
<pre><code class="language-bash">yay -S nordic-theme
304+
git clone https://github.com/vinceliuice/Tela-icon-theme.git ~/Downloads/Tela-Icon-Theme/
305+
cd ~/Downloads/Tela-Icon-theme
306+
./install.sh -a
307+
rm -rf ~/Downloads/Tela-Icon-theme</code></pre>
308+
<p>Also, install the proper cursor theme and fetch program if not already present:</p>
309+
<pre><code class="language-bash">yay -S xcursor-breeze-neutral-git catnap</code></pre>
310+
<p>Then, to ensure that the cursor theme is used in all contexts, open <code>/usr/share/icons/default/index.theme</code> and edit it so that it reads <code>Inherits=xcursor-breeze-neutral</code>.</p>
311+
312+
<h3>Step 6: Setup "Extras"</h3>
313+
<p><strong>LightDM</strong>: To match LightDM-GTK-Greeter to the rest of this rice's theme, do the following steps:</p>
314+
<pre><code class="language-bash">sudo cp -rf ~/.config/_Extras/lightdm-gtk-greeter.conf /etc/lightdm/
315+
cp ~/.config/_Extras/Nord-Mountains.png /etc/lightdm/</code></pre>
316+
<p><strong>Vim</strong>: Move <code>.vimrc</code> to home directory:</p>
317+
<pre><code class="language-bash">cp ~/.config/_Extras/.vimrc ~/</code></pre>
318+
<p><strong>Bash</strong>: Move <code>.bashrc</code> to home directory:</p>
319+
<pre><code class="language-bash">cp ~/.config/_Extras/.bashrc ~/</code></pre>
320+
<p><strong>Wallpaper</strong>: For <code>bspwmrc</code> to correctly find the wallpaper, the image needs to be placed in the correct directory:</p>
321+
<pre><code class="language-bash">mkdir -p ~/Pictures/Wallpapers/
322+
cp ~/.config/_Extras/Nord-Mountains.png ~/Pictures/Wallpapers/</code></pre>
323+
<p>Also, to prettify pacman, uncomment these two lines in <code>/etc/x11/pacman.conf</code>:</p>
324+
<ul>
325+
<li>Color</li>
326+
<li>VerbosePkgLists</li>
327+
</ul>
328+
329+
<h3>Step 7: Install Additional Packages (OPTIONAl)</h3>
330+
<p>These are the packages that I install after the prior steps. You can safely ignore this step; it's mostly for my own reference.</p>
331+
<pre><code class="language-bash">yay -S vesktop chrome-desktop qpwgraph</code></pre>
332+
333+
<h3>Step 8: Input Config</h3>
334+
<p>Adjust touchpad settings by making/editing <code>/etc/X11/xorg.conf.d/40-libinput.conf</code>. Enable the following options:</p>
335+
<ul>
336+
<li>Natural Scrolling</li>
337+
<li>Clickfinger (to make all areas on touchpad clickable)</li>
338+
<li>Custom AccelProfile</li>
339+
</ul>
340+
<p>Copy of <code>40-libinput.conf</code>:</p>
341+
<pre><code>Section "InputClass"
342+
Identifier "mytouchpad"
343+
Driver "libinput"
344+
MatchIsTouchpad "on"
345+
Option "NaturalScrolling" "true"
346+
Option "ClickMethod" "clickfinger"
347+
Option "AccelProfile" "custom"
348+
Option "tapping" "on"
349+
EndSection</code></pre>
350+
<p>For the keyboard, simply enable swapping the caps lock and escape.</p>
351+
<p>Copy of <code>00-keyboard.conf</code>:</p>
352+
<pre><code>Section "InputClass"
353+
Identifier "system-keyboard"
354+
MatchIsKeyboard "on"
355+
Option "XkbLayout" "us"
356+
Option "XkbModel" "pc105+inet"
357+
Option "XkbOptions" "caps:swapescape"
358+
EndSection</code></pre>
359+
<hr>
179360
<!-- ENTRY TEXT -->
180-
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus lorem enim, vel pretium urna vehicula eu. Curabitur pharetra tellus id nunc rutrum condimentum. Donec non erat eget purus consectetur semper quis ut turpis. Curabitur nulla justo, gravida vehicula finibus in, ornare et nunc. Praesent eleifend neque nunc, fringilla fringilla tellus molestie vel. Curabitur arcu massa, pulvinar ut hendrerit eu, tincidunt ac lacus. Sed ut semper magna. Suspendisse facilisis leo sit amet erat pulvinar, vitae bibendum augue tempus. Donec aliquet maximus libero, vel fermentum quam maximus in. Quisque mi leo, bibendum eu libero sed, pharetra auctor sem. Donec tempus justo venenatis dui semper finibus. Donec vestibulum felis non tortor facilisis, at fringilla dolor scelerisque. Quisque eros eros, rutrum et tempus at, condimentum ac nulla.</p>
181361

182-
<p>Nullam ut dictum urna, id accumsan elit. Maecenas vitae vestibulum elit. Nam dui massa, convallis sit amet ligula vel, convallis feugiat felis. Mauris sollicitudin lectus sed nunc tempus, non feugiat elit iaculis. Donec mattis odio vel eros volutpat, vitae blandit nunc elementum. Nulla enim odio, iaculis sollicitudin lorem a, maximus tincidunt lorem. Donec tempor, elit at porta sodales, nunc nulla blandit turpis, at dapibus magna enim ut purus. Integer et faucibus metus. Duis nunc dui, vulputate id leo in, sollicitudin imperdiet odio. Praesent ac congue massa, ut mattis sem. Nunc a consectetur diam, id tristique dolor.</p>
183362
</div>
184363
</div>
185364
<!-- ENTRY END -->
186365

187366
<!-- ENTRY START -->
188367
<!-- ICON -->
189-
<img class="icon" src="https://hudson.is-a.dev/imgs/corne_keyboard_nord.png">
368+
<img class="icon" src="https://hudson.is-a.dev/imgs/corne_keyboard_nord.png" alt="Corne Keyboard Icon">
190369

191370
<div class="text">
192371
<div class="textborder">
193372
<!-- ENTRY HEADER -->
194373
<h2 class="subheaders">Corne Keyboard Layout</h2>
195374
<p class="date">5/28/2022</p>
196375
<!-- ENTRY TEXT -->
197-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus lorem enim, vel pretium urna vehicula eu. Curabitur pharetra tellus id nunc rutrum condimentum. Donec non erat eget purus consectetur semper quis ut turpis. Curabitur nulla justo, gravida vehicula finibus in, ornare et nunc. Praesent eleifend neque nunc, fringilla fringilla tellus molestie vel. Curabitur arcu massa, pulvinar ut hendrerit eu, tincidunt ac lacus. Sed ut semper magna. Suspendisse facilisis leo sit amet erat pulvinar, vitae bibendum augue tempus. Donec aliquet maximus libero, vel fermentum quam maximus in. Quisque mi leo, bibendum eu libero sed, pharetra auctor sem. Donec tempus justo venenatis dui semper finibus. Donec vestibulum felis non tortor facilisis, at fringilla dolor scelerisque. Quisque eros eros, rutrum et tempus at, condimentum ac nulla.</p>
198-
199-
<p>Nullam ut dictum urna, id accumsan elit. Maecenas vitae vestibulum elit. Nam dui massa, convallis sit amet ligula vel, convallis feugiat felis. Mauris sollicitudin lectus sed nunc tempus, non feugiat elit iaculis. Donec mattis odio vel eros volutpat, vitae blandit nunc elementum. Nulla enim odio, iaculis sollicitudin lorem a, maximus tincidunt lorem. Donec tempor, elit at porta sodales, nunc nulla blandit turpis, at dapibus magna enim ut purus. Integer et faucibus metus. Duis nunc dui, vulputate id leo in, sollicitudin imperdiet odio. Praesent ac congue massa, ut mattis sem. Nunc a consectetur diam, id tristique dolor.</p>
376+
<p>placeholder</p>
200377
</div>
201378
</div>
202379
<!-- ENTRY END -->

‎src/imgs/arch_nord.png

100644100755
File mode changed.

‎src/imgs/corne_keyboard_nord.png

100644100755
File mode changed.

‎src/imgs/desert_dunes_nord.jpg

100644100755
File mode changed.

‎src/imgs/favicon.png

100644100755
File mode changed.

‎src/imgs/website_nord_img.png

100644100755
File mode changed.

‎src/index.html

100644100755
File mode changed.

‎src/misc/resume.pdf

100644100755
File mode changed.

‎src/resume.html

100644100755
File mode changed.

0 commit comments

Comments
 (0)