Updated and added pages

assets/styles/app.css

@@ -27,7 +27,6 @@ main {
     margin: var(--main-margin-top-bottom) var(--main-margin-left-right);
 }
 
-
 html {
     font-size: 16px;
     scrollbar-width: none;

assets/styles/color-pallet.css

@@ -4,6 +4,7 @@
     --astronaut: #214559;
     --comet2: #6e6970;
     --deep-space: #000001;
+    --martian: #136c51;
     --martian-moon: #c3e9d3;
     --meteorite: #4a3b6a;
     --moonlight: #f6eed5;

assets/styles/markdown.css

@@ -11,6 +11,16 @@
     font-size: 16px;
 }
 
+.markdown .float-left {
+    float: left;
+    margin-right: 1rem;
+}
+
+.markdown .float-right {
+    float: right;
+    margin-left: 1rem;
+}
+
 .markdown > h1 {
     color: var(--neptune1);
     font-size: 2.5em;
@@ -66,12 +76,36 @@
     }
 }
 
-.markdown > p > em,
-.markdown > p > strong {
+.markdown > span {
+    width: fit-content;
+    margin: auto;
+    position: relative;
+    & > p > a > img {
+        width: 32rem;
+        height: auto;
+    }
+    & > p > a::after {
+        position: absolute;
+        content: "Youtube →";
+        display: flex;
+        height: 2rem;
+        bottom: 0.26rem;
+        right: 0;
+        background: #ff0000;
+        color: white;
+        padding: 0.25rem;
+        font-weight: bolder;
+        font-style: oblique;
+        place-items: center;
+    }
+}
+
+.markdown em,
+.markdown strong {
     color: var(--neptune1);
 }
 
-.markdown > p > em:has(strong) {
+.markdown em > strong {
     color: var(--sun2);
 }
 

assets/styles/page.css

@@ -0,0 +1,62 @@
+main {
+    display: grid;
+    width: 50%;
+    justify-self: center;
+}
+
+section {
+    display: block;
+}
+
+img {
+    width: 20rem;
+    height: auto;
+}
+
+p {
+    margin: 0.5rem 0;
+}
+
+.float-right {
+    float: right;
+    margin-left: 2rem;
+}
+
+.float-left {
+    float: left;
+    margin-right: 2rem;
+}
+
+a,
+h2 {
+    color: var(--neptune1);
+}
+
+a:visited {
+    color: var(--neptune1);
+}
+
+h3 {
+    color: var(--neptune2);
+}
+
+h4 {
+    color: var(--martian);
+}
+
+strong {
+    color: var(--sun4);
+}
+
+@media screen and (max-width: 1024px) {
+    main {
+        width: 90%;
+        margin: 1rem;
+    }
+    section {
+        display: inherit;
+    }
+    img {
+        margin: auto !important;
+    }
+}