nebulosus website upgrade

public/res/style/style.css

@@ -0,0 +1,341 @@
+:root {
+    --fonts: Inter, 'Open Sans', 'Helvetica', 'Roboto', sans-serif;
+    --theme-color: #33e;
+    --theme-color-highlight: #55f;
+    --theme-color-highlight-2: #99f;
+    --theme-color-lowlight: #11b;
+
+    font-family: var(--fonts);
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+}
+
+/* ---------- home page ---------- */
+
+.mono, .logo a {
+    color: #fff;
+    text-decoration: none;
+}
+
+header {
+    position: sticky;
+    top: 0%;
+    width: 100vw;
+    height: fit-content;
+    background-color: var(--theme-color, gray);
+    color: #fff;
+
+    box-shadow: 0 0 20px var(--theme-color-lowlight);
+}
+
+header div.logo {
+    padding: 1em;
+}
+
+header div.logo span {
+    font-weight: bolder;
+    font-size: 1.5em;
+
+    border: 1px;
+}
+
+main {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    width: 100vw;
+}
+
+main section {
+    margin: 0 2.5em;
+    width: calc(100vw - (2.5em * 2));
+
+    >h2 {
+        text-decoration: underline;
+        text-decoration-color: #aaa;
+    }
+}
+
+section#intro {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin: 0;
+    width: 100vw;
+    background-color: var(--theme-color);
+    color: #fff;
+
+    font-size: 2em;
+
+    border-bottom: 3px solid gray;
+}
+
+div section {
+    width: fit-content;
+}
+
+/* --- */
+
+/* for anchors.js */
+h2:hover {
+    cursor: pointer;
+
+    &::before {
+        position: absolute;
+        content: '#';
+        text-decoration: underline;
+        text-decoration-color: var(--theme-color);
+        transform: translateX(-150%);
+    }
+}
+
+/* --- */
+
+pre, 
+code, 
+.mono {
+    font-family: 'Mononoki', 'Droid Sans Mono', monospace;
+}
+
+/* --- */
+
+form {
+    display: flex;
+    flex-direction: column;
+
+    gap: .75em;
+    margin: .5em 0;
+
+    padding: 1rem .5rem;
+    border: 2px solid #e3e3e3;
+    border-radius: 5px;
+}
+
+
+form input,
+form textarea {
+    font-family: var(--fonts);
+
+    width: 100%;
+    padding: .3em .2em;
+
+    outline: none;
+
+    border: 1px solid #e3e3e3;
+    border-radius: 5px;
+
+
+    &:hover {
+        background-color: 1px solid var(--theme-color-highlight);
+    }
+
+    transition: border .2s ease-in-out;
+}
+
+form input[type=button],
+form input[type=submit],
+button {
+    outline: none;
+    padding: .3em .5em;
+    border: 1px solid #e3e3e3;
+    background-color: #eee;
+    border-radius: 5px;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--theme-color-highlight-2);
+    }
+
+    transition: background-color .2s ease-in-out;
+}
+
+div.columns {
+    display: flex;
+
+    @media (max-width: 600px) {
+        flex-direction: column;
+    }
+}
+
+div.rows {
+    display: flex;
+    flex-direction: column;
+}
+
+.faded {
+    opacity: .2;
+}
+
+/* ---------- navbar ---------- */
+
+.top-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--theme-color);
+    color: #fff;
+    padding: 0.5rem 2rem;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.top-bar .logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-right: 50px;
+}
+
+.top-bar nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.top-bar nav ul li {
+    margin-right: 20px;
+}
+
+.top-bar nav ul li a {
+    text-decoration: none;
+    color: #fff;
+    padding: 0 1rem;
+}
+
+.top-bar nav ul li a:hover {
+    text-decoration: underline;
+}
+
+/* Hamburger Menu Styles */
+.hamburger-menu {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+}
+
+.bar {
+    width: 25px;
+    height: 2px;
+    background-color: #fff;
+    margin: 5px;
+}
+
+@media screen and (max-width: 768px) {
+    .top-bar .logo {
+        margin-right: 0;
+    }
+
+    .top-bar nav ul {
+        display: none;
+    }
+
+    .top-bar nav ul.show {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: absolute;
+        background-color: #4545ea;
+        width: 100%;
+        top: 50px;
+        left: 0;
+    }
+
+    .top-bar nav ul li {
+        margin: 10px 0;
+    }
+
+    .hamburger-menu {
+        display: flex;
+    }
+}
+
+
+/* ---------- pricing plans ---------- */
+
+#pricing-plan-header {
+    text-align: center;
+}
+
+#pricing-plan-header p {
+    margin: 0 auto;
+    width: 65%;
+}
+
+.plans {
+    margin: 25px 0;
+}
+
+.plans hr {
+    width: 80%;
+}
+
+.plans h2 {
+    text-align: center;
+}
+
+.pricing-plans {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: stretch;
+    margin-top: 2rem;
+}
+
+.pricing-plan {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 1rem;
+    text-align: center;
+    flex: 1;
+    margin: 0.5rem;
+    max-width: 325px;
+    min-width: 250px; /* Add a minimum width */
+}
+
+.pricing-plan h2 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+}
+
+.pricing-plan .price {
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+.pricing-plan ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.pricing-plan ul li {
+    margin-bottom: 0.5rem;
+}
+
+.pricing-plan button {
+    padding: 0.5rem 1rem;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.pricing-plan button:hover {
+    background-color: #0056b3;
+}
+
+@media (max-width: 600px) {
+    .pricing-plan {
+        max-width: calc(50% - 1rem); /* Adjusting max-width for smaller screens */
+    }
+}