css-plus motivation

Simple HTML and CSS to adjust

by Philip Schatz

HTML

<script src="https://npm-cdn.herokuapp.com/[email protected]/dist/browser.js"></script>
<body>

  <chapter>
    <section>
      <div class="title">Kinematics in 1 Dimension</div>
      <exercise id="ex123" class="conceptual">
        What is 6*7?
        <answer id="ans1234">42</answer>
      </exercise>
    </section>
    <section>
      <div class="title">Kinematics in 2 Dimensions</div>
      <exercise id="ex234" class="homework">
        What is 2*6*7?
        <answer id="ans2345">84</answer>
      </exercise>
      <!-- assorted content -->
      <a href="#ex234">[link]</a>
      <note>
        <div class="title">Note1</div>
        <p>Howdy</p>
        <ol data-label="Temperatures">
          <li>Item1</li>
        </ol>
      </note>
    </section>
  </chapter>


</body>

SCSS

$NUMBERED_EXERCISES_SEL_STR: 'exercise.conceptual, exercise.homework'; // TODO: construct me dynamically


@mixin end-of-chapter($which, $title, $exerciseSelStr) {

  &::after(#{$which}) {
    // STEP 2
    &::before {
      tag-name-set: "h2";
      class-add: "title";
      content: $title; // STEP 1
    }
    attrs-add: "data-type" "eoc-item";

    // STEP 4
    &::for-each-descendant(1, '> section') {
      &:has(#{$exerciseSelStr}) {
        &::before {
          tag-name-set: "h3";
          class-add: "section-title";
          content: descendant-context('> .title', text-contents());
        }
        class-add: "eoc-section";

        // STEP 3
        // Select the proper exercises to move here (all of the ones in the section)
        // the context for move-here is the current section.
        content: move-here($exerciseSelStr);
      }
    }
  } // for-each-descendant
}


@mixin generate-numbered-exercises($sel) {
  #{$sel} {
    // STEP 5
    &::before {
      class-add: "number";
      content: ancestor-context('chapter', count-of-type($sel));
    }

    > answer::before {

      // Make this thing a link to the exercise (STEP 10)
      tag-name-set: "a";
      attrs-add: "href" "#" parent-context(attr(id));

      // Number exercise answers (STEP 9)
      content:
        // Chapter number
        ancestor-context('body', count-of-type('chapter'))
        "."
        // Exercise number
        ancestor-context('chapter', count-of-type($sel));
    }

    // (STEP 10)
    &:has(> answer)::before(1) {
      tag-name-set: "a";
      // attrs-add: "href" "#" descendant-context('> answer', attr-ensure(id));
      attrs-add: "href" "#" descendant-context('> answer', attr(id));
    }

  }
}

// Link target text (STEP 6)
@mixin generate-numbered-exercise-link-text($sel) {
  // Link target text (STEP 6)
  a:target(href, '#{$sel}') {
    content:
      "See Exercise "
      // Chapter number
      target-context(attr(href), ancestor-context('body',...

JavaScript

// Ignore this panel. Edit the HTML and CSS 
// ones and then press Run


var css = document.querySelector('head > style').textContent
var $consoleDiv = $('<div class="console-output"/>')
$('body').prepend('<hr/>')
$('body').prepend($consoleDiv)
var consoleHack = {
  info:   function(msg) {
    msg = JSON.parse(msg)
    if (msg.type === 'ELEMENT_COUNT') {
    } else if (msg.type === 'PROGRESS_START') {
    } else if (msg.type === 'PROGRESS_TICK') {
    } else if (msg.type === 'PROGRESS_END') {
    } else {
      $consoleDiv.append('<pre>INFO: ' + JSON.stringify(msg) + '</pre>')
    }
  },
  log:   function(msg) { $consoleDiv.append('<pre>LOG: ' + msg + '</pre>') },
  warn:  function(msg) { $consoleDiv.append('<pre>WARN: ' + msg + '</pre>') },
  error: function(msg) { $consoleDiv.append('<pre>ERROR: ' + msg + '</pre>') },
}

CssPlus(document, $, css, 'fiddle.css', 'fiddle.html', consoleHack, function() {}, 'fiddle.html', 'fiddle.html.map', null, {}).then(function() {
  alert('done converting')
})