Remove CSS Article, add GPG Key
parent
b71e6b153b
commit
d57060737e
|
|
@ -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>
|
||||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -0,0 +1,52 @@
|
|||
-----BEGIN PGP PUBLIC KEY BLOCK-----
|
||||
|
||||
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
|
||||
OPZ3IDFLe9mt/etLi5k=
|
||||
=ZjU4
|
||||
-----END PGP PUBLIC KEY BLOCK-----
|
||||
Loading…
Reference in New Issue