luax: initial

8 files changed, 769 insertions, 0 deletions

diff --git a/luax/public/app.css b/luax/public/app.css
new file mode 100644
index 0000000..b16cfea
--- /dev/null
+++ b/luax/public/app.css
@@ -0,0 +1,161 @@
+#app-main {
+  font-family: 'Hack', monospace;
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem 2rem 2rem 2rem;
+  text-align: center;
+}
+
+#app {
+  margin: 0 auto;
+  text-align: center;
+  align-content: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.preact:hover {
+  filter: drop-shadow(0 0 2em #673ab8aa);
+}
+
+/* fade in */
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+    transform: translateY(1em);
+  }
+  60% {
+    transform: translateY(-0.2em);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.main-info > * {
+  animation: fade-in 0.2s ease-in;
+}
+
+.main-info {
+  text-align: center;
+}
+
+@media (min-width: 1150px) {
+  .main-info {
+      margin-top: 72px;
+  }
+}
+
+.main-info-image {
+  width: 128px;
+  height: 128px;
+  border-radius: 100%;
+  margin: 6px 6px 6px 6px;
+}
+
+.main-info-title {
+  font-size: 42pt;
+}
+
+.main-info-subtitle {
+  font-size: 26pt;
+  font-style: italic;
+  color: #5c6370;
+}
+
+.quiet {
+  color: var(--color-gray);
+  font-style: italic;
+}
+
+.section {
+  font-size: 22pt;
+}
+
+.highlight {
+    color: #e5c07b;
+}
+
+.back-shadows {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: -1;
+  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-bg) 10%, var(--color-bg) 90%, rgba(0, 0, 0, 0) 100%);
+}
+
+@media (max-width: 480px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 80%;
+  }
+  .main-info-title {
+    font-size: 32pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 18pt;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 60%;
+  }
+  .main-info-title {
+    font-size: 42pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 26pt;
+  }
+}
+
+@media (min-width: 1150px) {
+  .back-shadows {
+      margin: auto;
+      max-width: 40%;
+  }
+  .main-info-title {
+    font-size: 42pt;
+  }
+
+  .main-info-subtitle {
+    font-size: 26pt;
+  }
+}
+
+
+@media (max-width: 480px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 16pt;
+      max-width: 90%;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 18pt;
+      max-width: 80%;
+  }
+}
+
+@media (min-width: 1150px) {
+  .about-paragraph {
+      margin: auto;
+      font-size: 18pt;
+      max-width: 60%;
+  }
+}
diff --git a/luax/public/assets b/luax/public/assets
new file mode 120000
index 0000000..d36378d
--- /dev/null
+++ b/luax/public/assets
@@ -0,0 +1 @@
+../../front/public/assets
\ No newline at end of file
diff --git a/luax/public/carousel.css b/luax/public/carousel.css
new file mode 100644
index 0000000..2465370
--- /dev/null
+++ b/luax/public/carousel.css
@@ -0,0 +1,69 @@
+.carousel-content {
+  align-self: center;
+  max-height: 100%;
+  white-space: nowrap;
+  -ms-overflow-style: none;  /* hide scrollbar in IE and Edge */
+  scrollbar-width: none;  /* hide scrollbar in Firefox */
+}
+
+.carousel-item {
+  width: 100%;
+  flex-shrink: 0;
+  height: auto;
+  float: left;
+  text-align: center;
+  transition: all 250ms linear;
+  white-space: nowrap;
+  vertical-align: middle;
+}
+
+.slick-slider {
+  margin: 24px;
+}
+
+.slick-slide {
+  margin: 0 auto;
+  border-radius: 10px;
+  text-align: center;
+  float: none !important;
+  display: inline-block !important;
+  vertical-align: middle;
+  min-height: 1px;
+}
+
+/* .carousel-item > * { */
+/*   border-radius: 10px; */
+/*   vertical-align: middle; */
+/*   width: 100%; */
+/*   height: auto; */
+/* } */
+
+.slick-dots li button::before {
+  color: var(--color-fg) !important;
+}
+
+@media (max-width: 1150px) {
+  .carousel-wrapper {
+    margin: 60px auto;
+    width: 330px;
+    height: 220px;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .carousel-wrapper {
+    margin: 60px auto;
+    width: 480px;
+    height: 360px;
+  }
+}
+
+@media (min-width: 1150px) {
+  .carousel-wrapper {
+    float: right;
+    width: 480px;
+    height: 360px;
+  }
+}
+
+
diff --git a/luax/public/contact.css b/luax/public/contact.css
new file mode 100644
index 0000000..93b63bd
--- /dev/null
+++ b/luax/public/contact.css
@@ -0,0 +1,22 @@
+.contact-container {
+  width: 100%;
+  max-width: 1120px;
+  margin: auto;
+  margin-top: 24pt;
+  margin-bottom: 48pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  font-size: 18pt;
+}
+
+.contact {
+  margin-top: 24pt;
+  margin-bottom: 8pt;
+  font-size: 20pt;
+  color: #98C379;
+}
+
+.highlight {
+  color:  #e5c07b;
+}
diff --git a/luax/public/index.css b/luax/public/index.css
new file mode 100644
index 0000000..9941a36
--- /dev/null
+++ b/luax/public/index.css
@@ -0,0 +1,108 @@
+:root {
+  font-weight: 400;
+
+  color-scheme: dark;
+  color: var(--color-fg);
+  background-color: var(--color-bg);
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+
+  /* variables */
+  --color-bg: #161f30;
+  --color-fg: #a3b3d9;
+  --color-search-blue: #083C5A;
+  --color-white: #a3b3d9;
+  --color-gray: #647089;
+  --color-dark-gray: #3e4451;
+  --color-context: #6b737f;
+  --color-light-gray: #c8ccd4;
+  --color-tree-gray: #1b1f27;
+  --color-blue: #6080dd;
+  --color-vivid-blue: #61afef;
+  --color-dark-blue: #223E55;
+  --color-folder-blue: #61afef;
+  --color-light-blue: #a3b3d9;
+  --color-green: #449871;
+  --color-cyan: #56b6c2;
+  --color-light-green: #98c379;
+  --color-red: #c13251;
+  --color-orange: #c18a56;
+  --color-light-red: #e06c75;
+  --color-yellow: #e5c07b;
+  --color-purple: #604bd8;
+  --color-magenta: #b071fc;
+}
+
+a:link {
+  font-weight: 500;
+  color: #4fc1ff;
+  text-decoration: inherit;
+}
+
+a:visited {
+  color: #4fc1ff;
+}
+
+a:hover {
+  color: #60d2ff;
+}
+
+a:active {
+  color: #66d8ff;
+}
+
+
+body {
+  margin: 0;
+  /* display: flex; */
+  /* place-items: center; */
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+span {
+  display: inline;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.hack {
+  font-family: Hack, monospace;
+  font-weight: 500;
+}
+
+.grow {
+    transition: all .2s ease-in-out;
+    transform: scale(1);
+}
+
+.grow:hover {
+  transition: all .2s ease-in-out;
+  transform: scale(1.1);
+}
diff --git a/luax/public/index.js b/luax/public/index.js
new file mode 100644
index 0000000..982672e
--- /dev/null
+++ b/luax/public/index.js
@@ -0,0 +1,4 @@
+$(document).ready(function() {
+    $('.carousel-wrapper').slick({});
+});
+
diff --git a/luax/public/navbar.css b/luax/public/navbar.css
new file mode 100644
index 0000000..9120052
--- /dev/null
+++ b/luax/public/navbar.css
@@ -0,0 +1,278 @@
+/* on big screens, navbar is fixed to the top of the screen */
+.navbar-container {
+  position: fixed;
+  /* gradient from top to bottom, full to transparent */
+  top: 0;
+  width: 100%;
+  z-index: 9999;
+  margin: auto;
+}
+
+/* on smaller ones, make it behave as a normal element laid out at the top of the page */
+@media (max-width: 1150px) {
+  .navbar-container {
+    position: static;
+  }
+}
+
+.navbar {
+  padding-top: 20pt;
+  padding-bottom: 12pt;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 75%, rgba(0, 0, 0, 0) 100%);
+}
+
+.navbar-icon {
+  font-family: Hack, monospace;
+  font-weight: 500;
+  color: #646cff;
+  font-size: 1.5em;
+  padding: 0.5em;
+  margin: 0.5em;
+}
+
+.navbar {
+  align-self: center;
+  display: block;
+  width: 100%;
+  text-align: center;
+}
+
+.navbar-item {
+  font-family: Hack, monospace;
+  font-size: 18pt;
+  text-align: center;
+  float: none;
+  clear: left;
+  display: inline-block;
+  margin: 0 0.25em;
+  transition: all 0.2s ease-in-out;
+}
+
+.navbar-item:hover {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  transition: all 0.2s ease-in-out;
+}
+
+.navbar-current {
+  font-weight: bold;
+}
+
+/* home */
+
+.navbar-item-home:link {
+  color: #98C379;
+  text-decoration: none;
+}
+
+.navbar-item-home:visited {
+  color: #98C379;
+  text-decoration: none;
+}
+
+.navbar-item-home:hover {
+  color: #afd088;
+  text-decoration: underline;
+}
+
+.navbar-item-home:active {
+  color: #afd088;
+  text-decoration: underline;
+}
+
+/* games */
+
+.navbar-item-games:link {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-games:visited {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-games:hover {
+  color: #ef7a80;
+  text-decoration: underline;
+}
+
+.navbar-item-games:active {
+  color: #ef7a90;
+  text-decoration: underline;
+}
+
+/* projects */ 
+
+.navbar-item-projects:link {
+  color: #d19a66;
+  text-decoration: none;
+}
+
+.navbar-item-projects:visited {
+  color: #d19a66;
+  text-decoration: none;
+}
+
+.navbar-item-projects:hover {
+  color: #dfa873;
+  text-decoration: underline;
+}
+
+.navbar-item-projects:active {
+  color: #dffa73;
+  text-decoration: underline;
+}
+
+/* github */ 
+
+.navbar-item-github:link {
+  color: #c678dd;
+  text-decoration: none;
+}
+
+.navbar-item-github:visited {
+  color: #c678dd;
+  text-decoration: none;
+}
+
+.navbar-item-github:hover {
+  color: #d286eb;
+  text-decoration: underline;
+}
+
+.navbar-item-github:active {
+  color: #d286eb;
+  text-decoration: underline;
+}
+
+/* itch */ 
+
+.navbar-item-itch:link {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-itch:visited {
+  color: #e06c75;
+  text-decoration: none;
+}
+
+.navbar-item-itch:hover {
+  color: #ef7a80;
+  text-decoration: underline;
+}
+
+.navbar-item-itch:active {
+  color: #ef7a90;
+  text-decoration: underline;
+}
+
+/* twitter */ 
+
+.navbar-item-twitter:link {
+  text-decoration: none;
+}
+
+.navbar-item-twitter:visited {
+  text-decoration: none;
+}
+
+.navbar-item-twitter:hover {
+  text-decoration: underline;
+}
+
+.navbar-item-twitter:active {
+  text-decoration: underline;
+}
+
+/* mastodon */
+
+.navbar-item-mastodon:link {
+  color: #6a4ae0;
+  text-decoration: none;
+}
+
+.navbar-item-mastodon:visited {
+  color: #6a4ae0;
+  text-decoration: none;
+}
+
+.navbar-item-mastodon:hover {
+  color: #7a55e8;
+  text-decoration: underline;
+}
+
+.navbar-item-mastodon:active {
+  color: #7a55e8;
+  text-decoration: underline;
+}
+
+/* cohost */
+
+.navbar-item-cohost:link {
+  color: #b63b73;
+  text-decoration: none;
+}
+
+.navbar-item-cohost:visited {
+  color: #b63b73;
+  text-decoration: none;
+}
+
+.navbar-item-cohost:hover {
+  color: #c54a7f;
+  text-decoration: underline;
+}
+
+.navbar-item-cohost:active {
+  color: #c54a7f;
+  text-decoration: underline;
+}
+
+/* tumblr */
+
+.navbar-item-tumblr:link {
+  color: #00b8ff;
+  text-decoration: none;
+}
+
+.navbar-item-tumblr:visited {
+  color: #00b8ff;
+  text-decoration: none;
+}
+
+.navbar-item-tumblr:hover {
+  color: #00c5ff;
+  text-decoration: underline;
+}
+
+.navbar-item-tumblr:active {
+  color: #00c5ff;
+  text-decoration: underline;
+}
+
+/* contact */ 
+
+.navbar-item-contact:link {
+  color: #e5c07b;
+  text-decoration: none;
+}
+
+.navbar-item-contact:visited {
+  color: #e5c07b;
+  text-decoration: none;
+}
+
+.navbar-item-contact:hover {
+  color: #f2ce89;
+  text-decoration: underline;
+}
+
+.navbar-item-contact:active {
+  color: #f2ce89;
+  text-decoration: underline;
+}
diff --git a/luax/public/project.css b/luax/public/project.css
new file mode 100644
index 0000000..ba14088
--- /dev/null
+++ b/luax/public/project.css
@@ -0,0 +1,126 @@
+.icon {
+  display: inline;
+  width: 32px;
+  height: 32px;
+  transition: 0.3s;
+  transform-origin: center;
+  filter: brightness(70%)
+}
+
+.icon:hover {
+  filter: brightness(80%);
+}
+
+.icon-row {
+  width: 320px;
+  height: 36px;
+}
+
+.icon-container {
+  height: 36px;
+  float: right;
+}
+
+.icon-text {
+  width: auto;
+  height: 36px;
+  line-height: 36px;
+  float: left;
+  vertical-align: middle;
+  margin-right: 8px;
+  color: #5c6370;
+}
+
+.project {
+  display: table;
+  align-self: center;
+  clear: both;
+  margin-bottom: 24pt;
+}
+
+.project-info {
+  font-size: 14pt;
+}
+
+.project-description {
+  font-size: 16pt;
+  text-align: justify;
+}
+
+.project-image-gallery {
+  margin-left: 24px;
+  margin-right: 10px;
+}
+
+@media (max-width: 1150px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 330px;
+    height: 220px;
+  }
+  
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (max-width: 1150px) and (min-width: 480px) {
+  .project-title {
+    text-align: center;
+    font-size: 24pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    margin: 60px auto;
+    width: 480px;
+    height: 360px;
+  }
+
+  .project-info {
+    float: none;
+    width: 90%;
+    margin: auto;
+  }
+
+  .project-description {
+    font-size: 14pt;
+  }
+}
+
+@media (min-width: 1150px) {
+  .project-title {
+    text-align: left;
+    font-size: 32pt;
+    margin-bottom: 8px;
+    text-decoration-line: underline;
+  }
+  .project-image-gallery {
+    float: right;
+    width: 480px;
+    height: 360px;
+  }
+  .project-info {
+    float: left;
+    max-width: 600px;
+  }
+
+  .project-description {
+     font-size: 16pt;
+  }
+}
+
+