block by nitaku 6899079

Learn to write

Full Screen

An experimental interface that could be useful to teach children how to write. Each of the three sections correspond to a distinct phase of the writing process:

index.js

(function() {

  window.main = function() {};

}).call(this);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Learn to Write</title>
        <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="index.js"></script>
    </head>
    <body onload="main()">
        <ul class="section" id="ideas">
            <li>Idea 1</li>
            <li>Idea 2</li>
        </ul>
        <ol class="section" id="outline">
            <li>Introduction</li>
            <li>Main content</li>
            <li>Conclusions</li>
        </ol>
        <div class="section" id="text">Actual text.</div>
    </body>
</html>

index.coffee

window.main = () ->

index.css

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: whitesmoke;
  font-family: sans-serif;
}

.section {
  display: inline-block;
  box-sizing: border-box;
  margin: 6px;
  padding: 24px;
  vertical-align: top;
}

#ideas, #outline {
  width: 180px;
  list-style-type: none;
}
#ideas li, #outline li {
  border: 1px solid gray;
  background: lightgrey;
}
#ideas li:not(:last-child), #outline li:not(:last-child) {
  margin-bottom: 4px;
}

#text {
  width: 550px;
  background: white;
  border: 1px solid gray;
  min-height: 800px;
  box-shadow: 0px 0px 4px gray;
}

index.sass

html, body
    margin: 0
    padding: 0
    width: 100%
    height: 100%
    background: whitesmoke
    font-family: sans-serif
    
.section
    display: inline-block
    box-sizing: border-box
    margin: 6px
    padding: 24px
    vertical-align: top
    
#ideas, #outline
    width: 180px
    list-style-type: none
    
    li
        border: 1px solid gray
        padding: 4px
        background: lightgray
    li:not(:last-child)
        margin-bottom: 4px
        
#text
    width: 550px
    background: white
    border: 1px solid gray
    min-height: 800px
    box-shadow: 0px 0px 4px gray