From 359e9355cb5d1a7479091b35ea8ad47ab5fbca51 Mon Sep 17 00:00:00 2001 From: Arne Rief Date: Sat, 6 Sep 2025 22:13:26 +0200 Subject: Homepage Image & small improvements --- README.md | 2 -- assets/css/main.css | 27 +++++++++++++++++++++------ hugo.toml | 39 +++++++++++++-------------------------- layouts/index.html | 9 ++++++--- static/flags/de.svg | 8 +------- static/flags/en.svg | 25 +------------------------ static/rss.svg | 8 +------- 7 files changed, 43 insertions(+), 75 deletions(-) diff --git a/README.md b/README.md index 6b91091..159085c 100644 --- a/README.md +++ b/README.md @@ -25,8 +25,6 @@ git init Now you can add Argo as a git submodule to your project, set it as your project's theme and start Hugo's embedded web server with the following commands: ```sh -``` -```sh git submodule add https://codeberg.org/arrief/hugo-Argo.git themes/Argo echo "theme = 'Argo'" >> hugo.toml hugo server diff --git a/assets/css/main.css b/assets/css/main.css index c09c56d..42b34ef 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -2,7 +2,8 @@ :root { --bg-main: #fffff0; --bg-special: #f4e3b2; - --border-radius: 50px; + --border-radius-max: 250px; + --border-radius-minimal: 5px; --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --font-size-default: 1rem; --font-size-h1: 2rem; @@ -205,7 +206,7 @@ time { .theme-toggle { background-color: var(--text-color); border: none; - border-radius: var(--border-radius); + border-radius: var(--border-radius-max); color: var(--bg-main); cursor: pointer; padding: 0.2rem; @@ -218,7 +219,7 @@ time { /* SITE NAVMENU */ .header__navigation { background-color: var(--bg-special); - border-radius: 5px; + border-radius: var(--border-radius-minimal); padding: var(--margin-padding-Y-small); } @@ -304,13 +305,27 @@ time { .post-card__tags-item { background-color: var(--bg-special); - border-radius: var(--border-radius); + border-radius: var(--border-radius-max); color: #fff; font-size: var(--font-size-small); padding: 0.1rem 0.4rem; } /* PAGES Content */ +/* Homepage */ +.homepage__header-title { + text-align: center; +} + +.homepage__header-image { + border: 4px solid var(--bg-special); + border-radius: var(--border-radius-max); + display: block; + margin: 1rem auto; + max-width: 150px; + max-height: 150px; +} + /* Article */ .article__header { margin-bottom: var(--gap-large); @@ -366,7 +381,7 @@ time { .search-form__input { font-size: var(--font-size-default); border: 1px solid var(--bg-special); - border-radius: 5px; + border-radius: var(--border-radius-minimal); padding: 0.2rem; width: 50%; @@ -378,7 +393,7 @@ time { .search-form__reset { background-color: var(--bg-special); border: none; - border-radius: var(--border-radius); + border-radius: var(--border-radius-max); color: var(--text-color); font-size: var(--font-size-default); font-weight: bold; diff --git a/hugo.toml b/hugo.toml index 368a7b3..85b57dd 100644 --- a/hugo.toml +++ b/hugo.toml @@ -36,7 +36,7 @@ disableDefaultLanguageRedirect = true identifier = "search" name = "Suche" pageRef = "/search/" - weight = 30 + weight = 20 [languages.en] contentDir = "content/en" @@ -51,23 +51,17 @@ disableDefaultLanguageRedirect = true pageRef = "/" weight = 10 - [[menus.main]] - identifier = "posts" - name = "Posts" - pageRef = "/posts" - weight = 20 - [[menus.main]] identifier = "about" name = "About" pageRef = "/about" - weight = 30 + weight = 20 [[menus.main]] identifier = "search" name = "Search" pageRef = "/search" - weight = 40 + weight = 30 [outputs] # Copy outputs configuration to your project's hugo.toml home = ["html", "json", "rss"] @@ -76,25 +70,18 @@ disableDefaultLanguageRedirect = true term = ["html"] [params] - # In your project's hugo.toml, adjust logo to your file's name or set empty string to display site.Title instead - logo = "/logo.svg" + # For displaying a logo, adjust to your file's name in your project's hugo.toml. Otherwise the theme uses title instead + # logo = "/logo.svg" + + # Place files under static/images if you want to display a small image under the title of your homepage + # homepageImage = "/images/my-portrait.jpg" [params.author] name = "Your Name" email = "your@email.com" - # Replace with your actual social media profiles in your hugo.toml - [[params.socials]] - name = "Twitter" - url = "https://twitter.com/yourhandle" - icon = "/socials/twitter.svg" - - [[params.socials]] - name = "GitHub" - url = "https://github.com/yourhandle" - icon = "/socials/github.svg" - - [[params.socials]] - name = "LinkedIn" - url = "https://linkedin.com/in/yourhandle" - icon = "/socials/linkedin.svg" + # Structure your social media profiles like this in your hugo.toml + # [[params.socials]] + # name = "Twitter" + # url = "https://twitter.com/yourhandle" + # icon = "/socials/twitter.svg" diff --git a/layouts/index.html b/layouts/index.html index b23b087..50fbc82 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,12 +1,15 @@ {{- /* HOMEPAGE */ -}} {{- define "main" }}
-
-

+
+

{{ with .Title }}{{ . }}{{ else }}{{ site.Title | default "Welcome to my Blog!" }}{{ end }}

+ {{- with site.Params.homepageImage }} + {{ . }} + {{- end }} {{- with .Content }} -
+
{{ . }}
{{- end }} diff --git a/static/flags/de.svg b/static/flags/de.svg index b1e8de1..4733142 100644 --- a/static/flags/de.svg +++ b/static/flags/de.svg @@ -1,7 +1 @@ - - - + diff --git a/static/flags/en.svg b/static/flags/en.svg index f5e0332..9f0747a 100644 --- a/static/flags/en.svg +++ b/static/flags/en.svg @@ -1,24 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/static/rss.svg b/static/rss.svg index 9dbdb73..fa83a04 100644 --- a/static/rss.svg +++ b/static/rss.svg @@ -1,7 +1 @@ - - - - - - - + -- cgit v1.2.3