updated row spacing and channel layout
This commit is contained in:
parent
524ec39f2f
commit
c616ece1f9
6 changed files with 74 additions and 66 deletions
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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>
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue