commit 434ed1e08ecf836b7151ae3cc86559f132ad29dc
parent 8b36a7b853cba245f75aac7762840bde6392016c
Author: tongong <tongong@gmx.net>
Date: Mon, 5 Dec 2022 19:56:57 +0100
[zoom-interference] fix styles and gitignore
Diffstat:
5 files changed, 14 insertions(+), 45 deletions(-)
diff --git a/content/writing/zoom-interference/.gitignore b/content/writing/zoom-interference/.gitignore
@@ -1,2 +1,2 @@
-index.html
-data/*
+/index.html
+/data/*
diff --git a/content/writing/zoom-interference/lib/bamboo.css b/content/writing/zoom-interference/lib/bamboo.css
@@ -1 +0,0 @@
-:root{--b-font-main: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--b-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--b-txt: #eceff4;--b-bg-1: #2e3440;--b-bg-2: #3b4252;--b-line: #3b4252;--b-link: #bf616a;--b-btn-bg: #242933;--b-btn-txt: #fff;--b-focus: #88c0d0}*,::before,::after{box-sizing:border-box}html:focus-within{scroll-behavior:smooth}body{max-width:70ch;padding:0 1rem;margin:auto;background:var(--b-bg-1);font-family:var(--b-font-main);text-rendering:optimizeSpeed;line-height:1.5;color:var(--b-txt);-moz-tab-size:4;tab-size:4;word-break:break-word;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%}h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,details,blockquote,pre,figure,table,address,hr,fieldset,iframe,audio,video{margin:0 0 1.5rem}h1,h2,h3,h4,h5,h6{line-height:1.25;margin-top:2rem}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}h5{font-size:.875rem}h6{font-size:.75rem}a{color:var(--b-link);text-decoration:none}a:hover{text-decoration:underline}img,video,svg{max-width:100%;height:auto}embed,iframe,object{max-width:100%}iframe{border-style:none}abbr[title]{text-decoration:underline;text-decoration:underline dotted}blockquote{margin-left:0;padding:.5rem 0 .5rem 1.5rem;border-left:.25rem solid var(--b-txt)}blockquote>:last-child{margin-bottom:0}small{font-size:.875rem}sub,sup{font-size:.75em;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}hr{height:0;overflow:visible;border:0;border-bottom:1px solid var(--b-line)}pre,code,kbd,samp,tt,var{background:var(--b-bg-2);border-radius:.25rem;padding:.125rem .25rem;font-family:var(--b-font-mono);font-size:.875rem}pre{padding:1rem;border-radius:0;overflow:auto;white-space:pre}pre code{padding:0}details{display:block;padding:.5rem 1rem;background:var(--b-bg-2);border:1px solid var(--b-line);border-radius:.25rem}details>:last-child{margin-bottom:0}details[open]>summary{margin-bottom:1.5rem}summary{display:list-item;cursor:pointer;font-weight:bold}summary:focus{box-shadow:none}table{border-collapse:collapse;width:100%;text-indent:0}table caption{margin-bottom:.5rem}tr{border-bottom:1px solid var(--b-line)}td,th{padding:.5rem 0}th{text-align:left}ul,ol,dd{padding-left:2rem}li>ul,li>ol{margin-bottom:0}fieldset{padding:.5rem .75rem;border:1px solid var(--b-line);border-radius:.25rem}legend{padding:0 .25rem}label{cursor:pointer;display:block;margin-bottom:.25rem}button,input,select,textarea{margin:0;padding:.5rem .75rem;max-width:100%;background:var(--b-bg-2);border:0;border-radius:.25rem;font:inherit;line-height:1.125;color:var(--b-txt)}select,input:not([size]):not([type=button i]):not([type=submit i]):not([type=reset i]):not([type=checkbox i]):not([type=radio i]){width:100%}[type=color i]{min-height:2.125rem}select:not([multiple]):not([size]){padding-right:1.5rem;background-repeat:no-repeat;background-position:right .5rem center;-moz-appearance:none;-webkit-appearance:none;appearance:none}textarea{width:100%;resize:vertical}textarea:not([rows]){height:8rem}button,[type=button i],[type=submit i],[type=reset i]{-webkit-appearance:button;display:inline-block;text-align:center;white-space:nowrap;background:var(--b-btn-bg);color:var(--b-btn-txt);border:0;cursor:pointer;transition:opacity .25s}button:hover,[type=button i]:hover,[type=submit i]:hover,[type=reset i]:hover{opacity:.75}button[disabled],[type=button i][disabled],[type=submit i][disabled],[type=reset i][disabled]{opacity:.5}progress{vertical-align:middle}[type=search i]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.5}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}::-moz-focus-inner{border-style:none;padding:0}:-moz-focusring{outline:1px dotted ButtonText}:-moz-ui-invalid{box-shadow:none}[aria-busy=true i]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true i],[disabled]{cursor:not-allowed}:focus,details:focus-within{outline:none;box-shadow:0 0 0 2px var(--b-focus)}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,::before,::after{animation-delay:-1ms !important;animation-duration:1ms !important;animation-iteration-count:1 !important;background-attachment:initial !important;scroll-behavior:auto !important;transition-delay:0 !important;transition-duration:0 !important}}select:not([multiple]):not([size]){background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='%23eceff4'%3E%3Cpath d='M5 6l5 5 5-5 2 1-7 7-7-7 2-1z'/%3E%3C/svg%3E")}
diff --git a/content/writing/zoom-interference/src/index.html b/content/writing/zoom-interference/src/index.html
@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="./styles.css"/>
+<div id="container"></div>
+<script src="./main.js"></script>
diff --git a/content/writing/zoom-interference/src/main.js b/content/writing/zoom-interference/src/main.js
@@ -26,14 +26,8 @@ const main = () => {
return {
view: (vnode) => m("div",
m("h1", "zoom interference"),
- m("p", {
- style: {
- textAlign: "center",
- fontStyle: "italic",
- },
- }, `a playful exploration into the world of image rendering. by `,
- m("a", {href: "https://github.com/tongong"}, "@tongong"),
- `, 2022`
+ m("p.page-intro",
+ `A playful exploration into the world of image rendering.`
),
m("p", `I recently discovered that pixel interference effects can
occur by zooming in on gray image areas. This got me thinking:
@@ -304,7 +298,7 @@ const main = () => {
yourself. I respect your privacy - All images are processed
client-side.`),
m(custom_file_upload),
- m("h2", "Todo"),
+ m("h2", "todo"),
zoom_button("test", 0.5), `, `,
zoom_button("test", 1), `, `,
m("p", `do not force square images`),
@@ -313,14 +307,12 @@ const main = () => {
m("h2", "future ideas"),
m("p", `different images on different scales?`),
m("p", `more browser tests to really understand the different renderings`),
- m("h2", "Thank you..."),
+ m("h2", "thank you..."),
m("ul",
m("li", "... ",
m("a", {href: "https://mithril.js.org/"}, "mithril.js"),
- " and ",
- m("a", {href: "https://github.com/rilwis/bamboo"}, "bamboo"),
- ` for keeping the fun in this project by abstracting away
- the Javascript DOM API and CSS`,
+ ` for keeping the fun in this project by abstracting over
+ the Javascript DOM API`,
),
m("li", "... ",
m("a", {href: "https://ciechanow.ski/"}, "Bartosz Ciechanowski"),
@@ -333,4 +325,4 @@ const main = () => {
};
};
-m.mount(document.body, main);
+m.mount(document.getElementById("container"), main);
diff --git a/content/writing/zoom-interference/src/styles.css b/content/writing/zoom-interference/src/styles.css
@@ -1,28 +1,3 @@
-:root {
- --b-txt: #eceff4;
- --b-bg-1: #2e3440;
- --b-bg-2: #3b4252;
- --b-line: #3b4252;
- --b-link: #bf616a;
- --b-btn-bg: #242933;
- --b-btn-txt: #fff;
- --b-focus: #88c0d0;
-}
-
-h1 {
- color: var(--b-link);
- text-align: center;
-}
-
-p {
- text-align: justify;
-}
-
-a {
- cursor: pointer;
-}
-
-
/* SLIDER STYLING */
/* this is such a pain. why does css have to be so stupid? */
/* after searching for more than an hour and trying 15 different hacks to get
@@ -38,7 +13,7 @@ input[type=range] {
input[type=range]::-moz-range-track {
width: calc(100% - 8px);
height: 4px;
- background: var(--b-btn-txt);
+ background: var(--b-bg-2);
border: none;
border-radius: 2px;
}
@@ -57,7 +32,7 @@ input[type=range]{
input[type=range]::-webkit-slider-runnable-track {
width: calc(100% - 50px);
height: 4px;
- background: var(--b-btn-txt);
+ background: var(--b-bg-2);
border: none;
border-radius: 2px;
}