Re: Adaptive main page for openbsd website.
Hi guys,
here is another proposal: https://adrianobarbosa.xyz/openbsd/www/index.html
This layout is made of 3 s: menu and main content side by side
and footer on the bottom with rack picture and associate projects. I
also embedded all modifications on default CSS and new CSS in
index.html, for while.
There is still some work to be done, footer may break sidebar
layout, for example. Tested this layout on firefox-esr, chromium and
Android.
Best
Index: index.html
===
RCS file: /cvs/www/index.html,v
retrieving revision 1.738
diff -u -p -r1.738 index.html
--- index.html 8 Nov 2019 20:01:22 - 1.738
+++ index.html 25 Dec 2019 21:26:59 -
@@ -3,10 +3,122 @@
OpenBSD
+
https://www.openbsd.org/;>
+
+/* changes in default css */
+body {
+margin: 0;
+padding: 0;
+max-width: 100%;
+}
+#project-main {
+position: static;
+}
+/* new classes and ids */
+#main .header {
+margin: 0;
+text-align: center;
+}
+.puffy-img {
+width: 100%;
+max-width: 599px;
+height: auto;
+}
+.content {
+margin-left: 260px;
+position: absolute;
+}
+.sidebar {
+width: 260px;
+}
+.sidebar table {
+width: 100%;
+}
+.footer {
+width: 100%;
+}
+.footer td:first-child {
+width: 241px;
+}
+.footer table {
+width: 100%;
+}
+@media screen and (max-width: 650px) {
+#project-main tr:first-child {
+border-top: 11px solid;
+border-color: #007B9C;
+}
+#project-main tr td:first-child {
+border-right: 0;
+}
+.sidebar {
+width: auto;
+}
+.sidebar table {
+width: 100%;
+}
+.content {
+margin-left: 0;
+position: relative;
+}
+.footer #project-main tr:first-child {
+border-top: 0;
+vertical-align: top;
+}
+.footer #project-main td:first-child {
+background-color: white;
+width: auto;
+}
+}
+
+
+
+
+
+
+
+
+
+
+
+
+ Only two remote holes in the default install, in a heck of a long time!
+
+
+ The OpenBSD project produces a FREE,
multi-platform 4.4BSD-based
+ UNIX-like operating system. Our efforts emphasize portability,
+ standardization, correctness, proactive
security and
+ integrated cryptography. As an example of the
+ effect OpenBSD has, the popular https://www.openssh.com;>OpenSSH
+ software comes from OpenBSD.
+
+
+ OpenBSD is freely available from our download sites.
+
+
+ The current release is
+ OpenBSD 6.6, released Oct 17, 2019.
+
+
+ OpenBSD is developed entirely by volunteers.
+ The project's development environment
+ and developer events
+ are funded through contributions collected by
+ https://www.openbsdfoundation.org;>The OpenBSD Foundation.
+ Contributions ensure that OpenBSD will remain a vibrant and
+ free operating system.
+
+
+
+
@@ -57,39 +169,11 @@
https://www.openbsdfoundation.org/;>OpenBSD
Foundation
-
-
-
-
-
-
-
- Only two remote holes in the default install, in a heck of a long time!
-
-
- The OpenBSD project produces a FREE,
multi-platform 4.4BSD-based
- UNIX-like operating system. Our efforts emphasize portability,
- standardization, correctness, proactive
security and
- integrated cryptography. As an example of the
- effect OpenBSD has, the popular https://www.openssh.com;>OpenSSH
- software comes from OpenBSD.
-
-
- OpenBSD is freely available from our download sites.
-
-
- The current release is
- OpenBSD 6.6, released Oct 17, 2019.
-
-
- OpenBSD is developed entirely by volunteers.
- The project's development environment
- and developer events
- are funded through contributions collected by
- https://www.openbsdfoundation.org;>The OpenBSD Foundation.
- Contributions ensure that OpenBSD will remain a vibrant and
- free operating system.
+
+
+
+
@@ -105,3 +189,4 @@
https://mandoc.bsd.lv;>mandoc,
https://www.libressl.org;>LibreSSL
+
Em seg., 23 de dez. de 2019 às 01:50, Aaron Miller
escreveu:
>
> It looks good to me. I tried it in Firefox on my laptop and on
> Android and it seems fine. I also tried it in lynx and found it
> was navigable.
>
> --Aaron
>
> On Sun, 2019-12-22 at 19:25 +0300, v...@vtsoft.dev wrote:
> > Hello everyone,
> >
> > The main page of openbsd.org is currently not responsive. It
> > looks bad
> > when I access it from
> > my mobile phone. I offer my version of the home page. My CSS
> >
Re: Adaptive main page for openbsd website.
It looks good to me. I tried it in Firefox on my laptop and on Android and it seems fine. I also tried it in lynx and found it was navigable. --Aaron On Sun, 2019-12-22 at 19:25 +0300, v...@vtsoft.dev wrote: > Hello everyone, > > The main page of openbsd.org is currently not responsive. It > looks bad > when I access it from > my mobile phone. I offer my version of the home page. My CSS > file is 4 > times smaller than it > is now and adapts to the screen size of the device. Please, > check it: > https://vttv.xyz > . Also, > you can directly download archive with sources: > https://vttv.xyz./openbsd.tar.gz > . >
Re: Adaptive main page for openbsd website.
On Sun, 22 Dec 2019 17:22:16 -0500 Chris Bennett wrote: > On Sun, Dec 22, 2019 at 04:44:11PM -0500, Steve Litt wrote: > > On Sun, 22 Dec 2019 19:25:00 +0300 > > v...@vtsoft.dev wrote: > > > > > Hello everyone, > > > > > > The main page of openbsd.org is currently not responsive. It looks > > > bad when I access it from > > > my mobile phone. I offer my version of the home page. My CSS file > > > is 4 times smaller than it > > > is now and adapts to the screen size of the device. Please, check > > > it: https://vttv.xyz. Also, > > > you can directly download archive with sources: > > > https://vttv.xyz./openbsd.tar.gz. > > > > Your page is very nicely adaptive, without the horrible jumps often > > seen with media queries. I'm not a fan of "mobile devices" but at > > this point in history I think websites need to accommodate to them. > > Most of my newest Troubleshooters.Com pages are at least moderately > > adaptive. > > > > I'd suggest you make the horrible, blood red graphic 1/2 size. It > > looks awful on the current page, and because it's full size on > > yours, it looks even awfuller. > > > > The font on the current OpenBSD web page is nice and readable. On > > your adaptive, it's thin, reedy, ugly, pixellated, and hard to > > read. If you're setting a specific font, I suggest you refrain from > > that and let the user's browser settings rule. That way, your page > > is comfortable for the guy with 20/10 vision or the guy with 20/60 > > vision. If you're not declaring a font, something's going wrong. > > > > The blue sidecar navigator in the original website is handy, good > > looking, and gives the reader the confidence to go where he wants. > > At the expense of one more user click, you could put a "navigation > > links" link or button, which refers to your box array, right under > > the red graphic. > > > > What I'd prefer, if it doesn't require a media query or too much > > javascript, would be to retain the sidecar at big screen sizes, but > > at a certain point collapse it and replace with something else: > > Perhaps your current bottom array of boxes with a link to them on > > top. > > > > What's going to be a bigger challenge is doing this to pages > > containing or . I've never been able to get those to > > fold, and even if they did, the code would then become misleading. > > > > SteveT > > > > Steve Litt > > December 2019 featured book: Rapid Learning for the 21st Century > > http://www.troubleshooters.com/rl21 > > > > If it won't work with a text browser such as lynx, it's not OK. > You can't ^Z chrome or firefox. > You can't use Javascript with text browsers. > Once you walk away from text browsers, script snippets to read pages, > etc., too much is lost. > I'm genuinely only interested in content, not appearance. > I frequently need a text browser over SSH. As in many times a month. > Please just patch content, not good looks. In that case (and you've brought up a good point), a link on top pointing to the navigation boxes on the bottom does the job. No Javascript needed (as far as I know). SteveT Steve Litt December 2019 featured book: Rapid Learning for the 21st Century http://www.troubleshooters.com/rl21
Re: Adaptive main page for openbsd website.
On Sun, Dec 22, 2019 at 04:44:11PM -0500, Steve Litt wrote: > On Sun, 22 Dec 2019 19:25:00 +0300 > v...@vtsoft.dev wrote: > > > Hello everyone, > > > > The main page of openbsd.org is currently not responsive. It looks > > bad when I access it from > > my mobile phone. I offer my version of the home page. My CSS file is > > 4 times smaller than it > > is now and adapts to the screen size of the device. Please, check it: > > https://vttv.xyz. Also, > > you can directly download archive with sources: > > https://vttv.xyz./openbsd.tar.gz. > > Your page is very nicely adaptive, without the horrible jumps often > seen with media queries. I'm not a fan of "mobile devices" but at this > point in history I think websites need to accommodate to them. Most of > my newest Troubleshooters.Com pages are at least moderately adaptive. > > I'd suggest you make the horrible, blood red graphic 1/2 size. It looks > awful on the current page, and because it's full size on yours, it > looks even awfuller. > > The font on the current OpenBSD web page is nice and readable. On your > adaptive, it's thin, reedy, ugly, pixellated, and hard to read. If > you're setting a specific font, I suggest you refrain from that and let > the user's browser settings rule. That way, your page is comfortable > for the guy with 20/10 vision or the guy with 20/60 vision. If you're > not declaring a font, something's going wrong. > > The blue sidecar navigator in the original website is handy, good > looking, and gives the reader the confidence to go where he wants. At > the expense of one more user click, you could put a "navigation links" > link or button, which refers to your box array, right under the red > graphic. > > What I'd prefer, if it doesn't require a media query or too much > javascript, would be to retain the sidecar at big screen sizes, but at > a certain point collapse it and replace with something else: Perhaps > your current bottom array of boxes with a link to them on top. > > What's going to be a bigger challenge is doing this to pages containing > or . I've never been able to get those to fold, and even if > they did, the code would then become misleading. > > SteveT > > Steve Litt > December 2019 featured book: Rapid Learning for the 21st Century > http://www.troubleshooters.com/rl21 > If it won't work with a text browser such as lynx, it's not OK. You can't ^Z chrome or firefox. You can't use Javascript with text browsers. Once you walk away from text browsers, script snippets to read pages, etc., too much is lost. I'm genuinely only interested in content, not appearance. I frequently need a text browser over SSH. As in many times a month. Please just patch content, not good looks. Thanks, Chris Bennett
Re: Adaptive main page for openbsd website.
On Sun, 22 Dec 2019 19:25:00 +0300 v...@vtsoft.dev wrote: > Hello everyone, > > The main page of openbsd.org is currently not responsive. It looks > bad when I access it from > my mobile phone. I offer my version of the home page. My CSS file is > 4 times smaller than it > is now and adapts to the screen size of the device. Please, check it: > https://vttv.xyz. Also, > you can directly download archive with sources: > https://vttv.xyz./openbsd.tar.gz. Your page is very nicely adaptive, without the horrible jumps often seen with media queries. I'm not a fan of "mobile devices" but at this point in history I think websites need to accommodate to them. Most of my newest Troubleshooters.Com pages are at least moderately adaptive. I'd suggest you make the horrible, blood red graphic 1/2 size. It looks awful on the current page, and because it's full size on yours, it looks even awfuller. The font on the current OpenBSD web page is nice and readable. On your adaptive, it's thin, reedy, ugly, pixellated, and hard to read. If you're setting a specific font, I suggest you refrain from that and let the user's browser settings rule. That way, your page is comfortable for the guy with 20/10 vision or the guy with 20/60 vision. If you're not declaring a font, something's going wrong. The blue sidecar navigator in the original website is handy, good looking, and gives the reader the confidence to go where he wants. At the expense of one more user click, you could put a "navigation links" link or button, which refers to your box array, right under the red graphic. What I'd prefer, if it doesn't require a media query or too much javascript, would be to retain the sidecar at big screen sizes, but at a certain point collapse it and replace with something else: Perhaps your current bottom array of boxes with a link to them on top. What's going to be a bigger challenge is doing this to pages containing or . I've never been able to get those to fold, and even if they did, the code would then become misleading. SteveT Steve Litt December 2019 featured book: Rapid Learning for the 21st Century http://www.troubleshooters.com/rl21
Re: Adaptive main page for openbsd website.
I prefer it the way it is today, non-adaptive -- one size, no matter what client. That way I can navigate the layout more familiarly, with eyes-closed. Thanks. -ag On Sun, Dec 22, 2019 at 9:50 AM wrote: > > Hello everyone, > > The main page of openbsd.org is currently not responsive. It looks bad > when I access it from > my mobile phone. I offer my version of the home page. My CSS file is 4 > times smaller than it > is now and adapts to the screen size of the device. Please, check it: > https://vttv.xyz. Also, > you can directly download archive with sources: > https://vttv.xyz./openbsd.tar.gz. >
