Hi guys,
here is another proposal: https://adrianobarbosa.xyz/openbsd/www/index.html
This layout is made of 3 <div>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 <div> 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 -0000 1.738
+++ index.html 25 Dec 2019 21:26:59 -0000
@@ -3,10 +3,122 @@
<meta charset=utf-8>
<title>OpenBSD</title>
<meta name="description" content="the main OpenBSD page">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="canonical" href="https://www.openbsd.org/";>
<link rel="stylesheet" href="openbsd.css">
+<style>
+ /* 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;
+ }
+ }
+</style>
+
+<div id="main" class="content">
+<table>
+ <tr>
+ <td>
+ <h1 class="header">
+ <a href="66.html">
+ <img class="puffy-img" src="images/puffy66.gif" alt="[OpenBSD
6.6]"></a>
+ </h1>
+
+ <p id="callout">
+ Only two remote holes in the default install, in a heck of a long time!
+
+ <p>
+ The OpenBSD project produces a <strong>FREE</strong>,
multi-platform 4.4BSD-based
+ UNIX-like operating system. Our efforts emphasize portability,
+ standardization, correctness, <a href="security.html">proactive
security</a> and
+ <a href="crypto.html">integrated cryptography</a>. As an example of the
+ effect OpenBSD has, the popular <a
href="https://www.openssh.com";>OpenSSH</a>
+ software comes from OpenBSD.
+
+ <p>
+ OpenBSD is freely available from our download sites.
+
+ <p>
+ The current release is
+ <a href="66.html">OpenBSD 6.6</a>, released Oct 17, 2019.
+
+ <p>
+ OpenBSD is developed entirely by volunteers.
+ The project's development environment
+ and <a href="hackathons.html">developer events</a>
+ are funded through contributions collected by
+ <a href="https://www.openbsdfoundation.org";>The OpenBSD Foundation</a>.
+ Contributions ensure that OpenBSD will remain a vibrant and
+ <a href="policy.html">free</a> operating system.
+</table>
+</div>
+
+<div class="sidebar">
<table id="project-main">
<tr class="align-top">
<td>
@@ -57,39 +169,11 @@
<li><a href="https://www.openbsdfoundation.org/";><i>OpenBSD
Foundation</i></a>
</ul>
</td>
- <td>
- <h1 class="header">
- <a href="66.html">
- <img src="images/puffy66.gif" height="198" width="599"
alt="[OpenBSD 6.6]"></a>
- </h1>
-
- <p id="callout">
- Only two remote holes in the default install, in a heck of a long time!
-
- <p>
- The OpenBSD project produces a <strong>FREE</strong>,
multi-platform 4.4BSD-based
- UNIX-like operating system. Our efforts emphasize portability,
- standardization, correctness, <a href="security.html">proactive
security</a> and
- <a href="crypto.html">integrated cryptography</a>. As an example of the
- effect OpenBSD has, the popular <a
href="https://www.openssh.com";>OpenSSH</a>
- software comes from OpenBSD.
-
- <p>
- OpenBSD is freely available from our download sites.
-
- <p>
- The current release is
- <a href="66.html">OpenBSD 6.6</a>, released Oct 17, 2019.
-
- <p>
- OpenBSD is developed entirely by volunteers.
- The project's development environment
- and <a href="hackathons.html">developer events</a>
- are funded through contributions collected by
- <a href="https://www.openbsdfoundation.org";>The OpenBSD Foundation</a>.
- Contributions ensure that OpenBSD will remain a vibrant and
- <a href="policy.html">free</a> operating system.
+</table>
+</div>
+<div class="footer">
+<table id="project-main">
<tr class="align-bottom">
<td>
<a href="images/rack2009.jpg">
@@ -105,3 +189,4 @@
<a href="https://mandoc.bsd.lv";>mandoc</a>,
<a href="https://www.libressl.org";>LibreSSL</a>
</table>
+</div>
Em seg., 23 de dez. de 2019 às 01:50, Aaron Miller
<[email protected]> 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, [email protected] 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
> > .
> >
>
--
Adriano
