summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/assets/images/blog/ass_banner.pngbin0 -> 346038 bytes
-rw-r--r--www/projects/index.html4
-rw-r--r--www/scripts/blog.js5
-rw-r--r--www/scripts/constants.js4
-rw-r--r--www/scripts/iframe.js11
-rw-r--r--www/style.css103
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
Binary files 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 {
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-25 22:03:41 +0000