#174: New AwesomeWM Website - prototype 1 main page and styling. #175
Conversation
|
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 |
|
codeblocks broken, for example, https://raven2cz.github.io/awesome-www/recipes/countdown/ |
templates/page.tmpl
Outdated
| @@ -20,7 +20,7 @@ | |||
| </TMPL_IF> | |||
| <div id="center-logo"> | |||
| <a href="<TMPL_VAR BASEURL>index.html" title="Back to main page"> | |||
| <img alt="awesome-logo" src="<TMPL_VAR BASEURL>images/awesome-logo.svg"> | |||
| <img alt="awesome-logo" src="<TMPL_VAR BASEURL>images/awesome-logo-1.png"> | |||
There was a problem hiding this comment.
The change provides possibilities for mobiles (small screen) and large 4K screens.
replacing svg pic to png is def the opposite
There was a problem hiding this comment.
@raven2cz ah, and one more thing about logo - these gray ovals in the right corner looking a bit out of place
There was a problem hiding this comment.
these gray ovals in the right corner
That's the Lua logo.
|
@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
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. |
There was a problem hiding this comment.
- new logo look-and-feel,
A rainbow-colored logo is a rather specific (and controversial) political statement these days. I don't think Awesome should walk that path.
Apart from that, the project's name is "Awesome", not "AwesomeWM". So the logo should stick with that, too.
And a third thing to keep in mind is that there are other form factors for that logo needed, too. The openhub iframe at the bottom shows the one with just "a", and the API docs use a variant of that with a big "a" and small, vertical "awesome".
- selected fonts,
Serving an entire new font just for h1s is way overblown. Especially since it looks identical to Noto Sans, used elsewhere.
Though that has its own problems, since it's only applied to #top and is lacking fallbacks.
I'd prefer fonts to just stick to platform-native font stacks.
- usage of buttons
I'm fine with the idea, but they should probably point to the release docs, not the git version.
But importing the entirety of Bootstrap for this is also way overblown. It should take only a few minutes to write the classes needed for the button styling and flex wrap here. Especially since the buttons styles will have to be overridden anyways.
- and of course those AW-points at the end.
I'm not a fan of those, either. They look rather gimmicky and restrict the list to 9 entries exactly (or 7, technically)
A general thing to notice is the lack of consistency in colors between
- the logo
- the default theme as displayed in the screenshot
- the screenshot borders
- the new buttons
- the logo in the openhub iframe
- the "15 years" thingy
- the API docs
index.mdwn
Outdated
| [System Tray](http://standards.freedesktop.org/systemtray-spec/systemtray-spec-latest.html). | ||
| * Does not distinguish between layers: there is no floating or tiled layer. | ||
| * Uses tags instead of workspaces: allow to place clients on several tags, and | ||
| # Awesome Key Features |
There was a problem hiding this comment.
Using "awesome" like that makes it ambiguous whether the adjective or the project name is used. Regular text alleviates that by making it bold, but that's not really an option here.
And the previous headline was perfectly fine.
index.mdwn
Outdated
| <div> | ||
| <ul class="awesome"> | ||
| <li>Very stable, fast and small codebase and footprint. | ||
| <li>Usage of the asynch <a href="http://xcb.freedesktop.org">XCB</a> | ||
| lib instead of the old synch <a href="http://en.wikipedia.org/wiki/Xlib">Xlib</a>; <b>awesome</b> has less latency against other WMs. | ||
| <li>Documented source code and API. | ||
| <li>No mouse needed: everything can be performed with the keyboard. | ||
| <li>Real multihead support (XRandR) with per screen desktops (tags). | ||
| <li>Implements many <a href="http://www.freedesktop.org">Freedesktop</a> standards: | ||
| <a href="http://standards.freedesktop.org/wm-spec/wm-spec-latest.html">EWMH</a>, <a href="http://standards.freedesktop.org/basedir-spec/basedir-spec-latest.html">XDG Base Directory</a>, <a href="http://standards.freedesktop.org/xembed-spec/xembed-spec-latest.html">XEmbed</a>, <a href="http://www.galago-project.org/specs/notification/">Desktop Notification</a>, <a href="http://standards.freedesktop.org/systemtray-spec/systemtray-spec-latest.html">System Tray</a>. | ||
| <li>Does not distinguish between layers: there is no floating or tiled layer. | ||
| <li>Uses tags instead of workspaces: allow to place clients on several tags, and | ||
| display several tags at the same time. | ||
| * A lot of Lua extensions to add features: dynamic tagging, widget feeding, | ||
| tabs, layouts, … | ||
| * [D-Bus](http://dbus.freedesktop.org) support. | ||
| * And more. | ||
| <li>A lot of Lua extensions to add features: dynamic tagging, widget feeding, | ||
| tabs, layouts, etc. | ||
| </ul> | ||
| </div> |
There was a problem hiding this comment.
If you apply the class to the wrapping div, you should be able to keep the Markdown for the list.
index.mdwn
Outdated
| <ul class="awesome"> | ||
| <li>Very stable, fast and small codebase and footprint. | ||
| <li>Usage of the asynch <a href="http://xcb.freedesktop.org">XCB</a> | ||
| lib instead of the old synch <a href="http://en.wikipedia.org/wiki/Xlib">Xlib</a>; <b>awesome</b> has less latency against other WMs. |
There was a problem hiding this comment.
<strong> should be used for making text bold, not <b>.
And since this prototype is about visuals, it should keep the text as-is, for now. Besides, having latency "against" something doesn't make sense.
index.mdwn
Outdated
| <span class="align_center"> | ||
| **awesome** is a highly configurable, next generation framework window | ||
| manager for X. It is very fast, extensible and licensed under the | ||
| [GNU GPLv2 license](http://www.gnu.org/licenses/old-licenses/gpl-2.0.html). | ||
|
|
||
| </span> | ||
| <span class="align_center"> | ||
| It is primarily targeted at power users, developers and any people dealing with | ||
| every day computing tasks and who want to have fine-grained control on their | ||
| graphical environment. | ||
|
|
||
| </span> |
There was a problem hiding this comment.
Block-level elements should not be put into an inline element (except when the inline element is <a>).
Markdown renders text blocks into <p> (a block-level element), <span> is an inline element. And changing that via display: block should only be done if absolutely necessary, as it breaks the semantics of those elements.
Use <div> if you want to wrap a <p>. And since you're applying the same style to both paragraphs, a single wrapper should be enough.
|
Additional things I would expect of/hope for in a modernization:
|
|
ah, one more thing i see when looking on it with the fresh head and eyes - font set to so you can actually see on the screenshot above that the font became monospace at the end |
|
@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.
|
index.mdwn
Outdated
| <li>Documented source code and API. | ||
| <li>No mouse needed: everything can be performed with the keyboard. | ||
| <li>Real multihead support (XRandR) with per screen desktops (tags). | ||
| <li>Implements many <a href="http://www.freedesktop.org">Freedesktop</a> standards: |
There was a problem hiding this comment.
i also don't like it much the moving from markdown to html for this basic stuff - it makes it less readable/editable than it was before
There was a problem hiding this comment.
i also don't like it much the moving from markdown to html for this basic stuff - it makes it less readable/editable than it was before
yes, it will be return back. You don't want AW-points, I will use css styling similar as before, the previous md parsing can be kept. It is no problem. But again, which design for points can select? There are many choices. If you don't want, ok, but better is say what you prefer, and show some details for your preference. If I make some new design which take half day, it is not accurate for both sides. So, if prefer some visualization, place links or image here, thx.
There was a problem hiding this comment.
just points is ok, when you have several accessories in your wardrobe it doesn't mean they all need to be worn at the same time 😺
index.mdwn
Outdated
| <div> | ||
| <ul class="awesome"> | ||
| <li>Very stable, fast and small codebase and footprint. | ||
| <li>Usage of the asynch <a href="http://xcb.freedesktop.org">XCB</a> |
There was a problem hiding this comment.
i don't like these hidden surprises with unadvertised rewording
There was a problem hiding this comment.
i don't like this hidden surprises with unadvertised rewording
yes. It is requirement from @sclu1034 too. He wants to keep original features point. I had to make short sentences to keep AW-points compact in small screens for vertical word awesomewm. But again, if the AW-points is removed, the original text will be used.
Text content and correct english will be separate task.
About buttons. @sclu1034 wants link to actual released documentation. Again, I'm not sure with it. Because actual guides and a lot of staff was made in git documentation only. Do you really want links to 2 years old documentation? I know that it is a release, but.....you know....
There was a problem hiding this comment.
could you please send a comment on that particular line of code with a button, i'm not really following what exactly do you mean about it
There was a problem hiding this comment.
<a href="[https://awesomewm.org/apidoc/documentation/07-my-first-awesome.md.html#](view-source:https://awesomewm.org/apidoc/documentation/07-my-first-awesome.md.html#)" title="Getting Started" class="btn btn-lg btn-primary mb-3 mb-lg-0 me-lg-3">
Get Started
</a>
<a href="[https://awesomewm.org/apidoc/](view-source:https://awesomewm.org/apidoc/)" title="Documentation" class="btn btn-lg btn-outline-secondary mb-3 mb-lg-0 me-lg-3">
Documentation
</a>
apidoc is new documentation. It means for awesome-git. The released awesome and its documentation api is different and has another link. This is my main decision to focus to new apidoc, because updated guides, one billion corrections in doc, better understanding etc. But we still haven't release of it. There is no easy decision and I don't want quick answer. My main change is mainly about these TWO BUTTONS, because I have minimally 2-3 questions every week to new apidoc and guides. It will spare my time very much, but not old documentation!
There was a problem hiding this comment.
mb leave buttons a links to stable doc, but below each of them put some sort of smaller text links which would lead to git-master doc?
we have somewhere a LONG topic (😹) there it was officially decided that it's exactly
what do you mean? |
just choose some as starting point, instead of having just random colors at all
we could consider default color scheme as default colors, but basically it's just one color, |
|
i tried generating the color palette which would match with default AwesomeWM theme (btw i think we should also use it as fallback for 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 |
Interesting. Then I guess that decision was just never applied? Because pretty much everywhere, it's still "Awesome" or "awesome".
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. |
awesomeWM/awesome#2193 (comment)
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) |
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:
The most important point is that fonts should be consistent, rather than the three different ones in this PR. |
|
@sclu1034 regfarding font, my point that this PR is bundling an OTF font file, but not really using it |
| body { | ||
| font-family: Verdana, Arial, sans-serif; |
There was a problem hiding this comment.
i expect that bundled OTF font to be used here or so
There was a problem hiding this comment.
(or prolly setting that --bs-font-sans-serif var to that value of bundled font)
There was a problem hiding this comment.
It's used in line 68, for h1 headings only.
There was a problem hiding this comment.
then it's not alright, is better to use same font family, just different weight and/or combining sans/serif/mono variants
|
and yeah - or just stick with default value of --bs-font-sans-serif everywhere, and not bundle that font at all |
Oh, right. The path in (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. 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
Is it all, missing some point? Agree with it? |
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
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
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 😺👍 |
|
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. |
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 <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:
And that's already all Bootstrap usage I could find.
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. |
Ideally, we would honour the |
The path would be correct, if your changes were served on a dedicated domain, like In Brave, the font is just as absent as in Firefox (actually worse, because that one defaults to Times New Roman, for some reason). |
Hover kept, huge blurred border discarded.
Tested now on windows 11 light theme with edge :-o Yes, it works. The light theme was shown as first correctly. Edge works with pages too. |
|
@actionless New demo updated. Requested points are done. |
|
thanks, just a small OCD-level thing, not very important:
|
Center anniversary image to letter 'S'.
|
@actionless anniversary centered, done. |
|
btw that's out of scope of this PR but i think we also need to change everywhere "awesome" in the text to "AwesomeWM" - i haven't been reading much the frontpage text before looking into your PR - and having it there written as "awesome" not only not matching with our current official "press name", but simply makes text confusing to read in english. |
|
just noticed the menu items don't have underline or color-change on hover - that's a technical usability mistake, not a stylistic preference according to the current style of links you set already - i think adding underline on mouse hover of menu items would make sense stylistically |
Do you mean top navigation menu, |
|
thing is that using an underline - conventional web symbol for a hyperlink - in order to highlight currently selected menu item is semantically very-very wrong, however that's a problem which current website already have, so it's like changing "awesome" to "AwesomeWM" - smth need to be done but not in scope of this PR (less changes - faster we'll get it merged, basically) in scope of this you could restore hover-color-change, similar to the current version of website |
hover-color-change added for navigation menu.
Yes, the content is new PR/PRs. It has to be changed. You know that I do not speak natively English; the sentences need updates. Maybe some link doesn't work after the years etc.
hover is done. |
|
@actionless So, what will be next steps? Is it possible to merge PR or we will wait for next dev team opinions? I just ask about next steps of workflow to final change of webpages. |
|
@raven2cz he have the rule of 2 approvals which is skipped only in emergency cases |
|
RN i've deployed it manually using my personal token (and next set it back to empty) |
|
I'm late to the party. Just passing by to say thank you for the work @raven2cz 🚀 |
|
Yeah, thanks a lot, it looks Awesome! Do you think you can add a dark CSS for the doc too? I think we are pretty happy with the bright version (lots of tweaks by a lot of people over a long time), but in dire need of a dark one. I did some groundwork last December when I pre-processed all auto-generated SVGs to support CSS, but this is as far as I got. I am neither good with color, nor up to date with CSS spell casting. I also made the doc use obscene amount of ram by embedding all SVG as |
|
@Elv13 arch. I tried to compile with ldoc and open pages, but I get corrupted image and missing awsome logo. I not sure, but before few months, it works normally...
Why did you convert all svg images as object? <img class="img-object" alt="" src="images/AUTOGEN_awful_popup_defaultconfig.svg">image is shown normally without mistakes. |
|
mmm, interesting failure mode. What is the distribution? That's probably worth reproducing and fixing on my side. But here's a more reliable way: # Install docker.io or podman, somehow
# apt/dnf/zipper/pacman/emerge/something
# Create a build dir
mkdir ~/awesome_builder; cd ~/awesome_builder`
# Get the source
git clone https://github.com/awesomewm/awesome
# Same as the CI, so hopefully same outcome
cat > Dockerfile << EOF
FROM ubuntu:20.04
RUN sed -i '/^#\sdeb-src /s/^#//' "/etc/apt/sources.list"
RUN apt update -y
RUN DEBIAN_FRONTEND=noninteractive apt build-dep awesome -y --no-install-recommends
RUN DEBIAN_FRONTEND=noninteractive apt install libxcb-xfixes0-dev \
librsvg2-common -y --no-install-recommends
CMD mkdir /awesome/build -p && \
cd /awesome/build && \
cmake .. && \
make -j2
EOF
# Build the container
docker build . -t awesome_builder
# Build awesome
docker run -ti --rm -v $PWD/awesome:/awesome awesome_builder
# Open in Firefox (or Chrome, whatever you use)
firefox awesome/build/doc/index.htmlYou can edit the |
|
@Elv13 Thanks. Docker works ok. Output is correct. I have a pure arch. It seems that some new lib version has to be changed around 2 months ago, because it worked before... I have important just few questions for dark mode.
|
Not much has been done, here's the commit to use CSS for the "black" color instead of hardcoding it in SVG Here's the commit that added the SVG post-processing: So for now there isn't many colors we can replaces, but we can rather easily add the other ones as needed. The main reason I originally did it was fix the high contrast usability support. It had black on black content.
Having the same button as the main website and share the value would be nice, but not 100% required for the first PR. |
@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/