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> <!DOCTYPE html>
@@ -84,7 +87,12 @@
<div id="culture"> <div id="culture">
<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=" /> <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> <p>
Text related to the cultural image. Text related to the cultural image.
@@ -93,7 +101,12 @@
</div> </div>
<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=" /> <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> <p>
Text related to the cultural image. Text related to the cultural image.
@@ -102,7 +115,17 @@
</div> </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>
<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> <p>
Text related to the cultural image. Text related to the cultural image.
@@ -110,6 +133,31 @@
</p> </p>
</div> </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>
<div class="bottom"> <div class="bottom">
@@ -128,5 +176,3 @@
<script src="main.js"></script> <script src="main.js"></script>
</body> </body>
</html> </html>

View File

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

View File

@@ -9,6 +9,9 @@
<!DOCTYPE html> <!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> <script src="main.js"></script>
</body> </body>
</html> </html>

View File

@@ -9,6 +9,9 @@
<!DOCTYPE html> <!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> <script src="main.js"></script>
</body> </body>
</html> </html>

View File

@@ -5,6 +5,9 @@
<!DOCTYPE html> <!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> <script src="main.js"></script>
</body> </body>
</html> </html>

View File

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

View File

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

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB