diff options
Diffstat (limited to 'posts/script-loaded-on-my-website')
| -rw-r--r-- | posts/script-loaded-on-my-website/index.html | 534 |
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 – 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’s dev tool, +and add it to the head section of your site. View this website’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> |