Share your deployed sites #12
Replies: 8 comments 21 replies
-
|
Hi there, here is mine> https://tinytales.shop/ only the social icons are missing... |
Beta Was this translation helpful? Give feedback.
-
|
Looks good! If you want to hide the "1 minute" reading time, you can set paige.style to "#paige-reading-time { display: none; }" in the front matter or site parameters. |
Beta Was this translation helpful? Give feedback.
-
|
any idea why the social links are not shown? |
Beta Was this translation helpful? Give feedback.
-
|
I see this HTML: <div class="mw-100 overflow-x-auto" id="paige-content">
<div class="paige-hero">...</div>
<!-- raw HTML omitted -->
</div>By the way, where is I don't see a div or p tag there for social icons. You have to put one there manually now, wrapping the paige/icon shortcode. For example: <div class="column-gap-3 d-flex display-6 justify-content-center mb-3">
{{< paige/icon class="bi bi-github" name="GitHub" url="https://github.com/willfaught/paige" >}}
</div>If that's not the issue, I'd have to see your code and know the exact Paige version you're using. |
Beta Was this translation helpful? Give feedback.
-
|
I added a new tip for your case, where you only use the menu for the navigation: https://github.com/willfaught/paige#menu-navigation-only. Basically, I recommend you hide #paige-breadcrumbs in that case. |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
Looks good! :) |
Beta Was this translation helpful? Give feedback.
-
|
Here's mine: https://willfaught.com |
Beta Was this translation helpful? Give feedback.
-
|
Code can be found @ https://github.com/Today20092/tampashutterwebsite |
Beta Was this translation helpful? Give feedback.
-
|
It would be on the gallery page, |
Beta Was this translation helpful? Give feedback.
-
|
Paige is currently designed to only present text on list pages like your /gallery/ page, in your case using the .Title and .Description page string fields in Hugo. You could try putting an img tag in your page description, since the description is rendered as Markdown. I don't know if that will look good, though. Perhaps in the future list pages could display the first page image configured in the front matter. That presents a design challenge for pages that don't have images, though. How would you want the image to be displayed? Below the description, centered? Beside the title and description, to the left or right? How big? |
Beta Was this translation helpful? Give feedback.
-
|
I noticed that the videos on https://www.tampashutter.net/gallery/youtube/ aren't expanded to fill the width of the page. Did you customize it to do that? If not, that's a bug that might be fixed in the latest version. |
Beta Was this translation helpful? Give feedback.
-
Yes i did, it looked weird on mobile so i made them a little smaller. sorry i haven't replied sooner i didn't get any notification for your message! |
Beta Was this translation helpful? Give feedback.
-
The image would be like a banner possibly, its up to your creativity how you would do that, like a banner for a blog. similar to https://medium.com/ or anything like that. |
Beta Was this translation helpful? Give feedback.
-
|
Here's mine: https://ryvaeus.com/ I'm loving the simplicity and "front and center"-edness of of the theme. A couple tips for other users who might be browsing this discussion board:
I do have a couple questions for you though, @willfaught. I realize that whether the theme displays in dark or light mode depends on the user agent's device theme. But is there a way we can let visitors toggle the theme on their own? And secondly, is there a way we can have pages load different CSS stylesheets and/or different content entirely, depending on whether dark or light mode is used? I ask because Muut by default expects to be integrated into a site with a light background. They do offer a dark background option, but it requires embedding their installation code snippet with additional classes. Edit: I worked around for a solution to my second question above, and now have Muut able to dynamically change between dark and light mode depending on the viewer's system theme just like the rest of the site. However, I'd still appreciate an answer if the above is possible, so I can do a proper implementation. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for sharing! Glad you like it. Thanks for pointing out that muut wasn't documented. This was an oversight. I've now documented muut, as well as several other analytics and comments providers that hadn't been documented. Please report any other undocumented features that clearly should be documented. The documentation for paige.search.hide_page and paige.rss.hide_page were correct, but the implementation was not. Thanks for pointing this out. The implementation has been fixed to match the documentation. Sorry for the inconvenience! These changes were published as tag v0.65.0. There is indeed a way to make the light/dark switch both manual and automatic, and originally that's how it worked in Paige, but I changed it to remove manual switching for the sake of simplicity. No one has yet requested the feature. Can you explain your reasoning for wanting the feature? My assumption was that users would always want it to match their system's setting. You can load both light and dark stylesheets, then use CSS media queries to use one or the other. This is how Paige switches between a light and dark theme for syntax highlighting: @media (prefers-color-scheme: dark) {
{{ partial "paige/dark.css" $page | safeCSS }}
}
@media (prefers-color-scheme: light) {
{{ partial "paige/light.css" $page | safeCSS }}
}If you want to override the syntax highlighting styles, you can simply override those partials in your site. If you want to load other files, you'd do something similar: @media (prefers-color-scheme: dark) {
{{ partial "mystuff-dark.css" $page | safeCSS }}
}
@media (prefers-color-scheme: light) {
{{ partial "mystuff-light.css" $page | safeCSS }}
}My current understanding is that we're limited to CSS media queries for light/dark mode detection and actions. There might be a way to detect it with JavaScript, but you'd have to look that up. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the tips! I personally don't have a need for manual switching between light/dark mode, as I'm a perpetual dark mode user myself. I originally thought about wanting it as I assumed some users might not be aware of the automatic mode switch, but you're right; most people will want to see websites designed in whatever brightness mode their system preference is set to. I guess it isn't that important. |
Beta Was this translation helpful? Give feedback.
-
|
@willfaught Just thought I'd let you know, Muut is being discontinued by the end of this month; feel free to remove it as a supported commenting system in your next theme update. |
Beta Was this translation helpful? Give feedback.
-
|
@ryvaeus Thanks for the notice! I removed Muut support. |
Beta Was this translation helpful? Give feedback.
-
|
Hello, I created two very similar websites and have them hosted on Git Hub. They are still getting a few tweaks but are largely complete with the exception of my final paper. 👎 I just wanted to thank @willfaught for all of his help on these projects. He was a lifesaver and I am really happy with how they turned out. https://axjms1.github.io/portfolio/ https://axjms1.github.io/maker_portfolio/ //Jason |
Beta Was this translation helpful? Give feedback.
-
|
You're welcome! They look great. :) |
Beta Was this translation helpful? Give feedback.
-
|
I modified it a little to suit my purpose. Out of all the Hugo and Jekyll themes I looked through, I liked this one the best. It's minimalist without having the "rugged" look that most minimalist themes go for. It was surprising to me how few themes do this well. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
You're welcome! |
Beta Was this translation helpful? Give feedback.
-
|
I'm a technical writer, so I'm trying to better understand static site generators, markdown, and general docs-as-code concepts. |
Beta Was this translation helpful? Give feedback.
-
|
Nice! |
Beta Was this translation helpful? Give feedback.
-
Links are welcome. :)
Beta Was this translation helpful? Give feedback.
All reactions