Big refactor, jam

1 files changed, 124 insertions, 0 deletions

diff --git a/assets/css/greencircle.css b/assets/css/greencircle.css
new file mode 100644
index 0000000..d884cb9
--- /dev/null
+++ b/assets/css/greencircle.css
@@ -0,0 +1,124 @@
+/* greencircle */
+#lcolonq-gc-body {
+    overflow-y: scroll;
+    height: auto;
+}
+
+#lcolonq-gc-hero {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#lcolonq-gc-spin {
+    height: 60vh;
+    width: 60vh;
+    margin-top: 20vh;
+    margin-bottom: 20vh;
+    display: grid;
+    place-items: center;
+}
+
+#lcolonq-gc-logo {
+    grid-area: 1 / 1;
+    margin-top: 2vh;
+    margin-left: 8vh;
+    height: 100%;
+    image-rendering: pixelated;
+}
+
+#lcolonq-gc-spin-image {
+    grid-area: 1 / 1;
+    animation: spin 40s linear infinite;
+    margin-left: 2vh;
+    height: 250%;
+    width: 250%;
+    user-select: none;
+    pointer-events: none;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@media (max-width : 320px) {
+    #lcolonq-gc-logo {
+        max-width: 60vw;
+        max-height: 60vw;
+    }
+    #lcolonq-gc-spin-image {
+        height: 160%;
+        width: 160%;
+    }
+}
+
+#lcolonq-gc-explainer {
+    text-align: justify;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    height: 100vh;
+    mask-image: linear-gradient(180deg, white 50%, transparent 95%);
+    overflow: hidden;
+}
+
+#lcolonq-gc-explainer h1 {
+    text-align: center;
+    font-size: 1.9rem;
+}
+
+#lcolonq-gc-relentless {
+    text-align: justify;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    text-align: center;
+}
+
+#lcolonq-gc-relentless h1 {
+    font-size: 1.9rem;
+}
+
+#lcolonq-gc-panels {
+    margin-left: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    display: grid;
+    justify-content: center;
+    grid-template-columns: repeat(auto-fit, 15rem);
+    grid-auto-rows: minmax(10rem, auto);
+    gap: 1rem;
+}
+
+@media (max-width : 320px) {
+    #lcolonq-gc-panels {
+        grid-template-columns: 1fr;
+    }
+}
+
+.lcolonq-gc-panel {
+    border: solid black;
+    color: inherit;
+    text-decoration: none;
+    padding: 1rem;
+    display: none;
+    cursor: pointer;
+}
+
+.lcolonq-gc-panel:hover {
+    background-color: #eeeeee;
+}
+
+.lcolonq-gc-visible {
+    display: block;
+}
+
+.lcolonq-gc-panel h2 {
+    text-align: center;
+}
+
+.lcolonq-gc-now {
+    font-weight: bold;
+    color: red;
+}