intermediate

pdondl · Apr 2, 2024 · a8a1f1c · a8a1f1c
1 parent fea73e9
commit a8a1f1c
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/assets/202404_PT-II_flyer_quadrat_1_norborders_nologo.jpg b/assets/202404_PT-II_flyer_quadrat_1_norborders_nologo.jpg
diff --git a/index.html b/index.html
@@ -48,39 +48,77 @@
     padding: var(--border-width);
   }
 
-  .flyer {
+  .links {
     position: absolute;
+    top: 0; /* Align links to the middle of the container */
+    left: calc(15% + 4 * var(--border-width)); /* Align links to the left */
+    /* width: 100%; /* Maximum width of 15% of the container width */
+    /* height: 100%; /* Set the height of the links */
+    z-index: 1; /* Ensure the links are above the border */
+    /* border: var(--border-width) solid var(--primary-color); Set links border color to match original border color */
+    padding: var(--border-width);
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 3%;
+  }
+
+  .links a {
+    color: var(--primary-color);
+    text-decoration: none;
+  }
+
+  /*.flyer {
+    position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: calc(100% - var(--border-width) * 30);
     max-height: calc(100% - var(--border-width) * 30);
     width: auto;
     height: auto;
+  }*/
+
+  .flyer {
+    float: left; /* Float the flyer to the right */
+    margin: 0 0 10px 10px; /* Adjust margin as needed */
+    max-width: calc(100% - var(--border-width) * 30);
+    width: auto;
+    height: auto;
   }
-  .story-text-pti {
-    position: absolute;
-    top: var(--border-width); /* Align text with top of container */
-    left: calc(15% + var(--border-width) * 2); /* Position text to the right of the logo */
-    width: calc(85% - var(--border-width) * 3); /* Set width to utilize remaining space */
-    max-height: calc(100% - var(--border-width) * 2); /* Ensure text does not exceed container height */
+
+  .story-text {
+    position: relative;
+    top: calc(15% + 7 * var(--border-width)); /* Align text below the links section */
+    left: 0; /* Align text to the right of the logo and links */
+    width: 100%; /* Set width to utilize remaining space */
+    /*height: calc(50% - var(--border-width)); Set height to half of the container height minus border width */
     overflow-y: auto; /* Add scrollbar if text exceeds container height */
     color: var(--primary-color); /* Set text color */
     filter: none; /* Remove drop shadow */
-    float: right; /* Float the text to the right */
-    margin-left: calc(var(--border-width) * 2); /* Add margin to prevent text from overlapping the logo */
+    padding: 3%;
   }
 </style>
 </head>
 <body>
 
 <div class="container">
   <img class="logo" src="./assets/logo_font.png" alt="Logo">
-  <p class="story-text-pti">
-    <span style="font-weight:bold;">Part I</b><br><br>
+  <div class="links">
+    <a href="#">Dummy Link History</a> <a href="#">Dummy Link Sound</a> <a href="#">Dummy Link 3</a>
+  </div>
+  <p class="story-text">
+    <span style="font-weight:bold;">part I (22/11/18)</span><br><br>
     It was a usual night for Cleo. Years, seeing nothing but noise from that Xuntian thingy up there, in low earth orbit. An older, captured radio satellite, open to use by the community listening into space. A journey of randomness and nothing but noise. And some artifacts. Wait a minute, what?
   </p>
-  <img class="flyer" src="./assets/202404_PT-II_flyer_quadrat_1_norborders_nologo.jpg" alt="Flyer of LEO Pt. 2">
+  <p class="story-text">
+    <span style="font-weight:bold;">part 2 (22/11/18)</span><br><br>
+    STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT
+    STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT STORY GOES ON LOREM LIPSUM DUMMY TEXT
+    <img class="flyer" src="./assets/202404_PT-II_flyer_quadrat_1_norborders_nologo.jpg" alt="Flyer of LEO Pt. 2">
+  </p>
+  <!-- <img class="flyer" src="./assets/202404_PT-II_flyer_quadrat_1_norborders_nologo.jpg" alt="Flyer of LEO Pt. 2"> -->
 </div>
 </body>
 </html>