aboutsummaryrefslogtreecommitdiff
path: root/luax/public
diff options
context:
space:
mode:
Diffstat (limited to 'luax/public')
-rw-r--r--luax/public/app.css161
l---------luax/public/assets1
-rw-r--r--luax/public/carousel.css69
-rw-r--r--luax/public/contact.css22
-rw-r--r--luax/public/index.css108
-rw-r--r--luax/public/index.js4
-rw-r--r--luax/public/navbar.css278
-rw-r--r--luax/public/project.css126
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;
+ }
+}
+
+
generated by cgit v1.3.1 (git 2.54.0) at 2026-11-11 19:47:25 +0000