improvements reflecting recent Sitix updates

This commit is contained in:
Lazy Hippopotamus
2024-03-07 19:04:36 -05:00
parent d9ce55d098
commit 02edc1e51e
12 changed files with 133 additions and 34 deletions

View File

@@ -4,6 +4,9 @@
<!DOCTYPE html>
@@ -84,7 +87,12 @@
<div id="culture">
<div>
<div>
<img src="https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=" />
</div>
<p>
Text related to the cultural image.
@@ -93,7 +101,12 @@
</div>
<div>
<div>
<img src="https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=" />
</div>
<p>
Text related to the cultural image.
@@ -102,7 +115,17 @@
</div>
<div>
<img src="https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=" />
<div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/B0J27sf9N1Y"
title="Blender Tutorial for Complete Beginners - Part 1" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<p>
Text related to the cultural image.
@@ -110,6 +133,31 @@
</p>
</div>
<div>
<div>
<img src="https://media.istockphoto.com/id/1337471900/vector/star-of-david-graphic-abstract-background-with-three-doves.webp?s=2048x2048&w=is&k=20&c=M47-JucDhH5TQs500koB-siTbCxce2DLUfQjC5Y9gKA=" />
</div>
<p>
Text related to the cultural image.
</p>
</div>
<!--
<div>
<div>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/B0J27sf9N1Y"
title="Blender Tutorial for Complete Beginners - Part 1" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
<p>
Video!
</p>
</div>-->
</div>
<div class="bottom">
@@ -128,5 +176,3 @@
<script src="main.js"></script>
</body>
</html>

View File

@@ -4,6 +4,9 @@
<!DOCTYPE html>
@@ -166,5 +169,3 @@
<script src="main.js"></script>
</body>
</html>

View File

@@ -9,6 +9,9 @@
<!DOCTYPE html>
@@ -113,5 +116,3 @@ This is the second Library Entry, for testing. This is a very real blurb! It has
<script src="main.js"></script>
</body>
</html>

View File

@@ -9,6 +9,9 @@
<!DOCTYPE html>
@@ -113,5 +116,3 @@ This library text is sure to boggle the mind! Lorem ipsum dolor sit amet consect
<script src="main.js"></script>
</body>
</html>

View File

@@ -5,6 +5,9 @@
<!DOCTYPE html>
@@ -135,5 +138,3 @@ This is the second Library Entry, for testing. This is a very real blurb! It has
<script src="main.js"></script>
</body>
</html>

View File

@@ -13,6 +13,10 @@
--kuwaitred: #cf0821;
}
img {
width: 100%;
}
#bg {
position: absolute;
z-index: -1000;
@@ -26,7 +30,7 @@
/*linear-gradient(90deg, var(--kuwaitgreen), var(--cream), var(--kuwaitred), black)*/
/*linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), */linear-gradient(45deg, red, rgb(0, 255, 0, 0), green),
linear-gradient(135deg, black, rgb(255, 255, 255, 0), white);
background-size: contain;
background-size: contain, cover;
background-position: 50% 65%;
background-repeat: no-repeat;
/*background-color: var(--kuwaitgreen);/*white;*/ /*var(--deepcream);*/ /*#993231;*/ /* var(--cream); */
@@ -203,19 +207,23 @@ small {
}
@media (max-width: 1000px) {
#bg {
background-size: 120%, cover;
}
#main > p {
padding-left: 10px;
padding-right: 10px;
}
#shape {
height: 20px;
height: 40px;
}
#title {
font-size: 2em;
padding-bottom: 20px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 19px), 0% 100%);
padding-bottom: 40px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 37px), 0% 100%);
}
@@ -280,7 +288,7 @@ small {
justify-content: stretch;
}
#culture > div > img {
#culture > div > div {
width: 100% !important;
box-sizing: border-box;
padding: 30px;
@@ -338,6 +346,10 @@ h1 {
position: relative;
}
#libpages > a > span:last-child > img {
width: auto;
}
#libpages > a > span:last-child::before {
content: "";
transform: translateY(-8px);
@@ -407,8 +419,12 @@ p#liblurb {
width: 100%;
}
#culture > div > img {
width: 50vw;
#culture > div > div {
min-width: 50vw;
box-sizing: border-box;
border: 10px solid black;
padding: 50px;
background-color: #888888;
}
#culture > div > p {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@@ -0,0 +1,10 @@
[?]
[=videoEmbed-]
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/B0J27sf9N1Y"
title="Blender Tutorial for Complete Beginners - Part 1" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
[/]
[=text-]
Text related to the cultural image.
[/]

View File

@@ -3,7 +3,14 @@
<div id="culture">
[f culturalstuff cultureThing]
<div>
<div>
[i exists cultureThing.img]
<img src="[^cultureThing.img]" />
[/i]
[i exists cultureThing.videoEmbed]
[^cultureThing.videoEmbed]
[/i]
</div>
<p>
[^cultureThing.text]
</p>

View File

@@ -13,6 +13,10 @@
--kuwaitred: #cf0821;
}
img {
width: 100%;
}
#bg {
position: absolute;
z-index: -1000;
@@ -26,7 +30,7 @@
/*linear-gradient(90deg, var(--kuwaitgreen), var(--cream), var(--kuwaitred), black)*/
/*linear-gradient(rgb(0, 0, 0, 0.5), rgb(0, 0, 0, 0.5)), */linear-gradient(45deg, red, rgb(0, 255, 0, 0), green),
linear-gradient(135deg, black, rgb(255, 255, 255, 0), white);
background-size: contain;
background-size: contain, cover;
background-position: 50% 65%;
background-repeat: no-repeat;
/*background-color: var(--kuwaitgreen);/*white;*/ /*var(--deepcream);*/ /*#993231;*/ /* var(--cream); */
@@ -203,19 +207,23 @@ small {
}
@media (max-width: 1000px) {
#bg {
background-size: 120%, cover;
}
#main > p {
padding-left: 10px;
padding-right: 10px;
}
#shape {
height: 20px;
height: 40px;
}
#title {
font-size: 2em;
padding-bottom: 20px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 19px), 0% 100%);
padding-bottom: 40px;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% calc(100% - 37px), 0% 100%);
}
@@ -280,7 +288,7 @@ small {
justify-content: stretch;
}
#culture > div > img {
#culture > div > div {
width: 100% !important;
box-sizing: border-box;
padding: 30px;
@@ -338,6 +346,10 @@ h1 {
position: relative;
}
#libpages > a > span:last-child > img {
width: auto;
}
#libpages > a > span:last-child::before {
content: "";
transform: translateY(-8px);
@@ -407,8 +419,12 @@ p#liblurb {
width: 100%;
}
#culture > div > img {
width: 50vw;
#culture > div > div {
min-width: 50vw;
box-sizing: border-box;
border: 10px solid black;
padding: 50px;
background-color: #888888;
}
#culture > div > p {

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB