Browse Source

Added css-edit file, updated drone yml

master
Benjamin Bädorf 2 years ago
parent
commit
5fb8602c8d
  1. 30
      .drone.yml
  2. 86
      css-edit/index.html

30
.drone.yml

@ -1,14 +1,20 @@
pipeline:
publish:
kind: pipeline
type: docker
name: default
steps:
- name: publish
when:
branch:
- master
image: appleboy/drone-scp
repo: b12f/bbcom
host: web5svsvy.wh.hosting.zone
port: 2244
secrets:
- source: bbcom_ssh_key
target: scp_key
- source: bbcom_ssh_user
target: scp_username
source: ./*
target: /home/web5svsvy/html/benjaminbaedorf.eu/
rm: true
settings:
host: web5svsvy.wh.hosting.zone
port: 2244
username:
from_secret: bbcom_ssh_user
key:
from_secret: bbcom_ssh_key
source: ./*
target: /home/web5svsvy/html/benjaminbaedorf.eu/
rm: true

86
css-edit/index.html

@ -0,0 +1,86 @@
<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>
Loading…
Cancel
Save