blog in progress, NOT READY FOR PRODHEADmaster

6 files changed, 112 insertions, 15 deletions

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
--- /dev/null
+++ b/www/assets/images/blog/ass_banner.png
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 {