Not so Tiny Pix

Plot Outline

Word of caution, if you choose to use Neocities as a host for your story outlining page: people can see your updates. To avoid this, go into your settings and disable your site profile!

Plug this into your header:

This into your style sheet or between your style tags

*{
box-sizing: border-box;
}
 
body{
background-color:#00080a;
font-family: 'Inconsolata';
}

.subheader{
background-image: linear-gradient(to right, #013837, #00705E);
border-bottom:.2vw solid #013837;
padding:.5vw;
font-family:'VT323';
color: #fff;
letter-spacing:.5vw;
font-weight:200;
font-size:3.5vmin;
}

.subsubheader{
background-image: linear-gradient(to right, #005748, #00A388);
border-bottom:.2vw solid #00A388;
padding:.5vw;
font-family:'VT323';
color: #fff;
letter-spacing:.5vw;
font-weight:200;
font-size:3vmin;
}

.subheader h3,h4{
margin:0;
}

.subsubheader h4{
text-align:right;
}

h5{
font-family:'VT323';
font-weight:200;
font-size:3vmin;
color:#00111C;
}

textarea{
padding:0;
border:.2vw solid #00111C;
margin: 0 0 .7vw 0;
background:#fff;
width:100%;
overflow-y:auto;
}

ul{
margin:.8vw;
list-style-position:outside;
list-style-type:'⊳';
padding-left:1vw;
}

li{
margin:.5vw;
}

li > ul{
list-style-type:circle;
margin-left:2.5vw;
}
 
a{
text-decoration:none;
color:#013837;
}
 
a:visited{
color:#013837;
}

a:hover{
text-shadow:0 0 2px #00A388;
}

#container{
display: flex;
justify-content: center;
align-items: center;
width: 90vw;
margin: 0 auto;
border: 1vw solid hsla(174, 100%, 1%, 0);
padding: 1vw;
}
 
#box{
width: 90vw;
background-color:#84cda3;
color: #fff;
border: .5vw solid #00232B;
}
 
#header{
margin-bottom:1.5vw;
padding: 1.5vw;
border-bottom:.5vw solid #013837;
background-image: linear-gradient(to right, #013837, #00705E);
font-family:'VT323';
color: #fff;
letter-spacing:.5vmin;
}
 
#header h1{
margin:0;
}
 
#side{
float:left;
width:30vw;
padding: 0 0 .7vw 1.5vw;
overflow:hidden;
}
 
.sidebox{
border:.2vw solid #00111C;
margin: 0 0 .7vw 0;
background:#fff;
}

.sideboxsub{
margin:0 0 0 0;
}
 
.content{
padding:.7vw;
color:#00080a;
font-weight:400;
font-size:3vmin;
letter-spacing: .2vmin;
}

.weekdays{
width:30vw;
padding:0;
margin-left:-1.25vw;
justify-content:space-evenly;
display:flex;
}

.weekdays li{
display:flex;
justify-content:space-evenly;
width:.25vw;
margin:0;
font-family:'VT323';
color:#013837;
text-shadow:0 0 2px #00A388;
font-size:3.5vmin;
text-align:center;
}

.days{
padding-left:1.5vw;
width:30vw;
display:inline-block;
}

.row{
width:27vw;
}

.row:after {
content: "";
clear: both;
display: table;
}

.day{
width:2.75vw;
height:2.25vw;
float:left;
margin:.5vw;
}

.day .active{
background:#00A388;
color:black !important
}

.days li .inactive{
background:#004D40;
color:white !important
}
 
#main{
float:right;
width:54vw;
overflow:hidden;
padding:0 1vw .7vw 0;
}
 
.mainboxes{
border:.2vw solid #00111C;
background:#fff;
padding:0;
margin:0 0 .7vw 0;
clear:both;
}

.mainboxessub{
margin:0 0 0 0;
}

.splitboxwraper{
padding:0;
margin:0 0 .7vw 0;
clear:both;
width:54vw
}

.splitboxwrapper:after {
content: "";
clear:both;
display:table;
}

.splitleft{
border:.2vw solid #00111C;
background:#fff;
padding:0;
width:26vw;
margin-right:1vw;
float:left;
}

.splitright{
border:.2vw solid #00111C;
background:#fff;
padding:0;
width:26vw;
margin:0;
float:left;
}
 
#footer{
clear:both;
padding:.7vw;
border-top:.2vw solid #00111C;
background-image: linear-gradient(to right, #013837, #00705E);
color: #fff;
letter-spacing:.5vw;
font-family:'VT323';
}
 
#footer p{
margin:0;
}
 
@media screen and (orientation:portrait){
#container{
width:92vw;
}

#side{
width:86vw;
}

.weekdays{
width:81vw;
}

.weekdays li{
width:8.75vw;
margin:.5vw;
}

.days{
padding-left:4.5vw;
width:81vw;
}

.row{
width:81vw;
}

.day{
width:9.75vw;
height:9.75vw;
margin:.73vw;
}

#main{
width:86vw;
}

.splitboxwraper{
width:86vw
}

.splitleft{
width:42vw;
}

.splitright{
width:42vw;
}
}
}
 
::-webkit-scrollbar{
width: 8px; 
}
 
::-webkit-scrollbar-track{
background-color: #fff7fb;
}
 
::-webkit-scrollbar-thumb{
background-color: #013837;
}

And this into your body

<div id="container">
  <div id="box">
   
  <div id="header"><h1>Old Internet Swamp</h1></div>
   
  <div id="side">
  
  <div class="sidebox">
  <div class="subheader"><h3>Housekeeping</h3></div>
  <div class="content">
   This theme is a heavily modified version of <a href="https://repth.neocities.org/theme12">this theme by repth</a>. You can find the code <a href="https://repth.neocities.org/theme">here</a>. If you use this theme on a public page, please credit them. 
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Read it Now</h3></div>
  <div class="content">
  <ul>
  <li><a href="link_here">Host</a></li>
  </ul>
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Characters</h3></div>
  
  <div class="sideboxsub">
  <div class="subsubheader"><h4>Char1</h4></div>
  <div class="content">
  <ul>
    <li>this is an unorganized list. It has arrows
      <ul>
        <li>This is an unorganized list within an another unorganized list. It has cirlces</li>
        <li>To properly pull this off, make sure you do not close the li tag until <u>after</u> the second unorganized list is closed</li>
      </ul>
    </li>
  </ul>
  <ol>
    <li>I'm an organized list</li>
    <li>I'm proper organized, me</li>
  </ol>
  </div>
  </div>
   
  <div class="sideboxsub">
  <div class="subsubheader"><h4>Char2</h4></div>
  <div class="content">
  <p style="clear:right;">I'm a post with padding. Check out how much breathing room I have!
  </div>
  </div>
   
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Themes</h3></div>
  <div class="content">
  I'm a post with no padding. I'm more cramped but some people like it like that!
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Motifs</h3></div>
  <div class="content">
  Don't forget you can add subsubheaders anywhere you want. Just be sure to close out content before you do. Check it:
  </div>
  <div class="sideboxsub">
  <div class="subsubheader"><h4>I believe in free will</h4></div>
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>February</h3></div>
  <div class="content">
    <ul class="weekdays">
      <li>S</li>
      <li>M</li>
      <li>T</li>
      <li>W</li>
      <li>T</li>
      <li>F</li>
      <li>S</li>
    </ul>
  <div class="days">
    <div class="row">
      <div class="day"></div>
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day"><span class="active">4</span></div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
      <div class="day">11</div>
      <div class="day"><span class="inactive">12</span></div>
      <div class="day">13</div>
      <div class="day"><span class="active" style="background:#66ffe5;">14</span></div>
      <div class="day">⦿</div>
      <div class="day">16</div>
      <div class="day">17</div>
      <div class="day">18</div>
      <div class="day">19</div>
      <div class="day">20</div>
      <div class="day">21</div>
      <div class="day">22</div>
      <div class="day">23</div>
      <div class="day">24</div>
      <div class="day">25</div>
      <div class="day">26</div>
      <div class="day">27</div>
      <div class="day">28</div>
      <div class="day">29</div>
      <div class="day">30</div>
    </div>
  </div>
    <ul>
      <li>4: You can highlight a day by using span</li>
      <li>12: You can pre-program as many colors as you want up in the style section. Or,</li>
      <li>14: If that sounds complicated, you can easily change the style right here in the body</li>
      <li>15: Don't forget Unicode makes for easy shorthand :)</li>
    </ul>
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Vision Board</h3></div>
  <div class="content">
  <iframe src='https://widgets.sociablekit.com/pinterest-board/iframe/25392730' frameborder='0' width='100%' height='320vh'></iframe>
  This is a Pinterest board! I made it using <a href="https://www.sociablekit.com/tutorials/embed-pinterest-board-website/">this free site.</a> Unfortunately it requires a log in. Double unfortunately, it seems to be limited to main boards and not sub-boards. If anyone finds a better RSS feed please lmk.
  </div>
  </div>
  
  <div class="sidebox">
  <div class="subheader"><h3>Nav</h3></div>
  <div class="content">
  <ul>
  <li><a href="url_here">idk list your socials if you want I guess</a></li>
  <li><a href="url_here">or don't and delete the whole box. What do I care? I'm not your boss</a></li>
  </ul>
  </div>
  </div>
  
  </div>
   
  <div id="main">
  
  <div class="mainboxes"> 
  <div class="subheader"><h3>Plot Outline</h3></div>
  <div class="content">
  <p style="clear:right;">
  <p style="clear:right;">
  Written:
  <ul>
    <li>
    </li>
  </ul>
  <p style="clear:right;">
  Unwritten:
  <ul>
    <li>
    </li>
  </ul>
  </div>
  <div class="mainboxessub">
  <div class="subsubheader"><h4>Chapter One</h4></div>
  <div class="content">
  <p style="clear:right;">
  <h5>Focus:</h5>
  <ul>
    <li>
    </li>
  </ul>
  </div>
  </div>
  <div class="mainboxessub">
  <div class="subsubheader"><h4>Chapter Two</h4></div>
  <div class="content">
  <p style="clear:right;">
  <h5>Focus:</h5>
  <ul>
    <li>
    </li>
  </ul>
  </div>
  </div>
  </div>
  
  <div class="splitboxwrapper">
  <div class="splitleft">
  <div class="subheader"><h4>floater</h4></div>
  <div class="content">
  <p style="clear:right">
  I don't have much to say cause I'm just a little guy
  </div>
  </div>
  <div class="splitright">
  <div class="subheader"><h4>floater</h4></div>
  <div class="content">
  <p style="clear:right">
  I don't have much to say cause I'm just a little guy
  </div>
  </div>
  </div>
  
  </div>
  
  <div id="footer"><p>Thanks for coming to my TedTalk!</p></div>
   
  </div>
   
  </div>

Mint Swamp

Housekeeping

Read it Now

Characters

Char1

Char2

Themes

Motifs

I believe in free will

February

Vision Board

Nav

Plot Outline

Plug this into your header:

This into your style sheet or between your style tags

And this into your body

Chapter One

Focus:

Chapter Two

Focus:

floater

floater