upHEAD master

author: mono-b <monoblanco@DRAINERDOMAIN.localdomain> 2022-12-18 23:58:07 -0300
committer: mono-b <monoblanco@DRAINERDOMAIN.localdomain> 2022-12-18 23:58:07 -0300
commit: 476493c61679764b33734512f023a627dcca9ecf (patch)
tree: 0db36282ab18c2b8d6eb15efab2eb49ef2eb8de3 /posts/script-loaded-on-my-website
1 files changed, 534 insertions, 0 deletions
diff --git a/posts/script-loaded-on-my-website/index.html b/posts/script-loaded-on-my-website/index.html
new file mode 100644
index 0000000..77b7360
--- /dev/null
+++ b/posts/script-loaded-on-my-website/index.html
@@ -0,0 +1,534 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head><title>Script loading &ndash; dd</title>
+
+
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="UTF-8">
+<meta name="robots" content="index, follow">
+<meta name="description" content="Minimal and personal website about GNU/Linux guides and other stuff">
+<meta name="keywords" content="linux, hosting, guides, tech, blog, networking, memes">
+<meta name="author" content="mb">
+
+
+<link rel="shortcut icon" href="/images/favicon.ico">
+
+
+<style type="text/css">
+:root {
+    --bg: #100f0e;
+    --dark-bg: #100f0e;
+    --bright-bg: #100f0e;
+
+    --fg: #CDCED6;
+    --bright-fg: #e5e5e8;
+
+    --white: #CDCED6;
+    --bright-white: #e5e5e8;
+
+    --skin: #e5cdab;
+
+    --orange: #e56800;
+    --light-orange: #fdb64e;
+
+    --yellow: #fecf41;
+
+    --gray:  #a0a0a2;
+    --dark-gray:  #7C838F;
+    --light-gray:  #B8BAC5;
+
+    --green: #98971a;
+    --bright-green: #b8bb26;
+}
+
+body {
+    background: url("/images/drainerdomain_bg.webp") no-repeat fixed;
+    color: var(--fg);
+}
+
+ 
+
+.main-nav ul {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: flex-start;
+    margin: 0;
+    padding: 0.25rem 0;
+}
+
+.main-nav li {
+    font-size: 1.15rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    text-align: center;
+    margin-right: 1.5rem;
+    padding: 0.3rem;
+}
+
+.main-nav li::before {
+    content: "[";
+}
+
+.main-nav li::after {
+    content: "]";
+}
+
+.main-nav li, a {
+    text-decoration: none;
+}
+
+.main-nav li::marker {
+    content: "";
+}
+
+.aside__social-links {
+    position: fixed;
+}
+
+.aside__social-links li {
+    font-size: 0.7rem;
+    font-weight: 400;
+    text-align: left;
+    padding-left: 0px;
+    margin-top: 10px;
+}
+
+.aside__social-links li::marker {
+    content: none;
+}
+
+.aside__social-links a {
+    padding: 2px;
+    text-decoration: none;
+}
+
+.content__body a:link {
+    color: var(--orange);
+}
+
+.content__body a:hover,
+.content__body a:visited {
+    color: var(--yellow);
+}
+
+ 
+
+html {
+  font-family:
+    Iosevka,
+    monospace,
+    system-ui,
+      -apple-system,
+      Segoe UI,
+      Roboto,
+      Ubuntu,
+      Cantarell,
+      Noto Sans,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+}
+
+
+body {
+    font-size: 16px;
+    line-height: 1.5rem;
+    letter-spacing: 0.2px;
+}
+
+ 
+h1 {
+    font-size: 2rem;
+    margin: 1.5rem 0;
+} 
+
+h2, 
+h3, 
+h4, 
+h5, 
+h6 {
+    font-size: 1.5rem;
+    margin: 1.5rem 0;
+}
+
+h1+h2,
+h1+h3,
+h1+h4,
+h1+h5,
+h1+h6,
+h2+h3,
+h2+h4,
+h2+h5,
+h2+h6,
+h3+h4,
+h3+h5,
+h3+h6,
+h4+h5,
+h4+h6,
+h5+h6 {
+    margin: 1;
+}
+
+h1:before { content: "\003E"; }
+h2:before { content: "\003E\003E"; }
+h3:before { content: "\003E\003E\003E"; }
+h4:before { content: "\003E\003E\003E\003E"; }
+h5:before { content: "\003E\003E\003E\003E\003E"; }
+h6:before { content: "\003E\003E\003E\003E\003E\003E"; }
+
+h1:before, 
+h2:before, 
+h3:before, 
+h4:before, 
+h5:before, 
+h6:before {
+    color: var(--yellow);
+    font-weight: 300;
+}
+
+h1:first-child {
+    margin-top: 0;
+}
+
+ 
+p {
+    margin: 0 0 1.5rem 0;
+}
+
+ 
+
+a:link, a:visited {
+    color: #fff;
+}
+
+a:hover, a:active {
+    color: var(--light-orange);
+}
+
+ 
+ul {
+    margin: 0 0 0 0; 
+    padding-left: 1.25rem;
+}
+
+ol {
+    margin: 0 0 0 0;
+    padding-left: 1.75rem;
+}
+
+ol li {
+    margin-bottom: 10px;
+}
+
+ul ul,
+ul ol,
+ol ul,
+ol ol {
+    margin: 0;
+}
+
+ul li::marker {
+    font-size: 0.8rem;
+    content: '\2500\ ';
+    color: var(--yellow);
+}
+
+ol li::marker {
+    color: var(--yellow);
+}
+
+dt {
+  margin: 0;
+  font-weight: bold;
+}
+
+dd {
+  margin: 0 0 0 1.5rem;
+  font-style: italic;
+}
+
+dd + dt {
+  margin-top: 1.5rem;
+}
+
+dl {
+  margin: 0 0 1.5rem 0;
+}
+
+ 
+blockquote {
+    margin: 0;
+    border-left: 2px double var(--dark-gray);
+    font-style: italic;
+    font-size: 14px;
+    background: #0b0b0b !important;
+    padding: 0 5px 0 10px;
+}
+
+ 
+pre {
+    border: 1px solid var(--yellow);
+    border-radius: 4px;
+}
+
+pre,
+code, 
+kbd,
+samp {
+    font-family:
+      Iosevka,
+      Menlo,
+      Consolas,
+      Roboto Mono,
+      Ubuntu Monospace,
+      Noto Mono,
+      Oxygen Mono,
+      Liberation Mono,
+      monospace;
+    background: #0b0b0b !important;
+    font-size: 14px;
+    color: var(--yellow);
+    letter-spacing: 0;
+}
+
+pre {
+    overflow-x: auto;
+    padding: 1.5rem;
+    margin: 0 0 1.5rem 0;
+}
+
+ 
+b,
+strong {
+    font-weight: 600;
+}
+
+ 
+::selection,
+mark {
+    background-color: var(--yellow);
+    color: var(--bg);
+}
+
+ 
+hr {
+    border: 0;
+    margin-bottom: 1.5rem;
+}
+
+hr:after {
+    content: '---';
+    color: var(--yellow);
+}
+
+
+ 
+sup, sub {
+    vertical-align: baseline;
+    position: relative;
+    top: -0.25rem;
+    font-size: unset;
+}
+sub { 
+    top: 0.25rem; 
+}
+
+ 
+table {
+    margin: 0 0 0 0;
+    overflow-wrap: anywhere;
+}
+
+th, td {
+    color: var(--light-gray);
+    border-bottom: 1px solid var(--dark-gray);
+    vertical-align: top;
+    padding: 4px;
+}
+th:first-child, td:first-child {
+    padding-left: 0px;
+}
+th {
+    text-align: center;
+}
+
+ 
+
+.page {
+    max-width: 64rem;
+    margin: 1rem auto;
+    display: grid;
+    grid-template-areas: 
+      "header" 
+      "body" 
+      "aside";
+    grid-template-columns: minmax(0, 1fr);
+    grid-row-gap: 1rem;
+}
+
+@media (min-width: 45rem) {
+    .page {
+        grid-template-areas:
+          "header  header"
+          "body    aside";
+        grid-template-columns: minmax(0, 1fr) 15rem;
+        grid-column-gap: 2rem;
+    }
+}
+
+ 
+
+.page__header {
+    grid-area: header;
+    display: flex;
+}
+
+.page__logo {
+    flex-shrink: 0;
+}
+
+.page__nav {
+    flex-grow: 1;
+}
+
+ 
+.page__body {
+    padding: 20px;
+    border-left: 2px dotted white;
+    grid-area: body;
+    background-color: rgba(0, 0, 0, 0.4);
+    overflow-wrap: break-word;
+}
+
+.page__body details a:link {
+    color: var(--orange)
+}
+
+.page__aside {
+    grid-area: aside;
+    color: var(--bright-bg);
+}
+
+details {
+    color: #fff;
+}
+
+summary {
+    padding: 4px;
+    font-weight: 600;
+}
+
+summary::marker {
+    color: var(--yellow);
+}
+
+.buttons {
+    display: flex;
+    justify-content: center;
+}
+
+.buttons li {
+    padding: 5px;
+}
+
+.buttons li::marker {
+    content: "";
+} 
+
+</style>
+
+<link rel="preload" href="css/lines.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
+<noscript><link rel="stylesheet" href="css/lines.css"></noscript>
+
+</head>
+
+    <body>
+        <div class="page">
+
+            <header class="page__header"><nav class="page__nav main-nav">
+    <ul>
+    
+    
+    <li class="main-nav__item"><a class="nav-main-item" href="/index.html" title="">Home</a></li>
+    
+    <li class="main-nav__item"><a class="nav-main-item" href="/library/" title="">Library</a></li>
+    
+    <li class="main-nav__item"><a class="nav-main-item" href="/software/" title="">Software</a></li>
+    
+    <li class="main-nav__item"><a class="nav-main-item" href="/guides/" title="Guides">Guides</a></li>
+    
+    <li class="main-nav__item"><a class="nav-main-item active" href="/posts/" title="Posts">Posts</a></li>
+    
+    </ul>
+</nav>
+
+</header>
+
+            <section class="page__body">
+    <header class="content__header">
+        <h1>Script loading</h1>
+    </header>
+    <div class="content__body">
+        <p>If you are using something like uMatrix you might have noticed that theres a script element trying to load. You can safely permit it since it only preloads
+deferenced css. It is a technique that I have not taken a look into very deeply, but it does make this website 20% faster, so that is sufficient for me.</p>
+<p style="text-align: center">
+<img src="/images/scriptthing.webp" width="90%" alt="Script dereferenced CSS"></p>
+<p>If you want to implement this on your site, all you have to do is check which part of your CSS stylesheet is critical to load with your browser&rsquo;s dev tool,
+and add it to the head section of your site. View this website&rsquo;s code for a reference.</p>
+
+    </div>
+
+            </section>
+
+            <section class="page__aside">
+                <div class="aside__about">
+
+<ul class="aside__social-links">
+    
+    <li style="font-size: 0.8rem; vertical-align: center">
+        <a href="/rss/" rel="me" aria-label="RSS" title="RSS"><img style="vertical-align:middle" width="18px" height="18px" src="/svg/rss.webp" alt="RSS" aria-hidden="true"> Subscribe</a>;
+    </li>
+    
+    <li style="font-size: 0.8rem; vertical-align: center">
+        <a href="/donate/" rel="me" aria-label="Donate" title="Donate"><img style="vertical-align:middle" width="18px" height="18px" src="/svg/donate.webp" alt="Donate" aria-hidden="true"> Donate</a>;
+    </li>
+    
+    <li style="font-size: 0.8rem; vertical-align: center">
+        <a href="https://odysee.com/@mb:ed" rel="me" aria-label="Odysee" title="Odysee"><img style="vertical-align:middle" width="18px" height="18px" src="/svg/odysee.webp" alt="Odysee" aria-hidden="true"> Odysee</a>;
+    </li>
+    
+    <li style="font-size: 0.8rem; vertical-align: center">
+        <a href="#ZgotmplZ" rel="me" aria-label="XMPP" title="XMPP"><img style="vertical-align:middle" width="18px" height="18px" src="/svg/xmpp.webp" alt="XMPP" aria-hidden="true"> mb at drainerdomain.xyz</a>;
+    </li>
+    
+    <li style="font-size: 0.8rem; vertical-align: center">
+        <a href="https://drainerdomain.xyz/guestbook/signatures" rel="me" aria-label="Guestbook" title="Guestbook"><img style="vertical-align:middle" width="18px" height="18px" src="/svg/sign.webp" alt="Guestbook" aria-hidden="true"> Sign the guestbook!</a>;
+    </li>
+    
+</ul>
+</div>
+
+                <div class="aside__content">
+    
+    
+        <p>
+            
+            2022-09-08
+        </p>
+    
+
+                </div>
+            </section>
+
+            <footer class="page__footer"><ul class="buttons">
+    
+</ul>
+</footer>
+            
+        </div>
+    </body>
+
+</html>
author	mono-b <monoblanco@DRAINERDOMAIN.localdomain>	2022-12-18 23:58:07 -0300
committer	mono-b <monoblanco@DRAINERDOMAIN.localdomain>	2022-12-18 23:58:07 -0300
commit	476493c61679764b33734512f023a627dcca9ecf (patch)
tree	0db36282ab18c2b8d6eb15efab2eb49ef2eb8de3 /posts/script-loaded-on-my-website