Add social media icons

nox.zone/src/main/java/zone/nox/Main.java

@@ -14,6 +14,7 @@ public class Main {
 
  private static final Path POSTS = Path.of("nox.zone/src/main/resources/posts").toAbsolutePath();
  private static final Path RESOURCES = Path.of("nox.zone/src/main/resources/resources").toAbsolutePath();
+ private static final Path SOCIAL_LINKS = RESOURCES.resolve("social-icons");
  private static final Path VIDEOS = Path.of("nox.zone/src/main/resources/videos").toAbsolutePath();
 
  public record Config(Optional<String> target) { }
@@ -24,6 +25,8 @@ public static void main(String[] args) {
 
  var resources = outliner.sourceBinaryFiles("resources", RESOURCES);
  outliner.storeResource(resources);
+ var socialIcons = outliner.sourceBinaryFiles("social-icons", SOCIAL_LINKS);
+ outliner.storeResource(socialIcons);
  var videos = outliner.sourceBinaryFiles("videos", VIDEOS);
  outliner.storeResource(videos);
 

nox.zone/src/main/java/zone/nox/components/Header.java

@@ -17,13 +17,12 @@
 
 public record Header(Id id, Classes classes) implements CustomSingleElement, CssStyled<Header.Style> {
 
- public record Style(Classes container, Classes title, Classes logo, Classes byline, Css css) implements CssStyle { }
+ public record Style(Classes container, Classes title, Classes logo, Classes byline, Classes social, Css css) implements CssStyle { }
  private static final Style STYLE = Css.parse(Style.class, """
  .container {
  display: flex;
  flex-direction: column;
  align-items: center;
- gap: 0.75em;
  }
 
  .container > * {
@@ -39,6 +38,7 @@ public record Style(Classes container, Classes title, Classes logo, Classes byli
  }
 
  .byline {
+ margin-top: 0.25em;
  text-align: center;
  font-size: var(--font-size-large);
  color: var(--yellow);
@@ -48,6 +48,29 @@ public record Style(Classes container, Classes title, Classes logo, Classes byli
  .byline > a:visited {
  color: var(--yellow);
  }
+
+ .social {
+ margin-top: 0.75em;
+ display: flex;
+ flex-direction: row;
+ }
+
+ .social a {
+ display: block;
+ margin: 0 5px;
+ padding: 5px;
+ border: 1px solid transparent;
+ border-radius: 5px;
+ }
+
+ .social a:hover {
+ border-color: var(--yellow);
+ }
+
+ .social img {
+ display: block;
+ width: calc(var(--font-size-large));
+ }
  """);
 
  public Header() {
@@ -64,7 +87,14 @@ public Element composeSingle() {
  img.src(Resources.include("logo.webp"))),
  p.classes(STYLE.byline).children(
  text.text("News from the Shadows of "),
- a.href("https://www.neotropolis.com").text("Neotropolis")));
+ a.href("https://www.neotropolis.com").text("Neotropolis")),
+ div.classes(STYLE.social).children(
+ a.href("tiktok").children(img.src(Resources.include("tiktok.png"))),
+ a.href("tiktok").children(img.src(Resources.include("youtube.png"))),
+ a.href("tiktok").children(img.src(Resources.include("facebook.png"))),
+ a.href("tiktok").children(img.src(Resources.include("twitter.png"))),
+ a.href("tiktok").children(img.src(Resources.include("mastodon.png"))),
+ a.href("tiktok").children(img.src(Resources.include("bluesky.png")))));
  }
 
  public Header id(Id id) {