Skip to content

Commit acb3211

Browse files
myogpatternsmyogpatterns
committed
badges and Master UL Fabric article
1 parent 300ec82 commit acb3211

File tree

2 files changed

+49
-24
lines changed

2 files changed

+49
-24
lines changed

‎assets/css/main.css

+17-1
Original file line numberDiff line numberDiff line change
@@ -8567,7 +8567,23 @@ input, select, textarea {
85678567
.index > * {
85688568
border-top-color: rgba(0, 0, 0, 0.2);
85698569
}
8570-
8570+
/* Badge */
8571+
.badge {
8572+
position: absolute;
8573+
font-size: smaller;
8574+
font-weight: 400;
8575+
padding: 1em .8em;
8576+
top: -5%;
8577+
bottom: calc(100% - 1em);
8578+
left: calc(100% / 2 + 2.5em);
8579+
color: #eeeeee;
8580+
background-color: var(--magenta-dye);
8581+
border: 2px solid white;
8582+
border-radius: .5rem;
8583+
display: flex;
8584+
justify-content: center;
8585+
align-items: center;
8586+
}
85718587
/* Partners */
85728588
/* Ratings */
85738589
.ratings-container {

‎index.html

+32-23
Original file line numberDiff line numberDiff line change
@@ -60,63 +60,67 @@ <h3>Sewing Patterns for Adventure Gear and Technical Apparel</h3>
6060
<div class="items style3 medium">
6161

6262
<section> <!-- Porter -->
63-
<span class="icon"><a href="porter.html"><img class="image preview" src="images/index/porter.jpg" alt="Porter Duffle" /></a></span>
63+
<div class="icon">
64+
<a href="porter.html"><img class="image preview" src="images/index/porter.jpg" alt="Porter Duffle" /></a>
65+
</div>
6466
<h4>Porter Duffle</h4>
6567
</section>
6668
<section> <!-- DIAS -->
67-
<span class="icon"><a href="dias.html"><img class="image preview" src="images/index/diashi2.jpg" alt="Do It All Shorts" /></a></span>
69+
<div class="icon"><a href="dias.html"><img class="image preview" src="images/index/diashi2.jpg" alt="Do It All Shorts" /></a></div>
6870
<h4>DIAS</h4>
6971
</section>
7072
<section> <!-- Porter -->
71-
<span class="icon"><a href="porterPony.html"><img class="image preview" src="images/index/pony.jpg" alt="Porter Pony backpack" /></a></span>
73+
<div class="icon"><a href="porterPony.html"><img class="image preview" src="images/index/pony.jpg" alt="Porter Pony backpack" /></a></div>
7274
<h4>Porter Pony</h4>
7375
</section>
7476
<section> <!-- Chonky Sling -->
75-
<span class="icon"><a href="chonkySling.html"><img class="image preview" src="images/index/chonkysling.jpg" alt="chonky sling bag"/></a></span>
77+
<div class="icon"><a href="chonkySling.html"><img class="image preview" src="images/index/chonkysling.jpg" alt="chonky sling bag"/></a></div>
7678
<h4>Chonky Sling</h4>
7779
</section>
7880
<section> <!-- ARH -->
79-
<span class="icon"><a href="alphaRaglan.html"><img class="image preview" src="images/index/bala1.jpg" alt="Alpha Direct Midlayer"/></a></span>
81+
<div class="icon"><a href="alphaRaglan.html"><img class="image preview" src="images/index/bala1.jpg" alt="Alpha Direct Midlayer"/></a></div>
8082
<h4>Alpha Raglan Hoodie</h4>
8183
</section>
8284
<section> <!-- ACP -->
83-
<span class="icon"><a href="alphaCampPants.html"><img class="image preview" src="images/index/camp_pants2.jpg" alt="Camp Pants"/></a></span>
85+
<div class="icon"><a href="alphaCampPants.html"><img class="image preview" src="images/index/camp_pants2.jpg" alt="Camp Pants"/></a></div>
8486
<h4>Alpha Camp Pants</h4>
8587
</section>
8688
<section> <!-- UL Windshell -->
87-
<span class="icon"><a href="windshell.html"><img class="image preview" src="images/windshell2/coverart.jpg" alt="UL wind shell" /></a></span>
89+
<div class="icon"><a href="windshell.html"><img class="image preview" src="images/windshell2/coverart.jpg" alt="UL wind shell" /></a>
90+
<span class="badge">Updated!</span>
91+
</div>
8892
<h4>UL Windshell</h4>
8993
</section>
9094
<section> <!-- Trail Running Pack-->
91-
<span class="icon"><a href="trailRunningBackpack.html"><img class="image preview" src="images/trailRunBackpack/trp6.jpg" alt="trail running pack"/></a></span>
95+
<div class="icon"><a href="trailRunningBackpack.html"><img class="image preview" src="images/trailRunBackpack/trp6.jpg" alt="trail running pack"/></a></div>
9296
<h4>Trail Running Backpack</h4>
9397
</section>
9498

9599

96100
<section> <!-- Simple Sleeve -->
97-
<span class="icon"><a href="simpleSleeve.html"><img class="image preview" src="images/simpleSleeve/thumbs/IMG_9838.jpg" alt="card wallet" /></a></span>
101+
<div class="icon"><a href="simpleSleeve.html"><img class="image preview" src="images/simpleSleeve/thumbs/IMG_9838.jpg" alt="card wallet" /></a></div>
98102
<h4>Simple Sleeve</h4>
99103
</section>
100104
<section> <!-- U-Zip -->
101-
<span class="icon"><a href="shoulderzp.html"><img class="image preview" src="images/shoulderzp/front.jpg" alt="should strap zipper pocket" /></a></span>
105+
<div class="icon"><a href="shoulderzp.html"><img class="image preview" src="images/shoulderzp/front.jpg" alt="should strap zipper pocket" /></a></div>
102106
<h4>Shoulder Zip Pocket</h4>
103107
</section>
104108
<section> <!-- U-Zip -->
105-
<span class="icon"><a href="uzip.html"><img class="image preview" src="images/index/uzip7.jpg" alt="bag with u-shaped zipper" /></a></span>
109+
<div class="icon"><a href="uzip.html"><img class="image preview" src="images/index/uzip7.jpg" alt="bag with u-shaped zipper" /></a></div>
106110
<h4>U-Zip Bag</h4>
107111
</section>
108112

109113

110114
<section> <!-- Feed bag -->
111-
<span class="icon"><a href="bpStemBag.html"><img class="image preview" src="images/index/stembag.jpg" alt="feed bag"/></a></span>
115+
<div class="icon"><a href="bpStemBag.html"><img class="image preview" src="images/index/stembag.jpg" alt="feed bag"/></a></div>
112116
<h4>Bikepacking Feed Bag</h4>
113117
</section>
114118
<section> <!-- Running Belt -->
115-
<span class="icon"><a href="runningBelt.html"><img class="image preview" src="images/index/runningbelt.jpg" alt="running belt"/></a></span>
119+
<div class="icon"><a href="runningBelt.html"><img class="image preview" src="images/index/runningbelt.jpg" alt="running belt"/></a></div>
116120
<h4>Running Belt</h4>
117121
</section>
118122
<section> <!-- ED Fanny Pack -->
119-
<span class="icon"><a href="edcFannyPack.html"><img class="image preview" src="images/index/edfannypack.jpg" alt="fanny pack" /></a></span>
123+
<div class="icon"><a href="edcFannyPack.html"><img class="image preview" src="images/index/edfannypack.jpg" alt="fanny pack" /></a></div>
120124
<h4>Everyday Fanny Pack</h4>
121125
</section>
122126
<!--
@@ -180,31 +184,36 @@ <h3>Articles and Guides</h3>
180184
<div class="items style3 small">
181185

182186
<section>
183-
<span class="icon"><a href="zerotohero.html#tools"><img class="image icons" src="images/shared/products/HD1000.webp" alt="sewing tools"/></a></span>
187+
<div class="icon"><a href="zerotohero.html#tools"><img class="image icons" src="images/shared/products/HD1000.webp" alt="sewing tools"/></a></div>
184188
<h4>Essential Tools</h4>
185189
</section>
186190
<section>
187-
<span class="icon"><a href="fabrics.html"><img class="image icons" src="images/index/fabrics.jpg" alt="fabrics"/></a></span>
191+
<div class="icon"><a href="articles/sewingUltralightFabrics.html"><img class="image icons" src="images/index/fabrics.jpg" alt="fabrics"/></a>
192+
<span class="badge">New!</span></div>
193+
<h4>Master Ultralight Apparel</h4>
194+
</section>
195+
<section>
196+
<div class="icon"><a href="fabrics.html"><img class="image icons" src="images/index/fabrics.jpg" alt="fabrics"/></a></div>
188197
<h4>Technical Fabrics</h4>
189198
</section>
190199
<section>
191-
<span class="icon"><a href="hardware.html"><img class="image icons" src="images/index/hardware.jpg" alt="backpack hardware"/></a></span>
200+
<div class="icon"><a href="hardware.html"><img class="image icons" src="images/index/hardware.jpg" alt="backpack hardware"/></a></div>
192201
<h4>Pack Hardware</h4>
193202
</section>
194203
<section>
195-
<span class="icon"><a href="articles/zippers.html"><img class="image icons" src="images/index/zippers.jpg" alt="zippers"/></a></span>
204+
<div class="icon"><a href="articles/zippers.html"><img class="image icons" src="images/index/zippers.jpg" alt="zippers"/></a></div>
196205
<h4>Zippers</h4>
197206
</section>
198207
<section>
199-
<span class="icon"><a href="cricut.html"><img class="image icons" src="images/shared/products/cricut-maker.webp" alt="Cricut Maker"/></a></span>
200-
<h4>Cricut Worth a Buy?</h4>
208+
<div class="icon"><a href="articles/3dCorners.html"><img class="image icons" src="images/index/3dCronersthumb.jpg" alt="zippers"/></a></div>
209+
<h4>Corners & Curves</h4>
201210
</section>
202211
<section>
203-
<span class="icon"><a href="articles/3dCorners.html"><img class="image icons" src="images/index/3dCronersthumb.jpg" alt="zippers"/></a></span>
204-
<h4>Corners & Curves</h4>
212+
<div class="icon"><a href="cricut.html"><img class="image icons" src="images/shared/products/cricut-maker.webp" alt="Cricut Maker"/></a></div>
213+
<h4>Cricut Worth a Buy?</h4>
205214
</section>
206215
<section>
207-
<span class="icon"><a href="https://youtu.be/uqm3Dv6JbF0" target="_blank"><img class="image icons" src="images/shared/partners/200/rotr2.webp" alt="podcast episode"/></a></span>
216+
<div class="icon"><a href="https://youtu.be/uqm3Dv6JbF0" target="_blank"><img class="image icons" src="images/shared/partners/200/rotr2.webp" alt="podcast episode"/></a></div>
208217
<h4>Sewing with Polartec, ep 58</h4>
209218
</section>
210219
</div>

0 commit comments

Comments
 (0)