awesome/ipfs
1
0
Fork 0
mirror of https://github.com/ipfs/awesome-ipfs.git synced 2024-11-20 11:28:35 -05:00
Code Activity

feat: wider page and better columns (#264)

Browse source 
License: MIT
Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias 2019-07-15 22:13:09 +00:00 committed by GitHub
parent 8086db3672
commit 73c8a31c1b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 38 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/css/app.css
View file

@ -8,19 +8,6 @@ body {
overflow-y: scroll;
}
.grow2 {
-moz-osx-font-smoothing: grayscale;
backface-visibility: hidden;
transform: translateZ(0);
transition: transform 0.25s ease-out;
}
.grow2:active,
.grow2:hover,
.grow2:focus {
transform: scale(1.05);
}
.focus-outline:focus {
outline: 0;
box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4);
@ -37,3 +24,33 @@ body {
.fill-white {
fill: white;
}
.CardContainer {
column-count: 4;
column-gap: 1em;
}
.Card {
margin: 0 0 1em 0;
width: 100%;
page-break-inside: avoid;
break-inside: avoid;
}
@media (max-width: 1000px) {
.CardContainer {
column-count: 3;
}
}
@media (max-width: 800px) {
.CardContainer {
column-count: 2;
}
}
@media (max-width: 600px) {
.CardContainer {
column-count: 1;
}
}

4
src/js/app.js
View file

@ -28,10 +28,10 @@ function update (display) {
cards.forEach((c) => {
if (display.indexOf(c.dataset.ref) >= 0) {
c.classList.remove('dn')
c.classList.add('flex')
c.classList.add('dib')
} else {
c.classList.add('dn')
c.classList.remove('flex')
c.classList.remove('dib')
}
})
}

6
src/layouts/_default/baseof.html
View file

@ -5,8 +5,8 @@
{{ partial "analytics" . }}
</head>
<body>
<div class="charcoal sans-serif w-90 mw8 center">
<nav class="mh2 montserrat mv4 fw6 flex-wrap ttu tracked sans-serif flex flex-between">
<div class="charcoal sans-serif w-90 mw9 center">
<nav class="montserrat mv4 fw6 flex-wrap ttu tracked sans-serif flex flex-between">
<a href="{{ .Site.BaseURL }}/" class="w-100 w-auto-l flex items-center pv3 pv0-l mr3 flex-grow-1 flex items-center justify-center justify-start-l no-underline" >
<img alt="IPFS" src="{{ .Site.BaseURL }}/images/logo.png" class="w3 h3 mr3">
<h1 class="f3 white">Awesome IPFS</h1>
@ -23,7 +23,7 @@
{{ template "main" . }}
<footer class="mv4 mh2 montserrat ttu tc snow tracked b">
<footer class="mv4 montserrat ttu tc snow tracked b">
<a target="_blank" href="https://github.com/ipfs/awesome-ipfs" class="snow no-underline">GitHub</a> |
<a target="_blank" href="https://github.com/ipfs/awesome-ipfs/blob/master/CONTRIBUTING.md" class="snow no-underline"> Suggest a new item</a> |
<a target="_blank" href="https://discuss.ipfs.io/c/ecosystem" class="snow no-underline">Discuss</a>

6
src/layouts/partials/list.html
View file

@ -13,16 +13,16 @@
</a>
{{ end }}
<div class="ma2 dn" id="search">
<div class="mv2 dn" id="search">
<input
placeholder="Find your awesome app..."
class="input-reset outline-0 bn pa3 mb2 db w-100 center focus-outline dn"
type="text" />
</div>
<main class="CardContainer mv4 flex flex-wrap justify-between" >
<main class="CardContainer mv4" >
{{ range (sort .Params.content "index") -}}
<article data-ref="{{ .index }}" class="Card flex flex-column bg-white shadow-4 grow2 br1 dark-gray b--black-10 flex-grow-1 ma2">
<article data-ref="{{ .index }}" class="Card dib bg-white shadow-4 br1 dark-gray b--black-10 ma2">
<div class="bg-navy ttu fw6 tracked montserrat bg-{{ .color }}-muted br1 br--top white pv1 ph2 ph3-ns f7 b w-100">
{{ humanize .category }}
</div>