From 9cd73aa3d18a76feb8fe640071c9e7e90abf4f8f Mon Sep 17 00:00:00 2001 From: Jason Woofenden Date: Sun, 3 May 2020 16:49:26 -0400 Subject: [PATCH] starting css rewrite --- Makefile | 39 +--- style.styl | 600 ------------------------------------------------------------ 2 files changed, 4 insertions(+), 635 deletions(-) delete mode 100644 style.styl diff --git a/Makefile b/Makefile index b32e60b..c7a7078 100644 --- a/Makefile +++ b/Makefile @@ -1,41 +1,10 @@ -svgs= -minified_svgs= $(svgs:.svg=.min.svg) -generated_images= $(svgs:.svg=.png) -images= -images += $(generated_images) $(minified_svgs) - -objects= $(generated_images) $(minified_svgs) .sha1sums.styl css.css tags - -all: $(objects) +all: css.css clean: - rm -f $(objects) - -css.css: style.styl .sha1sums.styl inc/wfpl/stylus_helpers.styl - stylus -p $< > $@ || rm -f "$@" + rm -f css.css -.sha1sums.styl: $(images) - ( \ - echo -n 'sha1 = {'; \ - div=' '; \ - for x in $^; do \ - echo -n "$$div '$$x': \"$$x?m=$$(sha1sum < $$x | head -c 10)\""; \ - div=,; \ - done; \ - echo " }"; \ - ) > $@ || ( \ - rm -f $@; \ - exit 1; \ - ) -%.png: %.svg - ( \ - inkscape -f $< -e $@ --export-area-page --without-gui --export-dpi=360 \ - && mogrify -alpha off -geometry '25%' $@ \ - && pngfix $@ \ - ) || ( \ - rm -f $@ \ - ; exit 1 \ - ) +css.css: style.sass + ./build production %.min.svg: %.svg svgo $< $@ diff --git a/style.styl b/style.styl deleted file mode 100644 index 854fbb2..0000000 --- a/style.styl +++ /dev/null @@ -1,600 +0,0 @@ -@require 'inc/wfpl/stylus_helpers.styl' -@require '.sha1sums.styl' - -// constants -golden_ratio_small = 0.38196601125010515180 // ratio of whole to smaller part - -//////////////// -// SETTINGS { // -//////////////// - -////// Dimensions -image_float_size = golden_ratio_small // at col max width: ratio to image width -narrow_col_lr_width = 50% // width of left/right images in always-narrow columns -narrow_col_ci_width = 70% // width of centered images in always-narrow columns -image_float_min_size = 0.5 // ratio to image width when cols are scaled to min width -image_float_margin = 2% -mobile_menu_width = 600px // switch to mobile menu when screen gets this narrow -// Column Dimensions -runaround_max = 370px // narrowest column that can have left/right images -centerer_width = 950px // inside. outside is columns.width -sidebar_width = 250px -sidebar_gap = 30px -columns = wfpl_columns({ - type: 'node' - name: 'centerer' - margin: 15px - width: centerer_width - child: { - type: 'alternatives' - full: { - type: 'node' - name: 'main' - }, - with_sidebar: { - type: 'series' - main: { - type: 'node' - float: left - width: centerer_width - sidebar_width - sidebar_gap - }, - gap: { - type: 'node' - width: sidebar_gap - } - sidebar: { - type: 'alternatives' - plain: { - type: 'node' - outer_width: sidebar_width - float: right - }, - bordered: { - type: 'node' - border-width: 1px - border-style: solid - border-color: red - padding: 15px - outer_width: sidebar_width - float: right - } - } - } - } -}) -// the gap is used for checking the width calculations, but has no dom element. -// This space is left blank (by floating main to the left and sidebar to the -// right) and might save the layout if there are borders (which don't scale) or -// rounding errors -a = remove(columns['css'], '.centerer.with_sidebar > .sidebar.gap') -a = remove(columns['responsive_css'], '.centerer.with_sidebar > .sidebar.gap') - -biggest_content_width = columns['widths']['.centerer.full > .main'] - -hide_in_one_column_mode = { - ".centerer.with_sidebar > .sidebar.plain": 1 - ".centerer.with_sidebar > .sidebar.bordered": 1 -} - -// fonts -line_height = 1.2 -font_size_large = 18px -font_size_normal = 15px -font_size_small = 13px -font_size_tiny = 11px - -// colors -content_bg = #fff -content_fg = #000 -window_bg = #fff - -// sprites -//wfpl_spritesheets({ -// main: { -// image: sha1['images/sprites.min.svg'] -// y_origin: 'bottom' // inkscape rulers are backwards -// w: 200 -// h: 408 -// sprites: { -// ".icon": { -// y: 408 -// w: 50 -// h: 50 -// gap: 1 -// hover: 'right' -// column: 'three' 'four' 'five' 'six' 'seven' -// } -// ".top_button": { -// y: 153 -// w: 25 -// h: 25 -// gap: 1 -// row: '0' '1' '2' '3' '4' -// hover: 'down' -// } -// ".main_logo": { -// y: 101 -// w: 200 -// h: 50 -// gap: 1 -// hover: 'down' -// } -// } -// } -//}) - - -//////////////////// -// } END SETTINGS // -//////////////////// - -.icon - display: inline-block - width: 40% -.top_button - display: inline-block - width: 30% - - -// always show vertical scrollbar, so content doesn't shift around when -// switching from tall to short pages -html - overflow-y: scroll - -header, hgroup, section, footer, aside, nav, article, figure, img - display: block - -code.html - display: block - font: 12px monospace - border: 1px solid black - background: #ccc - -.caption - font-weight: bold - * + & - margin-top: 15px - -.field - padding-top: 3px; - -div.field_notes - font-size: 12px - line-height: 16px - -fieldset - border: 1px dotted black - padding: 0 15px 15px 15px - margin: 15px 0 - position: relative - -legend - padding: 0 6px - font-weight: bold - -div.error - border: 2px solid red - padding: 13px - margin: 20px - background: #fdd - -h1 - font-size: 26px - margin: 20px 0 10px - -h1 + h4.tagline - margin: -10px 0 10px - -h1 + h2 - margin-top: -6px - -h2 - font-size: 20px - margin: 16px 0px 8px - -h2 + h4.tagline - margin: -8px 0 8px - -h3 - font-size: 18px - margin: 12px 0 5px - -h3 + h4.tagline - margin: -5px 0 5px - -h4 - font-size: 14px - margin: 10px 0 3px - -h4 + h4.tagline - margin: -3px 0 3px - - -h1, h2, h3, h4 - font-weight: bold - -h4.tagline - font-weight: normal - - -p.quote - font-size: 14px - font-weight: bold - padding-bottom: 1px - margin: 15px 15px 0 15px - -p.quote:before, p.quote:after - font-size: 40px - line-height: 0 - color: #777 - font-weight: bold - display: inline-block - height: 10px - position: relative - -p.quote:before - content: '“' - top: 10px - -p.quote:after - content: '”' - top: 20px - width: 0; // make sure it doesn't wrap - -p.attrib, p.attribution - margin: 0 0 15px 20px - margin-top: 1px - padding-left: 30px - font-size: 12px - font-weight: normal - &:before - content: "— " - -body - margin: 0 - padding: 0 - background: window_bg - color: content_fg - font: font_size_normal Arimo, Arial, sans-serif - line-height: line_height - -// call this for each ckeditor on each page -ckeditor_elements_already = {} -ckeditor(basename, element_name, body_id, width) - // ckeditor ui, including border around wysiwyg area - outer_selector = '#' + basename + '_body #cke_' + element_name - unless outer_selector in ckeditor_elements_already - ckeditor_elements_already[outer_selector] = 1 - {outer_selector} - width: biggest_content_width + 30px - margin-right: -30px - // body tag of the wysiwyg area - #{basename}_wysiwyg_{body_id} - background: content_bg - width: width - margin: 0 auto - min-width: 0 - width: width - margin: 0 auto - border: 5px solid #eee - min-height: 50px - -ckeditor('admin_pages', 'content', 'content_full_main', columns['widths']['.centerer.full > .main']) -ckeditor('admin_pages', 'content', 'content_with_sidebar_main', columns['widths']['.centerer.with_sidebar > .main']) -ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_plain', columns['widths']['.centerer.with_sidebar > .sidebar.plain']) -ckeditor('admin_pages', 'sidebar_content', 'content_with_sidebar_sidebar_bordered', columns['widths']['.centerer.with_sidebar > .sidebar.bordered']) - -body > .centerer - position: relative - -#site_header - margin: 0 auto 15px auto - position: relative -#site_header:before - display: block - background-size: 100% -#site_header:after - display: block - position: absolute - bottom: 0 - right: 0 - padding: 4px - text-align: right - -body > .centerer > .nav - margin-bottom: 15px - ul - li_reset() - space_evenly(line_height) - -footer#site_footer - clear: both - padding-top: 40px - font-size: font_size_small - -#wfpl_messages - background: #ffd - padding: 5px 12px - margin: 0 0 20px 0 - box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4) - border-radius: 4px - p - font-size: 120% - padding: 5px 0 - margin: 0px - - hr - display: block - height: 1px - border: 0 - border-top: 1px dotted #ddc; - margin: 0 - padding: 0 - - -#admin_links - font-size: font_size_small - background: rgba(255, 244, 244, 0.5) - border: 1px dotted #000 - padding: 3px - position: absolute - top: 0 - right: 0 - -// obsolete floating images (from pastable example code on admin_images) -span.wfpl_ifl - display: block - float: left - clear: left - font-size: 10px - color: black - text-align: right - background-repeat: no-repeat - background-position: left top - margin: 0 10px 2px 0 - -span.wfpl_ifr - display: block - float: right - clear: right - font-size: 10px - color: black - font-weight: normal - text-align: right - background-repeat: no-repeat - background-position: left top - margin: 0 0 2px 10px - -div.wfpl_ic - margin: 15px auto - font-size: 10px - font-weight: normal - text-align: right - background-repeat: no-repeat - background-position: center top - - -// hack so that vertical margins are only between siblings for the most part -td > :first-child, -th > :first-child, -legend + *, -article > :first-child, -aside > :first-child, -section > :first-child, -nav > :first-child, -div > :first-child, -.first - margin-top: 0px - -td > :last-child, -th > :last-child, -fieldset > :last-child, -article > :last-child, -aside > :last-child, -section > :last-child, -nav > :last-child, -div > :last-child, -.last - margin-bottom: 0px - -table.evenodd - td, th - padding: 6px 12px - text-align: left - > thead, > tbody, & - > tr:nth-child(2n+1) - > td, > th - background: rgba(0,0,0,0.04) - &:hover - > td, > th - background: rgba(0,0,0,0.07) - > tr:nth-child(2n+0) - > td, > th - background: rgba(0,0,0,0.02) - &:hover - > td, > th - background: rgba(0,0,0,0.09) - -.field_error - input - border: 1px solid red - -.password_suggestion - & + & - margin-left: 10px - -.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: unit(image_float_size * 100, '%') // when window is large -.wfpl_li - float: left - margin-right: image_float_margin // this can be a percent right? -.wfpl_ci, .wfpl_fi - margin-left: auto - margin-right: auto -.wfpl_ri - float: right - margin-left: image_float_margin // this can be a percent right? -.wfpl_thumb // note: does not contain a .wfpl_i - display: inline-block - width: 70px - height: 70px - background-size: contain - background-position: 50% 50% - background-repeat: no-repeat -.wfpl_li, .wfpl_ci, .wfpl_ri, .wfpl_fi, .wfpl_thumb - max-width: 100% - - -// output css from column calculations -for selector, css in columns.css - body > {selector} - {css} - if columns['widths'][selector] < runaround_max - .wfpl_li, .wfpl_ri - width: narrow_col_lr_width - .wfpl_ci - width: narrow_col_ci_width - -// center when big -body > .centerer - margin-left: auto - margin-right: auto - -// small enough that things are scaling, big enough that we have all columns -@media screen and (max-width: (columns.width)) - // output responsive css from column calculations - for selector, css in columns.responsive_css - body > {selector} - {css} - - // as big as it can be - body > .centerer - width: auto - - // big left/right images - for selector, css in columns.css - if columns['widths'][selector] > runaround_max - body > {selector} - col_max_width = columns['widths'][selector] - col_min_width = runaround_max - .wfpl_li, .wfpl_ri - width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size) - .wfpl_ci - width: col_max_width * image_float_size - -// switch to 1-column layout when .with_sidebar>.main wouldn't have space for left/right images -single_column_max = columns.width / columns['widths']['.centerer.with_sidebar > .main'] * runaround_max -body - color: #001 - background-position: columns.width columns['widths']['.centerer.with_sidebar > .main'] - background-position: runaround_max single_column_max -@media screen and (max-width: (single_column_max)) - for selector, css in columns.css - body > {selector} - if selector == '.centerer' - // margin-top: 0 - else if selector in hide_in_one_column_mode - display: none - else - border: none - float: none - width: auto - margin-left: 0 - margin-right: 0 - padding-left: 0 - padding-right: 0 - margin-top: columns['responsive_css']['.centerer']['margin'] - - // make image sizing act like it's the "full"/only column - col_max_width = columns['widths']['.centerer.full > .main'] - col_min_width = runaround_max - .wfpl_li, .wfpl_ri - width: linear_scale_calc(col_max_width, col_min_width, col_max_width * image_float_size, col_min_width * image_float_min_size) - .wfpl_ci - width: col_max_width * image_float_size - -// mixin for making left/right images behave as centered -wfpl_li_ri_to_ci(selector, width) - body > {selector} - .wfpl_li, .wfpl_ci, .wfpl_ri - float: none - width: width - margin-right: auto - margin-left: auto - -// convert left/right images to centered when columns width <= runaround_max -for selector, css in columns.css - if columns['widths'][selector] > runaround_max - // calculate screen width when column width is runaround_max - screen_rmax = columns.width / columns['widths']['.centerer.full > .main'] * runaround_max - @media screen and (max-width: (screen_rmax)) - wfpl_li_ri_to_ci(selector, columns['widths'][selector] * image_float_size) - -#mobile_menu_button - display: none; -#mobile_menu_check - display: none; -@media screen and (max-width: (mobile_menu_width)) - body nav.nav > form - margin-top: 0 - #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 - - body > .centerer > .nav ul > li, #mobile_menu_button - display: block - padding: 0px 10px 0px 17px - font-size: font_size_large -#admin_images_body .th_toggle_buttons - font-weight: normal - color: #777 - space_evenly(line_height) -- 1.7.10.4