Skip to content

Commit

Permalink
use grid layout on companies
Browse files Browse the repository at this point in the history
  • Loading branch information
@sampl
sampl committed Feb 26, 2018
1 parent 75a89b0 commit 523b852
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 141 deletions.
1 change: 1 addition & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

242 changes: 122 additions & 120 deletions source/pages/index.jade
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,176 +19,178 @@ block header

block content

.company(style="background: hsl(197, 100%, 47%);")
a(href="http://www.accioenergy.com/", target="_blank") Accio Energy
.companies

.company(style="background: hsl(197, 100%, 47%);")
a(href="http://www.accioenergy.com/", target="_blank") Accio Energy

.company(style="background: #12756d;")
a(href="https://akadeum.com/", target="_blank") Akadeum
.company(style="background: #12756d;")
a(href="https://akadeum.com/", target="_blank") Akadeum

.company(style="background: hsl(197, 100%, 47%);")
a(href="https://www.alfajango.com/", target="_blank") Alfa Jango
.company(style="background: hsl(197, 100%, 47%);")
a(href="https://www.alfajango.com/", target="_blank") Alfa Jango

.company(style="background: #45546E;")
a(href="https://www.aptible.com/", target="_blank") Aptible
.company(style="background: #45546E;")
a(href="https://www.aptible.com/", target="_blank") Aptible

.company(style="background: #36C1E6;")
a(href="http://www.arbormetrix.com/", target="_blank") ArborMetrix
.company(style="background: #36C1E6;")
a(href="http://www.arbormetrix.com/", target="_blank") ArborMetrix

.company(style="background: #62A335;")
a(href="https://www.arbornetworks.com/", target="_blank") Arbor Networks
.company(style="background: #62A335;")
a(href="https://www.arbornetworks.com/", target="_blank") Arbor Networks

.company(style="background: #FD4F57;")
a(href="https://atomicobject.com/", target="_blank") Atomic Object
.company(style="background: #FD4F57;")
a(href="https://atomicobject.com/", target="_blank") Atomic Object

.company(style="background: #E88C06;")
a(href="https://www.campdoc.com", target="_blank") CampDoc
.company(style="background: #E88C06;")
a(href="https://www.campdoc.com", target="_blank") CampDoc

.company(style="background: #F06C20;")
a(href="http://www.carcodesms.com", target="_blank") Carcode

.company(style="background: #0F62DC;")
a(href="https://www.connect.space/", target="_blank") Connect Space

.company(style="background: #7DAFFF;")
a(href="https://clinc.com/", target="_blank") Clinc
.company(style="background: #F06C20;")
a(href="http://www.carcodesms.com", target="_blank") Carcode
.company(style="background: #0F62DC;")
a(href="https://www.connect.space/", target="_blank") Connect Space
.company(style="background: #7DAFFF;")
a(href="https://clinc.com/", target="_blank") Clinc

.company(style="background: #4ab6df;")
a(href="https://contentoro.com/", target="_blank") ContentOro
.company(style="background: #4ab6df;")
a(href="https://contentoro.com/", target="_blank") ContentOro

.company(style="background: #0083a9;")
a(href="https://getmatterhorn.com/", target="_blank") Court Innovations
.company(style="background: #0083a9;")
a(href="https://getmatterhorn.com/", target="_blank") Court Innovations

.company(style="background: hsl(30, 90%, 70%);")
a(href="https://www.cribspot.com/", target="_blank") Cribspot
.company(style="background: hsl(30, 90%, 70%);")
a(href="https://www.cribspot.com/", target="_blank") Cribspot

.company(style="background: #0D77BD;")
a(href="https://DaySmart.com/", target="_blank") DaySmart
.company(style="background: #0D77BD;")
a(href="https://DaySmart.com/", target="_blank") DaySmart

.company(style="background: hsl(222, 38%, 49%);")
a(href="http://www.deepfield.com/", target="_blank") DeepField
.company(style="background: hsl(222, 38%, 49%);")
a(href="http://www.deepfield.com/", target="_blank") DeepField

.company(style="background: hsl(104, 44%, 49%);")
a(href="https://duo.com/", target="_blank") Duo Security
.company(style="background: hsl(104, 44%, 49%);")
a(href="https://duo.com/", target="_blank") Duo Security

.company(style="background: #ed0533;")
a(href="http://perficientdigital.com/", target="_blank") Perficient Digital
.company(style="background: #ed0533;")
a(href="http://perficientdigital.com/", target="_blank") Perficient Digital

.company(style="background: hsl(135, 40%, 40%);")
a(href="https://farmlogs.com/", target="_blank") FarmLogs
.company(style="background: hsl(135, 40%, 40%);")
a(href="https://farmlogs.com/", target="_blank") FarmLogs

.company(style="background: hsl(206, 100%, 22%);")
a(href="https://www.flocktag.com/", target="_blank") FlockTag
.company(style="background: hsl(206, 100%, 22%);")
a(href="https://www.flocktag.com/", target="_blank") FlockTag

.company(style="background: hsl(196, 100%, 47%);")
a(href="https://www.gamestartschool.org/", target="_blank") GameStart
.company(style="background: hsl(196, 100%, 47%);")
a(href="https://www.gamestartschool.org/", target="_blank") GameStart

.company(style="background: #00325B;")
a(href="https://www.genomenon.com/", target="_blank") Genomenon
.company(style="background: #00325B;")
a(href="https://www.genomenon.com/", target="_blank") Genomenon

.company(style="background: #4E856D;")
a(href="https://www.giveandtakeinc.com/", target="_blank") Give and Take
.company(style="background: #4E856D;")
a(href="https://www.giveandtakeinc.com/", target="_blank") Give and Take

.company(style="background: #00BFFF;")
a(href="http://groundspeed.com", target="_blank") Groundspeed
.company(style="background: #00BFFF;")
a(href="http://groundspeed.com", target="_blank") Groundspeed

.company(style="background: #f79321;")
a(href="http://www.criteo.com/", target="_blank") Criteo
.company(style="background: #f79321;")
a(href="http://www.criteo.com/", target="_blank") Criteo

.company(style="background: hsl(339, 100%, 64%);")
a(href="http://byhook.com/", target="_blank") Hook Studios
.company(style="background: hsl(339, 100%, 64%);")
a(href="http://byhook.com/", target="_blank") Hook Studios

.company(style="background: hsl(337, 85%, 49%)")
a(href="http://www.iconinteractive.com/", target="_blank") Icon Interactive
.company(style="background: hsl(337, 85%, 49%)")
a(href="http://www.iconinteractive.com/", target="_blank") Icon Interactive

.company(style="background: black;")
a(href="https://www.ithaka.org/", target="_blank") ITHAKA (JSTOR)
.company(style="background: black;")
a(href="https://www.ithaka.org/", target="_blank") ITHAKA (JSTOR)

.company(style="background: #662d91;")
a(href="https://karambasecurity.com/", target="_blank") Karamba Security
.company(style="background: #662d91;")
a(href="https://karambasecurity.com/", target="_blank") Karamba Security

.company(style="background: #D7E5EA; color: black;")
a(href="http://www.larky.com/", target="_blank", style="color: black;") Larky
.company(style="background: #D7E5EA; color: black;")
a(href="http://www.larky.com/", target="_blank", style="color: black;") Larky

.company(style="background: #99CA3C")
a(href="https://lawnguru.co/", target="_blank") LawnGuru
.company(style="background: #99CA3C")
a(href="https://lawnguru.co/", target="_blank") LawnGuru

.company(style="background: hsl(45, 71%, 51%);")
a(href="https://www.llamasoft.com/", target="_blank") LLamasoft
.company(style="background: hsl(45, 71%, 51%);")
a(href="https://www.llamasoft.com/", target="_blank") LLamasoft

.company(style="background: hsl(186, 38%, 63%);")
a(href="https://localorbit.com/", target="_blank") Local Orbit
.company(style="background: hsl(186, 38%, 63%);")
a(href="https://localorbit.com/", target="_blank") Local Orbit

.company(style="background: #2E9D48;")
a(href="http://maymobility.com/", target="_blank") May Mobility
.company(style="background: #2E9D48;")
a(href="http://maymobility.com/", target="_blank") May Mobility

.company(style="background: #0080c5;")
a(href="https://www.merit.edu/", target="_blank") Merit Network
.company(style="background: #0080c5;")
a(href="https://www.merit.edu/", target="_blank") Merit Network

.company(style="background: #337ab7;")
a(href="https://www.munirent.co/", target="_blank") MuniRent
.company(style="background: #337ab7;")
a(href="https://www.munirent.co/", target="_blank") MuniRent

.company(style="background: #25bbb2;")
a(href="http://www.myfab5.com", target="_blank") MyFab5
.company(style="background: #25bbb2;")
a(href="http://www.myfab5.com", target="_blank") MyFab5

.company(style="background: #4b62dc;")
a(href="https://myswimpro.com/#/", target="_blank") MySwimPro
.company(style="background: #4b62dc;")
a(href="https://myswimpro.com/#/", target="_blank") MySwimPro

.company(style="background: #fe5003;")
a(href="https://www.nutshell.com/", target="_blank") Nutshell
.company(style="background: #fe5003;")
a(href="https://www.nutshell.com/", target="_blank") Nutshell

.company(style="background: hsl(14, 68%, 50%);")
a(href="https://www.olark.com/", target="_blank") Olark
.company(style="background: hsl(14, 68%, 50%);")
a(href="https://www.olark.com/", target="_blank") Olark

.company(style="background: #4090c8;")
a(href="https://www.pawnguru.com/", target="_blank") PawnGuru
.company(style="background: #4090c8;")
a(href="https://www.pawnguru.com/", target="_blank") PawnGuru

.company(style="background: hsl(78, 100%, 35%);")
a(href="https://peachworks.com/", target="_blank") PeachWorks
.company(style="background: hsl(78, 100%, 35%);")
a(href="https://peachworks.com/", target="_blank") PeachWorks

.company(style="background: hsl(4, 90%, 43%);")
a(href="https://www.getpricelocal.com/", target="_blank") PriceLocal
.company(style="background: hsl(4, 90%, 43%);")
a(href="https://www.getpricelocal.com/", target="_blank") PriceLocal

.company(style="background: #4284C4;")
a(href="https://www.quadmetrics.com", target="_blank") QuadMetrics
.company(style="background: #4284C4;")
a(href="https://www.quadmetrics.com", target="_blank") QuadMetrics

.company(style="background: #551A8B;")
a(href="https://www.retailvelocity.com/", target="_blank") Retail Velocity
.company(style="background: #551A8B;")
a(href="https://www.retailvelocity.com/", target="_blank") Retail Velocity

.company(style="background: #F86900;")
a(href="http://www.rightbrainnetworks.com/", target="_blank") RightBrain Networks
.company(style="background: #F86900;")
a(href="http://www.rightbrainnetworks.com/", target="_blank") RightBrain Networks

.company(style="background: hsl(13, 58%, 27%);")
a(href="http://www.saagara.com/", target="_blank") Saagara

.company(style="background: #4C4184;")
a(href="https://saganworks.com", target="_blank") Saganworks
.company(style="background: hsl(13, 58%, 27%);")
a(href="http://www.saagara.com/", target="_blank") Saagara
.company(style="background: #4C4184;")
a(href="https://saganworks.com", target="_blank") Saganworks

.company(style="background: hsl(220, 50%, 80%);")
a(href="https://seelio.com/", target="_blank") Seelio
.company(style="background: hsl(220, 50%, 80%);")
a(href="https://seelio.com/", target="_blank") Seelio

.company(style="background: #144260;")
a(href="https://sightmachine.com/", target="_blank") Sight Machine
.company(style="background: #144260;")
a(href="https://sightmachine.com/", target="_blank") Sight Machine

.company(style="background: black;")
a(href="http://www.skyspecs.com/", target="_blank") SkySpecs
.company(style="background: black;")
a(href="http://www.skyspecs.com/", target="_blank") SkySpecs

.company(style="background: #005677;")
a(href="http://www.strataoncology.com/", target="_blank") Strata Oncology
.company(style="background: #005677;")
a(href="http://www.strataoncology.com/", target="_blank") Strata Oncology

.company(style="background: #2b1464;")
a(href="https://trove.com", target="_blank") Trove

.company(style="background: #2D2F31;")
a(href="https://www.truejob.com/", target="_blank") TrueJob
.company(style="background: #2b1464;")
a(href="https://trove.com", target="_blank") Trove
.company(style="background: #2D2F31;")
a(href="https://www.truejob.com/", target="_blank") TrueJob

.company(style="background: hsl(282, 81%, 60%);")
a(href="https://www.virtalabs.com/", target="_blank") Virta Labs
.company(style="background: hsl(282, 81%, 60%);")
a(href="https://www.virtalabs.com/", target="_blank") Virta Labs

.company(style="background: #263238;")
a(href="http://getwisely.com", target="_blank") Wisely
.company(style="background: #263238;")
a(href="http://getwisely.com", target="_blank") Wisely

.company(style="background: #30B888;")
a(href="https://workithealth.com/", target="_blank") Workit Health
.company(style="background: #30B888;")
a(href="https://workithealth.com/", target="_blank") Workit Health

.company.add-your-own(style="background: #eee; color: #444;")
a(href="https://github.com/sampl/madeina2", target="_blank") + Add your company
.company.add-your-own(style="background: #eee; color: #444;")
a(href="https://github.com/sampl/madeina2", target="_blank") + Add your company
32 changes: 11 additions & 21 deletions source/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,10 @@ body {
padding: 0;
line-height: 1.5;
}
.wrapper {
margin: 1rem 2rem;
overflow: auto;
}

/* basic elements */
h1 {
Expand Down Expand Up @@ -130,19 +134,22 @@ hr {
}

/* companies */
.wrapper {
margin: 1rem 2rem;
overflow: auto;
.companies {
display: grid;
grid-row-gap: 1rem;
grid-column-gap: 1rem;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
}
.company {
color: #444;
opacity: .95;
border: 6px solid white;
display: block;
float: left;
width: 100%;
color: white;
text-align: center;
transition: opacity .2s ease;
border-radius: 3px;
}
.company:hover {
opacity: 1;
Expand Down Expand Up @@ -305,20 +312,3 @@ hr {
text-align: center;
}
}

@media (min-width: 700px) {
.company {
width: 50%;
}

}
@media (min-width: 1000px) {
.company {
width: 33.33%;
}
}
@media (min-width: 1400px) {
.company {
width: 25%;
}
}

0 comments on commit 523b852

Please sign in to comment.