Skip to content

Commit 77ab7c3

Browse files
0ffz0ffz
committed
change: Stick navbar to top of page when leaving homepage
change: Place text under album images, not over to improve mobile viewing feat: No padding for albums on mobile for larger images fix: Prose settings were not applying due to trimMargin
1 parent 5de72c5 commit 77ab7c3

9 files changed

Lines changed: 142 additions & 65 deletions

File tree

‎site/albums/2024/screenshot-competition.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,6 @@ images:
7070
author: Heliasix
7171
url: https://cdn.mineinabyss.com/website/albums/2024/screenshot-competition/16.webp
7272
---
73+
74+
A screenshot competition event we ran for our 7 year anniversary.
75+
Most are taken on the survival server and showcase a variety of player towns and builds!

‎site/custom.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,28 @@
1616
@theme {
1717
--font-mono: "JetBrains Mono", monospace;
1818
}
19+
20+
@utility full-bleed {
21+
width: 100%;
22+
grid-column: 1 / 4 !important;
23+
}
24+
25+
@utility wrapper {
26+
display: grid;
27+
grid-template-columns: 1fr min(1024px, calc(100% - 32px)) 1fr;
28+
/*grid-column-gap: 24px;*/
29+
grid-row-gap: 0;
30+
> * {
31+
grid-column: 2;
32+
}
33+
}
34+
35+
@utility wrapper-wide {
36+
display: grid;
37+
grid-template-columns: 1fr min(1300px, calc(100% - 32px)) 1fr;
38+
/*grid-column-gap: 24px;*/
39+
grid-row-gap: 0;
40+
> * {
41+
grid-column: 2;
42+
}
43+
}

‎src/components/Card.kt‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ inline fun FlowContent.optionalA(href: String?, crossinline block: FlowContent.(
1010
inline fun FlowContent.card(
1111
title: String?,
1212
subtitle: String? = null,
13+
subtitleClasses: String = "italic",
1314
image: String? = null,
1415
url: String? = null,
1516
imageClasses: String = "h-54",
@@ -19,22 +20,18 @@ inline fun FlowContent.card(
1920
) {
2021
div("not-prose flex flex-col bg-stone-800 border border-stone-700 rounded-lg shadow-md") {
2122
optionalA(href = url) {
22-
div("group w-full ${if (image != null) imageClasses else ""} relative overflow-hidden") {
23+
div("group w-full h-auto relative overflow-hidden") {
2324
if (image != null) {
2425
lazyImg(
2526
src = image,
2627
alt = title ?: "Untitled",
27-
classes = "w-full h-full object-cover ${if (showContent) "rounded-t-lg" else "rounded-lg"} m-0"
28+
classes = "${if (image != null) imageClasses else ""} w-full object-cover ${if (showContent) "rounded-t-lg" else "rounded-lg"} m-0"
2829
) { }
2930
if (showContent) div("absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-stone-800 to-transparent") {}
30-
else div("rounded-b-lg absolute bottom-0 left-0 right-0 h-1/2 md:h-32 bg-gradient-to-t from-[rgba(0,0,0,0.6)] to-transparent") {}
31+
else div("rounded-b-lg absolute bottom-0 left-0 right-0 h-1/2 md:h-32 bg-gradient-to-t from-[rgba(0,0,0,0.75)] to-transparent") {}
3132
}
32-
div("${if (image != null) "absolute" else "pt-4"} ${if(showContent) "" else "mb-2"} ${if (url != null) "transition-opacity duration-300 group-hover:opacity-70" else ""} bottom-0 w-full px-4 drop-shadow-lg") {
33-
div("flex flex-row items-center space-x-1") {
34-
icon()
35-
if(title != null) p("text-xl md:text-2xl font-bold") { +title }
36-
}
37-
if (subtitle != null) p("text-sm select-all leading-snug font-mono") { +subtitle }
33+
div("${if (image != null) "absolute" else "pt-4"} ${if (showContent) "" else "mb-2"} ${if (url != null) "transition-opacity duration-300 group-hover:opacity-70" else ""} bottom-0 w-full px-4 drop-shadow-lg") {
34+
cardText(icon, title, subtitle, subtitleClasses = subtitleClasses)
3835
}
3936
}
4037
if (showContent) div(if (image != null) "p-4" else "px-4 pb-4") {
@@ -43,5 +40,19 @@ inline fun FlowContent.card(
4340
}
4441
}
4542
}
43+
4644
}
4745
}
46+
47+
inline fun FlowContent.cardText(
48+
crossinline icon: HTMLTag.() -> Unit,
49+
title: String?,
50+
subtitle: String?,
51+
subtitleClasses: String = "italic",
52+
) {
53+
div("flex flex-row items-center space-x-1") {
54+
icon()
55+
if (title != null) p("text-xl font-bold") { +title }
56+
}
57+
if (subtitle != null) p("text-sm select-all leading-snug $subtitleClasses") { +subtitle }
58+
}

‎src/components/ColoredButton.kt‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@ import kotlinx.html.*
44

55
fun FlowContent.coloredButton(
66
text: String,
7-
classes: String,
7+
classes: String = "",
88
url: String,
9+
selected: Boolean = false,
910
icon: A.() -> Unit = {},
1011
) {
1112
a(
1213
href = url,
13-
classes = "$classes not-prose w-full sm:w-max py-2 px-3 sm:px-4 md:px-6 h-10 text-white hover:text-stone-100 uppercase rounded-md font-bold text-sm no-underline flex items-center space-x-2"
14+
classes = "$classes ${if (selected) "bg-stone-700 hover:bg-stone-600" else ""} not-prose w-full sm:w-max py-2 px-3 sm:px-4 md:px-6 h-10 text-white hover:text-stone-100 uppercase rounded-md font-bold text-sm no-underline flex items-center space-x-2"
1415
) {
1516
icon()
1617
span { +text }

‎src/components/Navigation.kt‎

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,36 @@
11
package components
22

33
import kotlinx.html.FlowContent
4+
import kotlinx.html.a
45
import kotlinx.html.div
6+
import kotlinx.html.img
57
import kotlinx.html.nav
68
import me.dvyy.shocky.page.Page
79

8-
fun FlowContent.navigation(outlined: Boolean = true, center: Boolean = true, page: Page) = div("flex w-full justify-center") {
10+
fun FlowContent.navigation(
11+
outlined: Boolean = true,
12+
center: Boolean = true,
13+
showLogo: Boolean = false,
14+
alwaysFloating: Boolean = false,
15+
page: Page,
16+
) = div("flex w-full") {
917
div(buildString {
10-
appendLine("flex items-center p-2 bg-stone-800 rounded-lg")
18+
appendLine("flex items-center p-2 bg-stone-800")
19+
if (alwaysFloating) appendLine("rounded-lg") else appendLine("max-md:rounded-lg md:w-full")
1120
if (center) appendLine("justify-center mx-auto w-max")
12-
if (outlined) appendLine("border border-stone-700")
21+
if (outlined) {
22+
if (alwaysFloating) appendLine("border border-stone-700")
23+
}
1324
}) {
14-
val selected = "bg-stone-700 hover:bg-stone-600"
15-
val unselected = "bg-stone-800 hover:bg-stone-700"
16-
fun isSelected(url: String) = if (page.url == url) selected else unselected
25+
val selected = ""
26+
// fun isSelected(url: String) = if (page.url == url) selected else unselected
27+
// fun startsWith(url: String) = if (page.url.startsWith(url)) selected else unselected
28+
if (showLogo) a(href = "/") { img(classes = "not-prose mr-2") { src = "/assets/favicon.png" } }
1729
nav("flex space-x-2") {
18-
coloredButton("Home", isSelected("/"), "/")
19-
coloredButton("Gallery", isSelected("/gallery"), "/gallery")//, icon = { icons.camera })
20-
coloredButton("Rules", isSelected("/rules"), "/rules")//, icon = { icons.article })
21-
coloredButton("Wiki", unselected, "https://wiki.mineinabyss.com")//, icon = { icons.infoCircle })
30+
coloredButton("Home", selected = page.url == "/", url = "/")
31+
coloredButton("Gallery", selected = page.url.startsWith("/albums") || page.url == "/gallery", url = "/gallery")//, icon = { icons.camera })
32+
coloredButton("Rules", url = "/rules")//, icon = { icons.article })
33+
coloredButton("Wiki", url = "https://wiki.mineinabyss.com")//, icon = { icons.infoCircle })
2234
}
2335
}
2436
}

‎src/pages/Album.kt‎

Lines changed: 44 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,64 @@
11
package pages
22

3-
import components.card
4-
import kotlinx.html.classes
5-
import kotlinx.html.div
3+
import components.cardText
4+
import kotlinx.html.*
65
import kotlinx.serialization.Serializable
76
import me.dvyy.shocky.markdown
87
import me.dvyy.shocky.page.Page
98
import templates.default
10-
import java.nio.file.Path
11-
import kotlin.io.path.*
129

1310
@Serializable
1411
data class AlbumMeta(
1512
val images: List<ImageMeta>,
1613
)
1714

18-
fun Page.album() = default {
19-
classes += "max-w-screen-xl"
15+
fun Page.album() = default() {
2016
val images = page.meta<AlbumMeta>().images
2117
markdown(page.content)
22-
div("grid grid-cols-1 space-y-4") {
18+
div("grid grid-cols-1 full-bleed") {
19+
div("md:wrapper-wide space-y-6") {
2320
// Path("site/assets/gallery")
2421
// .listDirectoryEntries()
2522
// .filter { !it.nameWithoutExtension.endsWith("-min") && it.extension == "webp" }
2623
// .map { it.relativeTo(Path("site")) to it.getImageMetaOrNull() }
27-
images
28-
.sortedWith(compareBy({ it.order ?: 1000.0 }/*, { it.nameWithoutExtension }*/))
29-
.forEach { meta ->
30-
card(
31-
meta.title,
32-
subtitle = buildString {
33-
if(meta.author != null) append("By ${meta.author}")
34-
if (meta.desc != null) {
35-
append(" — ")
36-
append(meta.desc)
37-
}
38-
},
39-
imageClasses = "min-h-54",
40-
showContent = false,
41-
url = meta.url,
42-
image = meta.thumbnail,
43-
)
44-
}
24+
images
25+
.sortedWith(compareBy({ it.order ?: 1000.0 }/*, { it.nameWithoutExtension }*/))
26+
.forEach { meta ->
27+
albumImage(
28+
meta.title,
29+
subtitle = buildString {
30+
if (meta.author != null) append("By ${meta.author}")
31+
if (meta.desc != null) {
32+
append(" — ")
33+
append(meta.desc)
34+
}
35+
},
36+
// imageClasses = "min-h-54",
37+
// showContent = false,
38+
// textInsideImage = false,
39+
url = meta.url,
40+
image = meta.thumbnail,
41+
)
42+
}
43+
}
44+
}
45+
}
46+
47+
inline fun FlowContent.albumImage(
48+
title: String?,
49+
subtitle: String? = null,
50+
image: String? = null,
51+
url: String? = null,
52+
crossinline icon: HTMLTag.() -> Unit = {},
53+
) = div("not-prose") {
54+
a(href = url) {
55+
lazyImg(
56+
src = image,
57+
alt = title ?: "Untitled",
58+
classes = "drop-shadow-lg md:drop-shadow-xl w-full object-cover md:rounded-lg max-md:border-y md:border border-stone-700 min-h-54"
59+
) { }
60+
}
61+
div("px-2 pt-2 pb-3") {
62+
cardText(icon, title, subtitle)
4563
}
4664
}

‎src/pages/Gallery.kt‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
package pages
22

33
import components.card
4-
import kotlinx.html.classes
54
import kotlinx.html.div
65
import kotlinx.html.h1
76
import kotlinx.html.hr
@@ -12,12 +11,11 @@ import templates.default
1211
import kotlin.io.path.Path
1312

1413
fun Page.gallery() = default {
15-
classes += "max-w-screen-xl"
1614
markdown(
1715
"""
1816
Welcome to our gallery! This page contains historical albums from our Reddit posts, as well as many fun images
1917
taken throughout the years. Click on any image to view a full size, uncompressed version.
20-
""".trimIndent()
18+
""".trimIndent()
2119
)
2220
div("space-y-8") {
2321
Pages.walk(Path("site/albums"), Path("site"))

‎src/pages/Home.kt‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,12 @@ fun Page.homePage() = default(
3333
div("relative") {
3434
id = "about"
3535
div("absolute bottom-0 transform -translate-y-4 w-full") {
36-
navigation(page = page)
36+
navigation(page = page, center = true, alwaysFloating = true)
3737
}
3838
}
3939
}
4040
) {
41+
div("mt-10")
4142
markdown(
4243
"""
4344
# About us
@@ -63,20 +64,23 @@ fun Page.homePage() = default(
6364
card(
6465
"Survival",
6566
subtitle = "survive.mineinabyss.com",
67+
subtitleClasses = "font-mono",
6668
icon = { icons.meat },
6769
) {
6870
p { +"Play and build with other members of the community." }
6971
}
7072
card(
7173
"Build",
7274
subtitle = "build.mineinabyss.com",
75+
subtitleClasses = "font-mono",
7376
icon = { icons.hammer },
7477
) {
7578
p { +"Explore the map with flight enabled, build in the creative world." }
7679
}
7780
card(
7881
"Archive",
7982
subtitle = "archive.mineinabyss.com",
83+
subtitleClasses = "font-mono",
8084
icon = { icons.archive },
8185
) {
8286
p { +"An archive of past maps, containing old survival builds and towns." }

‎src/templates/Default.kt‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import me.dvyy.shocky.page.Page
77

88
inline fun Page.default(
99
includeNavigation: Boolean = true,
10+
wide: Boolean = false,
1011
crossinline body: FlowContent.() -> Unit = { },
1112
crossinline prose: MAIN.() -> Unit = { markdown(content) },
1213
) = html {
@@ -23,21 +24,25 @@ inline fun Page.default(
2324
body(classes = "bg-stone-800 text-stone-100 ") {
2425
body()
2526
main(
26-
"""prose prose-invert prose-stone prose-md mx-auto
27-
|prose-figcaption:italic prose-figcaption:text-center prose-figcaption:mt-0 prose-figcaption:mb-2 prose-figcaption:px-4
28-
|prose-img:mb-2
29-
|prose-h2:mb-4 prose-h2:mt-8
30-
|prose-h3:mb-3 prose-h3:mt-4
31-
|prose-h4:mb-2 prose-h4:mt-3 prose-h4:uppercase prose-h4:text-stone-200
32-
|prose-li:my-1
33-
|prose-ul:my-2
34-
|prose-p:my-2
35-
|prose-a:text-stone-400
36-
|md:mx-auto max-w-screen-lg mt-12 px-4
37-
|overflow-x-hidden""".trimMargin()) {
27+
"""
28+
prose prose-invert prose-stone prose-md ${if (wide) "wrapper-wide" else "wrapper"} max-w-none w-auto
29+
prose-figcaption:italic prose-figcaption:text-center prose-figcaption:mt-0 prose-figcaption:mb-2 prose-figcaption:px-4
30+
prose-img:mb-2
31+
prose-h1:mb-6
32+
prose-h2:mb-4 prose-h2:mt-6
33+
prose-h3:mb-3 prose-h3:mt-4
34+
prose-h4:mb-2 prose-h4:mt-3 prose-h4:uppercase prose-h4:text-stone-200
35+
prose-li:my-1
36+
prose-ul:my-2
37+
prose-p:mt-1 prose-p:mb-4
38+
prose-ol:my-2
39+
prose-a:text-stone-400
40+
overflow-x-hidden""".trimIndent()
41+
) {
3842
if (includeNavigation) {
39-
h1("flex mt-8 mx-auto justify-center") { +page.title }
40-
div("pb-4") { navigation(page = page) }
43+
navigation(page = page, showLogo = true, center = false)
44+
hr("full-bleed !my-0")
45+
h1("flex mt-8") { +page.title }
4146
}
4247
prose()
4348
}

0 commit comments

Comments
 (0)