dnlzrgz / hugo-piercer-theme

Piercer is a very customizable, fast and simple Hugo theme designed under the mobile-first philosophy.

Hi 👋, I'm Daniel

A Python developer passionate about crafting high-speed and reliable APIs, Microservices, and Web Apps with Django, Django Ninja, and FastAPI.

🚀 What I do: I specialize in architecting, developing, and maintaining back-end systems based on Django.

💼 Experience: I’ve had the pleasure of working on various projects, from small-scale startups to local businesses. Some of my achievements include optimizing API performance for scalability, integrating advanced security features, implementing containerization, and collaborating with cross-functional teams to ensure project deadlines are met.

🔧 Technologies: In addition to Python, Django, Django Ninja, and FastAPI, I'm proficient in other tools and technologies, including databases like PostgreSQL, ORMs such as SQLAlchemy and Django’s ORM, and front-end technologies such as Tailwind CSS, Alpine.js, and htmx.

📚 Always learning: I’m currently pursuing a Computer Science degree at UNED, Spain, while also keeping up-to-date with the latest trends and technologies.

🌟 Let’s Connect!: Feel free to reach out via LinkedIn or check out my GitHub profile here to see my latest projects. I’m also active on Threads and Mastodon.

Happy coding! 💻✨

hugo-piercer-theme's Issues

Difficulty getting images to display on build

Thank you for this lovely theme, I am attempting to build a small personal site using it but am getting into a little difficulty when attempting to get images to display on the build.

This only applies to the images when they are declared in the section header of the index page, e.g
content/sections/XX.md

---
title: ""
draft: false
weight: 2
images: ["images/dracula-universal.jpg"]
borderColor: "purple"
---

In this example, if I run the hugo server it displays ok, but if i run hugo then open up the index.html generated in the public folder, the section exists, but with no image.

I am deploying using netlify and have the same issue on the live site.

I was wondering if you had any advice?

My config file looks like this:

baseurl = "https://xxx.com"
title = "X & X' Wedding"
author = "chrisbeardy"
googleAnalytics = ""
enableRobotsTXT = true
defaultContentLanguage = "en"
language = "en-GB"
paginate = 3

theme = "piercer"

[params]
    description = "X and X' wedding website."

[params.postcss]
    postcss = false

[params.palette]
    text = "#000000"
    background = "#E6E6FA"
    accent = "#E6E6FA"
    foreground = "#000000"
    separator = "#bd93f9"
    cyan = "#8be9fd"
    green = "#50fa7b"
    orange = "#ffb86c"
    pink = "#ff79c6"
    purple = "#bd93f9"
    red = "#ff5555"
    yellow = "#f1fa8c"

[params.fontsizes]
    base = "1em"
    p = "1.25em"
    h4 = "1.563em"
    h3 = "1.953em"
    h2 = "2.441em"
    h1 = "3.052em"

[params.googlefonts]
    font = ""

[params.serviceWorker]
    enable = false

[params.header]
    show = true

[params.cta]
    show = true
    message = "RSVP"
    link = "#contact"

[params.fa]
    disable = false
    kit = ""

[params.form]
    show = true
    netlify = true
    action = ""
    method = "POST"
    section = "RSVP"
    disclaimer = "Please let us know if you can make it."
    inputNameName = "Name"
    inputNameLabel = "Name(s)"
    inputNamePlaceholder = "Your Name"
    inputEmailName = "Email"
    inputEmailLabel = "Email"
    inputEmailPlaceholder = "Your Email"
    inputResponseName = "Response"
    inputResponseLabel = "Response"
    inputResponsePlaceholder = "Can you make it? (yes/no)"
    inputSongRequestName = "SongRequest"
    inputSongRequestLabel = "Song Request"
    inputSongRequestPlaceholder = "Any song you want played?"
    inputMessageName = "Message"
    inputMessageLabel = "Message"
    inputMessagePlaceholder = "Any dietary requirements?"
    SubmitValue = "Send"

[params.copy]
    message = ""

[params.notfound]
    message = "Whoops, page not found."

I have custom.css which looks like this:

a:hover {
    color: var(--purple);
}

.btn {
    background-color: var(--purple);
    border: 1px solid var(--purple);
}

.btn:hover,
.btn:active {
    color: var(--foreground);
}

.single__content a {
    border-bottom: 3px solid var(--purple);
}

.single__content a:hover {
    border-bottom: 3px solid var(--purple);
}

.single__content a:visited {
    border-bottom: 3px solid var(--pink);
}

And then have overridden the style.css by creating a file in assets/css/style.css with the follwing:

/* HEADER */
.header {
    background-color: var(--accent);
    border-bottom: 5px solid var(--purple);
    display: flex;
    font-size: var(--p);
    padding: 1.15rem 1.75rem;
    position: fixed;
    justify-content: space-between;
    top: 0;
    width: 100%;
    z-index: 999;
}

.header__title {
    width: 50%;
}

.header__title__link--logo {
    width: 50%;
}

/* MENU */
.menu__items {
    background-color: var(--accent);
    border-bottom: 5px solid var(--purple);
    flex-direction: column;
    left: 0;
    position: absolute;
    text-align: center;
    top: 100%;
    width: 100vw;
}

.menu__items__item {
    display: block;
    padding: 0.75rem 1.45rem;
}

.menu__items:last-child {
    padding-bottom: 1.25rem;
}

.menu__toggle {
    cursor: pointer;
}

.menu__toggle[open=""] {
    color: var(--purple);
}

/* HERO */
.hero {
    align-items: center;
    border-bottom: 5px solid var(--purple);
    color: var(--foreground);
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    padding: 9.00rem 1.75rem;
    justify-content: top;
}

.hero > *:first-child {
    margin-bottom: 1.45rem;
}

.hero > *:nth-child(2) {
    padding: 0 3.75rem;
    text-align: center;
}

.hero > p {
    font-size: var(--p);
    padding: 3.45rem;
}

.cta {
    display: block;
    text-align: center;
}

/* SECTIONS */
.section {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    text-align: center;
    justify-content: center;
}

.section > h1 {
    font-size: var(--h3);
}

.section > *:first-child {
    margin-bottom: 1.45rem;
}

.section > p {
    margin-left: 0.95rem;
    margin-right: 0.95rem;
}

.section a {
    border-bottom: 3px solid var(--purple);
}

.section a:hover {
    border-bottom: 3px solid var(--purple);
}

.section a:visited {
    border-bottom: 3px solid var(--pink);
}

/* CONTACT */
.contact {
    align-items: center;
    display: flex;
    flex-direction: column;
    min-height: 90vh;
    justify-content: center;
}

.contact__title {
    font-size: var(--h3);
    margin-bottom: 1.45rem;
}

.contact__disclaimer {
    margin-left: 0.95rem;
    margin-right: 0.95rem;
    text-align: center;
}

.contact__form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, auto);
    justify-items: center;
    width: 100%;
}

.contact__form__field {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, auto);
    grid-template-areas: "label" "input";
    margin: 0.75rem 0;
    justify-content: center;
    width: 21rem;
}

.contact__form__field > label {
    grid-area: label;
}

.contact__form__field > input {
    grid-area: input;
}

input:focus~label,
input:hover~label {
    color: var(--purple);
}

.contact__form__field--submit {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* FOOTER */
.footer {
    background-color: var(--accent);
    border-top: 5px solid var(--purple);
}

.social-links {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    grid-area: "social";
    line-height: 1.2;
    justify-content: space-around;
    padding: 0.75rem 0.75rem;
    padding-top: 1.25rem;
}

.social-links__link {
    font-size: var(--h4);
}

.contact-info {
    margin-top: 1.75rem;
}

.contact-info__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-info__info__item {
    padding: 0 1.45rem;
}

.contact-info__info__item span {
    margin-right: 0.25rem;
}

.footer__agreement,
.footer__copy {
    padding: 0.75rem 1.45rem;
    text-align: center;
}

.footer__copy {
    padding-bottom: 1.25rem;
}

/* 404 */
.notfound {
    align-items: center;
    display: flex;
    font-size: var(--h1);
    justify-content: center;
}

Remove spaces in the section id

Hello,

I'm using your theme as a basis for my website, and I realized there is a little bug in the section partials.

Ideally, the html id must not contain any whitespace. However in your treatment of the title in this line, the title is not sanitized and spaces could find their way in the id.

A simple fix would be to replace id="{{ .Title }}" by id="{{ .Title | anchorize }}".

I can create a pull request if you want.

Also, thanks for your work on this!