updated row spacing and channel layout

This commit is contained in:
bill bittner 2017-10-19 18:55:15 -07:00
parent 524ec39f2f
commit c616ece1f9
6 changed files with 74 additions and 66 deletions

View file

@ -25,7 +25,7 @@ html, body {
/* TEXT */ /* TEXT */
body, button, input, textarea, label, select, option { body, button, input, textarea, label, select, option, p {
font-family: 'Lekton', monospace; font-family: 'Lekton', monospace;
font-size: medium; font-size: medium;
word-wrap: break-word; word-wrap: break-word;

View file

@ -16,12 +16,17 @@
display: none; display: none;
} }
.row--narrow {
margin: 0px;
padding: 0px;
}
} }
@media (max-width: 750px ) { @media (max-width: 750px ) {
body, button, input, textarea, label, select, option { body, button, input, textarea, label, select, option, p {
font-size: medium; font-size: medium;
} }
@ -65,7 +70,7 @@
@media (max-width: 450px) { @media (max-width: 450px) {
body, button, input, textarea, label, select, option, .publish-fine-print { body, button, input, textarea, label, select, option, p, .publish-fine-print {
font-size: small; font-size: small;
} }
@ -74,9 +79,9 @@
} }
.grid-item { .grid-item {
width: 100%; width: calc(100% - 2em);
float: none; float: none;
padding-bottom: 2rem; padding: 1em;
margin: 0px; margin: 0px;
} }
@ -84,12 +89,12 @@
@media (max-width: 360px) { @media (max-width: 360px) {
body, button, input, textarea, label, select, option, .publish-fine-print { body, button, input, textarea, label, select, option, p, .publish-fine-print, .instructions-text--large {
font-size: x-small; font-size: x-small;
} }
.instructions-text--large, .pull-quote, .input-text--large, .button--large { .pull-quote, .input-text--large, .button--large {
font-size: x-small; font-size: small;
} }
} }

View file

@ -1,4 +1,5 @@
<div class="row row--full-height row--narrow"> <div class="row row--narrow">
<div class="row">
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<div class="row"> <div class="row">
<span class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</span> <span class="pull-quote">Spee.ch is an open-source project. Please contribute to the existing site, or fork it and make your own.</span>
@ -24,3 +25,4 @@
</div> </div>
</div> </div>
</div> </div>
</div>

View file

@ -1,7 +1,6 @@
<div class="row row--full-height row--narrow"> <div class="row row--full-height row--narrow">
<div class="column column--10"> <div class="row">
<h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2> <h2>{{this.channelName}}<span class="h2--secondary">:{{this.longChannelId}}</span></h2>
</div>
<div class="grid"> <div class="grid">
{{#each this.claims}} {{#each this.claims}}
{{> gridItem}} {{> gridItem}}
@ -26,7 +25,7 @@
<a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a> <a href="/{{this.channelName}}:{{this.longChannelId}}?p={{this.totalPages}}">Last [{{this.totalPages}}]</a>
</div> </div>
</div> </div>
</div>
</div> </div>
<script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script> <script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script>

View file

@ -1,12 +1,12 @@
<div class="row row--full-height row--narrow"> <div class="row row--full-height row--narrow">
<div class="row row--wide">
<p>Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
<div class="row row--wide">
<div class="column column--5 column--med-10 align-content-top"> <div class="column column--5 column--med-10 align-content-top">
<div class="row">
<p class="pull-quote">Channels allow you to publish and group content under an identity. You can create a channel for yourself, or share one with like-minded friends. You can create 1 channel, or 100, so whether you're documenting <a target="_blank" href="/@hikingchris45">a hike around town</a>, or making a public repository for <a target="_blank" href="/@catGifs">cat gifs</a> (password: '1234'), try creating a channel for it!</p>
</div>
</div><div class="column column--5 column--med-10 align-content-top">
<div class="row">
<h3>Log in to an existing channel:</h3> <h3>Log in to an existing channel:</h3>
{{>channelLoginForm}} {{>channelLoginForm}}
</div><div class="column column--5 column--med-10 align-content-top">
<h3>Create a brand new channel:</h3> <h3>Create a brand new channel:</h3>
{{>channelCreationForm}} {{>channelCreationForm}}
</div> </div>

View file

@ -1,10 +1,12 @@
<div class="row row--narrow"> <div class="row row--narrow">
<div class="row">
<div class="grid"> <div class="grid">
{{#each trendingAssets}} {{#each trendingAssets}}
{{> gridItem}} {{> gridItem}}
{{/each}} {{/each}}
</div> </div>
</div> </div>
</div>
<script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script> <script src="/assets/vendors/masonry/masonry.pkgd.min.js"></script>
<script src="/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script> <script src="/assets/vendors/imagesloaded/imagesloaded.pkgd.min.js"></script>