added media queries

public/assets/css/general.css

@@ -8,6 +8,7 @@ html, body {
 body, button, input, textarea, label, select, option {
 	font-family: monospace;
 	font-size: large;
+	word-wrap: break-word;
 }
 
 p {
@@ -162,6 +163,7 @@ h3 {
 
 /* INPUT FIELDS */
 
+/* blocks */
 input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
 }
@@ -174,10 +176,38 @@ input:-webkit-autofill {
 	background-color: white;
 }
 
+.input-disabled {
+	border: 1px solid black;
+	padding: 0.5em;
+	margin: 0px;
+	color: black;
+	background-color: white;
+}
+
 option {
 	font-family: monospace;
 }
 
+
+.input-checkbox, .input-textarea {
+	border: 1px solid grey;
+}
+
+.input-file {
+	width: 0.1px;
+	height: 0.1px;
+	opacity: 0;
+	overflow: hidden;
+	position: absolute;
+	z-index: -1;
+}
+
+.input-file-label {
+	color: dodgerblue;
+	text-decoration: underline;
+	cursor: pointer;
+}
+
 .select--no-arrow {
 	-moz-appearance:none;
 	-webkit-appearance: none;
@@ -191,6 +221,7 @@ option {
 	padding-right: 1em;
 }
 
+/* modifiers */
 .input-text--primary, .select--primary, .textarea--primary {
 	border-bottom: 1px solid dodgerblue;
 }
@@ -212,31 +243,8 @@ option {
 	width: calc(100% - 0.6em);
 }
 
-.input-checkbox, .input-textarea {
+.input-disabled--full-width {
-	border: 1px solid grey;
+	width: calc(100% - 1em - 2px);
-}
-
-.input-file-label {
-	color: dodgerblue;
-	text-decoration: underline;
-	cursor: pointer;
-}
-
-.input-file {
-	width: 0.1px;
-	height: 0.1px;
-	opacity: 0;
-	overflow: hidden;
-	position: absolute;
-	z-index: -1;
-}
-
-.input-disabled {
-	border: 1px solid black;
-	padding: 0.5em;
-	margin: 0.5em 0.3em 0.5em 0.3em;
-	color: black;
-	background-color: white;
 }
 
 /* BUTTONS */

public/assets/css/mediaQueries.css

@@ -18,32 +18,38 @@
 }
 
 @media (max-width: 750px ) {
-	.col-left, .col-right {
+
-		float: none;
+	.column--med-10 {
-		margin: 0px;
-		padding: 0px;
 		width: 100%;
 	}
 
-	.col-right {
+	.h2--top {
-		padding-top: 20px;
+		margin-top: 1em;
+	}
 }
 
-	.all-claims-asset {
+
-		width:30%;
+@media (max-width: 475px) {
+
+	.nav-bar {
+		height: 8rem;
 	}
 
-	.all-claims-details {
+	.nav-bar-title {
-		font-size: small;
+		padding-bottom: 0px;
 	}
 
-	.show-asset-lite {
+	.nav-bar-link-section {
-		width: 100%;
+		position: relative;
+		padding-left: 0px;
 	}
 
-	.top-bar-tagline {
+	.row--full-height {
-		clear: both;
+
-		text-align: left;
+		height: calc(100% - 11rem);
+	}
+
+	.column--sml-10 {
 		width: 100%;
 	}
 }

views/about.handlebars

@@ -1,6 +1,6 @@
 	{{> topBar}}
     <div class="row row--full-height">
-        <div class="column column--5 align-content-top">
+        <div class="column column--5 column--med-10 align-content-top">
             <div class="row row--short">
                 <span class="pull-quote">Open-source, decentralized image and video hosting</span>
             </div>
@@ -15,7 +15,7 @@
                     <a href="#">DOCUMENTATION</a>
                 </p>
             </div>
-        </div><div class="column column--5 align-content-top">
+        </div><div class="column column--5 column--med-10 align-content-top">
         <div class="row row--short">
             <p>Spee.ch is a media-hosting site that reads and publishes content from the <a class="white-text" href="https://lbry.io">LBRY</a> blockchain.</p>
             <p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the LBRY network.  This means that your images are stored in multiple locations without a single point of failure.</p>

views/index.handlebars

@@ -22,7 +22,7 @@
             <!-- title input -->
             <input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Title (optional)">
         </div>
-        <div class="column column--5 align-content-top" >
+        <div class="column column--5 column--med-10 align-content-top" >
             <!-- preview -->
             <div class="row">
                 <div id="asset-preview-holder" class="dropzone" ondrop="drop_handler(event);" ondragover="dragover_handler(event);" ondragend="dragend_handler(event)" onmouseenter="showInstructions()" onmouseleave="hideInstructions()">
@@ -36,14 +36,13 @@
                                 <input class=" input-file" type="file" id="siofu_input" name="siofu_input" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
                             </form>
                         </div>
-                        <div class="info-message info-message--failure" id="" hidden="true"></div>
                     </div>
 
                 </div>
             </div>
             <!-- description input -->
             <textarea rows="2" id="publish-description" class="textarea textarea--large textarea--full-width" placeholder="Description (optional)"></textarea>
-        </div><div class="column column--5 align-content-top">
+        </div><div class="column column--5 column--med-10 align-content-top">
         <div id="publish-status" class="row" hidden="true"></div>
         <div id="publish-progress-bar" class="row" hidden="true"></div>
         <div id="publish-active-area">

views/login.handlebars

@@ -1,10 +1,10 @@
 {{> topBar}}
 
 <div class="row row--full-height">
-    <div class="column column--5 align-content-top">
+    <div class="column column--5 column--med-10 align-content-top">
         <p>Log in to an existing channel:</p>
         {{>channelLoginForm}}
-    </div><div class="column column--5 align-content-top">
+    </div><div class="column column--5 column--med-10 align-content-top">
         <p>Create a brand new channel:</p>
         {{>channelCreationForm}}
     </div>

views/partials/assetInfo.handlebars

@@ -6,26 +6,26 @@
 {{!-- short direct link to asset --}}
 <div class="row row--short">
     <div class="column column--7">
-        <a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a>
+        <p><a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">Short Link</a></p>
         <div class="input-error" id="input-error-copy-short-link" hidden="true"></div>
         <br/>
-        <input type="text" id="short-link" class="input-disabled" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
+        <input type="text" id="short-link" class="input-disabled input-text--full-width" readonly spellcheck="false" value="https://spee.ch/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" onclick="select()"/>
-    </div><div class="column column--3">
+    </div><div class="column column--1"></div><div class="column column--2">
         <button class="button--primary" data-elementtocopy="short-link" onclick="copyToClipboard(event)">copy</button>
     </div>
 </div>
 {{!-- html text for embedding asset--}}
 <div class="row row--short">
     <div class="column column--7">
-        Embed HTML
+        <p>Embed HTML</p>
         <div class="input-error" id="input-error-copy-embed-text" hidden="true"></div>
         <br/>
         {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
-            <input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
+            <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;video width="100%" controls src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>&lt;/video>'/>
         {{else}}
-            <input type="text" id="embed-text" class="input-disabled" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}" />'/>
+            <input type="text" id="embed-text" class="input-disabled input-text--full-width" readonly onclick="select()" spellcheck="false" value='&lt;img src="https://spee.ch/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"/>'/>
         {{/ifConditional}}
-    </div><div class="column column--3">
+    </div><div class="column column--1"></div><div class="column column--2">
         <button class="button--primary" data-elementtocopy="embed-text" onclick="copyToClipboard(event)">copy</button>
     </div>
 </div>

views/partials/channelCreationForm.handlebars

@@ -1,9 +1,9 @@
 
 <form id="publish-channel-form">
     <div class="row row--wide">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-name">Name:</label>
-        </div><div class="column column--6">
+        </div><div class="column column--6 column--sml-10">
         <div id="input-error-channel-name" class="info-message info-message--failure"></div>
         <div class="input-text--primary">
             <span>@</span>
@@ -13,9 +13,9 @@
     </div>
     </div>
     <div class="row row--wide">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label class="label" for="new-channel-password">Password:</label>
-        </div><div class="column column--6">
+        </div><div class="column column--6 column--sml-10">
             <div id="input-error-channel-password" class="info-message info-message--failure"></div>
             <input type="password" name="new-channel-password" id="new-channel-password" placeholder="" value="" class="input-text input-text--primary">
         </div>

views/partials/channelLoginForm.handlebars

@@ -1,9 +1,9 @@
 
 <form id="channel-login-form">
     <div class="row row--wide">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label class="label" for="login-channel-name">Name:</label>
-        </div><div class="column column--6">
+        </div><div class="column column--6 column--sml-10">
             <div id="login-error-display-element" class="info-message info-message--failure"></div>
             <div class="input-text--primary">
                 <span>@</span>
@@ -12,9 +12,9 @@
         </div>
     </div>
     <div class="row row--wide">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label class="label" for="login-channel-password" >Password:</label>
-        </div><div class="column column--6">
+        </div><div class="column column--6 column--sml-10">
             <input type="password" name="login-channel-password" id="login-channel-password" class="input-text input-text--primary" placeholder="" value="">
         </div>
     </div>

views/partials/publishForm-Channel.handlebars

@@ -1,7 +1,7 @@
 <div class="row">
-    <div class="column column--3">
+    <div class="column column--3 column--sml-10">
         <label class="label" for="channel-name-select">Channel:</label>
-    </div><div class="column column--7">
+    </div><div class="column column--7 column--sml-10">
         <div id="input-error-channel-select" class="info-message info-message--failure"></div>
         <select type="text" id="channel-name-select" class="select select--primary select--arrow" value="channel" onchange="toggleChannel(event)">
         {{#if user}}

views/partials/publishForm-Details.handlebars

@@ -1,9 +1,9 @@
 <div id="details-detail" hidden="true">
 
     <div class="row">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label for="publish-license" class="label">License:* </label>
-        </div><div class="column column--7">
+        </div><div class="column column--7 column--sml-10">
             <select type="text" id="publish-license" class="select select--primary">
                 <option value="Public Domain">Public Domain</option>
                 <option value="Creative Commons">Creative Commons</option>
@@ -12,16 +12,16 @@
     </div>
 
     <div class="row">
-        <div class="column column--3">
+        <div class="column column--3 column--sml-10">
             <label for="publish-nsfw" class="label">NSFW*</label>
-        </div><div class="column column--7">
+        </div><div class="column column--7 column--sml-10">
             <input class="input-checkbox" type="checkbox" id="publish-nsfw">
         </div>
     </div>
 </div>
 
 <div class="row">
-    <div class="column column--12">
+    <div class="column column--10">
         <a class="label" id="details-toggle" href="#" onclick="toggleSection(event)" data-open="false" data-openlabel="[less]" data-closedlabel="[more]" data-slaveelementid="details-detail">[more]</a>
     </div>
 </div>

views/partials/publishForm-Url.handlebars

@@ -1,8 +1,8 @@
 <div class="row">
 
-    <div class="column column--3">
+    <div class="column column--3 column--sml-10">
         <label class="label">URL:</label>
-    </div><div class="column column--6">
+    </div><div class="column column--6 column--sml-10">
         <div id="input-error-claim-name" class="info-message info-message--failure"  hidden="true"></div>
         <div class="input-text--primary">
             <span class="url-text">Spee.ch/</span><span id="url-channel" class="url-text">{{#if user}}{{user.channelName}}:{{user.shortChannelId}}/{{/if}}</span><input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">

views/show.handlebars

@@ -1,9 +1,9 @@
 
 	{{> topBar}}
     <div class="row">
-        <div class="column column--6 align-content-top">
+        <div class="column column--6 column--med-10 align-content-top">
             {{> asset}}
-        </div><div class="column column--4 align-content-top">
+        </div><div class="column column--4 column--med-10 align-content-top">
             <div class="row row--short">
                 {{> assetInfo}}
             </div>