first stab at paypal_ipn framework

[wfpl-cms.git] / style.styl

diff --git a/style.styl b/style.styl
index 2807eb5..3e4645c 100644 (file)
--- a/style.styl
+++ b/style.styl
@@ -9,6 +9,7 @@ golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part
 ////////////////
 
 // dimensions (max. these will scale down for smaller screens except in ie8)
+// if you change these, update config.php too
 site_width = 900px
 site_padding = 15px
 sidebar_padding = 20px
@@ -16,6 +17,7 @@ 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_large = 18px
 font_size_normal = 15px
 font_size_small = 13px
 font_size_tiny = 11px
@@ -236,7 +238,7 @@ footer
 
 
 
-// floating images (from pastable example code on admin_images)
+// obsolete floating images (from pastable example code on admin_images)
 span.wfpl_ifl
        display: block
        float: left
@@ -318,45 +320,108 @@ table.evenodd
        & + &
                margin-left: 10px
 
-.wfpl_fr
+.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi
        display: block
+       margin-bottom: 1%
+       clear: both
+       font-size: 80%
+       text-align: right
+       .wfpl_i
+               display: block
+               width: 100%
+               background-size: 100% auto
+               background-repeat: no-repeat
+               background-position: 50% top
+               margin-bottom: 3px // padding above caption
+               // clip line with   (which is there so ckeditor doesn't delete this)
+               height: 0
+               overflow: hidden
+.wfpl_li, .wfpl_ci, .wfpl_ri
+       width: sidebar_width // when window is large
+.wfpl_li
+       float: left
+       margin-right: sidebar_padding
+.wfpl_ci, .wfpl_fi
+       margin-left: auto
+       margin-right: auto
+.wfpl_ri
        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
+       .wfpl_li, .wfpl_ri
                width: linear_scale_calc(content_width, sidebar_width, sidebar_width, sidebar_width * .5)
+       .wfpl_ri
                margin-left: unit(sidebar_padding_pct * 100, '%')
+       .wfpl_li
+               margin-right: unit(sidebar_padding_pct * 100, '%')
 @media screen and (max-width: (sidebar_width / vw_to_content_width))
-       .wfpl_fr
+       .wfpl_li, .wfpl_ci, .wfpl_ri
                float: none
                margin-left: 0
-               margin-bottom: 0
+               margin-right: 0
                width: 100%
-.wfpl_fr > .wfpl_i
-       display: block
-       width: 100%
-       height: auto
+
+// does not contain a .wfpl_i
+.wfpl_thumb
+       display: inline-block
+       width: 70px
+       height: 70px;
        background-size: contain
+       background-position: 50% 50%
        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
+       #mobile_menu_check:not(:checked) + div
                display: none
+       #mobile_menu_check:checked + div
+               display: block
+               position: relative
+               > ul
+                       z-index: 1000
+                       background: white
+                       background: rgba(255, 255, 255, 0.95)
+                       display: block
+                       position: absolute
+                       top: 100%
+                       width: 96%
+                       left: 2%
+                       margin: 0
+                       padding: 0
+                       border-bottom-left-radius: 4px
+                       border-bottom-right-radius: 4px
+                       box-shadow: 0px 3px 3px rgba(0,0,0,0.1)
+                       li
+                               padding: 15px
+                               & + li
+                                       padding-top: 0
+                               a
+                                       font-size: 18px
+                               white-space: nowrap
+
+                       // undo space_evenly stuff:
+                       &:before, &:after
+                               display: none
+                               content: none
+                               margin: 0
+                               padding: 0
+                       > *
+                               position: static
+                               top: 0
+
        nav#site-nav ul > li, #mobile_menu_button
                display: block
-               background: #eee
                padding: 3px 10px 4px 17px
+               font-size: font_size_large
+#admin_images_body .th_toggle_buttons
+       font-weight: normal
+       color: #777
+       space_evenly()