Created
January 21, 2023 18:58
-
-
Save simonw/1fc19bf4afceb5192d7670ee05162fab to your computer and use it in GitHub Desktop.
The CSS that powers https://danq.me/wp-content/no-code-webpage/ decoded and pretty-printed - see also https://danq.me/2023/01/11/nocode/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background-attachment: fixed; | |
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%230e009d' d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/%3E%3Cpath fill='%230700a4' d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/%3E%3Cpath fill='%230001ac' d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/%3E%3Cpath fill='%23000ab3' d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/%3E%3Cpath fill='%230014BA' d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/%3E%3Cpath fill='%230024c8' d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/%3E%3Cpath fill='%230036d6' d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/%3E%3Cpath fill='%23004ae4' d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/%3E%3Cpath fill='%230061f2' d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/%3E%3Cpath fill='%230179FF' d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/%3E%3C/g%3E%3C/svg%3E"); | |
background-size: cover; | |
color: white; | |
margin: 0; | |
} | |
html::before, | |
html::after, | |
body::before, | |
body::after { | |
animation: appear 0.6s cubic-bezier(0.23, 1, 0.32, 1) both; | |
color: white; | |
display: block; | |
font-family: sans-serif; | |
} | |
html::before { | |
animation-delay: 0.2s; | |
border-bottom: 4px dotted #f0b466; | |
content: "🤣 The Page With No Code 💻"; | |
font-size: 48px; | |
font-weight: bold; | |
margin: 24px 12px; | |
padding-bottom: 24px; | |
text-align: center; | |
} | |
body::before { | |
animation-delay: 0.5s; | |
content: "It all started when I saw You Don't Need HTML ( no-ht.ml ) by Terence Eden ( shkspr.mobi/blog/2022/12/you-dont-need-html ). The approach he'd used worked, certainly, but it wasn't any more convoluted than just serving a Unicode plain text file as an index document. Plus: what was with that hacky doctype header? Was it possible, I wondered, to come up with anything... even worse. This web page answers that question with a resounding: yes!"; | |
font-size: 18px; | |
line-height: 1.35; | |
margin: 24px 12px; | |
text-align: justify; | |
} | |
body::after { | |
content: "This web page has NO CODE WHATSOEVER*. Use 'View Source' in your browser to see for yourself, or try downloading a copy with curl, wget, or what-have-you. It doesn't work in most browsers - I guess that the developers behind Chrome and Safari don't see the value of this particular kind of hackery - but it works in Firefox and maybe others too."; | |
animation-delay: 0.8s; | |
font-size: 18px; | |
line-height: 1.35; | |
margin: 24px 12px; | |
text-align: justify; | |
} | |
html::after { | |
animation-delay: 1.1s; | |
border-top: 4px dotted #f0b466; | |
color: #ddd; | |
content: "* Obviously there's some code somewhere. Have a look yourself, first, too see if you can find where it comes from. Then, for an explanation of what you're seeing, go to: danq.me/nocode (sorry that the links aren't clickable)."; | |
font-size: 14px; | |
line-height: 1.2; | |
margin: 24px 12px; | |
padding-top: 24px; | |
} | |
@keyframes appear { | |
0% { | |
filter: blur(40px); | |
opacity: 0; | |
transform-origin: 0% 50%; | |
transform: translateX(1000px) scaleX(2.5) scaleY(0.2); | |
} | |
100% { | |
filter: blur(0); | |
opacity: 1; | |
transform-origin: 50% 50%; | |
transform: translateX(0) scaleY(1) scaleX(1); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I used
curl -i https://danq.me/wp-content/no-code-webpage/
to get at theLink:
header, then used https://www.base64decode.org/ to base64 decode it and https://prettier.io/playground/ in CSS mode to pretty print it.