text change, update footer & header css

src/App.vue

@@ -5,7 +5,9 @@ import PageHeader from './components/PageHeader.vue'
 import { mainStore } from './stores/mainStore'
 const toggleWordAsBlackout = (id: string) => {
   const cachedWords = mainStore.wordsArray
-  cachedWords.find((word) => word.id === id)!.disabled = !cachedWords.find((word) => word.id === id)!.disabled
+  cachedWords.find((word) => word.id === id)!.disabled = !cachedWords.find(
+    (word) => word.id === id
+  )!.disabled
   mainStore.setWordsArray(cachedWords)
 }
 </script>
@@ -30,6 +32,16 @@ const toggleWordAsBlackout = (id: string) => {
         public domain.
       </small>
     </p>
+    <p>
+      Default text taken from
+      <a
+        href="https://en.wikipedia.org/wiki/Erasure_poetry"
+        target="_blank"
+        referrerpolicy="no-referrer"
+      >
+        Wikipedia</a
+      >
+    </p>
   </footer>
 </template>
 

src/assets/main.css

@@ -15,12 +15,21 @@
 header,
 main,
 footer {
-  position: relative;
   padding: 1rem 0;
   color: var(--color-text-contrast);
   width: 100%;
 }
-
+header,footer{
+  position: fixed;
+  left: 10%;
+  background-color: var(--color-background-soft);
+}
+header {
+  top: 0;
+}
+footer {
+  bottom: 0;
+}
 body {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   margin: 0;
@@ -71,7 +80,7 @@ section h2 {
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
-  max-height: 25vh;
+  max-height: 33vh;
   overflow-y: auto;
 }
 

src/stores/mainStore.ts

@@ -6,7 +6,9 @@ export const defaultText = `Erasure poetry, or blackout poetry, is a form of fou
 
 Writers and visual artists have adopted this form both to achieve a range of cognitive or symbolic effects and to focus on the social or political meanings of erasure. Erasure is a way to give an existing piece of writing a new set of meanings, questions, or suggestions. It lessens the trace of authorship but also draws attention to the original text. Doris Cross appears to have been among the earliest to utilize this technique, beginning in 1965 with her "Dictionary Columns" book art.
 
-The poetic form gained new political purpose online in 2017. In response to the Trump administration's travel ban, poets and writers began creating erasure poems from the executive order itself. The erasure form allowed writers to transform the order into a statement of resistance. The tradition of concrete poetry and the works of visual artists such as d.a. levy have some relationship to this artform.
+The poetic form gained new political purpose online in 2017, in response to the Trump administration. 
+
+The tradition of concrete poetry and the works of visual artists such as d.a. levy have some relationship to this artform.
 
 - Wikipedia on Erasure Poetry
 `