From 0fbf7d8dc69431f5656c15375d9d9ba39a5a6af9 Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sat, 31 Oct 2015 13:12:23 -0400 Subject: [PATCH] make layout mosly responsive --- inc/wfpl | 2 +- style.styl | 85 +++++++++++++++++++++++++++++++++++++++++++++++++-------- template.html | 5 ++++ 3 files changed, 79 insertions(+), 13 deletions(-) diff --git a/inc/wfpl b/inc/wfpl index 94d4acb..eb26817 160000 --- a/inc/wfpl +++ b/inc/wfpl @@ -1 +1 @@ -Subproject commit 94d4acb8c060066319e40063ad68d862213a3d9c +Subproject commit eb268173999615e857af705883ce8c94c5c039dd diff --git a/style.styl b/style.styl index 003da09..2807eb5 100644 --- a/style.styl +++ b/style.styl @@ -1,19 +1,40 @@ @require 'inc/wfpl/stylus_helpers.styl' @require '.sha1sums.styl' -// dimensions -site_width = 934px // inside the shadow -site_padding = 30px -content_width = (site_width - (site_padding * 2)) +// constants +golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part + +//////////////// +// SETTINGS { // +//////////////// + +// dimensions (max. these will scale down for smaller screens except in ie8) +site_width = 900px +site_padding = 15px +sidebar_padding = 20px +sidebar_width = (site_width - sidebar_padding) * golden_ratio_small +mobile_menu_width = 600px // switch to mobile menu when screen gets this small + +// fonts font_size_normal = 15px font_size_small = 13px font_size_tiny = 11px -site_column_gap = 40px // colors content_bg = #fff content_fg = #000 -window_bg = #e6e7e8 +window_bg = #fff + +//////////////////// +// } END SETTINGS // +//////////////////// + +// the auto-calculated bits +content_width = site_width +// some math for responsive mode (when the above dimensions don't fit) +site_padding_pct = site_padding / (site_width + 2 * site_padding) +sidebar_padding_pct = sidebar_padding / content_width +vw_to_content_width = 1 - 2 * site_padding_pct // always show vertical scrollbar, so content doesn't shift around when // switching from tall to short pages @@ -166,12 +187,9 @@ ckeditor('admin_pages', 'content', content_width) #centerer position: relative background: content_bg - padding-top: 150px - padding-right: site_padding - padding-bottom: site_padding - padding-left: site_padding - width: site_width - @padding-left - @padding-right - margin: 10px auto + padding: site_padding + max-width: content_width + margin: 0 auto nav#site-nav padding-bottom: 20px @@ -299,3 +317,46 @@ table.evenodd .password_suggestion & + & margin-left: 10px + +.wfpl_fr + display: block + float: right + margin-left: sidebar_padding + margin-bottom: 1% + width: sidebar_width // simple when big, and for ie8 (which ignores media queries) + +@media screen and (max-width: (content_width / vw_to_content_width)) + #centerer + width: auto + margin: 0 + padding: unit(site_padding_pct * 100, '%') + .wfpl_fr + width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5) + margin-left: unit(sidebar_padding_pct * 100, '%') +@media screen and (max-width: (sidebar_width / vw_to_content_width)) + .wfpl_fr + float: none + margin-left: 0 + margin-bottom: 0 + width: 100% +.wfpl_fr > .wfpl_i + display: block + width: 100% + height: auto + background-size: contain + background-repeat: no-repeat + background-position: 50% top + font-size: 80% + text-align: right + +#mobile_menu_button + display: none; +#mobile_menu_check + display: none; +@media screen and (max-width: (mobile_menu_width)) + #mobile_menu_check:not(:checked) + ul + display: none + nav#site-nav ul > li, #mobile_menu_button + display: block + background: #eee + padding: 3px 10px 4px 17px diff --git a/template.html b/template.html index 80920c0..7ab8d1f 100644 --- a/template.html +++ b/template.html @@ -2,6 +2,7 @@ ~$title html~~$cms_title html~ + -- 1.7.10.4