enlarged text and removed excess classes

This commit is contained in:
bill bittner 2017-10-27 14:17:30 -07:00
parent 380e8c484a
commit f6288cdbbc
6 changed files with 42 additions and 79 deletions

View file

@ -39,15 +39,15 @@ body, .flex-container--column {
justify-content: space-between;
}
.flex-container--align-center {
align-items: center;
}
.flex-container--wrap {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-container--align-center {
align-items: center;
}
.flex-container--justify-center {
justify-content: center;
}
@ -64,60 +64,14 @@ body, .flex-container--column {
body, button, input, textarea, label, select, option {
font-family: 'Lekton', monospace;
font-size: medium;
word-wrap: break-word;
font-size: large;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
.h2--secondary {
color: lightgrey;
}
.h2--top {
margin-top: 0px;
}
p, h3 {
h3, p {
font-size: x-large;
}
.h3--no-bottom {
margin-bottom: 0px;
}
.p--no-top {
margin-top: 0px;
}
.input-text--large, .textarea--large, .title-show, .description-show {
font-size: 1.5rem;
}
.url-text {
margin:0px;
padding:0px;
}
.url-text--primary {
color: black;
}
.url-text--secondary {
color: #9b9b9b;
}
.instructions-text--large {
font-size: 2rem;
}
.pull-quote {
font-size: 3rem;
margin-top: 1rem;
@ -131,6 +85,11 @@ p, h3 {
color: #4156C5;
}
.blue--underlined {
color: #4156C5;
text-decoration: underline;
}
/* TOOL TIPS */
/* Tooltip container */
.tooltip {
@ -304,6 +263,7 @@ align-content-left {
/* ERROR MESSAGES */
.info-message {
font-size: medium;
margin: 0px;
padding: 0.3em;
@ -328,7 +288,7 @@ input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
.label, .input-text, .select, .textarea, .title-show {
.label, .input-text, .select, .textarea, .text--large {
margin: 0px;
padding: 0.3em;
outline: none;
@ -368,11 +328,23 @@ option {
cursor: pointer;
}
.blue-underlined-pointer {
color: #4156C5;
text-decoration: underline;
cursor: pointer;
.text--large {
font-size: 2rem;
}
.url-text--primary, .url-text--secondary {
margin:0px;
padding:0px;
}
.url-text--primary {
color: black;
}
.url-text--secondary {
color: #9b9b9b;
}
/* modifiers */
.select--arrow {
-moz-appearance:none;

View file

@ -16,7 +16,7 @@
font-size: medium;
}
.instructions-text--large, .pull-quote {
.pull-quote {
font-size: 1.5rem;
}
@ -24,16 +24,11 @@
width: 100%;
}
.h2--top {
margin-top: 1em;
}
.nav-bar-logo {
height: 1rem;
}
.link--nav, .link--nav-active {
font-size: small;
padding: 1rem 0.5rem 1rem 0.5rem;
}
@ -70,7 +65,7 @@
font-size: small;
}
.instructions-text--large, .pull-quote, .input-text--large, .button--large {
.pull-quote, .text--large, .button--large {
font-size: medium;
}
@ -90,15 +85,11 @@
@media (max-width: 360px) {
.link--nav, .link--nav-active {
body, button, input, textarea, label, select, option, p, h3, .fine-print {
font-size: x-small;
}
body, button, input, textarea, label, select, option, p, h3, .fine-print, .instructions-text--large {
font-size: x-small;
}
.pull-quote, .input-text--large, .button--large {
.pull-quote, .text--large, .button--large {
font-size: small;
}

View file

@ -28,7 +28,7 @@ function previewAndStageFile(selectedFile){
console.log('file type:', selectedFile.type)
if (selectedFile.type !== 'video/mp4') {
if (selectedFile.type === 'image/gif') {
assetPreview.innerHTML = `<h2>loading preview...</h2>`
assetPreview.innerHTML = `<p>loading preview...</p>`
}
previewReader.readAsDataURL(selectedFile);
previewReader.onloadend = function () {

View file

@ -7,7 +7,7 @@
<p class="info-message-placeholder info-message info-message--failure" id="input-error-file-selection" hidden="true"></p>
<p>Drag & drop image or video here to publish</p>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
<p class="blue--underlined">CHOOSE FILE</p>
</div>
<div id="dropbzone-dragover" class="hidden">
<p class="blue">Drop it.</p>
@ -17,7 +17,7 @@
<div class="row row--padded row--no-bottom">
<div class="column column--10">
<!-- title input -->
<input type="text" id="publish-title" class="input-text input-text--large input-text--full-width" placeholder="Give your post a title...">
<input type="text" id="publish-title" class="input-text text--large input-text--full-width" placeholder="Give your post a title...">
</div>
<div class="column column--5 column--sml-10" >
<!-- preview -->
@ -26,7 +26,7 @@
<div id="asset-preview-dropzone-instructions" class="hidden">
<p>Drag & drop image or video here</p>
<p class="fine-print">OR</p>
<p class="blue-underlined-pointer">CHOOSE FILE</p>
<p class="blue--underlined">CHOOSE FILE</p>
</div>
<div id="asset-preview-target"></div>
</div>

View file

@ -6,10 +6,10 @@
<label class="label">URL:</label>
</div><div class="column column--7 column--sml-10">
<div class="input-text--primary">
<span class="url-text url-text--secondary">spee.ch /</span>
<span id="url-channel" class="url-text url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
<span id="url-no-channel-placeholder" class="url-text url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be a random id</span></span>
<span id="url-channel-placeholder" class="url-text url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span>
<span class="url-text--secondary">spee.ch /</span>
<span id="url-channel" class="url-text--secondary" {{#if user}}{{else}}hidden="true"{{/if}}>{{user.channelName}}:{{user.shortChannelId}}</span>
<span id="url-no-channel-placeholder" class="url-text--secondary tooltip" {{#if user}}hidden="true"{{else}}{{/if}}>xyz<span class="tooltip-text">This will be a random id</span></span>
<span id="url-channel-placeholder" class="url-text--secondary tooltip" hidden="true">@channel<span class="tooltip-text">Select a channel above</span></span>
/
<input type="text" id="claim-name-input" class="input-text" placeholder="your-url-here" oninput="checkClaimName(event.target.value)">
<span id="input-success-claim-name" class="info-message info-message--success"></span>

View file

@ -1,7 +1,7 @@
<div class="row row--tall row--padded">
<div class="column column--10">
<!-- title -->
<span class="title-show">{{fileInfo.title}}</span>
<span class="text--large">{{fileInfo.title}}</span>
</div>
<div class="column column--5 column--sml-10 align-content-top">
<!-- asset -->