shmage-site

scripts and documents that generate shmage.xyz
git clone git://git.shmage.xyz/shmage-site.git
Log | Files | Refs

commit e3517a3ea805b4f44105c0c753f4546260928103
parent ca92e884a322cbe58ca0517e1947a455d28bc40f
Author: Ian Ressa <ian@eonn.xyz>
Date:   Thu,  3 Nov 2022 15:54:57 -0400

put index page elements in a flexbox so I can add side columns

Diffstat:
Msrc/index.html | 16++++++++++++----
Msrc/styles.css | 21++++++++++++++++++++-
2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/index.html b/src/index.html @@ -9,6 +9,7 @@ <body> <a href="https://shmage.xyz"><img src="/images/shmagelogo.svg" alt="SHMAGE" style="margin:auto; display:block;" width="500em"/></a> + <div class="home_box"> <div class="short"> <div class="border_stone"> <div class="border"> @@ -31,18 +32,25 @@ On a quest to find the superior way to use a personal computer.</p> <li>My Matrix handle is <strong>@eonn:chat.familydesserttime.com</strong>.</li> <li>I also publish my thoughts and experiences on a <a href="https://shmage.xyz/blog-index.html">blog</a></li> </ul> - -<p><a href="https://shmage.xyz"><img src="images/shmage_button.gif" height="31" width="88"/></a> <a href="https://gnu.org/software/emacs"><img src="images/emacs_button.gif" alt="made with emacs" height="31" width="88"/></a> <a href="https://gnu.org/licenses/gpl-3.0.en.html"><img src="images/gplv3_button.gif" alt="gplv3" height="31" width="88"/></a> <a href="https://rollalong.org"><img src="images/rollalong_button.jpg" alt="rollalong.org" height="31" width="88"></a></p> -<p><a href="https://waffelo.net"><img src="images/waffelo_button.png" height="31" width="88"/></a></p> <hr> <a href="https://shmage.xyz">home</a> | <a href="https://shmage.xyz/blog-index.html">blog index</a> | <a href="https://shmage.xyz/rss.xml">rss</a> | <a href="mailto:ian@shmage.xyz">contact me</a> | <a href="https://shmage.xyz/eonn.gpg">PGP public key</a><sub><a href="https://emailselfdefense.fsf.org/en/">?</a></sub> </div> -</div> + </div> <div style="text-align:center;"> <div class="webring_border"> <p align="center"><a href="https://hotlinewebring.club/shmage/previous">&lt;- previous</a> <a href="https://hotlinewebring.club"><img src="/images/globe.gif"/> Hotline Webring <img src="/images/globe.gif"/></a> <a href="https://hotlinewebring.club/shmage/next">next -&gt;</a></p> </div> </div> + </div> + <div class="sidebar" style="order: -1; visibility: hidden;"> + </div> + <div class="sidebar"> + <p><a href="https://shmage.xyz"><img src="images/shmage_button.gif" height="31" width="88"/></a></p> + <p><a href="https://gnu.org/software/emacs"><img src="images/emacs_button.gif" alt="made with emacs" height="31" width="88"/></a></p> + <p><a href="https://gnu.org/licenses/gpl-3.0.en.html"><img src="images/gplv3_button.gif" alt="gplv3" height="31" width="88"/></a></p> + <p><a href="https://rollalong.org"><img src="images/rollalong_button.jpg" alt="rollalong.org" height="31" width="88"></a></p> + <p><a href="https://waffelo.net"><img src="images/waffelo_button.png" height="31" width="88"/></a></p> + </div> </div> </body> </html> diff --git a/src/styles.css b/src/styles.css @@ -18,8 +18,9 @@ body { } .short { + order: 0; max-width: 50em; - margin: 20 auto; + margin: 20 20 20 20; left: 50%; } @@ -60,6 +61,24 @@ body { border-image-width: 30px; } +.home_box{ + display: flex; + flex-wrap: nowrap; + justify-content: center; + align-items: center; +} + +.sidebar{ + order: 1; + width: 100px; + margin: 20 20 20 20; + text-align: center; + border-color: #ffffff; + border-style: ridge; + border-width: 4px; + background-color: #c0c0c0; +} + ul{ max-width: 50em; margin: 20 auto;