chuckdries/Personal-Website
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

style changes

Browse Source
This commit is contained in:
Chuck Dries 2017-03-20 22:53:34 -07:00
parent 0c718fd588
commit 272dc9e540
1 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
roboticchuck.html
View File

@ -7,27 +7,33 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Robotic Chuck</title> <title>Robotic Chuck</title>
<style> <style>
body{ body {
margin: auto; margin: auto;
max-width: 800px; max-width: 800px;
line-height: 1.5; line-height: 1.5;
} }
code, #output {
code,
#output {
padding: 5px; padding: 5px;
background: #eee; background: #eee;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 3px; border-radius: 3px;
display: inline-block; display: inline-block;
} }
p{
p {
max-width: 800px; max-width: 800px;
} }
input, textarea {
input,
textarea {
width: 100%; width: 100%;
padding: 5px; padding: 5px;
/*max-width: 800px;*/ /*max-width: 800px;*/
} }
#genbutton{
#genbutton {
color: white; color: white;
background: #01C106; background: #01C106;
padding: 1em; padding: 1em;
@ -35,7 +41,6 @@
font-size: 1em; font-size: 1em;
border-radius: 3px; border-radius: 3px;
} }
</style> </style>
</head> </head>
@ -65,11 +70,10 @@
<p></p> <p></p>
<p>Title of box:</p> <input type="text" id="titleIn" placeholder="Investigating Hope: The Series"> <p>Title of box:</p> <input type="text" id="titleIn" placeholder="Investigating Hope: The Series">
<p>Description text:</p> <p>Description text:</p>
<input type="text" id="description" placeholder="This article is one in a series of investigative pieces about a complaint filed with ASU regarding accusations against on-campus ministry Hope Church."><br /> <input type="text" id="description" placeholder="This article is one in a series of investigative pieces about a complaint filed with ASU regarding accusations against on-campus ministry Hope Church.">
<p>Enter the links to generate according to this format:</p>
<p>Enter the links to generate according to this format:</p> <pre><code class="json">[
<pre><code class="json">[
{ {
"headline": "A Beautiful Headline!", "headline": "A Beautiful Headline!",
"url": "this-is-a-sample-url" "url": "this-is-a-sample-url"
@ -83,17 +87,20 @@
"url": "yet-another-url" "url": "yet-another-url"
} }
] ]
</code></pre> </code></pre>
<p>This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read. Note how commas are used to separate multiple items but are never used after the last item in a set. This is important, it will not work if you include a trailing comma where there should not be one.</p> <p>This format is known as JSON, it's an internet standard that's supposed to be easy for humans and computers to read.
<textarea name="input" id="in" cols="100" rows="30" placeholder="Please be careful, this will not work if you format the JSON incorrectly"></textarea> Note how commas are used to separate multiple items but are never used after the last item in a set. This is important,
<p><a id="genbutton" href="#output" onclick="generate()">Generate Code</a></p> it will not work if you include a trailing comma where there should not be one.</p>
<p>Paste the following code into a safeembed</p> <textarea name="input" id="in" cols="100" rows="30" placeholder="Please be careful, this will not work if you format the JSON incorrectly"></textarea>
<textarea id="output" cols="100" readonly ></textarea> <p><a id="genbutton" href="#output" onclick="generate()">Generate Code</a></p>
<p><em> Don't forget:</em> For each page you embed on, add the following bit of code just before the <code>&lt;/h4&gt;</code> at the end of the line on the line that corresponds to the current page. <p>Paste the following code into a safeembed</p>
<pre><code>&lt;span class="here"&gt;(You are here)&lt;/span&gt;</pre></code> <textarea id="output" cols="100" readonly></textarea>
<p>The code generated will look roughly like this:</P> <p><em> Don't forget:</em> For each page you embed on, add the following bit of code just before the <code>&lt;/h4&gt;</code> at the end of the line on the line that corresponds to the current page.</p>
<div id="preview" style="max-width: 800px;"></div> <pre><code>&lt;span class="here"&gt;(You are here)&lt;/span&gt;</pre>
<p>Gryphon overrides certain styles by default, so make sure to test on your article.</p> </code>
<p>The code generated will look roughly like this:</P>
<div id="preview" style="max-width: 800px;"></div>
<p>Gryphon overrides certain styles by default, so make sure to test on your article.</p>
</body> </body>