Add viewport settings

This commit is contained in:
Akko
2022-03-18 19:38:02 +01:00
parent f25f2a8c9e
commit c0135c72d8
7 changed files with 114 additions and 100 deletions

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 13:55 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>About</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 13:55 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Index</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>
@@ -208,9 +210,9 @@ cute blog <br>
!
</p>
<div id="outline-container-org28a918e" class="outline-2">
<h2 id="org28a918e">Here&rsquo;s some headers</h2>
<div class="outline-text-2" id="text-org28a918e">
<div id="outline-container-org64792a6" class="outline-2">
<h2 id="org64792a6">Here&rsquo;s some headers</h2>
<div class="outline-text-2" id="text-org64792a6">
<ol class="org-ol">
<li>chuu</li>
<li><p>
@@ -238,9 +240,9 @@ daisuki
**</b>
</p>
</div>
<div id="outline-container-org7f198ef" class="outline-5">
<h5 id="org7f198ef">meme</h5>
<div class="outline-text-5" id="text-org7f198ef">
<div id="outline-container-orgcaf4204" class="outline-5">
<h5 id="orgcaf4204">meme</h5>
<div class="outline-text-5" id="text-orgcaf4204">
<table>
@@ -276,16 +278,16 @@ daisuki
</div>
</div>
<div id="outline-container-orgaa158f1" class="outline-2">
<h2 id="orgaa158f1">memes</h2>
<div class="outline-text-2" id="text-orgaa158f1">
<div id="outline-container-orgb352a05" class="outline-2">
<h2 id="orgb352a05">memes</h2>
<div class="outline-text-2" id="text-orgb352a05">
</div>
<div id="outline-container-org3ed5122" class="outline-3">
<h3 id="org3ed5122"><span class="done DONE">DONE</span> chuu bf</h3>
<div id="outline-container-org8f991cb" class="outline-3">
<h3 id="org8f991cb"><span class="done DONE">DONE</span> chuu bf</h3>
</div>
<div id="outline-container-org225542d" class="outline-3">
<h3 id="org225542d"><span class="todo TODO">TODO</span> awawahehehej~~~</h3>
<div class="outline-text-3" id="text-org225542d">
<div id="outline-container-orgbfd6a77" class="outline-3">
<h3 id="orgbfd6a77"><span class="todo TODO">TODO</span> awawahehehej~~~</h3>
<div class="outline-text-3" id="text-orgbfd6a77">
<p>
~
</p>

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 19:30 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Emacs Log 1: This Blog</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>
@@ -202,9 +204,9 @@
</div>
<div id="content" class="content">
<div id="outline-container-orgdf7e882" class="outline-2">
<h2 id="orgdf7e882">Emacs Log 1: This Blog</h2>
<div class="outline-text-2" id="text-orgdf7e882">
<div id="outline-container-org4962c0f" class="outline-2">
<h2 id="org4962c0f">Emacs Log 1: This Blog</h2>
<div class="outline-text-2" id="text-org4962c0f">
<p>
<span class="underline"><i><b>WARNING:</b></i></span> This blog post is still under construction!
</p>
@@ -215,9 +217,9 @@ This blog is built on top of <code>org-mode</code>&rsquo;s publishing capabiliti
</div>
</div>
<div id="outline-container-org1ae4559" class="outline-2">
<h2 id="org1ae4559">Appendix A: config.el snippet</h2>
<div class="outline-text-2" id="text-org1ae4559">
<div id="outline-container-org34663a5" class="outline-2">
<h2 id="org34663a5">Appendix A: config.el snippet</h2>
<div class="outline-text-2" id="text-org34663a5">
<div class="org-src-container">
<pre class="src src-emacs-lisp"><span class="org-rainbow-delimiters-depth-1">(</span><span class="org-constant">require</span> <span class="org-highlight-quoted-quote">'</span><span class="org-constant">ox-publish</span><span class="org-rainbow-delimiters-depth-1">)</span>

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 19:30 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Framework Laptop Review</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>
@@ -202,13 +204,13 @@
</div>
<div id="content" class="content">
<div id="outline-container-org8391d41" class="outline-2">
<h2 id="org8391d41">My Experience with the Framework Laptop</h2>
<div class="outline-text-2" id="text-org8391d41">
<div id="outline-container-org838cfb0" class="outline-2">
<h2 id="org838cfb0">My Experience with the Framework Laptop</h2>
<div class="outline-text-2" id="text-org838cfb0">
</div>
<div id="outline-container-org1ce456a" class="outline-3">
<h3 id="org1ce456a">Ordering</h3>
<div class="outline-text-3" id="text-org1ce456a">
<div id="outline-container-orgc896ad3" class="outline-3">
<h3 id="orgc896ad3">Ordering</h3>
<div class="outline-text-3" id="text-orgc896ad3">
<p>
I&rsquo;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>
@@ -220,13 +222,13 @@ I asked their customer service to make a small change to the delivery address, b
</div>
</div>
<div id="outline-container-org50ca9d5" class="outline-3">
<h3 id="org50ca9d5">Set-up</h3>
<div class="outline-text-3" id="text-org50ca9d5">
<div id="outline-container-orgae684cf" class="outline-3">
<h3 id="orgae684cf">Set-up</h3>
<div class="outline-text-3" id="text-orgae684cf">
</div>
<div id="outline-container-orgb9b62a2" class="outline-4">
<h4 id="orgb9b62a2">Hardware</h4>
<div class="outline-text-4" id="text-orgb9b62a2">
<div id="outline-container-org8235aec" class="outline-4">
<h4 id="org8235aec">Hardware</h4>
<div class="outline-text-4" id="text-org8235aec">
<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&rsquo;t seem worth the money to me. The RAM is probably overkill.
</p>
@@ -257,9 +259,9 @@ The more you look at it, the nicer it gets!
</p>
</div>
</div>
<div id="outline-container-org5832bd6" class="outline-4">
<h4 id="org5832bd6">Software</h4>
<div class="outline-text-4" id="text-org5832bd6">
<div id="outline-container-org6ac5833" class="outline-4">
<h4 id="org6ac5833">Software</h4>
<div class="outline-text-4" id="text-org6ac5833">
<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&rsquo;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>
@@ -269,9 +271,9 @@ The laptop held up well during compiling. It&rsquo;s not as fast as a desktop of
</p>
</div>
<div id="outline-container-orgd4dd8be" class="outline-5">
<h5 id="orgd4dd8be">Display scaling</h5>
<div class="outline-text-5" id="text-orgd4dd8be">
<div id="outline-container-orgb81e91b" class="outline-5">
<h5 id="orgb81e91b">Display scaling</h5>
<div class="outline-text-5" id="text-orgb81e91b">
<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&rsquo;t use Wayland.
</p>
@@ -281,36 +283,36 @@ The odd application requires its own scaling setting. Rofi requires setting <cod
</p>
</div>
</div>
<div id="outline-container-org8505691" class="outline-5">
<h5 id="org8505691">Display manager</h5>
<div class="outline-text-5" id="text-org8505691">
<div id="outline-container-org5400b56" class="outline-5">
<h5 id="org5400b56">Display manager</h5>
<div class="outline-text-5" id="text-org5400b56">
<p>
I used SDDM which works very well. I wanted to go for something a bit fancier looking, and this delivers. I don&rsquo;t usually use things in the whole QT ecosystem, so it&rsquo;s refreshing.
</p>
</div>
</div>
<div id="outline-container-orgc19a9e4" class="outline-5">
<h5 id="orgc19a9e4">Hibernate/suspend-to-disk</h5>
<div class="outline-text-5" id="text-orgc19a9e4">
<div id="outline-container-org7da58a3" class="outline-5">
<h5 id="org7da58a3">Hibernate/suspend-to-disk</h5>
<div class="outline-text-5" id="text-org7da58a3">
<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&rsquo;ve observed the laptop auto-hibernating when the battery runs out, but it doesn&rsquo;t do this reliably, so I should probably configure it myself.
</p>
</div>
</div>
<div id="outline-container-orga44529e" class="outline-5">
<h5 id="orga44529e"><a href="http://guake-project.org/">Guake</a>-like transient terminal</h5>
<div class="outline-text-5" id="text-orga44529e">
<div id="outline-container-org9b5cbbf" class="outline-5">
<h5 id="org9b5cbbf"><a href="http://guake-project.org/">Guake</a>-like transient terminal</h5>
<div class="outline-text-5" id="text-org9b5cbbf">
<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="#org52dc838">Appendix A</a> to do this. The implementation is a bit hacky, and it&rsquo;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="#org4f4372a">Appendix A</a> to do this. The implementation is a bit hacky, and it&rsquo;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-org69ee640" class="outline-5">
<h5 id="org69ee640">Wallpaper-setting script</h5>
<div class="outline-text-5" id="text-org69ee640">
<div id="outline-container-orgff5b8a7" class="outline-5">
<h5 id="orgff5b8a7">Wallpaper-setting script</h5>
<div class="outline-text-5" id="text-orgff5b8a7">
<p>
I wrote a script to set a random wallpaper.
</p>
@@ -337,11 +339,11 @@ I wrote a script to set a random wallpaper.
</div>
</div>
<div id="outline-container-org59a8170" class="outline-5">
<h5 id="org59a8170">Lockscreen</h5>
<div class="outline-text-5" id="text-org59a8170">
<div id="outline-container-orgdc54e71" class="outline-5">
<h5 id="orgdc54e71">Lockscreen</h5>
<div class="outline-text-5" id="text-orgdc54e71">
<p>
I hacked together some <a href="#org4a95615">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="#orge8e4318">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">
@@ -355,34 +357,34 @@ Is there a better lockscreen out there that will let me set my own image as the
</div>
</div>
<div id="outline-container-orgcd6505e" class="outline-5">
<h5 id="orgcd6505e">TODO</h5>
<div class="outline-text-5" id="text-orgcd6505e">
<div id="outline-container-orgfca7ce6" class="outline-5">
<h5 id="orgfca7ce6">TODO</h5>
<div class="outline-text-5" id="text-orgfca7ce6">
</div>
<ul class="org-ul">
<li><a id="org4d13c88"></a>Battery level notifications<br></li>
<li><a id="org891bbc2"></a>sleep-then-hibernate<br></li>
<li><a id="org986ee7a"></a>Battery tuning<br></li>
<li><a id="org9bced13"></a>Battery level notifications<br></li>
<li><a id="orgde5f092"></a>sleep-then-hibernate<br></li>
<li><a id="orgeecb133"></a>Battery tuning<br></li>
</ul>
</div>
</div>
</div>
<div id="outline-container-org636f0d1" class="outline-3">
<h3 id="org636f0d1">Impressions</h3>
<div class="outline-text-3" id="text-org636f0d1">
<div id="outline-container-org05ae2ca" class="outline-3">
<h3 id="org05ae2ca">Impressions</h3>
<div class="outline-text-3" id="text-org05ae2ca">
</div>
<div id="outline-container-org199b4e0" class="outline-5">
<h5 id="org199b4e0">Build Quality</h5>
<div class="outline-text-5" id="text-org199b4e0">
<div id="outline-container-org458c42f" class="outline-5">
<h5 id="org458c42f">Build Quality</h5>
<div class="outline-text-5" id="text-org458c42f">
<p>
The laptop is made of aluminium and feels solid but light. The screen does seem pretty flimsy, though. I probably wouldn&rsquo;t want to drop this thing. It looks sleek and elegant, but pretty muted.
</p>
</div>
</div>
<div id="outline-container-org407cc5f" class="outline-5">
<h5 id="org407cc5f">Screen</h5>
<div class="outline-text-5" id="text-org407cc5f">
<div id="outline-container-org20a8a7c" class="outline-5">
<h5 id="org20a8a7c">Screen</h5>
<div class="outline-text-5" id="text-org20a8a7c">
<p>
This is my first time ever using a high-DPI screen, and I&rsquo;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>
@@ -397,27 +399,27 @@ The brightness goes up quite high, but colours feel somewhat washed out at high
</div>
</div>
<div id="outline-container-orge31fee0" class="outline-5">
<h5 id="orge31fee0">Keyboard</h5>
<div class="outline-text-5" id="text-orge31fee0">
<div id="outline-container-org83341a1" class="outline-5">
<h5 id="org83341a1">Keyboard</h5>
<div class="outline-text-5" id="text-org83341a1">
<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-org75c2b8f" class="outline-5">
<h5 id="org75c2b8f">Touchpad</h5>
<div class="outline-text-5" id="text-org75c2b8f">
<div id="outline-container-org057987d" class="outline-5">
<h5 id="org057987d">Touchpad</h5>
<div class="outline-text-5" id="text-org057987d">
<p>
I&rsquo;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&rsquo;s still a step down. Pinch to zoom doesn&rsquo;t work very well, but I don&rsquo;t use that functionality a lot. I miss having dedicated mouse buttons; the clicking functionality on this touchpad works fine for me, but it&rsquo;s hard not to mess up left/middle/right click. That&rsquo;s a good incentive for me to practice relying on the mouse less, though. There&rsquo;s plenty of <a href="https://linuxtouchpad.org/">work being done</a> on the Linux touchpad experience software-side, too. It&rsquo;s a nice time to be a linux laptop user!
</p>
</div>
</div>
<div id="outline-container-orgba8ec24" class="outline-5">
<h5 id="orgba8ec24">Battery</h5>
<div class="outline-text-5" id="text-orgba8ec24">
<div id="outline-container-org22ceda9" class="outline-5">
<h5 id="org22ceda9">Battery</h5>
<div class="outline-text-5" id="text-org22ceda9">
<p>
With the disclaimer that I haven&rsquo;t tested very intensely and I haven&rsquo;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&rsquo;t have a good benchmark for more intensive tasks, but compiling does hit the battery pretty hard. All in all I&rsquo;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~
@@ -425,18 +427,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-orgda266d6" class="outline-5">
<h5 id="orgda266d6">Expansion cards/ports</h5>
<div class="outline-text-5" id="text-orgda266d6">
<div id="outline-container-org7ad154e" class="outline-5">
<h5 id="org7ad154e">Expansion cards/ports</h5>
<div class="outline-text-5" id="text-org7ad154e">
<p>
The little expansion cards are one of Framework&rsquo;s big marketing things. I think they&rsquo;re pretty neat, though I don&rsquo;t always quite understand the way people talk about them, as &ldquo;dongle killers&rdquo;. 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&rsquo;m looking forward to the USB4 era!
</p>
</div>
</div>
<div id="outline-container-org3aa2900" class="outline-5">
<h5 id="org3aa2900">Performance</h5>
<div class="outline-text-5" id="text-org3aa2900">
<div id="outline-container-org8914f5b" class="outline-5">
<h5 id="org8914f5b">Performance</h5>
<div class="outline-text-5" id="text-org8914f5b">
<p>
So far I haven&rsquo;t felt limited by performance at all, the experience has been really snappy. I haven&rsquo;t thrown particularly difficult things at it, though, but that&rsquo;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&rsquo;t play very much.
</p>
@@ -444,9 +446,9 @@ So far I haven&rsquo;t felt limited by performance at all, the experience has be
</div>
</div>
<div id="outline-container-orge99e843" class="outline-3">
<h3 id="orge99e843">Closing words</h3>
<div class="outline-text-3" id="text-orge99e843">
<div id="outline-container-orgf76ca63" class="outline-3">
<h3 id="orgf76ca63">Closing words</h3>
<div class="outline-text-3" id="text-orgf76ca63">
<p>
Getting this laptop set up has been really fun! It&rsquo;s a good opportunity to take stock of where we&rsquo;re at. On the hardware side, I am very impressed that it&rsquo;s now possible to make a laptop that&rsquo;s this user-servicable, this well-specced and still not <i>that</i> expensive. It&rsquo;s a reminder of how much better things could be.
</p>
@@ -464,9 +466,9 @@ Personally, I&rsquo;m getting a rare chance to critically examine all the little
<div id="outline-container-org52dc838" class="outline-2">
<h2 id="org52dc838">Appendix A: Transient Terminal Sources</h2>
<div class="outline-text-2" id="text-org52dc838">
<div id="outline-container-org4f4372a" class="outline-2">
<h2 id="org4f4372a">Appendix A: Transient Terminal Sources</h2>
<div class="outline-text-2" id="text-org4f4372a">
<p>
<code>togglescratch</code>
</p>
@@ -531,9 +533,9 @@ opacity-rule=["90:name = 'scratchterminal'"];
</div>
</div>
<div id="outline-container-org4a95615" class="outline-2">
<h2 id="org4a95615">Appendix B: lock.py</h2>
<div class="outline-text-2" id="text-org4a95615">
<div id="outline-container-orge8e4318" class="outline-2">
<h2 id="orge8e4318">Appendix B: lock.py</h2>
<div class="outline-text-2" id="text-orge8e4318">
<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

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 19:30 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Resources</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>

View File

@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 2022-03-18 Fri 19:31 -->
<!-- 2022-03-18 Fri 19:37 -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Sitemap for project pages</title>
@@ -190,6 +190,8 @@
{ background-color: #ffff00; color: #000000; font-weight: bold; }
.org-svg { width: 90%; }
</style>
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>
</head>
<body>

View File

@@ -1 +1,3 @@
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/style.css" type="text/css"/>