Seeking Feedback On My New Site

[45thj5ej]

@Heliosurge

as one of folks in this topic is in Oregon

Yeah, I thought the same as soon as I read that. I will check out your site too! I actually started with the Air theme, and had it pretty darn customized with CSS and whatnot, but with my current theme versus the Air theme I had, I don’t know…seems too “basic,” which is weird for me to say because I like minimalism in general, haha.

@Heliosurge

So time of day may also influence speed.

When @Lilly, @bryce, and @omarfilip said it was slow, that was at a specific time at night for myself, and then about the same time where the server is hosted. Would it be too much trouble to ask you, @Heliosurge, and @daemon & @merefield to check it out in 12hrs from now when the others said it was slow, if you aren’t busy and are awake, haha? Dying to know if it’s a time-of-day thing.

@daemon

For me your site was loaded in no time.

Really awesome to hear this! Especially across the world from where the server is hosted.

@merefield

Fine for me too.

Awesome!! Any other feedback/recommendations you have?

[bryce (Bryce Huhtala)]

I just tried it and it seems to be loading almost instantly now. At first I thought it was just loading from memory cache, but it doesn’t seem to be.

[45thj5ej]

Ah, ok. Yeah, weird. This kinda points to a time-of-day thing then. Which, I mean, makes sense given the time of night it was for where the server was hosted and most people probably online around that hour. Still, though…million/billion-dollar companies probably don’t have that issue, right, no matter what time of day it is? I mean, I’ve been on major websites that have seemed slow before but it’s more rare than anything.

[MikeNolan]

It loaded very fast for me, too, in Nebraska with 500mb service.

[daemon (Alex)]

For me it would be 3AM, which is when I usually sleep.

[omarfilip]

Loads pretty fast now at 8:30am PDT.

[Arkshine]

The page loads fast for me. It looks good.

About Discourse, I’m not a big fan of the tag styling (just my opinion):

• It’s tags; I don’t expect to be full-width here.
• It visually takes a lot of your attention.
• Contrast issue – it’s not super readable.

Random example:

Good luck!

[45thj5ej]

Thanks for that feedback!
Yeah, I actually experimented with the width of the tags but couldn’t figure out how to center it once re-sized. Color-wise, I couldn’t find a better color really that went with both light and dark modes. If I make the box lighter on light mode, it’s too bright on dark and causes the same issue.

Like, if I Inspect Element the tag, and change the max width property to 40%, it shows visually better, but then I can’t figure out how to center the whole thing because everytime I try, it only moves the text, not the box behind it.

[bryce (Bryce Huhtala)]

For centering those tags, you can use flexbox properties. The tags are inside a parent container which is already set to display: flex.

Flexbox makes it really easy to control how child elements are arranged within a container. There’s a handy feature in dev tools where you can click on the little icon next to display: flex and it will bring up a set of controls so you can see which one produces the desired effect.

In this case, justify-content: center does the trick:

Note that it also works with multiple tags:

This is a good classic tutorial on flexbox if you want to dive into more detail. It’s a very useful tool for your CSS toolbox

[45thj5ej]

Oh wow, thanks a lot for this! Yeah, having 2 tags show makes it look a lot less awkward than one centered tag, but I don’t see many people using multiple tags for most posts, tbh. Hmmm…might need to figure out a way to have the tag shown there and then some other piece of the topic/post somehow with CSS or something so that two things are there. Or hide it all together maybe, but eh.

Or better yet, could I replace the category with it?

[Arkshine]

@45thj5ej

Color-wise

I would encourage you to use the Discourse CSS variables about the color because it will work better with dark mode. (you can inspect anything and scroll down)

---

To center: EDIT: Bryce already answered this!

.discourse-tags {
    justify-content: center;
}

color: var(--secondary-low) !important;
background: var(--blend-primary-secondary-5) !important;

You can also use the dark-light-choose(<lightcolor>, <darkcolor>) function to define light and dark colors so the right color will be used when the dark mode is set or not.

[45thj5ej]

@Arkshine

You can also use the dark-light-choose(<lightcolor>, <darkcolor>) function to define light and dark colors so the right color will be used when the dark mode is set or not.

Hmmm, did I do this wrong? When I pasted this into the Inspect Element, I get:

background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

[Arkshine]

This is a SCSS function available in Discourse core. You need to use it in your theme CSS so it can be processed. It won’t work if you directly use it in your browser.

[Heliosurge (Dan DeMontmorency)]

Your site is still loading quickly. Only see it very briefly.

@45thj5ej

Yeah, I thought the same as soon as I read that. I will check out your site too! I actually started with the Air theme, and had it pretty darn customized with CSS and whatnot, but with my current theme versus the Air theme I had, I don’t know…seems too “basic,” which is weird for me to say because I like minimalism in general, haha

The a la carte adding components is great. Your ahead of me as still learning the code side. Prior to discourse long ago only had played with basic; qbasic and old turbo Pascal. But I am getting there.

[45thj5ej]

Hmmm, ok, so in my .scss file, I have:

.discourse-tags {
        display: flex;
        margin: 1em 0 0 0;
        /* justify-content: center; */
        a {
          display: inherit;
          flex: 1 0 auto;
          justify-content: center;
          max-width: 35%;
          //line-height: var(--line-height-small);
          line-height: 1.1rem;
          border: 0.5em solid transparent;
          /* color: #000000 !important; */
          color: var(--secondary-low) !important;
          background: dark-light-choose(#f0f2f5, #3a3b3c) !important;

The focus being on the last 2 lines. So, it looks like for light and dark mode, it’s staying on the #f0f2f5 color instead of switching to the 3a3b3c color in dark mode. Any idea why?

On Inspect Element, the property just stays:
background: #f0f2f5 !important;
I even tried the URL you linked above and tried making them $tagbglight and $tagbgdark & defining them, etc, but still no luck.

[45thj5ej]

dark-light-choose('#f0f2f5', '#3a3b3c') gives me this:

Which is kinda the same result I’d get earlier.
Note: The Inspect Element shows double quotes. In the code, I used single ones like you did.

[bryce (Bryce Huhtala)]

Hmm, since you’re getting quotes in the final result, maybe try this:

dark-light-choose(unquote("#f0f2f5"), unquote("#3a3b3c"))

I’m not sure if it will help it select the right color, though!

[45thj5ej]

That takes out the quotes, but still only does this color as the background when switching between the modes: #f0f2f5

[bryce (Bryce Huhtala)]

That’s weird. It looks like the function itself is comparing the brightness of the primary and secondary colors. I’m not sure why it’s not working.

@function dark-light-choose($light-theme-result, $dark-theme-result) {
  @if is-light-color-scheme() {
    @return $light-theme-result;
  } @else {
    @return $dark-theme-result;
  }
}

@function is-light-color-scheme() {
  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
    @return true;
  } @else {
    @return false;
  }
}

[Arkshine]

I believe you need to define a CSS variable in color_definitions.scss.

@awesomerobot

due to the way the SCSS is compiled, custom dark/light definitions need to be added to color_definitions.scss within a theme and won’t work in other scss files.

For example:

:root {
    --bg-custom: dark-light-choose(#f0f2f5, #3a3b3c);
}

Then you can use:

background: var(--bg-custom) !important;