mirror of
https://github.com/ipfs/awesome-ipfs.git
synced 2024-11-20 11:28:35 -05:00
feat: wider page and better columns (#264)
License: MIT Signed-off-by: Henrique Dias <hacdias@gmail.com>
This commit is contained in:
Henrique Dias
GitHub
parent
8086db3672
commit
73c8a31c1b
4 changed files with 38 additions and 21 deletions
|
|
@ -8,19 +8,6 @@ body {
|
||||||
overflow-y: scroll;
|
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 {
|
.focus-outline:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4);
|
box-shadow: 0 0 0 .2rem rgba(201, 210, 215, .4);
|
||||||
|
|
@ -37,3 +24,33 @@ body {
|
||||||
.fill-white {
|
.fill-white {
|
||||||
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -28,10 +28,10 @@ function update (display) {
|
||||||
cards.forEach((c) => {
|
cards.forEach((c) => {
|
||||||
if (display.indexOf(c.dataset.ref) >= 0) {
|
if (display.indexOf(c.dataset.ref) >= 0) {
|
||||||
c.classList.remove('dn')
|
c.classList.remove('dn')
|
||||||
c.classList.add('flex')
|
c.classList.add('dib')
|
||||||
} else {
|
} else {
|
||||||
c.classList.add('dn')
|
c.classList.add('dn')
|
||||||
c.classList.remove('flex')
|
c.classList.remove('dib')
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -5,8 +5,8 @@
|
||||||
{{ partial "analytics" . }}
|
{{ partial "analytics" . }}
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="charcoal sans-serif w-90 mw8 center">
|
<div class="charcoal sans-serif w-90 mw9 center">
|
||||||
<nav class="mh2 montserrat mv4 fw6 flex-wrap ttu tracked sans-serif flex flex-between">
|
<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" >
|
<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">
|
<img alt="IPFS" src="{{ .Site.BaseURL }}/images/logo.png" class="w3 h3 mr3">
|
||||||
<h1 class="f3 white">Awesome IPFS</h1>
|
<h1 class="f3 white">Awesome IPFS</h1>
|
||||||
|
|
@ -23,7 +23,7 @@
|
||||||
|
|
||||||
{{ template "main" . }}
|
{{ 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" 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://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>
|
<a target="_blank" href="https://discuss.ipfs.io/c/ecosystem" class="snow no-underline">Discuss</a>
|
||||||
|
|
|
||||||
|
|
@ -13,16 +13,16 @@
|
||||||
</a>
|
</a>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
<div class="ma2 dn" id="search">
|
<div class="mv2 dn" id="search">
|
||||||
<input
|
<input
|
||||||
placeholder="Find your awesome app..."
|
placeholder="Find your awesome app..."
|
||||||
class="input-reset outline-0 bn pa3 mb2 db w-100 center focus-outline dn"
|
class="input-reset outline-0 bn pa3 mb2 db w-100 center focus-outline dn"
|
||||||
type="text" />
|
type="text" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="CardContainer mv4 flex flex-wrap justify-between" >
|
<main class="CardContainer mv4" >
|
||||||
{{ range (sort .Params.content "index") -}}
|
{{ 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">
|
<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 }}
|
{{ humanize .category }}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue