From db2bd62cf68026e0769d45a03e4044ff4c8e214d Mon Sep 17 00:00:00 2001 From: Zekiah-A Date: Wed, 27 Mar 2024 14:31:39 +0000 Subject: [PATCH] Updated content warning to new loading theme, CSS fixes --- Other/content-warning-template.js | 102 ++++++++++++------------ Other/poem-load-cover-template.js | 5 ++ Resources/AbbstraktDog.svg | 11 +-- Volume-2/Idiots/five-a-side-footie.json | 2 +- Volume-2/Idiots/reality.json | 2 +- poem.html | 1 - 6 files changed, 60 insertions(+), 63 deletions(-) diff --git a/Other/content-warning-template.js b/Other/content-warning-template.js index fd30ca9..8ccf3ed 100644 --- a/Other/content-warning-template.js +++ b/Other/content-warning-template.js @@ -1,36 +1,35 @@ class ContentWarning extends HTMLElement { constructor() { super() - this.attachShadow({ mode: "open" }) + } + + hide() { + this.querySelector("#contentWarning").style.opacity = "0" + setTimeout(() => this.remove(), 200) } connectedCallback() { - this.shadowRoot.innerHTML = html` + + this.innerHTML = html`
- - 
-___________________________________________________________
-| Disclaimer: All content of the following work is        |
-| fictional, and should not be taken as moral, religious, |
-| or political advice. Nor does it represent the views    |
-| or the beliefs of any author in any way.                |
-|                                                         |
-|                                                         |
-| Continue ->                                             |
-| See Disclaimer ->                                       |
-|                                                         |
-‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾
-                    

-                
+                

+                    

+                        
+                        
Disclaimer:

+                    

+                    

+                        All content of the following work is fictional, and should not be taken as moral, religious,
+                        or political advice. Nor does it represent the views or the beliefs of any author in any way.
+                    

+                    

+                    
+                    See Disclaimer ->
+                

             

         `
 
         const style = document.createElement("style")
         style.innerHTML = css`
-            pre {
-                margin: 0;
-            }
-
             #contentWarning {
                 position: fixed;
                 padding: 0;
@@ -41,24 +40,36 @@ ___________________________________________________________
                 height: 100%;
                 background: #ffffff33;
                 backdrop-filter: blur(15px);
-                content: center;
-                visibility: visible;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                transition: .2s opacity;
             }
 
             .warning-centre {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                font-size: x-large;
-                font-family: monospace;
+                display: flex;
+                width: min(40%, 512px);
+                row-gap: 12px;
+                padding: 16px;
+                border: 1px solid gray;
+                border-radius: 8px;
+                flex-direction: column;
+                background: var(--background-transparent);
             }
-            
-            .warning-centre a {
-                font-size: x-large;
-                font-family: monospace !important;
+
+            .warning-centre button {
+                border: none;
             }
-            
+
+            .warning-centre hr {
+                border: 1px solid lightgray;
+            }
+
+            .warning-centre a, p {
+                display: block;
+                margin: 0;
+            }
+
             @media(prefers-color-scheme: dark) {
                 #contentWarning {
                     background: #1e1e1e33;
@@ -67,28 +78,19 @@ ___________________________________________________________
 
             @media screen and (orientation:portrait) {
                 .warning-centre {
-                    font-size: 2.8vw !important;
+                    width: calc(100% - 32px);
                 }
             
                 .warning-centre a {
-                    font-size: 1em;
+                    font-size: 1.2em;
                 }            
             }
         `
-        this.shadowRoot.append(style)
-        defineAndInject(this, this.shadowRoot)
-
-        let cwInsert = ""
-        let addition = this.getAttribute("addition")
-        if (!addition) return
-        let chunks = addition.match(/.{1,55}/g)
-        for (let chunk of chunks) {
-            chunk = chunk.padEnd(55) //if not taking up a whole line (is 55 chars long), pad spaces to line up
-            chunk = "| ".concat(chunk) //add pipe start
-            chunk = chunk.concat(" |") //add pipe end
-            cwInsert = cwInsert.concat(chunk, "\n") //Add \n followed by chunk to end of cwinsert
-        }
-        this.addition.textContent = cwInsert
+        this.appendChild(style)
+        const addition = this.querySelector("#addition")
+        addition.insertAdjacentElement("afterend", document.createElement("hr"))
+        addition.textContent = this.getAttribute("addition")
+        addition.insertAdjacentElement("beforebegin", document.createElement("hr"))
     }
 }
 
diff --git a/Other/poem-load-cover-template.js b/Other/poem-load-cover-template.js
index 4b38338..38b9825 100644
--- a/Other/poem-load-cover-template.js
+++ b/Other/poem-load-cover-template.js
@@ -71,6 +71,11 @@ class PoemLoadCover extends HTMLElement {
                 font-size: 8px;
                 opacity: 0.6;
             }
+            @media screen and (orientation:portrait) {
+                .load-content {
+                    width: calc(100% - 32px);
+                }    
+            }
         `
         this.appendChild(style)
     }
diff --git a/Resources/AbbstraktDog.svg b/Resources/AbbstraktDog.svg
index 6aebebc..26b54d6 100644
--- a/Resources/AbbstraktDog.svg
+++ b/Resources/AbbstraktDog.svg
@@ -1,10 +1 @@
-
-    
-
-
-    
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/Volume-2/Idiots/five-a-side-footie.json b/Volume-2/Idiots/five-a-side-footie.json
index 89a8398..3a80522 100644
--- a/Volume-2/Idiots/five-a-side-footie.json
+++ b/Volume-2/Idiots/five-a-side-footie.json
@@ -1 +1 @@
-{"summary":"","tags":"","cWarning":true,"cWarningAdditions":"","poemName":"Five-a-side Footie","poemAuthor":"Zekiah","poemContent":{"type":"fragment","styles":[],"children":[{"type":"text","content":"Oi Oi, Enga-land, It's coooming home, "},{"type":"newline","count":1},{"type":"text","content":"GCSE PE Grade 1! "},{"type":"newline","count":1},{"type":"text","content":"Debating with the boooys, "},{"type":"newline","count":1},{"type":"text","content":"If Ronaldo is the worst, if "},{"type":"newline","count":1},{"type":"text","content":"Messi is the best, gonna have a hit at "},{"type":"newline","count":1},{"type":"text","content":"the chippie after the game, "},{"type":"newline","count":1},{"type":"text","content":"but first \"What are you doing REF!\" "},{"type":"newline","count":2},{"type":"text","content":"wanna hear a joke? Arsenal's defense! "},{"type":"newline","count":1},{"type":"text","content":"Spent all my money on footie games, "},{"type":"newline","count":1},{"type":"text","content":"I'm running out of rent. "},{"type":"newline","count":1},{"type":"text","content":"But FOOTIE 24/7, is all have with "},{"type":"newline","count":1},{"type":"text","content":"me friends "},{"type":"newline","count":1},{"type":"text","content":"And every time they miss a shot, got "},{"type":"newline","count":1},{"type":"text","content":"me hands up on my head. "},{"type":"newline","count":2},{"type":"text","content":"Footie is my whole life, "},{"type":"newline","count":1},{"type":"text","content":"watching on TV, "},{"type":"newline","count":1},{"type":"text","content":"almost homeless, crappy apartment, "},{"type":"newline","count":1},{"type":"text","content":"screaming at the screen, "},{"type":"newline","count":1},{"type":"text","content":"lost my wife, alcahol addict, "},{"type":"newline","count":1},{"type":"text","content":"to be a baller was my dream, "},{"type":"newline","count":1},{"type":"text","content":"Just another brute in the crowd "},{"type":"newline","count":1},{"type":"text","content":"My identity is my team. "},{"type":"newline","count":2},{"type":"text","content":"So Oi Oi Liiions, "},{"type":"newline","count":1},{"type":"text","content":"I may just look insane, "},{"type":"newline","count":1},{"type":"text","content":"but you should understand, Idiot, why I rant "},{"type":"newline","count":1},{"type":"text","content":"after the game. "},{"type":"newline","count":2},{"type":"text","content":"My white, chicken tikka "},{"type":"newline","count":1},{"type":"text","content":"eating mates and I shout racial slurs right at that ref. "},{"type":"newline","count":2},{"type":"text","content":"Faking physical injuries, that blind bollocks "},{"type":"newline","count":1},{"type":"text","content":"bastard. "},{"type":"newline","count":2},{"type":"text","content":"And booting him to death. "},{"type":"newline","count":3}]},"pageStyle":"centre","pageBackground":""}
\ No newline at end of file
+{"summary":"","tags":"","cWarning":true,"cWarningAdditions":"","poemName":"Five-a-side Footie","poemAuthor":"Zekiah","poemContent":{"type":"fragment","styles":[],"children":[{"type":"text","content":"Oi Oi, Enga-land, It's coooming home, "},{"type":"newline","count":1},{"type":"text","content":"GCSE PE Grade 1! "},{"type":"newline","count":1},{"type":"text","content":"Debating with the boooys, "},{"type":"newline","count":1},{"type":"text","content":"If Ronaldo is the worst, if "},{"type":"newline","count":1},{"type":"text","content":"Messi is the best, gonna have a hit at "},{"type":"newline","count":1},{"type":"text","content":"the chippie after the game, "},{"type":"newline","count":1},{"type":"text","content":"but first \"What are you doing REF!\" "},{"type":"newline","count":2},{"type":"text","content":"wanna hear a joke? Arsenal's defense! "},{"type":"newline","count":1},{"type":"text","content":"Spent all my money on footie games, "},{"type":"newline","count":1},{"type":"text","content":"I'm running out of rent. "},{"type":"newline","count":1},{"type":"text","content":"But FOOTIE 24/7, is all have with "},{"type":"newline","count":1},{"type":"text","content":"me friends "},{"type":"newline","count":1},{"type":"text","content":"And every time they miss a shot, got "},{"type":"newline","count":1},{"type":"text","content":"me hands up on my head. "},{"type":"newline","count":2},{"type":"text","content":"Footie is my whole life, "},{"type":"newline","count":1},{"type":"text","content":"watching on TV, "},{"type":"newline","count":1},{"type":"text","content":"almost homeless, crappy apartment, "},{"type":"newline","count":1},{"type":"text","content":"screaming at the screen, "},{"type":"newline","count":1},{"type":"text","content":"lost my wife, alcahol addict, "},{"type":"newline","count":1},{"type":"text","content":"to be a baller was my dream, "},{"type":"newline","count":1},{"type":"text","content":"Just another brute in the crowd "},{"type":"newline","count":1},{"type":"text","content":"My identity is my team. "},{"type":"newline","count":2},{"type":"text","content":"So Oi Oi Liiions, "},{"type":"newline","count":1},{"type":"text","content":"I may just look insane, "},{"type":"newline","count":1},{"type":"text","content":"but you should understand, Idiot, why I rant "},{"type":"newline","count":1},{"type":"text","content":"after the game. "},{"type":"newline","count":2},{"type":"text","content":"My white, chicken tikka "},{"type":"newline","count":1},{"type":"text","content":"eating mates and I shout racial slurs right at that ref. "},{"type":"newline","count":2},{"type":"text","content":"Faking physical injuries, that blind bollocks "},{"type":"newline","count":1},{"type":"text","content":"bastard. "},{"type":"newline","count":2},{"type":"fragment","styles":[{"type":"italic"}],"children":[{"type":"text","content":"And booting him to death."}]},{"type":"newline","count":3}]},"pageStyle":"centre","pageBackground":""}
\ No newline at end of file
diff --git a/Volume-2/Idiots/reality.json b/Volume-2/Idiots/reality.json
index ddd0dbd..d2c2e56 100644
--- a/Volume-2/Idiots/reality.json
+++ b/Volume-2/Idiots/reality.json
@@ -1 +1 @@
-{"summary":"","tags":"","cWarning":false,"cWarningAdditions":"","poemName":"Reality","poemAuthor":"Zekiah","poemContent":{"type":"fragment","styles":[],"children":[{"type":"text","content":"In the dark, of the lair, "},{"type":"newline","count":1},{"type":"text","content":"dark and dank, dorito crisps, "},{"type":"newline","count":1},{"type":"text","content":"piss stained carpets and hollowed corpses of "},{"type":"newline","count":1},{"type":"text","content":"Something much, or something else. "},{"type":"newline","count":1},{"type":"text","content":"Suffocated by the smell, within mid flight, "},{"type":"newline","count":1},{"type":"text","content":"and illuminated by a rainbow of lights, "},{"type":"newline","count":1},{"type":"text","content":"\"bruh that's ga-\" "},{"type":"newline","count":2},{"type":"text","content":"Then Blasted through by dual AKs, "},{"type":"newline","count":1},{"type":"text","content":"Scopes, aimed in right at the beast, "},{"type":"newline","count":1},{"type":"text","content":"A horrific image of flesh wrapp'd bone, "},{"type":"newline","count":1},{"type":"text","content":"On the doorstep of death's door, "},{"type":"newline","count":1},{"type":"text","content":"covered in sweat and coated in grease. "},{"type":"newline","count":2},{"type":"text","content":"And as each barrel opened wide, "},{"type":"newline","count":1},{"type":"text","content":"Metal becomes light, as it reaches "},{"type":"newline","count":1},{"type":"text","content":" speed. And punches through layer "},{"type":"newline","count":1},{"type":"text","content":"after layer of skin and bone, plastering "},{"type":"newline","count":1},{"type":"text","content":"the computer screen. "},{"type":"newline","count":2},{"type":"text","content":"This all happened, "},{"type":"newline","count":1},{"type":"text","content":"except it didn't; "},{"type":"newline","count":1},{"type":"text","content":"\"Game over\" engraved on the LCD, "},{"type":"newline","count":1},{"type":"text","content":"\"Gamer simulator 2021 has good graphics\", "},{"type":"newline","count":1},{"type":"text","content":"a human read. "},{"type":"newline","count":1},{"type":"text","content":"On his macbook, in the park "},{"type":"newline","count":1},{"type":"text","content":"\"Yet here in nature I can't see this screen\" "},{"type":"newline","count":1},{"type":"text","content":"Why are gamers potrayal so dark? "},{"type":"newline","count":3}]},"pageStyle":"centre","pageBackground":""}
\ No newline at end of file
+{"summary":"","tags":"","cWarning":false,"cWarningAdditions":"","poemName":"Reality","poemAuthor":"Zekiah","poemContent":{"type":"fragment","styles":[],"children":[{"type":"text","content":"In the dark, of the lair, "},{"type":"newline","count":1},{"type":"text","content":"dark and dank, dorito crisps, "},{"type":"newline","count":1},{"type":"text","content":"piss stained carpets and hollowed corpses of "},{"type":"newline","count":1},{"type":"text","content":"Something much, or something else. "},{"type":"newline","count":1},{"type":"text","content":"Suffocated by the smell, within mid flight, "},{"type":"newline","count":1},{"type":"text","content":"and illuminated by a rainbow of lights, "},{"type":"newline","count":1},{"type":"text","content":"\"bruh that's ga-\" "},{"type":"newline","count":2},{"type":"text","content":"Then Blasted through by dual AKs, "},{"type":"newline","count":1},{"type":"text","content":"Scopes, aimed in right at the beast, "},{"type":"newline","count":1},{"type":"text","content":"A horrific image of flesh wrapp'd bone, "},{"type":"newline","count":1},{"type":"text","content":"On the doorstep of death's door, "},{"type":"newline","count":1},{"type":"text","content":"covered in sweat and coated in grease. "},{"type":"newline","count":2},{"type":"text","content":"And as each barrel opened wide, "},{"type":"newline","count":1},{"type":"text","content":"Metal becomes light, as it reaches "},{"type":"newline","count":1},{"type":"text","content":" speed. And punches through layer "},{"type":"newline","count":1},{"type":"text","content":"after layer of skin and bone, plastering "},{"type":"newline","count":1},{"type":"text","content":"the computer screen. "},{"type":"newline","count":2},{"type":"text","content":"This all happened, "},{"type":"newline","count":1},{"type":"text","content":"except it didn't; "},{"type":"newline","count":1},{"type":"text","content":"\"Game over\" engraved on the LCD, "},{"type":"newline","count":1},{"type":"fragment","styles":[{"type":"italic"}],"children":[{"type":"text","content":"\"Gamer simulator 2021 has good graphics\","}]},{"type":"newline","count":1},{"type":"text","content":"a human read. "},{"type":"newline","count":1},{"type":"text","content":"On his macbook, in the park "},{"type":"newline","count":1},{"type":"fragment","styles":[{"type":"italic"}],"children":[{"type":"text","content":"\"Yet here in nature I can't see this screen\""}]},{"type":"newline","count":1},{"type":"text","content":"Why are gamers' potrayal so dark? "},{"type":"newline","count":3}]},"pageStyle":"centre","pageBackground":""}
\ No newline at end of file
diff --git a/poem.html b/poem.html
index bf58de0..a9d94ac 100644
--- a/poem.html
+++ b/poem.html
@@ -48,7 +48,6 @@ 
Poem Editor: