Migrate actual website to static

Arihant25 · Dec 30, 2023 · 6a4b8ad · 6a4b8ad
1 parent 6b99c73
commit 6a4b8ad
Show file tree

Hide file tree

Showing 15 changed files with 459 additions and 110 deletions.
diff --git a/2/index.html b/2/index.html
diff --git a/app.py b/app.py
@@ -26,6 +26,12 @@ def page(path):
     return render_template("page.html", page=page)
 
 
+@app.route("/about.html")
+def about():
+    return render_template("about.html")
+
+
 if __name__ == "__main__":
     freezer.freeze()
+    print(page)
     app.run(port=8000)
diff --git a/hello-world/index.html b/hello-world/index.html
diff --git a/index.html b/index.html
diff --git a/page_template.md b/page_template.md
@@ -0,0 +1,8 @@
+id:
+title: 
+subtitle: 
+date: 
+body: 
+author: 
+img_url: 
+song_url:
diff --git a/pages/1.md b/pages/1.md
@@ -0,0 +1,8 @@
+id: 1
+title: Why does Saturn have rings? 
+subtitle: Just because.
+date: December 4, 2023
+author: Arihant
+img_url: https://images.unsplash.com/photo-1701542182020-6355e2c059a1?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+song_url: https://open.spotify.com/embed/track/3ntrdR24dLkKrzSGRv1FlH?utm_source=generator
+body: Have you ever wondered why Saturn has rings? Well, you're not alone. Scientists have been puzzled by this question for centuries, and they still don't have a definitive answer. But they have some pretty good guesses, and some of them are hilarious. 
diff --git a/pages/2.md b/pages/2.md
@@ -1,4 +1,8 @@
-title: Hey!
-date: 2012-03-04
-
-THIS WORKED?!
+id: 2
+title: On Indie Music
+subtitle: Indie music is nice!
+date: December 5, 2023
+author: ira
+img_url: https://images.unsplash.com/photo-1701456449854-c4933aade45b?q=80&w=3087&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
+song_url: https://open.spotify.com/embed/track/5UVBumEwdUnzvqxrXOYLFA?utm_source=generator
+body: Indie music is a genre of music that is independent from the mainstream music industry. It is often creative, original and diverse, reflecting the personal vision of the artists. Indie music can be a source of inspiration, enjoyment and discovery for listeners who appreciate its uniqueness and authenticity.
diff --git a/pages/hello-world.md b/pages/hello-world.md
diff --git a/static/styles/about.css b/static/styles/about.css
@@ -0,0 +1,103 @@
+body {
+    background-color: #000000;
+    color: #fff;
+    font-family: 'CMU Serif';
+}
+
+.navbar {
+    display: flex;
+    width: 100%;
+    background-color: #000000;
+    align-items: center;
+    height: 20px;
+    padding-top: 10px;
+}
+
+
+.nav-center {
+    width: 100%;
+    text-align: center;
+    margin-left: 26%;
+    font-size: 30px;
+}
+
+.nav-center a {
+    color: #fff;
+}
+
+.navbar a:hover {
+    color: orange;
+}
+
+.nav-right {
+    text-align: right;
+    margin-right: 3.5%;
+    width: 50%;
+    padding-top: 1%;
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+.about {
+    margin-top: 45px;
+    margin-right: 20%;
+    margin-left: 20%;
+    font-size: 1.2em;
+    text-align: justify;
+}
+
+img {
+    width: 40%;
+    height: 40%;
+    border-radius: 50em;
+}
+
+.metadata-container {
+    display: flex;
+}
+
+.metadata-container p#ira {
+    margin-right: 40px;
+}
+
+.metadata-container p#arihant {
+    margin-left: 40px;
+}
+
+/* Small devices (portrait tablets and large phones, 800px and below) */
+@media only screen and (max-width: 800px) {
+    .about {
+        margin-top: 45px;
+        margin-right: 10%;
+        margin-left: 10%;
+        font-size: 1.2em;
+        text-align: justify;
+    }
+
+    img {
+        width: 50%;
+        height: 50%;
+        border-radius: 50em;
+    }
+
+    .metadata-container {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .metadata-container p#ira {
+        margin-right: 0;
+        margin-bottom: 20px;
+        order: 1;
+    }
+
+    .metadata-container p#arihant {
+        margin-left: 0;
+        margin-top: 20px;
+        order: 2;
+    }
+
+}
diff --git a/static/styles/index.css b/static/styles/index.css
@@ -0,0 +1,79 @@
+body {
+    background-color: #000000;
+    color: #fff;
+    font-family: 'CMU Serif';
+}
+
+.navbar {
+    display: flex;
+    width: 100%;
+    background-color: #000000;
+    align-items: center;
+    height: 20px;
+    padding-top: 10px;
+}
+
+.nav-center {
+    width: 100%;
+    text-align: center;
+    margin-left: 26%;
+    font-size: 30px;
+}
+
+.nav-center a {
+    color: #fff;
+}
+
+.navbar a:hover {
+    color: orange;
+}
+
+.nav-right {
+    text-align: right;
+    margin-right: 3.5%;
+    width: 50%;
+    padding-top: 1%;
+}
+
+.articles {
+    margin-top: 45px;
+    margin-right: 7%;
+    margin-left: 7%;
+}
+
+.article-preview {
+    padding: 0 1.5%;
+    margin-bottom: 2%;
+    border: 1px solid #fff;
+    border-radius: 1em;
+    transition: transform 0.3s ease-in-out;
+}
+
+.article-preview:hover {
+    /* Enlarge on hover */
+    transform: scale(1.02);
+}
+
+a {
+    color: #fff;
+    text-decoration: none;
+}
+
+h2 {
+    font-size: 1.6em;
+    margin-bottom: 0.2em;
+    color: orange;
+}
+
+.article-subtitle {
+    font-size: 1.1em;
+    margin-bottom: 0.5em;
+
+}
+
+.metadata-container {
+    display: flex;
+    justify-content: space-between;
+    /* Align items to the baseline for proper vertical alignment */
+    align-items: baseline;
+}