true beginnings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bxllxdxnnx",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "private": true,
   "homepage": "https://trashfemme.github.io/bxllxdxnnx",
   "dependencies": {

src/App.css

@@ -1,3 +1,9 @@
 .App {
   text-align: center;
+  height: 100%;
 }
+
+.App header {
+  display: none;
+}
+

src/Home/index.css

@@ -1,3 +1,13 @@
 .Home {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
 
+.Home > *  {
+  border: 1px dashed;
+  width: 80vw;
 }
+

src/Home/index.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
+
+import Rose from './sections/Rose';
 import './index.css';
 
 function Home() {
   return (
     <div className="Home">
-      Home
+
+      <Rose/>
+
     </div>
   );
 }

src/Home/sections/Rose/index.css

@@ -0,0 +1,5 @@
+.Rose {
+  white-space: pre;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+  max-width: 600px;
+}

src/Home/sections/Rose/index.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import './index.css';
+
+function Rose() {
+
+  const asciiRose = `
+        .     .
+    ...  :\`\`..':
+     : \`\`\`\`.'   :''::'
+   ..:..  :     .'' :
+\`\`.    \`:    .'     :
+    :    :   :        :
+     :   :   :         :
+     :    :   :        :
+      :    :   :..''''\`\`::.
+       : ...:..'     .''
+       .'   .'  .::::'
+      :..'''\`\`:::::::
+      '         \`::::
+                  \`::.
+                   \`::
+                    :::.
+         ..:\`\`\`.:'\`. ::'\`.
+       ..'      \`:.: ::
+      .:        .:\`\`:::
+      .:    ..''     :::
+       : .''         .::
+        :          .'\`::
+                       ::
+                       ::
+                        :
+                        :
+                        :
+                        :
+                        .
+  `
+
+  return (
+    <div className="Rose" dangerouslySetInnerHTML={{ __html: asciiRose }}>
+    </div>
+  );
+}
+
+export default Rose;

src/index.css

@@ -5,9 +5,12 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: rgb(21, 22, 29);
+  color: rgba(215,46,162,0.94);
 }
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+html,
+body,
+#root {
+  height: 100%;
 }