diff options
author | Harald Eilertsen <haraldei@anduin.net> | 2019-05-01 21:11:53 +0200 |
---|---|---|
committer | Harald Eilertsen <haraldei@anduin.net> | 2019-05-01 21:11:53 +0200 |
commit | 751b112b7ab1766aa08d3422ecd1924354b9cd59 (patch) | |
tree | 5982c8cc5fe861209d8e7baf9ca6e39b48dc9e89 /app/assets | |
parent | a7a2fc57cf458fee98bad03b3c2a40b6e8d75606 (diff) | |
download | hmnoweb-751b112b7ab1766aa08d3422ecd1924354b9cd59.tar.gz hmnoweb-751b112b7ab1766aa08d3422ecd1924354b9cd59.tar.bz2 hmnoweb-751b112b7ab1766aa08d3422ecd1924354b9cd59.zip |
Move towards flexbox layout.
Main page and header now use flexbox instead of not quite working
floats and position relative/absolute. This really simplifies things.
Perhaps we'll even be able to make a mobile friendly site some day.
Various other cosmetic tweaks have snuch in too. The page now has a
max size of about 25cm, and some other minor tweaks.
Diffstat (limited to 'app/assets')
-rw-r--r-- | app/assets/stylesheets/_color_scheme.scss | 1 | ||||
-rw-r--r-- | app/assets/stylesheets/hmno_banners.scss | 4 | ||||
-rw-r--r-- | app/assets/stylesheets/hmno_header.scss | 14 | ||||
-rw-r--r-- | app/assets/stylesheets/hmno_page.scss | 23 | ||||
-rw-r--r-- | app/assets/stylesheets/hmno_sidebars.scss | 8 |
5 files changed, 24 insertions, 26 deletions
diff --git a/app/assets/stylesheets/_color_scheme.scss b/app/assets/stylesheets/_color_scheme.scss index b69a2ea..9b94189 100644 --- a/app/assets/stylesheets/_color_scheme.scss +++ b/app/assets/stylesheets/_color_scheme.scss @@ -49,3 +49,4 @@ $sidebar-width: 200px; $sidebar-margin: $sidebar-width + 2 * $spacing; $min-center-width: 500px; $min-page-width: 2 * $sidebar-margin + $min-center-width + 4 * $spacing; +$max-page-width: 25cm; diff --git a/app/assets/stylesheets/hmno_banners.scss b/app/assets/stylesheets/hmno_banners.scss index f54a7fa..1cfb1c2 100644 --- a/app/assets/stylesheets/hmno_banners.scss +++ b/app/assets/stylesheets/hmno_banners.scss @@ -16,10 +16,6 @@ @import "color_scheme"; #slider { - margin: { - left: $sidebar-margin; - right: $sidebar-margin; - } text-align: center; a { display: block; diff --git a/app/assets/stylesheets/hmno_header.scss b/app/assets/stylesheets/hmno_header.scss index 4f722fd..32e2760 100644 --- a/app/assets/stylesheets/hmno_header.scss +++ b/app/assets/stylesheets/hmno_header.scss @@ -16,6 +16,8 @@ @import "color_scheme"; #header { + display: flex; + background: { color: $header-bg; image: image_url("header-metal-bg.jpg"); @@ -27,13 +29,11 @@ margin-bottom: $spacing; #logo { - width: 200px; - float: left; + flex: 0 0 200px; } #merchlink { - width: 200px; - float: right; + flex: 0 0 200px; text-align: center; img { @@ -47,6 +47,12 @@ } } + #menu-area { + display: flex; + flex-direction: column-reverse; + flex-grow: 1; + } + #menu { text-align: center; font-size: 120%; diff --git a/app/assets/stylesheets/hmno_page.scss b/app/assets/stylesheets/hmno_page.scss index 476da14..3a6c9d5 100644 --- a/app/assets/stylesheets/hmno_page.scss +++ b/app/assets/stylesheets/hmno_page.scss @@ -16,24 +16,23 @@ @import "color_scheme"; #page_container { + display: flex; + flex-direction: column; background: $bg; min-width: $min-page-width; + max-width: $max-page-width; + margin: { + left: auto; + right: auto; + } #page { - position: relative; - min-height: 1000px; + display: flex; + flex-direction: row; padding: $spacing / 2; - #body_content { - min-width: $min-center-width; - margin: { - left: $sidebar-width + 3 * $spacing; - right: $sidebar-width + 3 * $spacing; - } - padding: { - left: $spacing / 2; - right: $spacing / 2; - } + #page-content-area { + flex: 1 1 500px; } } diff --git a/app/assets/stylesheets/hmno_sidebars.scss b/app/assets/stylesheets/hmno_sidebars.scss index c196ac2..dbc68ab 100644 --- a/app/assets/stylesheets/hmno_sidebars.scss +++ b/app/assets/stylesheets/hmno_sidebars.scss @@ -27,13 +27,9 @@ } #left_sidebar, #right_sidebar { - position: absolute; width: 200px; - top: 0; - bottom: $spacing; border: 1px groove $dark-border-fg; background-color: $bg2; - overflow: auto; h2 { @include sidebar-headers; } @@ -57,11 +53,11 @@ } #left_sidebar { - left: $spacing; + margin-right: $spacing; } #right_sidebar { - right: $spacing; + margin-left: $spacing; } .sidebar_module { |