FEAT: Created first demo of project page for malung.

_layouts/default.html

@@ -25,6 +25,8 @@
 
     {{ content }}
 
+    <div class="flex dark back"></div>
+
     {% include footer.html %}
   </body>
 </html>

experience/malung.html

@@ -0,0 +1,46 @@
+---
+title: Example
+description: A description of Maxim Voldman Hutz's work on Example.
+layout: default
+---
+
+<link rel="stylesheet" href="/styles/experience.css">
+
+<section id="experience" class="dark back">
+  <section id="banner" class="yellow back">
+    <div>
+      <h1>Example</h1>
+      <i>Just A Test</i>
+    </div>
+    <button class="nav-link dark icon" data-i="close" aria-label="Exit" type="button" onclick="history.back(-1)"></button>
+  </section>
+  <div id="content">
+    <div id="description">
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        Lorem Ipsum has been the industry's standard dummy text ever since the
+        1500s, when an unknown printer took a galley of type and scrambled it to
+        make a type specimen book.
+      </p>
+      <hr class="lighter">
+      <ul>
+        <li>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+        </li>
+        <li>
+          Lorem Ipsum has been the industry's standard dummy text ever since the
+          1500s, when an unknown printer took a galley of type and scrambled it to
+          make a type specimen book.
+        </li>
+        <li>
+          It has survived not only five centuries, but also the leap into electronic
+          typesetting, remaining essentially unchanged.
+        </li>
+      </ul>
+      <a href="/404" id="experience-button" class="nav-link white button r-icon" data-i="arrow_right">View Example</a>
+    </div>
+    <div id="image" class="shadow">
+
+    </div>
+  </div>
+</section>

index.html

@@ -26,8 +26,6 @@ layout: default
   <div class="flex"></div>
 </section>
 
-<!-- ----------------------------------------------------------------------- -->
-
 <section id="projects" class="dark back">
   <h2>Worked on:</h2>
   <div id="project-list">

styles/default.css

@@ -11,6 +11,7 @@ body {
   width: min(100vw, 1024px);
   box-sizing: border-box;
   margin: auto;
+  padding: 0 20px;
 }
 
 /*----------------------------------------------------------------------------*/
@@ -43,6 +44,7 @@ button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
 }
 
 .icon::before {
@@ -72,15 +74,24 @@ h2 {
 
 i {
   font-size: 20px;
-  font-size: "Source Serif Pro";
+  font-family: "Source Serif Pro";
 }
 
-p {
+p, section {
   font-size: 20px;
   font-family: "Open Sans";
   font-weight: 100;
 }
 
+ul {
+  list-style-type: "-   ";
+  padding-left: 2ch;
+}
+
+li {
+  padding-bottom: 20px;
+}
+
 .lighter {
   background: #fff4;
 }
@@ -99,7 +110,6 @@ hr {
   position: relative;
   padding: 10px 30px;
   font-size: 20px;
-  cursor: pointer;
 }
 
 .button::before {

styles/experience.css

@@ -0,0 +1,40 @@
+#banner {
+  margin-top: 10px;
+  padding: 20px 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  line-height: 1;
+}
+
+#experience {
+  color: white;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+#content {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  align-items: flex-end;
+  gap: 30px;
+}
+
+#image {
+  flex: 1;
+  background-color: #ccc;
+  border-radius: 10px;
+  height: 300px;
+  min-width: min(500px, 100%);
+}
+
+#description {
+  flex: 1;
+  gap: 30px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  min-width: min(300px, 100%);
+}

styles/global.css

@@ -31,6 +31,7 @@
 .white { --color: white }
 
 .flex-space, .flex, br { flex-grow: 1 }
+.flex.dark { background-color: var(--dark); }
 .space { flex: 1000 }
 
 /*----------------------------------------------------------------------------*/
@@ -43,8 +44,8 @@ html {
 
 .back {
   position: relative;
-  padding: 10px 20px;
+  padding: 10px 0;
-  width: min(100vw, 1024px);
+  width: min(100vw, 1024px, 100%);
   box-sizing: border-box;
 }