yut

doordesk/src/App.css

@@ -2,22 +2,20 @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');
 
 :root{
-  --useless-gaps: 1em;
+    --useless-gaps: 1em;
 }
-
 html, body {
-  background-color: black;
+    background-color: black;
-  background-image: url("bg.png");
+    background-image: url("bg.png");
-  background-attachment: fixed;
+    background-attachment: fixed;
-  background-position: center;
+    background-position: center;
-  background-size: cover;
+    background-size: cover;
-  background-repeat: no-repeat;
+    background-repeat: no-repeat;
-  font-family: 'Roboto Mono', monospace;
+    font-family: 'Roboto Mono', monospace;
-  font-size: 14;
+    font-size: 14;
-  line-height: 1.7em;
+    line-height: 1.7em;
-  color: var(--foreground);
+    color: var(--foreground);
 }
-
 input, textarea {
     background-color: var(--background);
     color: var(--foreground);
@@ -43,84 +41,68 @@ input[type=submit]:hover {
     background-color: var(--color10);
 }
 img{
-  max-width: 100%;
+    max-width: 100%;
-  height: auto;
+    height: auto;
-  }
+}
-  
 a {
-  color: var(--color4);
+    color: var(--color4);
 }
-
 a:hover {
-  color: var(--color5);
+    color: var(--color5);
 }
-
 h1 {
-  color: var(--color10);
+    color: var(--color10);
 }
-
 h2 {
-  color: var(--color6);
+    color: var(--color6);
 }
-
 h3 {
-  color: var(--color3);
+    color: var(--color3);
-  margin-top: 2em;
+    margin-top: 2em;
 }
-
 p {
-  margin-top: 2em;
+    margin-top: 2em;
 }
-
-
 .content {
-  margin: 3em;
+    margin: 3em;
 }
-
 .content-container, .header {
-  margin: auto;
+    margin: auto;
-  margin-top: var(--useless-gaps);
+    margin-top: var(--useless-gaps);
-  background: rgb(0,0,0,.8);
+    background: rgb(0,0,0,.8);
-  border: solid 1px;
+    border: solid 1px;
-  border-color: var(--color4);
+    border-color: var(--color4);
-  max-width: 80em;
+    max-width: 80em;
-  box-shadow: 5px 12px 20px #000;
+    box-shadow: 5px 12px 20px #000;
 }
-
 .date{
-  color: var(--color4)
+    color: var(--color4)
 }
-
 .cards {
-  display: -webkit-flex;
+    display: -webkit-flex;
-  display: -ms-flex;
+    display: -ms-flex;
-  display: flex;
+    display: flex;
-  -webkit-flex-wrap: wrap;
+    -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+    flex-wrap: wrap;
-  max-width: 100%;
+    max-width: 100%;
-  overflow: hidden;
+    overflow: hidden;
-  margin: auto;
+    margin: auto;
-  max-width: 80%;
+    max-width: 80%;
 }
-
 .card {
-  border-style: solid;
+    border-style: solid;
-  border-width: 1px;
+    border-width: 1px;
-  width: 20rem;
+    width: 20rem;
-  padding: 0 2em 2em 2em;
+    padding: 0 2em 2em 2em;
-  margin: 2em;
+    margin: 2em;
 }
-
 .align-right {
-  text-align: right;
+    text-align: right;
 }
-
 .align-center {
-  text-align: center;
+    text-align: center;
 }
-
 .title {
-  margin-top: -1em;
+    margin-top: -1em;
 }
-

doordesk/src/App.tsx

@@ -4,11 +4,12 @@ import Header from './components/Header.js'
 import Blog from './components/Blog.js'
 
 const FAKE_IT_TIL_YOU_MAKE_IT: string[] = [
-    'Blog',
+    // component carousel
-    'Games',
+    'Home',     // table of top 5 from(when enough content) *; then interleave latest from *
-    'Cartman',
+    'Blog',     // blog posts
-    'Enigma',
+    'Projects', // project writeups
-    'Notebooks',
+    'Games',    // cards with thumbnail and summary
+    'Contact',  // email form?
 ]
 
 interface IAppProps {
@@ -32,7 +33,10 @@ class App extends Component<IAppProps, IAppState> {
         }
         return (
             <div className="App">
-                <Header pages={FAKE_IT_TIL_YOU_MAKE_IT} currentPage={this.state.currentPage} />
+                <Header
+                    pages={FAKE_IT_TIL_YOU_MAKE_IT}
+                    currentPage={this.state.currentPage}
+                />
                 {page}
             </div>
         )

doordesk/src/components/BlogPost.tsx

@@ -5,11 +5,9 @@ import rehypeRaw from 'rehype-raw'
 interface IBlogPostProps {
     postURL: string;
 }
-
 interface IBlogPostState {
     postHTML: string;
 }
-
 class BlogPost extends Component<IBlogPostProps, IBlogPostState> {
     constructor(props: IBlogPostProps) {
         super(props)
@@ -24,7 +22,6 @@ class BlogPost extends Component<IBlogPostProps, IBlogPostState> {
     componentDidMount() {
         this.getPost(this.props.postURL)
             .then((text) => this.setState({ postHTML: text }))
-
     }
     render() {
         return (

doordesk/src/components/Games.tsx

@@ -0,0 +1,20 @@
+import { Component } from 'react'
+
+interface IGamesProps {
+}
+
+interface IGamesState {
+}
+
+class Games extends Component<IGamesProps, IGamesState> {
+    constructor(props: IGamesProps) {
+        super(props)
+    }
+    render() {
+        return (
+        1
+        )
+    }
+}
+
+export default Games

readme.md

@@ -1 +1,3 @@
-sup
+# doordesk
+
+```./start_frontend_ghetto```