aboutsummaryrefslogtreecommitdiffstats
path: root/app/assets
diff options
context:
space:
mode:
authorHarald Eilertsen <haraldei@anduin.net>2019-05-01 21:11:53 +0200
committerHarald Eilertsen <haraldei@anduin.net>2019-05-01 21:11:53 +0200
commit751b112b7ab1766aa08d3422ecd1924354b9cd59 (patch)
tree5982c8cc5fe861209d8e7baf9ca6e39b48dc9e89 /app/assets
parenta7a2fc57cf458fee98bad03b3c2a40b6e8d75606 (diff)
downloadhmnoweb-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.scss1
-rw-r--r--app/assets/stylesheets/hmno_banners.scss4
-rw-r--r--app/assets/stylesheets/hmno_header.scss14
-rw-r--r--app/assets/stylesheets/hmno_page.scss23
-rw-r--r--app/assets/stylesheets/hmno_sidebars.scss8
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 {