enlarged text and removed excess classes
This commit is contained in:
parent
380e8c484a
commit
f6288cdbbc
6 changed files with 42 additions and 79 deletions
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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 () {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
Loading…
Reference in a new issue