b12f/benjaminbaedorf.eu
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Added css-edit file, updated drone yml

Browse source
This commit is contained in:
Benjamin Bädorf 2019-11-04 15:05:49 +01:00
parent cac9d08b59
commit 5fb8602c8d
2 changed files with 104 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
.drone.yml
View file

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

86
css-edit/index.html Normal file
View file

@ -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>