Rework displ - Done with CSS?

YASM sitegen zola

2020-08-29


All started with small screen compatability,

I figured having nav bar on right and overflow is the laziest way to achieve this.

Soon I realized, No special display elements just random css margins were everywhere. Decided to rework css from scratch.

So,

---------------------------------------            ---------------------------------------
|       version 1                     |--> Body <--|        version 2                    |
|  ---------------------------------  |            |  ---------------------------------  |
|  |                       |       |  |            |  |                     |         |  |
|  |                       |       |  |            |  |                     |  nav    |  |
|  |      main             |  nav  |  |            |  |        main         |---------|  |
|  |                       |       |  |            |  |                     |         |  |
|  |                       |       |  |            |  |                     |  aside  |  |
|  |                       |       |  |            |  |                     |         |  |
|  |                       |       |  |            |  |                     |---------|  |
|-------------------------------------|            |  |                     |  footer |  |
|             footer                  |            |  |                     |         |  |
---------------------------------------            ---------------------------------------

No other way than tables?

Take 1: table

<body>                   
<main> .. </main>
<nav> .. </nav>
<footer> .. </footer>
</body>

body { display: table;}
main,nav,footer { display: table-cell; }
nav { vertical-align: top; }
footer { vertical-align: bottom; }
<!-- wdym by gaps?? -->

Take 2: flexbox

<body>                   
<nav> .. </nav>
<main> .. </main>
<footer> .. </footer>
</body>

body { display: flex; }
nav { order: 2; }
<!-- so stupid no way to place footer --> 

Take 3: Grid

All you need to know for creating a webpage (2020) - Grid Templates

grid-template: "main nav"
	       "main aside"
               "main footer"

Thought I'm done, but here's the real pain.
Spleen (call me crazy, no turning back) really hates random dimensions, no exact way to find what's right. Tinkered all possibles ways, worth it? heck yeah!

Changes

#979dae #1e1a8b (original, prefer this personally retains early web look)
#121212 #50b5b5 (Darker)

Screens

original_theme_index

dark_theme_index

dark_theme_blog_list

Stranger on cyberspace, hope it renders great. Pop a mail if it appeals, feedbacks or looks crap (0_0)
hisacro [at] this domain.