Initial Release

pancakz-v3-beam/application/include/about/main.css

@@ -0,0 +1,89 @@
+::-webkit-scrollbar {
+    width: 0;
+}
+
+html,
+body {
+    margin: 0;
+    background: black;
+    padding: 0;
+}
+
+p,
+a {
+    display: block;
+    margin: 0;
+    padding: 0;
+    color: white;
+    font-size: 1em;
+    line-height: 1.5em;
+    font-family: 'Poppins', sans-serif;
+}
+
+a {
+    display: inline-block;
+}
+
+div.background {
+    position: fixed;
+    bottom: 32px;
+    background-image: url('/about/banner_large.webp');
+    background-size: cover;
+    image-rendering: pixelated;
+    width: 900px;
+    height: 600px;
+}
+
+div.foreground {
+    position: relative;
+    backdrop-filter: blur(2px);
+    margin: auto;
+    margin-top: 32px;
+    width: 480px;
+    max-width: 100%;
+}
+
+div.foreground div.header {
+    display: flex;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin-bottom: 16px;
+    border-bottom: 1px solid #fff;
+    padding: 8px;
+    width: 100%;
+}
+
+div.foreground div.article {
+    width: 100%;
+}
+
+div.foreground div.article p.header {
+    margin-bottom: 8px;
+    width: fit-content;
+    font-weight: 600;
+    font-size: large;
+}
+
+div.foreground div.article p.content {
+    margin-bottom: 16px;
+    text-align: justify;
+}
+
+/* Mobile */
+@media only screen and (max-width: 600px) {
+    div.foreground {
+        transform: none;
+        box-sizing: border-box;
+        margin-top: 0;
+        inset: 0;
+        padding: 16px;
+        width: 100%;
+        max-width: unset;
+        height: fit-content;
+    }
+
+    img.background {
+        bottom: 10%;
+        left: 0;
+    }
+}