From: Jason Woofenden Date: Tue, 5 May 2020 22:32:00 +0000 (-0400) Subject: progress on webpacking css X-Git-Url: https://jasonwoof.com/gitweb/?p=wfpl-cms.git;a=commitdiff_plain;h=033b3723557ef39ca72c8440ba1c1a49dd47b319 progress on webpacking css --- diff --git a/.gitignore b/.gitignore index 23ca6bc..4d6eeb8 100644 --- a/.gitignore +++ b/.gitignore @@ -3,5 +3,8 @@ /cms_images /files /tags -/css.css /.sha1sums.styl +/css/dist +/style.css +/.npm-initialized +/node_modules diff --git a/Makefile b/Makefile index c7a7078..1b1cce6 100644 --- a/Makefile +++ b/Makefile @@ -1,10 +1,10 @@ -all: css.css +all: style.css clean: - rm -f css.css + rm -f css.css tags -css.css: style.sass - ./build production +style.css: css/style.scss + ./build production && cp css/dist/css.css style.css %.min.svg: %.svg svgo $< $@ diff --git a/build b/build new file mode 100755 index 0000000..e639fe2 --- /dev/null +++ b/build @@ -0,0 +1,26 @@ +#!/bin/bash + +# ENV / defaults +image="${DOCKER_IMAGE-node:latest}" +port="${PORT-8080}" + +if [ -z "$1" ]; then + echo "USAGE: $0 [development|production]" >&2 + exit 1 +fi + +cd "$(dirname "$0")" || exit $? + + +run_in_docker() { + path="$(readlink -f "$(dirname "$0")")" + docker run -i -t -u "$(id -u):$(id -g)" -p "$port:8080" --rm -v "$path/:$path":rw -w "$path" "$image" "$@" +} + +if [ ! -f .npm-initialized -o package.json -nt .npm-initialized ]; then + run_in_docker npm install || exit $? + mkdir -p css/dist + touch .npm-initialized +fi + +run_in_docker npm run "$@" diff --git a/css/index.html b/css/index.html new file mode 100644 index 0000000..b762ca1 --- /dev/null +++ b/css/index.html @@ -0,0 +1,49 @@ + + + + + + + + + +
+ +
+
Home
+
About
+
Contact Us
+
+
+

Content

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed + do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam, quis nostrud exercitation ullamco + laboris nisi ut aliquip ex ea commodo consequat. Duis aute + irure dolor in reprehenderit in voluptate velit esse cillum + dolore eu fugiat nulla pariatur. Excepteur sint occaecat + cupidatat non proident, sunt in culpa qui officia deserunt + mollit anim id est laborum. + +

Curabitur pretium tincidunt lacus. Nulla gravida orci a + odio. Nullam varius, turpis et commodo pharetra, est eros + bibendum elit, nec luctus magna felis sollicitudin mauris. + Integer in mauris eu nibh euismod gravida. Duis ac tellus et + risus vulputate vehicula. Donec lobortis risus a elit. Etiam + tempor. Ut ullamcorper, ligula eu tempor congue, eros est + euismod turpis, id tincidunt sapien risus a quam. Maecenas + fermentum consequat mi. Donec fermentum. Pellentesque malesuada + nulla a mi. Duis sapien sem, aliquet nec, commodo eget, + consequat quis, neque. Aliquam faucibus, elit ut dictum + aliquet, felis nisl adipiscing sapien, sed malesuada diam lacus + eget erat. Cras mollis scelerisque nunc. Nullam arcu. Aliquam + consequat. Curabitur augue lorem, dapibus quis, laoreet et, + pretium ac, nisi. Aenean magna nisl, mollis quis, molestie eu, + feugiat in, orci. In hac habitasse platea dictumst. +

+
+ Footer +
+
+ + diff --git a/css/index.js b/css/index.js new file mode 100644 index 0000000..34c2438 --- /dev/null +++ b/css/index.js @@ -0,0 +1,2 @@ +// tell webpack what css/scss files to include in the bundle +import './style.scss'; diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..3b46369 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,773 @@ +$bodyBg: #fff; +$textColor: #000; +$desktopMinWidth: 700px; +$siteMaxWidth: 1100px; + +html, body { + margin: 0; + padding: 0; +} +html { + overflow-y: scroll; +} +body { + background: $bodyBg; + color: $textColor; +} + +h1:first-child, h2:first-child, h3:first-child { + margin-top: 0; +} + +.siteOuter { + box-sizing: border-box; + //min-height: 100vh; + padding: 2vmin; + max-width: $siteMaxWidth; + margin: 0 auto; +} + +.siteAdminHeader { + padding: 2vmin 2vmin 0 2vmin; + max-width: $siteMaxWidth; + margin: 0 auto; +} + +.siteOuter.siteLayoutFull { + grid-kiss: + "+-----------+ +--------------+ " + "| .siteLogo | | .siteContent | 0fr " + "+-----------+ | | " + " | | 2vmin" + "+-----------+ | | " + "| .siteNav | | | 1fr " + "+-----------+ +--------------+ " + " 2vmin" + "+----------------------------------+ " + "| .siteFooter | 0fr " + "+----------------------------------+ " + " 200px 2vmin 2fr "; +} +.siteOuter.siteLayoutSidebar { + grid-kiss: + "+-----------+ +--------------+ +--------------+ " + "| .siteLogo | | .siteContent | | .siteSidebar | 0fr " + "+-----------+ | | | | " + " | | | | 2vmin" + "+-----------+ | | | | " + "| .siteNav | | | | | 1fr " + "+-----------+ +--------------+ +--------------+ " + " 2vmin" + "+---------------------------------------------------------+ " + "| .siteFooter | 0fr " + "+---------------------------------------------------------+ " + " 200px 2vmin 2fr 2vmin 2fr "; +} + +@media (max-width: $desktopMinWidth) { + .siteOuter { + grid-kiss: + "+--------------+ " + "| .siteLogo | 0fr " + "+--------------+ " + " 2vmin" + "+--------------+ " + "| .siteContent | 1fr " + "+--------------+ " + " 2vmin" + "+--------------+ " + "| .siteFooter | 1fr " + "+--------------+ " + " 1fr "; + } + .siteNav { + display: none; + } +} + + +// from back in the day (the rest of the file from here down) +.icon { + display: inline-block; + width: 40%; +} +.top_button { + display: inline-block; + width: 30%; +} +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 #000; + background: #ccc; +} +.caption { + font-weight: bold; +} +* + .caption { + margin-top: 15px; +} +.field { + padding-top: 3px; +} +div.field_notes { + font-size: 12px; + line-height: 16px; +} +fieldset { + border: 1px dotted #000; + padding: 0 15px 15px 15px; + margin: 15px 0; + position: relative; +} +legend { + padding: 0 6px; + font-weight: bold; +} +div.error { + border: 2px solid #f00; + 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; +} +p.attrib, +p.attribution { + margin: 0 0 15px 20px; + margin-top: 1px; + padding-left: 30px; + font-size: 12px; + font-weight: normal; +} +p.attrib:before, +p.attribution:before { + content: "— "; +} +body { + margin: 0; + padding: 0; + background: #fff; + color: #000; + font: 15px Arimo, Arial, sans-serif; + line-height: 1.2; +} +#admin_pages_body #cke_content { + width: 980px; + margin-right: -30px; +} +#admin_pages_wysiwyg_content_full_main { + background: #fff; + width: 950px; + margin: 0 auto; + min-width: 0; + width: 950px; + margin: 0 auto; + border: 5px solid #eee; + min-height: 50px; +} +#admin_pages_wysiwyg_content_with_sidebar_main { + background: #fff; + width: 670px; + margin: 0 auto; + min-width: 0; + width: 670px; + margin: 0 auto; + border: 5px solid #eee; + min-height: 50px; +} +#admin_pages_body #cke_sidebar_content { + width: 980px; + margin-right: -30px; +} +#admin_pages_wysiwyg_content_with_sidebar_sidebar_plain { + background: #fff; + width: 250px; + margin: 0 auto; + min-width: 0; + width: 250px; + margin: 0 auto; + border: 5px solid #eee; + min-height: 50px; +} +#admin_pages_wysiwyg_content_with_sidebar_sidebar_bordered { + background: #fff; + width: 218px; + margin: 0 auto; + min-width: 0; + width: 218px; + margin: 0 auto; + border: 5px solid #eee; + min-height: 50px; +} +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; +} +.siteNav { + margin-bottom: 15px; +} +.siteNav ul { + margin: 0; + padding: 0; + list-style: none; + text-align: justify; +} +.siteNav ul > * { + display: inline-block; + position: relative; + top: 1.2em; +} +.siteNav ul:before { + content: ''; + display: block; + width: 100%; + margin-bottom: -1.2em; +} +.siteNav ul:after { + content: ''; + display: inline-block; + width: 100%; +} +footer#site_footer { + clear: both; + padding-top: 40px; + font-size: 13px; +} +#wfpl_messages { + background: #ffd; + padding: 5px 12px; + margin: 0 0 20px 0; + -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.4); + box-shadow: 2px 2px 6px rgba(0,0,0,0.4); + -webkit-border-radius: 4px; + border-radius: 4px; +} +#wfpl_messages p { + font-size: 120%; + padding: 5px 0; + margin: 0px; +} +#wfpl_messages hr { + display: block; + height: 1px; + border: 0; + border-top: 1px dotted #ddc; + margin: 0; + padding: 0; +} +#admin_links { + font-size: 13px; + background: rgba(255,244,244,0.5); + border: 1px dotted #000; + padding: 3px; + text-align: right; +} +span.wfpl_ifl { + display: block; + float: left; + clear: left; + font-size: 10px; + color: #000; + 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: #000; + 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; +} +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, +table.evenodd th { + padding: 6px 12px; + text-align: left; +} +table.evenodd > thead > tr:nth-child(2n+1) > td, +table.evenodd > tbody > tr:nth-child(2n+1) > td, +table.evenodd > tr:nth-child(2n+1) > td, +table.evenodd > thead > tr:nth-child(2n+1) > th, +table.evenodd > tbody > tr:nth-child(2n+1) > th, +table.evenodd > tr:nth-child(2n+1) > th { + background: rgba(0,0,0,0.04); +} +table.evenodd > thead > tr:nth-child(2n+1):hover > td, +table.evenodd > tbody > tr:nth-child(2n+1):hover > td, +table.evenodd > tr:nth-child(2n+1):hover > td, +table.evenodd > thead > tr:nth-child(2n+1):hover > th, +table.evenodd > tbody > tr:nth-child(2n+1):hover > th, +table.evenodd > tr:nth-child(2n+1):hover > th { + background: rgba(0,0,0,0.07); +} +table.evenodd > thead > tr:nth-child(2n+0) > td, +table.evenodd > tbody > tr:nth-child(2n+0) > td, +table.evenodd > tr:nth-child(2n+0) > td, +table.evenodd > thead > tr:nth-child(2n+0) > th, +table.evenodd > tbody > tr:nth-child(2n+0) > th, +table.evenodd > tr:nth-child(2n+0) > th { + background: rgba(0,0,0,0.02); +} +table.evenodd > thead > tr:nth-child(2n+0):hover > td, +table.evenodd > tbody > tr:nth-child(2n+0):hover > td, +table.evenodd > tr:nth-child(2n+0):hover > td, +table.evenodd > thead > tr:nth-child(2n+0):hover > th, +table.evenodd > tbody > tr:nth-child(2n+0):hover > th, +table.evenodd > tr:nth-child(2n+0):hover > th { + background: rgba(0,0,0,0.09); +} +.field_error input { + border: 1px solid #f00; +} +.password_suggestion + .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_li .wfpl_i, +.wfpl_ci .wfpl_i, +.wfpl_ri .wfpl_i, +.wfpl_fi .wfpl_i { + display: block; + width: 100%; + background-size: 100% auto; + background-repeat: no-repeat; + background-position: 50% top; + margin-bottom: 3px; + height: 0; + overflow: hidden; +} +.wfpl_li, +.wfpl_ci, +.wfpl_ri { + width: 38.19660112501052%; +} +.wfpl_li { + float: left; + margin-right: 2%; +} +.wfpl_ci, +.wfpl_fi { + margin-left: auto; + margin-right: auto; +} +.wfpl_ri { + float: right; + margin-left: 2%; +} +.wfpl_thumb { + 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%; +} +body > .centerer { + margin: 15px; + width: 950px; +} +body > .centerer.with_sidebar > .main { + float: left; + width: 670px; +} +body > .centerer.with_sidebar > .gap { + width: 30px; +} +body > .centerer.with_sidebar > .gap .wfpl_li, +body > .centerer.with_sidebar > .gap .wfpl_ri { + width: 50%; +} +body > .centerer.with_sidebar > .gap .wfpl_ci { + width: 70%; +} +body > .centerer.with_sidebar > .sidebar.plain { + float: right; + width: 250px; +} +body > .centerer.with_sidebar > .sidebar.plain .wfpl_li, +body > .centerer.with_sidebar > .sidebar.plain .wfpl_ri { + width: 50%; +} +body > .centerer.with_sidebar > .sidebar.plain .wfpl_ci { + width: 70%; +} +body > .centerer.with_sidebar > .sidebar.bordered { + border-width: 1px; + border-style: solid; + border-color: #f00; + padding: 15px; + float: right; + width: 218px; +} +body > .centerer.with_sidebar > .sidebar.bordered .wfpl_li, +body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ri { + width: 50%; +} +body > .centerer.with_sidebar > .sidebar.bordered .wfpl_ci { + width: 70%; +} +body > .centerer { + margin-left: auto; + margin-right: auto; +} +@media screen and (max-width: 980px) { + body > .centerer { + margin: 1.5306%; + width: 96.9387%; + } + body > .centerer.with_sidebar > .main { + width: 70.5263%; + } + body > .centerer.with_sidebar > .gap { + width: 3.1578%; + } + body > .centerer.with_sidebar > .sidebar.plain { + width: 26.3157%; + } + body > .centerer.with_sidebar > .sidebar.bordered { + padding: 1.5789%; + width: 22.9473%; + } + body > .centerer { + width: auto; + } + body > .centerer .wfpl_li, + body > .centerer .wfpl_ri { + width: calc(71.5326673199794px + 30.666846670275838%); + } + body > .centerer .wfpl_ci { + width: 362.86771068759987px; + } + body > .centerer.full > .main .wfpl_li, + body > .centerer.full > .main .wfpl_ri { + width: calc(71.5326673199794px + 30.666846670275838%); + } + body > .centerer.full > .main .wfpl_ci { + width: 362.86771068759987px; + } + body > .centerer.with_sidebar > .main .wfpl_li, + body > .centerer.with_sidebar > .main .wfpl_ri { + width: calc(97.53541937032978px + 23.63907584585682%); + } + body > .centerer.with_sidebar > .main .wfpl_ci { + width: 255.91722753757045px; + } +} +body { + color: #001; + background-position: 980px 670px; + background-position: 370px 541.1940298507462px; +} +@media screen and (max-width: 541.1940298507462px) { + body > .centerer.full > .main { + border: none; + float: none; + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + margin-top: 1.5306%; + } + body > .centerer.full > .main .wfpl_li, + body > .centerer.full > .main .wfpl_ri { + width: calc(71.5326673199794px + 30.666846670275838%); + } + body > .centerer.full > .main .wfpl_ci { + width: 362.86771068759987px; + } + body > .centerer.with_sidebar > .main { + border: none; + float: none; + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + margin-top: 1.5306%; + } + body > .centerer.with_sidebar > .main .wfpl_li, + body > .centerer.with_sidebar > .main .wfpl_ri { + width: calc(71.5326673199794px + 30.666846670275838%); + } + body > .centerer.with_sidebar > .main .wfpl_ci { + width: 362.86771068759987px; + } + body > .centerer.with_sidebar > .gap { + border: none; + float: none; + width: auto; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + margin-top: 1.5306%; + } + body > .centerer.with_sidebar > .gap .wfpl_li, + body > .centerer.with_sidebar > .gap .wfpl_ri { + width: calc(71.5326673199794px + 30.666846670275838%); + } + body > .centerer.with_sidebar > .gap .wfpl_ci { + width: 362.86771068759987px; + } + body > .centerer.with_sidebar > .sidebar.plain { + display: none; + } + body > .centerer.with_sidebar > .sidebar.bordered { + display: none; + } +} +@media screen and (max-width: 381.68421052631584px) { + body > .centerer .wfpl_li, + body > .centerer .wfpl_ci, + body > .centerer .wfpl_ri { + float: none; + width: 362.86771068759987px; + margin-right: auto; + margin-left: auto; + } +} +@media screen and (max-width: 381.68421052631584px) { + body > .centerer.full > .main .wfpl_li, + body > .centerer.full > .main .wfpl_ci, + body > .centerer.full > .main .wfpl_ri { + float: none; + width: 362.86771068759987px; + margin-right: auto; + margin-left: auto; + } +} +@media screen and (max-width: 381.68421052631584px) { + body > .centerer.with_sidebar > .main .wfpl_li, + body > .centerer.with_sidebar > .main .wfpl_ci, + body > .centerer.with_sidebar > .main .wfpl_ri { + float: none; + width: 255.91722753757045px; + margin-right: auto; + margin-left: auto; + } +} +#mobile_menu_button { + display: none; +} +#mobile_menu_check { + display: none; +} +@media screen and (max-width: 600px) { + .siteNav > form { + margin-top: 0; + } + #mobile_menu_check:not(:checked) + div { + display: none; + } + #mobile_menu_check:checked + div { + display: block; + position: relative; + } + #mobile_menu_check:checked + div > ul { + z-index: 1000; + background: #fff; + 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; + -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.1); + box-shadow: 0px 3px 3px rgba(0,0,0,0.1); + } + #mobile_menu_check:checked + div > ul li { + padding: 15px; + white-space: nowrap; + } + #mobile_menu_check:checked + div > ul li + li { + padding-top: 0; + } + #mobile_menu_check:checked + div > ul li a { + font-size: 18px; + } + #mobile_menu_check:checked + div > ul:before, + #mobile_menu_check:checked + div > ul:after { + display: none; + content: none; + margin: 0; + padding: 0; + } + #mobile_menu_check:checked + div > ul > * { + position: static; + top: 0; + } + .siteNav ul > li, + #mobile_menu_button { + display: block; + padding: 0px 10px 0px 17px; + font-size: 18px; + } +} +#admin_images_body .th_toggle_buttons { + font-weight: normal; + color: #777; + text-align: justify; +} +#admin_images_body .th_toggle_buttons > * { + display: inline-block; + position: relative; + top: 1.2em; +} +#admin_images_body .th_toggle_buttons:before { + content: ''; + display: block; + width: 100%; + margin-bottom: -1.2em; +} +#admin_images_body .th_toggle_buttons:after { + content: ''; + display: inline-block; + width: 100%; +} diff --git a/inc/cms.php b/inc/cms.php index 71b9cab..827880c 100644 --- a/inc/cms.php +++ b/inc/cms.php @@ -31,17 +31,18 @@ function cms_display($basename, &$tem) { if ($header_image) { $hi_css = "\n