From 1b14996290f228a329d83c164e50c27364cc0a22 Mon Sep 17 00:00:00 2001
From: altaf-creator <dev@altafcreator.com>
Date: Sat, 13 Jun 2026 19:06:09 +0800
Subject: blog in progress, NOT READY FOR PROD

---
 www/assets/images/blog/ass_banner.png | Bin 0 -> 346038 bytes
 www/projects/index.html               |   4 +-
 www/scripts/blog.js                   |   5 +-
 www/scripts/constants.js              |   4 +-
 www/scripts/iframe.js                 |  11 ++++
 www/style.css                         | 103 +++++++++++++++++++++++++++++++---
 6 files changed, 112 insertions(+), 15 deletions(-)
 create mode 100644 www/assets/images/blog/ass_banner.png
 create mode 100644 www/scripts/iframe.js

(limited to 'www')

diff --git a/www/assets/images/blog/ass_banner.png b/www/assets/images/blog/ass_banner.png
new file mode 100644
index 0000000..d923be1
Binary files /dev/null and b/www/assets/images/blog/ass_banner.png differ
diff --git a/www/projects/index.html b/www/projects/index.html
index 7a3b920..27c532e 100644
--- a/www/projects/index.html
+++ b/www/projects/index.html
@@ -51,7 +51,7 @@
 		</div>
 	</section>
 	-->
-	<section id="code-projs" style="border-top: none" class="top-section-margin">
+	<section style="border-top: none" class="top-section-margin">
 		<div class="center-grid">
 			<div class="div-sizing" style="max-width: none;">
 				<div class="flex-container flex-container-column">
@@ -325,7 +325,7 @@
 			</div>
 		</div>
 	</section>
-	<section id="video-projs">
+	<section>
 		<div class="center-grid">
 			<div class="div-sizing" style="max-width: none;">
 				<div class="flex-container flex-container-column">
diff --git a/www/scripts/blog.js b/www/scripts/blog.js
index c7c64f2..b5ad89c 100644
--- a/www/scripts/blog.js
+++ b/www/scripts/blog.js
@@ -29,7 +29,7 @@ function postCard(post, id) {
 	
 	var title = post.title;
 	var date = post.date;
-	var author = post.author;
+	var description = post.description;
 	var tags = post.tags;
 	var thumbnail = post.thumbnail;
 
@@ -45,7 +45,8 @@ function postCard(post, id) {
 								${evaluatedTags}
 							</div>
 							<a href="/blog/${id}" class="link"><h2>${title}</h2></a>
-							<p>${date}</p>
+							<p class="half-opacity-text"><i class="fa-solid fa-calendar"></i> ${date}</p>
+							<p>${description}</p>
 						</div>
 					</div>
 		`
diff --git a/www/scripts/constants.js b/www/scripts/constants.js
index 1c2812e..b2b7894 100644
--- a/www/scripts/constants.js
+++ b/www/scripts/constants.js
@@ -1,2 +1,2 @@
-const API_URL = "https://altafcreator.com/api"
-//const API_URL = "http://localhost:9091/api"
+//const API_URL = "https://altafcreator.com/api"
+const API_URL = "http://localhost:9091/api"
diff --git a/www/scripts/iframe.js b/www/scripts/iframe.js
new file mode 100644
index 0000000..68eff8d
--- /dev/null
+++ b/www/scripts/iframe.js
@@ -0,0 +1,11 @@
+function iframeLoad(id) {
+	const iframeContainer = document.getElementById(id);
+	const iframes = iframeContainer.querySelectorAll(":scope > iframe"); // this a NodeList
+	const warning = iframeContainer.querySelector(".iframe-manual-warning");
+
+	warning.remove();
+
+	iframes.forEach((frame, _) => {
+		frame.setAttribute("src", frame.getAttribute("data-src"));
+	});
+}
diff --git a/www/style.css b/www/style.css
index a238263..f454dd9 100644
--- a/www/style.css
+++ b/www/style.css
@@ -106,7 +106,7 @@ pre {
 }
 
 li {
-	line-height: 1.6rem;
+	line-height: 1.5rem;
 }
 
 img {
@@ -114,6 +114,10 @@ img {
 	color: #000000AA;
 }
 
+p {
+	line-height: 1.5rem;
+}
+
 .desktop {
 	visibility: visible !important;
 }
@@ -152,7 +156,7 @@ img {
 }
 
 .text-section > .center-grid > .div-sizing {
-	max-width: 80ch;
+	max-width: min(calc(100vw - 10px), 80ch);
 }
 
 .heading {
@@ -363,6 +367,18 @@ img {
 	flex-grow: 1;
 }
 
+.flex-shrink {
+	flex-shrink: 1;
+}
+
+.flex-flex { /* i have no fucking clue */
+	flex: 1 1;
+}
+
+.flex-flex-default {
+	flex: 1 1 400px;
+}
+
 .flex-container {
 	display: flex;
 	flex-direction: row;
@@ -586,7 +602,8 @@ img {
 }
 
 .card {
-	height: 200px;
+	height: 250px;
+	max-width: 100%;
 /*	max-width: 800px;*/
 	width: 100%;
 	display: flex;
@@ -594,6 +611,7 @@ img {
 	box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px 2px;
 	margin-bottom: 15px;
 	margin-top: 15px;
+	overflow: hidden;
 }
 
 .card:hover {
@@ -626,6 +644,10 @@ img {
 
 .card > img {
 	object-fit: cover;
+	aspect-ratio: 16/9;
+	flex: none;
+	width: auto;
+	max-width: 50%;
 }
 
 .gallery-card {
@@ -660,6 +682,9 @@ img {
 	position: relative;
 	align-content: center;
 	font-family: "JetBrains Mono", monospace;
+	border: 0;
+	cursor: pointer;
+	font-size: 1rem;
 }
 
 .button-alt {
@@ -732,7 +757,6 @@ img {
 
 .banner {
 	max-width: 100%;
-	height: 500px;
 	object-fit: cover;
 	width: 100%;
 	box-sizing: border-box;
@@ -823,6 +847,10 @@ img {
 	gap: 10px;
 }
 
+.gap-row {
+	gap: 30px;
+}
+
 .gap-top {
 	margin-top: 10px;
 }
@@ -1109,6 +1137,17 @@ img {
 	transform: rotate(0deg);
 }
 
+.img-caption {
+	font-size: .9rem;
+	color: #000000AA;
+	margin-top: -.5rem;
+	text-align: center;
+}
+
+.img-caption-margin {
+	margin-top: .9rem;
+}
+
 #video-controls-progress {
 	width: 100%;
 }
@@ -1292,7 +1331,6 @@ img {
 #iframe-yt {
 	width: 100%;
 	aspect-ratio: 16/9;
-	clip-path: polygon(0 20.00px, 20px 20px, 20.00px 0, calc(100% - 20.00px) 0, calc(100% - 20px) 20px, 100% 20.00px, 100% calc(100% - 20.00px), calc(100% - 20px) calc(100% - 20px), calc(100% - 20.00px) 100%, 20.00px 100%, 20px calc(100% - 20px), 0 calc(100% - 20.00px));
 }
 
 .footnote {
@@ -1308,6 +1346,38 @@ li:target {
 	display: none;
 }
 
+.footnote-ref::before {
+	content: "[";
+	color: #000000AA;
+}
+
+.footnote-ref::after {
+	content: "]";
+	color: #000000AA;
+}
+
+.iframe-manual-container {
+	position: relative;
+}
+
+.iframe-manual-warning {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+}
+
+.iframe-manual-warning > div {
+	display: flex;
+	gap: 10px;
+	flex-direction: column;
+	align-items: center;
+	padding: 27px;
+	background-color: white;
+	clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+	text-align: center;
+}
+
 @media only screen and (max-width: 600px) {
 	.desktop {
 		visibility: collapse !important;
@@ -1334,15 +1404,22 @@ li:target {
 
 	.card {
 		flex-direction: column;
-		height: 400px;
+		height: auto;
 	}
 
 	.card > * {
 		width: 100%;
-		height: 50%;
 		box-sizing: border-box;
 	}
 
+	.card > img {
+		max-width: 100%;
+	}
+
+	.img {
+		clip-path: polygon(0 7.00px, 7px 7px, 7.00px 0, calc(100% - 7.00px) 0, calc(100% - 7px) 7px, 100% 7.00px, 100% calc(100% - 7.00px), calc(100% - 7px) calc(100% - 7px), calc(100% - 7.00px) 100%, 7.00px 100%, 7px calc(100% - 7px), 0 calc(100% - 7.00px));
+	}
+
 	section {
 		padding-inline: 15px;
 		margin-left: 0;
@@ -1399,10 +1476,14 @@ li:target {
 		height: 35px;
 	}
 
-	.top-section-margin {
+	#section-0 {
 		padding-top: 40px;
 	}
 
+	.no-top-section-margin {
+		padding-top: 0;
+	}
+
 	.flex-end-dynamic {
 		align-items: start;
 		justify-content: start;
@@ -1416,6 +1497,10 @@ li:target {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 	}
+
+	.gap-row {
+		gap: 0px;
+	}
 }
 
 
@@ -1425,7 +1510,7 @@ li:target {
 	}
 
 	#top-project-highlight {
-		height: 280vh;
+		height: 200vh;
 	}
 
 	.wide {
-- 
cgit v1.2.3