Skip to content

Commit fbe9eb5

Browse files
myogpatternsmyogpatterns
committed
map & hw added; new nav bar; map merged in
1 parent 6ef99ce commit fbe9eb5

File tree

14 files changed

+650
-1
lines changed

14 files changed

+650
-1
lines changed

‎assets/css/main.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2182,6 +2182,50 @@ input, select, textarea {
21822182
border-color: rgba(0, 0, 0, 0.2);
21832183
}
21842184

2185+
/* Nav */
2186+
#nav ul.links {
2187+
display: flex;
2188+
flex: 1;
2189+
list-style: none;
2190+
justify-content: center;
2191+
margin: 0;
2192+
}
2193+
#nav li {
2194+
display: inline-flex;
2195+
margin: 0;
2196+
background-color: inherit;
2197+
line-height: 1em;
2198+
padding: 1.5em;
2199+
cursor: pointer;
2200+
font-weight:400;
2201+
font-size:1rem;
2202+
text-transform: uppercase;
2203+
font-family: "Source Sans Pro", Helvetica, sans-serif;
2204+
}
2205+
2206+
#nav a {
2207+
text-decoration: none;
2208+
2209+
}
2210+
2211+
#nav li:hover {
2212+
color: black;
2213+
background-color: rgba(255,255,255,0.25);
2214+
-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
2215+
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
2216+
}
2217+
2218+
#nav li:hover > a {
2219+
color: var(--primary);
2220+
}
2221+
2222+
#nav li.active {
2223+
background-color: white;
2224+
}
2225+
#nav li.active > a {
2226+
color: var(--primary);
2227+
}
2228+
21852229
/* Button */
21862230

21872231
input[type="submit"],

‎assets/css/style.css‎

Lines changed: 220 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,220 @@
1+
/* :root {
2+
--buttonHighlight: hsl(180, 40%, 25%);
3+
--buttonHover: hsl(180, 40%, 65%);
4+
} */
5+
6+
7+
8+
/* ---- custom ----- */
9+
10+
/* body {
11+
font-family: "Source Sans Pro", "Open Sans", sans-serif;
12+
box-sizing: border-box;
13+
} */
14+
15+
/* a {text-decoration: none;} */
16+
17+
/* h1 {
18+
font-size: 2.5em;
19+
font-weight: 900;
20+
margin: 0.8em 0 0.6em 0;
21+
} */
22+
23+
/* .container {
24+
min-height: 100vh;
25+
display: flex;
26+
flex-direction: column;
27+
}
28+
.page-header, .page-footer {
29+
background-color: white;
30+
flex-grow: 0;
31+
flex-shrink: 0;
32+
padding: 1em 0;
33+
z-index: 10;
34+
} */
35+
36+
/* .sticky-top {
37+
position: -webkit-sticky;
38+
position: sticky;
39+
top: 0;
40+
} */
41+
/*
42+
.fill-screen {
43+
flex: 1;
44+
} */
45+
46+
/* .content {
47+
width: 80%;
48+
padding: .5em 0;
49+
margin: 0 auto;
50+
} */
51+
52+
/* .content::after {
53+
margin: 0;
54+
} */
55+
56+
/* .align-center {
57+
text-align: center;
58+
margin-bottom: 1.2em;
59+
} */
60+
61+
62+
/* ---- cards ----- */
63+
64+
#card-shelf {
65+
margin: auto;
66+
display: grid;
67+
grid-template-columns: repeat(auto-fit, minmax(120px, 16.6%));
68+
grid-gap: 0px;
69+
}
70+
71+
@media screen and (max-width: 480px) {
72+
#card-shelf {
73+
display: grid;
74+
grid-template-columns: repeat(auto-fit, minmax(120px, 50%));
75+
grid-gap: 0px;
76+
}
77+
}
78+
79+
.card {
80+
display:grid;
81+
background: white;
82+
border: 0.1px solid lightslategray;
83+
box-sizing: border-box;
84+
}
85+
86+
.card img{
87+
width: 100%;
88+
aspect-ratio: 1 / 1;
89+
object-fit: cover;
90+
}
91+
92+
.card-info {
93+
display: flex;
94+
flex-wrap: wrap;
95+
align-items: flex-start;
96+
align-content: space-between;
97+
padding: 0 0.5em;
98+
}
99+
100+
.card-info .title{
101+
margin: 0 0 0.5em 0;
102+
width: 100%;
103+
font-weight:300;
104+
display: inherit;
105+
}
106+
107+
.card-info .vendor {
108+
display: flex;
109+
justify-content: right;
110+
}
111+
112+
.card-info .vendor, .option {
113+
display: inherit;
114+
color: #667788;
115+
font-size: 0.7em;
116+
align-self: center;
117+
width:50%;
118+
}
119+
120+
.card-info .vendor img {
121+
margin: 8px;
122+
width: 32px;
123+
aspect-ratio: 1 / 1;
124+
border-radius: 16px;
125+
}
126+
127+
/* ---- buttons ----- */
128+
129+
.button {
130+
display: inline-block;
131+
padding: 0.5em 1.0em;
132+
background: #EEE;
133+
border: none;
134+
border-radius: 7px;
135+
background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
136+
color: #222;
137+
text-shadow: 0 1px white;
138+
cursor: pointer;
139+
}
140+
141+
.button:hover {
142+
background-color: var(--buttonHover, #8CF);
143+
text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
144+
color: rgb(71, 71, 71);
145+
}
146+
147+
.button:active,
148+
.button.is-checked {
149+
color: hsl(0, 0%, 90%);
150+
background-color: var(--buttonHighlight, #28F);
151+
}
152+
153+
.button.is-checked {
154+
color: white;
155+
text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
156+
}
157+
158+
.button:active {
159+
box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
160+
}
161+
162+
/* button-group */
163+
164+
.button-group:after {
165+
content: '';
166+
display: block;
167+
clear: both;
168+
}
169+
170+
.button-group .button {
171+
float: left;
172+
border-radius: 0;
173+
margin-left: 0;
174+
margin-right: 1px;
175+
}
176+
177+
.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
178+
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }
179+
180+
181+
/* ui group */
182+
183+
.ui-group {
184+
display: inline-block;
185+
}
186+
187+
.ui-group .button-group {
188+
display: inline-block;
189+
margin-right: 1.5em;
190+
}
191+
192+
193+
/* ---- leaflet.js map ---- */
194+
195+
#map {
196+
height: 400px;
197+
z-index: 1;
198+
}
199+
200+
#store-shelf {
201+
column-count: 3;
202+
}
203+
204+
.no-deco {
205+
line-height: 2em;
206+
list-style-type: none;
207+
}
208+
.no-deco a {
209+
text-decoration: none;
210+
211+
}
212+
213+
@media screen and (max-width: 480px) {
214+
#store-shelf {
215+
column-count: 1;
216+
}
217+
#map {
218+
height: 240px;
219+
}
220+
}

‎assets/db/allproducts.json‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎assets/db/vendormap.csv‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
name,website,city,country,lat,long,friend
2+
Ripstop by the Roll,https://ripstopbytheroll.com/,"Durham, NC",US,36.00969,-78.87149,TRUE
3+
Discovery Fabrics,https://discoveryfabrics.com/,"Campbell, BC",CA,50.02373,-125.25464,TRUE
4+
Quest Outfitters,https://www.questoutfitters.com/,"Sarasota, FL",US,27.28279,-82.4463,TRUE
5+
Refasten,https://refasten.ca/,"Ottawa, ON",CA,45.421532,-75.697189,
6+
Mozet Supplies,https://mozetsupplies.ca/,"Victoria, CA",CA,48.42836,-123.35879,TRUE
7+
PacCana,https://www.paccana.com/,"Calgary, CA",CA,51.077,-114.01372,
8+
Rockywoods,https://www.rockywoods.com/,"Loveland, CO",US,40.39539,-105.07696,
9+
Seattle Fabrics,https://www.seattlefabrics.com/,"Seattle, WA",US,47.69221,-122.34385,
10+
ExtremTextil,https://www.extremtextil.de/en/,"Berlin, DE",DE,52.50077,13.42065,
11+
Monkey Puzzle Fabrics,https://www.makeyourowngear.com.au/,Blackheath NSW,AU,-33.63748,150.28403,
12+
A+ Products,https://www.aplusproducts.net/,"Marlboro, NJ",US,40.31365,-74.25847,
13+
Strapworks,https://www.strapworks.com/,"Eugene, OR",US,44.04663,-123.08899,
14+
Jontay,https://jontay.com/,"Blackshear, GA",US,31.301,-82.24369,
15+
Dutchware Gear,https://dutchwaregear.com/,"Lancaster, PA",US,40.03788,-76.30551,
16+
Contact Left,https://www.contactleft.co.uk/,"Liverpool, UK",GB,53.41037,-2.97938,
17+
JT's Outdoor Fabrics ,https://jtsoutdoorfabrics.com/,"Barrie, ON",CA,44.33146,-79.68131,
18+
Sailrite,https://www.sailrite.com/,"Columbia City, IN",US,41.14696,-85.44622,
19+
The Trimming Shop,https://trimmingshop.co.uk/,"Cheshunt, UK",GB,51.7028,-0.0291,
20+
Point North Profabrics,https://www.profabrics.co.uk/,"Chester, UK",GB,53.12188,-2.76746,
21+
Pennine Outdoors,https://www.pennineoutdoor.co.uk/,"High Bentham, UK",GB,54.11823,-2.51199,
22+
Hudson's Supplies,https://www.hudson4supplies.com/,"Montreal, QC",CA,45.50008,-73.66585,
23+
Outdoor Experten,https://www.outdoorexperten.se/,"Västerås, SE",SE,59.61187,16.61122,
24+
Tactical Trim,https://www.tacticaltrim.de/,"Berlin, DE",DE,52.428389,13.381763,
25+
Wawak,https://www.wawak.com/,"Conklin, NY",US,42.0663,-75.81536,
26+
AdventurExpert,https://www.adventurexpert.com/,"Domžale, Slovenia",SI,46.12284,14.61172,
27+
The Rain Shed,https://www.therainshed.com/,"Cle Elum, WA",US,47.19437,-120.93742,
28+
Mill Yardage,https://www.millyardage.com/,"Rollinsford, NH",US,43.23523,-70.81722,

0 commit comments

Comments
 (0)