#174: New AwesomeWM Website - prototype 1 main page and styling.

[raven2cz]

@Elv13 @Aire-One According to discussion #174. I created prototype for main page and styling to keep ikiwiki.

Check modifs inside this PR. Please provide your opinions and details about main page and styling.

The change provides possibilities for mobiles (small screen) and large 4K screens.

Navigation bar is kept, it can be replaced with navbar, but it needs js. I kept previous for prototype 1.

The demo is prepared here. https://raven2cz.github.io/awesome-www/

[actionless]

overall looking nice 👍

but these bullet-point replacement to letters looking a bit confusing and my first thought was that rendering of the page broken or such:

i'll look further into other pages

[actionless]

codeblocks broken, for example, https://raven2cz.github.io/awesome-www/recipes/countdown/

[raven2cz]

@actionless Thanks for response and points! This is a prototype 1 mainly for main first home page. Others pages work too, but there will be additional work with codeblocks etc, there were next small points. Please focus first to main first page. It is mainly part of prototype 1.

For this first prototype, I need your approve to the graphical appearance, format and design of the first page. Especially for

• new logo look-and-feel,
• paragraph format,
• selected fonts,
• usage of buttons
• and of course those AW-points at the end.

Since everyone has a different opinion on art and beauty, this is the most complicated step and unfortunately also the most time-consuming, so it must be agreed by the several members of the dev team which have to approve this graphical www changes for this first prototype 1.

So, AW-points are not liked by you. I will insert another proposal of those points. No AW-points :)

So the logo looks okay to you? Of course, it took the most work. About PNG and SVG. Yes, it could be gradually reworked into SVG, although there will be a little changes in shadows and details, but it should work. The current PNG supports correct resolutions from the mobile version up to 4K, as well a resolution limitations for large resolutions to 8K in css settings. I would rework it to SVG, but first I need your opinion and others to go this way. Work on graphics logo takes 2 days of work.

Opinions from others? @Elv13 @Aire-One

[sclu1034]

Additional things I would expect of/hope for in a modernization:

• Use proper semantic HTML elements (<nav>, <section>, <article>, <header>, <footer>, etc.)
• Get rid of the float/clear layouting, both the main content and the nav bar

[actionless]

ah, one more thing i see when looking on it with the fresh head and eyes - font set to var(--bs-font-sans-serif); which resolving to anything but the font which you bundling here:

so you can actually see on the screenshot above that the font became monospace at the end

[raven2cz]

@sclu1034 Thanks for response. Almost all points are clear from your side. Except two which needs your additional requirements and response from others if they will agree with it.

• Required color scheme (response: "consistency in colors between") - You have to define dominant colors which I have to use. Awesome hasn't defined default colorscheme colors. I cannot continue without it. I expect that main color from this color scheme will be used for awesome logo color too. Because you don't want rainbow-colored logo. Please select this color carefully. I'm not sure that there is good idea to kept main color of previous logo, maybe some dominant from one dark palette? But depends on you and dev team.
• Logo design. Your requirement to remove WM from name is not good idea. Because whole concept will be drop to trash. There is necessary to have transparent part with WM and Lua logo with it. If I will drop WM and just kept awesome, there is no place for Lua logo anymore. I already tried to use it with awesome only, but it is not possible. I know that project is called "awesome". But if you look and search internet, the project has mainly called AwesomeWM, because you cannot search awesome as keyword. Many new designs of AW have WM added to the name. I can say 70-80 percent. If you look to reddit, there is https://www.reddit.com/r/awesomewm/ if you look to https://www.reddit.com/r/unixporn, awesomewm is mainly used. I know that the previous 15 years old name was just "awesome", but it doesn't mean that the main actual logo cannot be AwesomeWM. If you still want just awesome, can you provide details how to modify my design for it? Or you can just kept the previous svg logo? Rainbow is not problem to change to main color from your defined colorscheme, shadows can be modified according to it, but the lua and transparency of WM is showstopper for this your requirement.

[actionless]

Apart from that, the project's name is "Awesome", not "AwesomeWM"

we have somewhere a LONG topic (😹) there it was officially decided that it's exactly AwesomeWM

A rainbow-colored logo is a rather specific (and controversial) political statement these days. I don't think Awesome should walk that path.

what do you mean?

[actionless]

Required color scheme (response: "consistency in colors between") - You have to define dominant colors which I have to use.

just choose some as starting point, instead of having just random colors at all

Awesome hasn't defined default colorscheme colors.

we could consider default color scheme as default colors, but basically it's just one color, #535d6c, and neutral bg/fg (#222222/#aaaaaa)

[actionless]

i tried generating the color palette which would match with default AwesomeWM theme (btw i think we should also use it as fallback for beautiful.xresources module, as current fallback is pink/purple colors which i copied from random theme).

however as it's automatically generated, feel free to manually improve it

*background:  #222222
*foreground:  #aaaaaa
*color0:  #000300
*color1:  #b44631
*color2:  #6fc24e
*color3:  #cab14c
*color4:  #59929d
*color5:  #926090
*color6:  #668d96
*color7:  #728c8d
*color8:  #3f5f47
*color9:  #c1605d
*color10:  #a9c68e
*color11:  #decf50
*color12:  #a6bbcb
*color13:  #ad79a2
*color14:  #8aa1af
*color15:  #bababa

[sclu1034]

Apart from that, the project's name is "Awesome", not "AwesomeWM"

we have somewhere a LONG topic (😹) there it was officially decided that it's exactly AwesomeWM

Interesting. Then I guess that decision was just never applied? Because pretty much everywhere, it's still "Awesome" or "awesome".

A rainbow-colored logo is a rather specific (and controversial) political statement these days. I don't think Awesome should walk that path.

what do you mean?

LGBTQ and Pride. During Pride Month earlier this year, it was kind of fashionable for software projects to rework their images in rainbow colors, but they also reverted pretty quickly afterwards.

[actionless]

Interesting. Then I guess that decision was just never applied? Because pretty much everywhere, it's still "Awesome" or "awesome".

https://github.com/awesomeWM/awesome/issues/2193#issuecomment-374198016

A rainbow-colored logo is a rather specific (and controversial) political statement these days. I don't think Awesome should walk that path.

what do you mean?

LGBTQ and Pride. During Pride Month earlier this year, it was kind of fashionable for software projects to rework their images in rainbow colors, but they also reverted pretty quickly afterwards.

do you see anything controversial and disturbing in the sky every time after the rain? 😸 also as far as i can see the logo is not even have same colors and their order as rainbow itself (you can google how rainbow looks)

[sclu1034]

ah, one more thing i see when looking on it with the fresh head and eyes - font set to var(--bs-font-sans-serif); which resolving to anything but the font which you bundling here:

so you can actually see on the screenshot above that the font became monospace at the end

It falls back to whatever fontconfig uses for a default sans serif font on your system.

That value from Bootstrap is pretty much that "platform-native font stack" I meant:

• system-ui: iOS
• -apple-system: macOS
• Segeo UI: Windows
• Roboto: Android
• Helvetica Neue, Arial: old, proprietary Microsoft
• Noto: not sure why, but I wouldn't be surprised if it's actually common somewhere [could be dropped]
• Liberation: open source alternative to proprietary Microsoft, common on Linux [could be dropped]
• sans-serif: ask the browser/system for a font
• and various emoji fonts

The most important point is that fonts should be consistent, rather than the three different ones in this PR. The second point is that there is no brand identity to show off/protect, so it wouldn't really be worth it to try and force one specific font. Going for a platform-native feel should be better for the user here. Linux doesn't have the system font like Windows/Mac, of course, but the sans-serif makes it consistent with each user's settings.

[actionless]

@sclu1034 regfarding font, my point that this PR is bundling an OTF font file, but not really using it

[actionless]

and yeah - or just stick with default value of --bs-font-sans-serif everywhere, and not bundle that font at all

[sclu1034]

@sclu1034 regfarding font, my point that this PR is bundling an OTF font file, but not really using it

Oh, right. The path in @font-face is incorrect, and the <h1>s fall back to browser settings.

(and I guess that explains why it looks exactly like Noto on my end, because that's what it falls back to)

[raven2cz]

@sclu1034 regfarding font, my point that this PR is bundling an OTF font file, but not really using it

Oh, right. The path in @font-face is incorrect, and the <h1>s fall back to browser settings.

(and I guess that explains why it looks exactly like Noto on my end, because that's what it falls back to)

Path is correct. It doesn't work in one case of firefox browser if the @font-face is forbidden. I tested now in several browsers, and just in one case, the firefox has the problem with security. There is some interval flag which has to be activated for it. But according to your next comments, the default fonts of OS systems will be return back.

It seems that there are still different opinions. Prototype 2 can be created after same opinions. There are list of requirements. Please try to agree the points or find different solution for point which is not correct by you.

Prototype 2 requirements

1. return back complete text content, no changes,,
2. replace AW-points with other style. There is still no definition from you side. For example do you like some from this? https://www.anythinglearn.com/2020/05/how-to-create-custom-list-in-html.html https://www.tahirtaous.com/style-beautiful-html-lists-css/ The colorscheme will be different. Or you want just standard html dots?
3. remove bootstrap, overtake css for buttons, and other components. I'm not sure if it is good idea, make same things twice, but if you want have one simple css. It is ok. But 15mins is nonsense, it takes much more,
4. no png, just svg vector images,
5. remove ttf font from h1, use standard system fonts only. Do you want hierarchy from bootstrap, or some primitive fonts list which was there before? I recommend platform-native font stack, which is already implemented in bootstrap. If we will remove bootstrap, the same logic has to be copy to our files again.
6. buttons link - I need links to awesome-git version documentation. Do you agree with it or not?
7. usage of colorscheme described by @actionless, two comments from him. It is nice, and good solution.
8. usage of html element: <nav>, <section>, <article>, <header>, <footer>, better structure of html template.
9. small corrections with strong, div, etc. according to comments @sclu1034
10. awesome logo. Keep AwesomeWM with WM transparent and Lua logo. SVG. Missing your opinions if the letters will be just one main color #535d6c or each letter will have different color from color scheme. I can prepare both. We can make color decision after it.

Is it all, missing some point? Agree with it?

[actionless]

Or you want just standard html dots?

i think choosing good size and color would make even default dots work nicely. some design trick worth mentioning in this context - for example if for normal text you're using color "#222222" to use for bold elements (bold text, headings, bold dots) some lighter color from the palette - that should make typography look modern and breathing

remove bootstrap, overtake css for buttons, and other components.

i don't have a strong opinion on that, i can tell further if you'll quickly describe what from bootstrap do you use except for buttons

usage of colorscheme

regarding colortheme - just define it somewhere in the beginning of CSS file as CSS variables - so we could quickly change them afterwards (i think that way you could even affect the colors of SVG pic)

i'll try to work further this weekend to improve that theme (for example blue and cyan look same-ish) - and will make a PR to put it there: https://github.com/awesomeWM/awesome/blob/master/lib/beautiful/xresources.lua#L17-L45

so using css variables would allow to quickly upadte the color theme in such case

---

all in all plan sounds alright, thanks for your work on this 😺👍

[actionless]

btw just random thought, any opinion on having dark colortheme of the website by default?

[raven2cz]

btw just random thought, any opinion on having dark colortheme of the website by default?

Maybe there is one project which can help us and save time.

https://github.com/gsliepen/ikistrap

ikiwiki integration with bootstrap 5. I have to test it first.

[sclu1034]

3. remove bootstrap, overtake css for buttons, and other components. I'm not sure if it is good idea, make same things twice, but if you want have one simple css. It is ok. But 15mins is nonsense, it takes much more,

I didn't say replacing everything that Bootstrap does there would take minutes, I talked about "button styling and flex wrap". And that took about 7 minutes just now, including freshening up on the flex-wrap and flex-direction properties. Fleshing that out would be very much feasible in 15 minutes.

<div class="button__container">
  <div class="button">
    <a href="google.com">Google</a>
  </div>
  <div class="button button--primary">
    <a href="duckduckgo.com">DuckDuckGo</a>
  </div>
</div>

.button__container {
  display: flex;
    flex-wrap: wrap;
  flex-direction: column;
}

.button {
  flex: 1;
  padding: 5px;
  border: 1px solid black;
  border-radius: 10px;
  text-align: center;
}

.button--primary {
  background-color: green;
}

.button + .button {
  margin-left: 10px;
}

@media all and (min-width: 500px) {
  .button__container {
  flex-direction: row;
  }
}

As for the other Bootstrap stuff:

• the font-family is a single value that you can just copy from the Inspector
• the baseline from reboot.scss could be replaced with normalize.css, which I'd be fine with to just paste at the top of local.css

And that's already all Bootstrap usage I could find.

Maybe there is one project which can help us and save time.

gsliepen/ikistrap

ikiwiki integration with bootstrap 5. I have to test it first.

I don't see how this would help in that regard. It still pulls in the entirety of Bootstrap when we barely use any of it. And it would probably require a not insignificant amount of work to port our pages to that new template.

[sclu1034]

btw just random thought, any opinion on having dark colortheme of the website by default?

Ideally, we would honour the prefers-color-scheme media query.

[sclu1034]

@sclu1034 regfarding font, my point that this PR is bundling an OTF font file, but not really using it

Oh, right. The path in @font-face is incorrect, and the <h1>s fall back to browser settings. (and I guess that explains why it looks exactly like Noto on my end, because that's what it falls back to)

Path is correct. It doesn't work in one case of firefox browser if the @font-face is forbidden. I tested now in several browsers, and just in one case, the firefox has the problem with security. There is some interval flag which has to be activated for it.

The path would be correct, if your changes were served on a dedicated domain, like awesomewm.org is, or locally. But what we get is on a sub-path, so the font file is served as https://raven2cz.github.io/awesome-www/fonts/ProdigySans-Regular.ttf, while the absolute path in the @font-face resolves to https://raven2cz.github.io/fonts/ProdigySans-Regular.ttf, returning a 404.

In Brave, the font is just as absent as in Firefox (actually worse, because that one defaults to Times New Roman, for some reason).

[sclu1034]

6. buttons link - I need links to awesome-git version documentation. Do you agree with it or not?

I do not agree to linking to git docs. Even more so if your primary reason is because it must suit your personal use case. If you need to provide the link to the git docs, then copy that direct link. It takes me seconds to search for and copy either of the doc versions from my browser's address bar. Directing someone to the homepage with the added instruction of "then click the 'Documentation' button" would be slower for both me and the person I was talking to.

Besides that, the recommended way to install AwesomeWM or any other software on Linux is to use the distribution's official, trusted repositories (which provides v4.3). Especially for someone just getting started.

[sclu1034]

2. replace AW-points with other style. There is still no definition from you side. For example do you like some from this? anythinglearn.com/2020/05/how-to-create-custom-list-in-html.html tahirtaous.com/style-beautiful-html-lists-css The colorscheme will be different. Or you want just standard html dots?

I'd be fine with just regular browser-default list styles, optionally colored with whatever accent color we end up with. Though, I also don't see anything wrong with the small xs we currently have. Keeping those would be OK, too.

[raven2cz]

@sclu1034 It can be seen that you have a lot of experience with this. Even according to the speed of extraction from bootstrap. Wouldn't it be far more efficient if you edited the actual pages yourself? If you need help with anything, I can help, just say. It seems to me that anything I would change would not be ideal.

[raven2cz]

6. buttons link - I need links to awesome-git version documentation. Do you agree with it or not?

I do not agree to linking to git docs. Even more so if your primary reason is because it must suit your personal use case. If you need to provide the link to the git docs, then copy that direct link. It takes me seconds to search for and copy either of the doc versions from my browser's address bar. Directing someone to the homepage with the added instruction of "then click the 'Documentation' button" would be slower for both me and the person I was talking to.

Besides that, the recommended way to install AwesomeWM or any other software on Linux is to use the distribution's official, trusted repositories (which provides v4.3). Especially for someone just getting started.

Problem here is that you have different opinions. I'm helping with awesome last 1.5 year for beginners on reddit, forums and next places. There are many problems with two years old release. Some newbies install release but very quickly find that it is old, and finding the way to install new awesome CI version. Second group install directly awesome-git. Third group which has still old configuration is smaller. After all bugs, features, new libs I have to recommend awesome-git. I haven't next choice. New release is still not ready. Second point, I already described. It is a much more better documentation. Or compromise, place two buttons, no documentation button. Just links to first guides for both versions. Get started (Release) Get started (Current) Like nodejs...

[actionless]

recommended way to install AwesomeWM ... is to use the distribution's official, trusted repositories (which provides v4.3)

recommended by whom? O__0

[sclu1034]

recommended way to install AwesomeWM ... is to use the distribution's official, trusted repositories (which provides v4.3)

recommended by whom? O__0

By the website we're talking about: https://awesomewm.org/download/

Building from Source We strongly recommend using the awesome package of your distribution.

[sclu1034]

@sclu1034 It can be seen that you have a lot of experience with this. Even according to the speed of extraction from bootstrap. Wouldn't it be far more efficient if you edited the actual pages yourself? If you need help with anything, I can help, just say. It seems to me that anything I would change would not be ideal.

"ideal" is very hard to achieve. Whatever I would create would be just as opinionated as what you do, except based on a different opinion. I am experienced in this, but for what I'm good at with the technical stuff, I'm bad at the "come up with a design from scratch" stuff.

[sclu1034]

Or compromise, place two buttons, no documentation button. Just links to first guides for both versions. Get started (Release) Get started (Current)

That'd be fine with me. The second button should probably have a small subtext indicating that the version needs to be built from source, though.

And the lack of the documentation button shouldn't be a problem, since we still have the link in the nav bar.

[raven2cz]

Light theme

Awesome logo variants created.

First is previous palette. The 2-5 points are taken from @actionless colorscheme screenshot.

Zoom your browser page/image to see it in different zoom scopes. It is already svg, not screenshot, but the project is svg already. My preference is point 2, because I'm an artistic painter. But 3 is not bad too... Your preferences?

[actionless]

Your preferences?

they all look alright, except for n.4. i prefer more first two, as dark ones look kinda boring

By the website we're talking about

then it must be out-of-date, as it's not matching the overall sentiment on the bug tracker, especially when time passed from release date is more than 1 month

[raven2cz]

Dark theme

Dark follows...

[actionless]

in dark i like 6 and 9

[raven2cz]

I've got last idea. I called it a center symmetry. It is some wedding between 6 and 9 with symmetric logic. My favorite too.

[raven2cz]

@actionless @sclu1034 Hi, the prototype 2 is ready.

https://raven2cz.github.io/awesome-www/

I hope that all your discussion points are included. Check demo and review code.

[actionless]

thanks for continuing working on this! 💯🔥

i'll look more detailed during the weekend, but just quick points: documentation buttons for sure need redone (sorry): 1) they don't say that they documentation 2) to make it worse, on mouse hover the link URL is not displayed 3) it would be better to have one of them as a button and other as a smaller link under that button, current layout bit confusing

and small improvement regarding typograhy (especially for the dark theme):

i think the bullet points should be same or similar color as headlines, not same as links (or all bullets/headlines/links should have similar color):

[raven2cz]

thanks for continuing working on this! 100fire

i'll look more detailed during the weekend, but just quick points: documentation buttons for sure need redone (sorry):

1. they don't say that they documentation

2. to make it worse, on mouse hover the link URL is not displayed

3. it would be better to have one of them as a button and other as a smaller link under that button, current layout bit confusing

Nice! About buttons. Please create some drawing on standard paper and make photo or ascii symbols and letters in text file to demonstrate your concept. I partially understand, but it will good to have final idea issue. It is an important part of this webpage and it has to be perfect. Thx.

and small improvement regarding typograhy (especially for the dark theme):

i think the bullet points should be same or similar color as headlines, not same as links (or all bullets/headlines/links should have similar color):

Bullet points are changed, check if this is ok.

[aajjbb]

I'm very glad to see the Awesome website being improved/modernized. I have worked in a site revamp years ago, and it was quite fun. Looking forward to seeing the new version live.

[Elv13]

Nice work.

For the logo, I would prefer option 3 or 11. The colorful ones do actually look better, but I really want to avoid any risk of "politically sensitive issues". We are in an unfortunate world where some people are triggered by the weirdest of details, so lets avoid the drama by being boring. Also, we use the "#3 color" for branding in other places, so it would be consistent. Switching to #11 might be good for the dark theme?

[actionless]

About buttons.

[  Awesome 4.3  ]
[ documentation ]
[    (stable)   ]

Docs for latest git version

[actionless]

Bullet points are changed, check if this is ok.

thanks, they're ok, but while checking noticed one more problem:

top margin of headline is bigger than bottom margin of headline (should be the opposite):

[sclu1034]

For the logo, I would prefer option 3 or 11. The colorful ones do actually look better, but I really want to avoid any risk of "politically sensitive issues".

Colorful would be doable, we'd just need a definitely-not-a-rainbow set/order of colors. One option would be to use the Xresources order, i.e. the same order as in actionless' image.

[raven2cz]

Nice work.

For the logo, I would prefer option 3 or 11. The colorful ones do actually look better, but I really want to avoid any risk of "politically sensitive issues". We are in an unfortunate world where some people are triggered by the weirdest of details, so lets avoid the drama by being boring. Also, we use the "#3 color" for branding in other places, so it would be consistent. Switching to #11 might be good for the dark theme?

Yes, I already set 3 for light theme and 11 for dark theme in demo. Light colorscheme is almost kept as previous concept plus light colors from @actionless palette. Dark theme is using this palette too.

There was some smaller changes, #aaaaaa for text is not readable. I have to change to #c4c5c8 which is standard for many dark theme pages.

[raven2cz]

@actionless @Elv13 @sclu1034 There is opened technical points, which I cannot solve.

piwik.js Brave browser: "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT Refused to frame 'https://flattr.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

/project_factoids_stats Firefox browser: "This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “<!DOCTYPE html>”" "Partitioned cookie or storage access was provided to “https://www.openhub.net/p/awesome/widgets/project_factoids_stats” because it is loaded in the third-party context and dynamic state partitioning is enabled."

Donation section doesn't work. Brave shows corrupted link, firefox black box. Do you have some correct link/script for donation? Or remove it?

<script id='fbirvwx'>(function (i) { var f, s = document.getElementById(i); f = document.createElement('iframe'); f.src = 'https://button.flattr.com/view/?fid=mqwonm&button=compact&url=https%3A%2F%2Fawesomewm.org%2F'; f.title = 'Flattr'; f.height = 20; f.width = 110; f.style.borderWidth = 0; s.parentNode.insertBefore(f, s); })('fbirvwx');</script>

[raven2cz]

About buttons.

[  Awesome 4.3  ]
[ documentation ]
[    (stable)   ]

Docs for latest git version

done, all points, check it. I'm not sure with button color and white text. But it fits to your colorscheme, #59929d.

[sclu1034]

piwik.js Brave browser: "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT Refused to frame 'flattr.com' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

Those are two different things:

• piwik.js is blocked because you told Brave to do that. Disable Shields for the page and check again.
• the warning about flattr.com belongs to the "donations not working" part. Either someone with the Flattr login needs to check if there is a new link for iframes or you build a button such as the one at gimp.org (top right)

/project_factoids_stats Firefox browser: "This page is in Quirks Mode. Page layout may be impacted. For Standards Mode use “”" "Partitioned cookie or storage access was provided to “https://www.openhub.net/p/awesome/widgets/project_factoids_stats” because it is loaded in the third-party context and dynamic state partitioning is enabled."

That's just a warning, and it only affects the iframe. Besides, that's not something any of us can fix. You'd have to talk to OpenHub. As the message explains (or would if you had wrapped it in a code block), their page is missing a <!DOCTYPE html> directive.

[actionless]

thanks 🔥 just two final questions (i think the rest looks fine by me):

1) i'm not sure about that huge blurred border around the button - i think the rest of design elements not visually supporting, so i would go with just a hover. 2) i wasn't able to test if dark/light theme detection works correctly in browser, as i have that feature disabled - if anyone could just have a second look on it and confirm it works - that would be nice

[actionless]

nope, found third problem, bottom margin of headline is different for paragraph and for UL. Please increase it for UL, so it will be the same as before normal paragraph.

[actionless]

4) please reduce the left-padding for UL from 35 to 16-18px

or 20px, but then also add extra 3px of ul li padding-left: