Remove CSS Article, add GPG Key

This commit is contained in:
Benjamin Bädorf 2020-08-13 15:24:01 +02:00
parent b71e6b153b
commit d57060737e
No known key found for this signature in database
GPG key ID: 4406E80E13CD656C
3 changed files with 60 additions and 86 deletions

View file

@ -1,86 +0,0 @@
<html>
<head>
<title>Edit CSS inline</title>
</head>
<body>
<h1>Edit CSS inline</h1>
<p>This page demonstrates a nifty HTML trick. If you make a style tag contenteditable and <code>display: block;</code> it, you can change the styles for a page live.</p>
<p>For example, try editing the styles for the paragraphs and h1 below:</p>
<style contenteditable>
h1 {
/* Try changing the css by typing here */
transform: skew(-20deg);
border-bottom: 0.5rem solid grey;
}
p {
color: rgba(30, 30, 30);
margin: 0;
margin-top: 1rem;
}
</style>
<p>Since this is CSS that is interpreted by the browser, you can write any valid css, like media queries or pseudo-element selectors.</p>
<style contenteditable>
/* Try changing the css here */
body {
display: flex;
flex-direction: column;
align-items: center;
font-family: sans-serif;
padding: 4rem;
}
body > * {
width: 100%;
max-width: 40rem;
}
@media screen and (min-width: 1200px) {
body {
padding: 4rem 8rem;
}
}
</style>
<p>The CSS Below sets up the style tags. If you find a light theme easier, try changing the background color and font color. Be careful though, if you change the display value here, you loose the ability to view and edit the styles</p>
<style contenteditable>
style {
display: block;
font-family: monospace;
white-space: pre;
margin-top: 1rem;
background-color: rgba(30, 30, 30);
color: white;
padding: 1rem;
}
style::before,
style::after {
display: block;
color: grey;
}
style[contenteditable]::before,
style[contenteditable]::after {
color: brown;
}
style[contenteditable]::before {
content: '<style contenteditable>';
}
style::before {
content: '<style>';
}
style::after {
content: '<\/style>';
}
</style>
<p>This is an idea that came up after viewing <a href="https://secretgeek.github.io/html_wysiwyg/html.html" rel="noreferrer noopener">this brilliant HTML quine</a>. Code is <a href="https://git.b12f.io/b12f/bbcom/src/branch/master/css-edit/index.html" rel="noreferrer noopener">here</a>.</p>
<body>
</html>

View file

@ -25,6 +25,7 @@
padding: 0px;
max-width: 100%;
}
.hidden {
display: none;
}
@ -42,6 +43,13 @@
<p>You can see some of his code <a href="https://github.com/b12f" target="_blank" title="Github">here</a> and <a href="http://git.b12f.io/b12f" target="_blank" title="Private Gitea">here</a></p>
<p>You can stalk his professional life <a href="https://www.linkedin.com/in/benjaminbaedorf" target="_blank" title="LinkedIn">here</a></p>
<details>
<summary>GPG</summary>
<a
download
href="/public-pgp-benjamin-baedorf.asc"
>4332 E0D0 2B21 4D31 376C 366E 4406 E80E 13CD 656C</a>
</p>
<script>
var aka = document.getElementById('aka');

View file

@ -0,0 +1,52 @@
-----BEGIN PGP PUBLIC KEY BLOCK-----
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
OPZ3IDFLe9mt/etLi5k=
=ZjU4
-----END PGP PUBLIC KEY BLOCK-----