css tweaks
This commit is contained in:
Akko
@@ -203,13 +203,13 @@
|
||||
</div>
|
||||
<div id="content" class="content">
|
||||
|
||||
<div id="outline-container-org68f738f" class="outline-2">
|
||||
<h2 id="org68f738f">My Experience with the Framework Laptop</h2>
|
||||
<div class="outline-text-2" id="text-org68f738f">
|
||||
<div id="outline-container-orge8e70b7" class="outline-2">
|
||||
<h2 id="orge8e70b7">My Experience with the Framework Laptop</h2>
|
||||
<div class="outline-text-2" id="text-orge8e70b7">
|
||||
</div>
|
||||
<div id="outline-container-orgc888391" class="outline-3">
|
||||
<h3 id="orgc888391">Ordering</h3>
|
||||
<div class="outline-text-3" id="text-orgc888391">
|
||||
<div id="outline-container-org9b3682f" class="outline-3">
|
||||
<h3 id="org9b3682f">Ordering</h3>
|
||||
<div class="outline-text-3" id="text-org9b3682f">
|
||||
<p>
|
||||
I’d been eyeing the <a href="https:frame.work">Framework laptop</a> since somewhere in October 2021, but the EU release got delayed and they were very hesitant to give time estimates. I only managed to get my hands on it in late February, and I ended up having to have it delivered to France. I understand the difficulty of setting up logistics especially these days, but I broke my previous laptop and being stuck in limbo like this was not fun.
|
||||
</p>
|
||||
@@ -221,13 +221,13 @@ I asked their customer service to make a small change to the delivery address, b
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org743fc84" class="outline-3">
|
||||
<h3 id="org743fc84">Set-up</h3>
|
||||
<div class="outline-text-3" id="text-org743fc84">
|
||||
<div id="outline-container-org1d16e20" class="outline-3">
|
||||
<h3 id="org1d16e20">Set-up</h3>
|
||||
<div class="outline-text-3" id="text-org1d16e20">
|
||||
</div>
|
||||
<div id="outline-container-orge4edb2e" class="outline-4">
|
||||
<h4 id="orge4edb2e">Hardware</h4>
|
||||
<div class="outline-text-4" id="text-orge4edb2e">
|
||||
<div id="outline-container-orgaa6d8ce" class="outline-4">
|
||||
<h4 id="orgaa6d8ce">Hardware</h4>
|
||||
<div class="outline-text-4" id="text-orgaa6d8ce">
|
||||
<p>
|
||||
I got the DIY edition with the (lowest-end) i5-1135G7 CPU, 2x16GB RAM. I brought my own 1TB SSD. The higher spec CPUs didn’t seem worth the money to me. The RAM is probably overkill.
|
||||
</p>
|
||||
@@ -255,9 +255,9 @@ The more you look at it, the nicer it gets!
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgb05525d" class="outline-4">
|
||||
<h4 id="orgb05525d">Software</h4>
|
||||
<div class="outline-text-4" id="text-orgb05525d">
|
||||
<div id="outline-container-org08e5eb1" class="outline-4">
|
||||
<h4 id="org08e5eb1">Software</h4>
|
||||
<div class="outline-text-4" id="text-org08e5eb1">
|
||||
<p>
|
||||
I installed Gentoo GNU+Linux on the laptop, just like I have on my desktop. I used an Ubuntu live CD as the install medium together with the Gentoo stage3 tarball, and it worked well. I didn’t really have to jump through any laptop-specific hoops, it was a very nice experience. I did use the dist-kernel rather than configuring my own.
|
||||
</p>
|
||||
@@ -267,9 +267,9 @@ The laptop held up well during compiling. It’s not as fast as a desktop of
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgf2c865a" class="outline-5">
|
||||
<h5 id="orgf2c865a">Display scaling</h5>
|
||||
<div class="outline-text-5" id="text-orgf2c865a">
|
||||
<div id="outline-container-org5568e7b" class="outline-5">
|
||||
<h5 id="org5568e7b">Display scaling</h5>
|
||||
<div class="outline-text-5" id="text-org5568e7b">
|
||||
<p>
|
||||
Simply setting <code>Xft.dpi: 192</code> in .Xresources was enough for the vast majority of applications to use 2x scaling, which looks very good on this display. This is on X11 obviously; I don’t use Wayland.
|
||||
</p>
|
||||
@@ -279,36 +279,36 @@ The odd application requires its own scaling setting. Rofi requires setting <cod
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orgb7404fb" class="outline-5">
|
||||
<h5 id="orgb7404fb">Display manager</h5>
|
||||
<div class="outline-text-5" id="text-orgb7404fb">
|
||||
<div id="outline-container-orgabc2dcb" class="outline-5">
|
||||
<h5 id="orgabc2dcb">Display manager</h5>
|
||||
<div class="outline-text-5" id="text-orgabc2dcb">
|
||||
<p>
|
||||
I used SDDM which works very well. I wanted to go for something a bit fancier looking, and this delivers. I don’t usually use things in the whole QT ecosystem, so it’s refreshing.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgbe96312" class="outline-5">
|
||||
<h5 id="orgbe96312">Hibernate/suspend-to-disk</h5>
|
||||
<div class="outline-text-5" id="text-orgbe96312">
|
||||
<div id="outline-container-org72195ff" class="outline-5">
|
||||
<h5 id="org72195ff">Hibernate/suspend-to-disk</h5>
|
||||
<div class="outline-text-5" id="text-org72195ff">
|
||||
<p>
|
||||
This required setting up a swap file and setting a kernel command line parameter to refer to it, but it was easy to do. It works well. I’ve observed the laptop auto-hibernating when the battery runs out, but it doesn’t do this reliably, so I should probably configure it myself.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org76077df" class="outline-5">
|
||||
<h5 id="org76077df"><a href="http://guake-project.org/">Guake</a>-like transient terminal</h5>
|
||||
<div class="outline-text-5" id="text-org76077df">
|
||||
<div id="outline-container-org5470dc2" class="outline-5">
|
||||
<h5 id="org5470dc2"><a href="http://guake-project.org/">Guake</a>-like transient terminal</h5>
|
||||
<div class="outline-text-5" id="text-org5470dc2">
|
||||
<p>
|
||||
Using some <code>fish</code> scripts, <code>bspwm</code>, <code>picom</code> and <code>xst</code> I rigged up a transient, transparent terminal to use for quick shell jobs. I used the scripts and config file in <a href="#org7b63de8">Appendix A</a> to do this. The implementation is a bit hacky, and it’s not impossible to break, but it serves my purposes well (and more important, it was fun to make)!
|
||||
Using some <code>fish</code> scripts, <code>bspwm</code>, <code>picom</code> and <code>xst</code> I rigged up a transient, transparent terminal to use for quick shell jobs. I used the scripts and config file in <a href="#org818d349">Appendix A</a> to do this. The implementation is a bit hacky, and it’s not impossible to break, but it serves my purposes well (and more important, it was fun to make)!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org3075eff" class="outline-5">
|
||||
<h5 id="org3075eff">Wallpaper-setting script</h5>
|
||||
<div class="outline-text-5" id="text-org3075eff">
|
||||
<div id="outline-container-org47f5537" class="outline-5">
|
||||
<h5 id="org47f5537">Wallpaper-setting script</h5>
|
||||
<div class="outline-text-5" id="text-org47f5537">
|
||||
<p>
|
||||
I wrote a script to set a random wallpaper.
|
||||
</p>
|
||||
@@ -335,11 +335,11 @@ I wrote a script to set a random wallpaper.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org8bb44c4" class="outline-5">
|
||||
<h5 id="org8bb44c4">Lockscreen</h5>
|
||||
<div class="outline-text-5" id="text-org8bb44c4">
|
||||
<div id="outline-container-orgd35c949" class="outline-5">
|
||||
<h5 id="orgd35c949">Lockscreen</h5>
|
||||
<div class="outline-text-5" id="text-orgd35c949">
|
||||
<p>
|
||||
I hacked together some <a href="#org3ac98df">pretty crappy code</a> to lock the screen using <code>i3lock</code>, with my wallpaper composed with a little lock icon as the background. Very overengineered.
|
||||
I hacked together some <a href="#org7abf4bc">pretty crappy code</a> to lock the screen using <code>i3lock</code>, with my wallpaper composed with a little lock icon as the background. Very overengineered.
|
||||
</p>
|
||||
|
||||
<p width="60%" class="center">
|
||||
@@ -353,34 +353,34 @@ Is there a better lockscreen out there that will let me set my own image as the
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orge7edb75" class="outline-5">
|
||||
<h5 id="orge7edb75">TODO</h5>
|
||||
<div class="outline-text-5" id="text-orge7edb75">
|
||||
<div id="outline-container-orge22f01a" class="outline-5">
|
||||
<h5 id="orge22f01a">TODO</h5>
|
||||
<div class="outline-text-5" id="text-orge22f01a">
|
||||
</div>
|
||||
<ul class="org-ul">
|
||||
<li><a id="orgb3e2a7c"></a>Battery level notifications<br></li>
|
||||
<li><a id="org21a57fa"></a>sleep-then-hibernate<br></li>
|
||||
<li><a id="org907e82b"></a>Battery tuning<br></li>
|
||||
<li><a id="org2374edc"></a>Battery level notifications<br></li>
|
||||
<li><a id="org4c64212"></a>sleep-then-hibernate<br></li>
|
||||
<li><a id="orgb3fe843"></a>Battery tuning<br></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="outline-container-orge46d15d" class="outline-3">
|
||||
<h3 id="orge46d15d">Impressions</h3>
|
||||
<div class="outline-text-3" id="text-orge46d15d">
|
||||
<div id="outline-container-org1ad915f" class="outline-3">
|
||||
<h3 id="org1ad915f">Impressions</h3>
|
||||
<div class="outline-text-3" id="text-org1ad915f">
|
||||
</div>
|
||||
<div id="outline-container-org62abcda" class="outline-5">
|
||||
<h5 id="org62abcda">Build Quality</h5>
|
||||
<div class="outline-text-5" id="text-org62abcda">
|
||||
<div id="outline-container-org6006177" class="outline-5">
|
||||
<h5 id="org6006177">Build Quality</h5>
|
||||
<div class="outline-text-5" id="text-org6006177">
|
||||
<p>
|
||||
The laptop is made of aluminium and feels solid but light. The screen does seem pretty flimsy, though. I probably wouldn’t want to drop this thing. It looks sleek and elegant, but pretty muted.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orga25e851" class="outline-5">
|
||||
<h5 id="orga25e851">Screen</h5>
|
||||
<div class="outline-text-5" id="text-orga25e851">
|
||||
<div id="outline-container-org5ab39c9" class="outline-5">
|
||||
<h5 id="org5ab39c9">Screen</h5>
|
||||
<div class="outline-text-5" id="text-org5ab39c9">
|
||||
<p>
|
||||
This is my first time ever using a high-DPI screen, and I’m very impressed by it. Text looks unbelievably crisp and pleasant to read. I was somewhat worried about the linux high DPI situation, but I am having no issues whatsoever.
|
||||
</p>
|
||||
@@ -395,27 +395,27 @@ The brightness goes up quite high, but colours feel somewhat washed out at high
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org73be4d3" class="outline-5">
|
||||
<h5 id="org73be4d3">Keyboard</h5>
|
||||
<div class="outline-text-5" id="text-org73be4d3">
|
||||
<div id="outline-container-org38899df" class="outline-5">
|
||||
<h5 id="org38899df">Keyboard</h5>
|
||||
<div class="outline-text-5" id="text-org38899df">
|
||||
<p>
|
||||
Framework seems to advertise their keyboard as having particularly deep travel, but it mostly just feels like any chiclet keyboard to me. Not a bad chiclet keyboard, but not that great, either. The layout is fine, but it makes me miss the thinkpad.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org71d2e05" class="outline-5">
|
||||
<h5 id="org71d2e05">Touchpad</h5>
|
||||
<div class="outline-text-5" id="text-org71d2e05">
|
||||
<div id="outline-container-org8e0e86f" class="outline-5">
|
||||
<h5 id="org8e0e86f">Touchpad</h5>
|
||||
<div class="outline-text-5" id="text-org8e0e86f">
|
||||
<p>
|
||||
I’ve never had a decent touchpad before, so I was pleasantly surprised. I expected to miss the trackpoint on the thinkpad a lot, but this is fine, though it’s still a step down. Pinch to zoom doesn’t work very well, but I don’t use that functionality a lot. I miss having dedicated mouse buttons; the clicking functionality on this touchpad works fine for me, but it’s hard not to mess up left/middle/right click. That’s a good incentive for me to practice relying on the mouse less, though. There’s plenty of <a href="https://linuxtouchpad.org/">work being done</a> on the Linux touchpad experience software-side, too. It’s a nice time to be a linux laptop user!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org5a925cd" class="outline-5">
|
||||
<h5 id="org5a925cd">Battery</h5>
|
||||
<div class="outline-text-5" id="text-org5a925cd">
|
||||
<div id="outline-container-org2c1f4bc" class="outline-5">
|
||||
<h5 id="org2c1f4bc">Battery</h5>
|
||||
<div class="outline-text-5" id="text-org2c1f4bc">
|
||||
<p>
|
||||
With the disclaimer that I haven’t tested very intensely and I haven’t tuned power settings very much. <br>
|
||||
I seem to get about 6.5 hours of real-world use time when using Emacs and doing light web browsing. I don’t have a good benchmark for more intensive tasks, but compiling does hit the battery pretty hard. All in all I’m very happy with it, getting decent battery life on Linux is hard. It might be worth eventually buying a power bank for it though, for travel~
|
||||
@@ -423,18 +423,18 @@ I seem to get about 6.5 hours of real-world use time when using Emacs and doing
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgd2f21c9" class="outline-5">
|
||||
<h5 id="orgd2f21c9">Expansion cards/ports</h5>
|
||||
<div class="outline-text-5" id="text-orgd2f21c9">
|
||||
<div id="outline-container-org53d7eed" class="outline-5">
|
||||
<h5 id="org53d7eed">Expansion cards/ports</h5>
|
||||
<div class="outline-text-5" id="text-org53d7eed">
|
||||
<p>
|
||||
The little expansion cards are one of Framework’s big marketing things. I think they’re pretty neat, though I don’t always quite understand the way people talk about them, as “dongle killers”. I would find hotswapping these about equally obnoxious as carrying dongles. The idea of aftermarket expansion cards is interesting, though - these are low level, high bandwidth ports, with I think similar capabilities to the ExpressCard ports on old business laptops, but more modern with a USB-C port. I’m looking forward to the USB4 era!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org2ece67a" class="outline-5">
|
||||
<h5 id="org2ece67a">Performance</h5>
|
||||
<div class="outline-text-5" id="text-org2ece67a">
|
||||
<div id="outline-container-org2eeaec3" class="outline-5">
|
||||
<h5 id="org2eeaec3">Performance</h5>
|
||||
<div class="outline-text-5" id="text-org2eeaec3">
|
||||
<p>
|
||||
So far I haven’t felt limited by performance at all, the experience has been really snappy. I haven’t thrown particularly difficult things at it, though, but that’s fine - most of what I do on a laptop is reading, web browsing, and text editing. I played some Factorio on it and that seemed fine, but using the touchpad felt limiting so I didn’t play very much.
|
||||
</p>
|
||||
@@ -442,9 +442,9 @@ So far I haven’t felt limited by performance at all, the experience has be
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-orgfa71447" class="outline-3">
|
||||
<h3 id="orgfa71447">Closing words</h3>
|
||||
<div class="outline-text-3" id="text-orgfa71447">
|
||||
<div id="outline-container-org4efbde8" class="outline-3">
|
||||
<h3 id="org4efbde8">Closing words</h3>
|
||||
<div class="outline-text-3" id="text-org4efbde8">
|
||||
<p>
|
||||
Getting this laptop set up has been really fun! It’s a good opportunity to take stock of where we’re at. On the hardware side, I am very impressed that it’s now possible to make a laptop that’s this user-servicable, this well-specced and still not <i>that</i> expensive. It’s a reminder of how much better things could be.
|
||||
</p>
|
||||
@@ -460,9 +460,9 @@ Personally, I’m getting a rare chance to critically examine all the little
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org7b63de8" class="outline-2">
|
||||
<h2 id="org7b63de8">Appendix A: Transient Terminal Sources</h2>
|
||||
<div class="outline-text-2" id="text-org7b63de8">
|
||||
<div id="outline-container-org818d349" class="outline-2">
|
||||
<h2 id="org818d349">Appendix A: Transient Terminal Sources</h2>
|
||||
<div class="outline-text-2" id="text-org818d349">
|
||||
<p>
|
||||
<code>togglescratch</code>
|
||||
</p>
|
||||
@@ -527,9 +527,9 @@ opacity-rule=["90:name = 'scratchterminal'"];
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="outline-container-org3ac98df" class="outline-2">
|
||||
<h2 id="org3ac98df">Appendix B: lock.py</h2>
|
||||
<div class="outline-text-2" id="text-org3ac98df">
|
||||
<div id="outline-container-org7abf4bc" class="outline-2">
|
||||
<h2 id="org7abf4bc">Appendix B: lock.py</h2>
|
||||
<div class="outline-text-2" id="text-org7abf4bc">
|
||||
<div class="org-src-container">
|
||||
<pre class="src src-python"><span class="org-comment-delimiter">#</span><span class="org-comment">!/usr/bin/python3</span>
|
||||
<span class="org-keyword">import</span> os
|
||||
|
||||
Reference in New Issue
Block a user