Differences

This shows you the differences between two versions of the page.

--- playground:style_style_toilet_door [2025/02/03 11:19] – clara
+++ playground:style_style_toilet_door [2025/02/03 11:34] (current) – clara
@@ Line 1: / Line 1: @@
-%%
 <HTML>
 <script>
@@ Line 22: / Line 21: @@
 </HTML>
+body {
+    background: sienna;
+    border: 1em inset brown;
+}
+article#content{
+    overflow: hidden;
+    background: burlywood;
+    padding: 2em;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-around;
+    gap: 0em;
+    border: 1em inset sienna;
+}
+p {
+   margin: -1em;
+    display: inline-block;
+    max-width: 16rem;
+    color: black;
+    font-size: 25px;
+    text-align: center;
+}
+#navbar .right-column, .site-header, div#sidebar , .page-info{
+display: none;
+}
+.site-name {
+    color: transparent !important;
+    background: linear-gradient(45deg, #9b9a9a, #ffffff, #898888);
+    position: fixed;
+    top: 27vh;
+    bottom: 0;
+    left: 20px;
+    width: 30px;
+    height: 320px;
+        z-index: 1;
+}
+.site-name:after {
+content:"occupied";
+color: red;
+    transform: rotate(90deg);
+    position: absolute;
+    left: -14px;
+}
+.left-column {
+padding: 0;
+}
+p:nth-child(4n) {
+    color: #00ed3c;
+    font-size: 40px;
+    -webkit-text-stroke: #00ed3c 0.18em;
+    paint-order:  stroke;
+    line-height: 1.35;
+    font-family: cursive;
+    transform: rotate(-2deg);
+}
+p:nth-child(8n) {
+    color: deeppink;
+    -webkit-text-stroke: deeppink 0.18em;
+    font-size: 32px;
+    transform: rotate(-12deg);
+}
+p:nth-child(4n+1) {
+    background: linear-gradient(yellow, darkorange);
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-weight: bold;
+    padding: 1em;
+    border-radius: 40%;
+    box-shadow: 0 0 1em 0 rgba(0,0,0,0.1);
+    transform: rotate(18deg);
+}
+p:nth-child(8n+1) {
+    background: radial-gradient(black, midnightblue);
+    color: white;
+    text-decoration: underline;
+    text-decoration-thickness: 0.2em;
+    border-radius: 0;
+    transform: rotate(-1deg);
+}
+p:nth-child(4n+2) {
+    -webkit-text-stroke: wheat 0.5em;
+   color: burlywood;
+   font-weight: bold;
+   paint-order:  stroke;
+   transform: rotate(-6deg);
+   line-height: 1.35;
+   font-size: 20px;
+   font-family: serif;
+}
+p:nth-child(8n+2) {
+    -webkit-text-stroke: #daa35d 0.5em;
+   color: burlywood;
+   font-weight: normal;
+   font-size: 30px;
+   transform: rotate(12deg);
+   letter-spacing: 0.25em;
+}
+p:nth-child(4n+3) {
+   transform: scale(1, 7);
+   letter-spacing: 6px;
+   line-height: 0.5;
+   font-weight: bold;
+   filter: blur(1px);
+   color: mediumblue;
+}
+p:nth-child(8n+3) {
+   transform: scale(2, 1);
+   color: white;
+}
+p:nth-child(5n)::after{
+   content: '⟶'
+}
+p:nth-child(5n + 1)::after{
+   content: '★★★'
+}
+p:nth-child(5n + 2)::before{
+   content: '✗'
+}
+p:nth-child(5n + 3)::before{
+   content: '✿'
+}
+p:nth-child(5n + 4)::after{
+   content: '❤'
+}
+p:has(a):has(img){
+    all: revert !important;
+}
+/*
+p:nth-child(1) { background: #00ed3c; }
+p:nth-child(2) { background: #d26bb7; }
+p:nth-child(3) { background: #df721e; }
+p:nth-child(4) { background: #91ff00; }
+p:nth-child(5) { background: #e100ff; }
+p:nth-child(6) { background: #9b89d6; }
+p:nth-child(7) { background: #c3ff00; }
+p:nth-child(8) { background: #df721e; }
+p:nth-child(9) { background: #91ff00; }
+p:nth-child(10) { background: #e100ff; }
+p:nth-child(11) { background: #00ed3c; }
+p:nth-child(12) { background: #d26bb7; }
+p:nth-child(13) { background: #df721e; }
+p:nth-child(14) { background: #91ff00; }
+p:nth-child(15) { background: #e100ff; }
+p:nth-child(16) { background: #9b89d6; }
+p:nth-child(17) { background: #c3ff00; }
+p:nth-child(18) { background: #df721e; }
+p:nth-child(19) { background: #91ff00; }
+p:nth-child(20) { background: #e100ff; }
+*/