Skip to content

Commit dbd40ef

Browse files
santaimpersonatorsantaimpersonator
committed
Improve CSS and page layout
- Fix QR code for product links - Fix QR code for videos - Use grid layout to improve page layout - Remove navigation buttons from footer - Styling updates
1 parent 78acfa9 commit dbd40ef

File tree

11 files changed

+73
-66
lines changed

11 files changed

+73
-66
lines changed

‎docs/carriers.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<article style="text-align: center;" markdown>
1919
[Hookup Guide](./SparkFun_GNSS_Flex_pHAT/index.md){ .md-button .md-button--primary }
2020

21-
![QR code to product page](./SparkFun_GNSS_Flex_pHAT/assets/img/qr_code/product.png){ .qr }
21+
![QR code to product page](./SparkFun_GNSS_Flex_pHAT/assets/img/qr_code/product.png){ .tinyqr }
2222
[Purchase from SparkFun :fontawesome-solid-cart-plus:{ .heart }](https://www.sparkfun.com/sparkfun-gnss-flex-phat.html){ .md-button .md-button--primary }
2323
</article>
2424

‎docs/modules.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<article style="text-align: center;" markdown>
1919
[Hookup Guide](./SparkPNT_GNSS_Flex_Module_mosaic-X5/index.md){ .md-button .md-button--primary }
2020

21-
![QR code to product page](./SparkPNT_GNSS_Flex_Module_mosaic-X5/assets/img/qr_code/product.png){ .qr }
21+
![QR code to product page](./SparkPNT_GNSS_Flex_Module_mosaic-X5/assets/img/qr_code/product.png){ .tinyqr }
2222
[Purchase from SparkFun :fontawesome-solid-cart-plus:{ .heart }](https://www.sparkfun.com/sparkpnt-gnss-flex-module-mosaic-x5.html){ .md-button .md-button--primary }
2323
</article>
2424

@@ -35,7 +35,7 @@
3535
<article style="text-align: center;" markdown>
3636
[Hookup Guide](./SparkPNT_GNSS_Flex_Module_LG290P/index.md){ .md-button .md-button--primary }
3737

38-
![QR code to product page](./SparkPNT_GNSS_Flex_Module_LG290P/assets/img/qr_code/product.png){ .qr }
38+
![QR code to product page](./SparkPNT_GNSS_Flex_Module_LG290P/assets/img/qr_code/product.png){ .tinyqr }
3939
[Purchase from SparkFun :fontawesome-solid-cart-plus:{ .heart }](https://www.sparkfun.com/sparkpnt-gnss-flex-module-lg290p.html){ .md-button .md-button--primary }
4040
</article>
4141

‎docs/stylesheet/extra.css‎

Lines changed: 42 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
}
1414

1515

16+
/* Rotate objects */
1617
.rotate-90 {
1718
transform: rotate(90deg); /* Equal to rotateZ(90deg) */
1819
}
@@ -28,7 +29,7 @@
2829

2930
@media screen and (min-width: 45em) {
3031
.md-social.generator-right {
31-
padding: .2rem 0 0
32+
padding: .2rem 0 0
3233
}
3334
}
3435

@@ -45,6 +46,7 @@
4546
padding: 0 0 .2rem;
4647
width:auto
4748
}
49+
}
4850

4951

5052
/* SparkFun dark brand color: #3c464d */
@@ -195,24 +197,27 @@
195197
.md-typeset .github > .admonition-title,
196198
.md-typeset .github > summary {
197199
/* background-image: linear-gradient(to bottom, #8241f9, #4e277b); */
198-
background-color: rgba(130, 80, 223, 0.1);
200+
background-color: rgba(130, 80, 223, 0.4);
201+
/* background-color: rgb(110, 64, 201); */
199202
}
200203
.md-typeset .github > .admonition-title::before,
201204
.md-typeset .github > summary::before {
202-
/* background-color: #1B1F24; */
203205
background-color: var(--md-typeset-color);
204206
-webkit-mask-image: var(--md-admonition-icon--github);
205207
mask-image: var(--md-admonition-icon--github);
206208
}
207209

210+
208211
/* Arduino ========================================================================== */
209212
.md-typeset .admonition.arduino,
210213
.md-typeset details.arduino {
211214
border-color: #62AEB2;
215+
/* border-color: #005c5f; */
212216
}
213217
.md-typeset .arduino > .admonition-title,
214218
.md-typeset .arduino > summary {
215219
background-color: #00878F;
220+
/* background-color: rgba(0, 135, 143, 0.8); */
216221
}
217222
.md-typeset .arduino > .admonition-title::before,
218223
.md-typeset .arduino > summary::before {
@@ -224,6 +229,7 @@
224229
.md-typeset .arduino > summary {
225230
/* color: #E5AD24; */
226231
/* color: #E47128; */
232+
/* color: #8C7965; */
227233
color: white;
228234
}
229235

@@ -255,6 +261,7 @@
255261
.md-typeset .admonition.python,
256262
.md-typeset details.python {
257263
border-color: #646464;
264+
/* border-color: #4B8BBE; */
258265
}
259266
.md-typeset .python > .admonition-title,
260267
.md-typeset .python > summary {
@@ -264,12 +271,15 @@
264271
.md-typeset .python > .admonition-title::before,
265272
.md-typeset .python > summary::before {
266273
background-color: #FFD43B;
274+
/* background-color: #4B8BBE; */
267275
-webkit-mask-image: var(--md-admonition-icon--python);
268276
mask-image: var(--md-admonition-icon--python);
269277
}
270278
.md-typeset .python > .admonition-title,
271279
.md-typeset .python > summary {
272-
color: #FFE873;
280+
color: white;
281+
/* color: #646464; */
282+
/* color: #FFE873; */
273283
}
274284

275285

@@ -418,13 +428,26 @@
418428

419429

420430
/* ================================================================================== */
421-
/* YouTube Videos */
431+
/* YouTube Videos */
422432
/* ================================================================================== */
423433

424434
/* Auto adjust embedded youtube videos size */
425435
/* Aspect ratio: height = 56.25% of width */
426436
/* 90vw = 90% of (viewport width) */
427437

438+
.video {
439+
position: relative;
440+
width: 100%;
441+
}
442+
.video iframe {
443+
position: relative;
444+
top: 0;
445+
width: 60vw;
446+
height: 33.75vw;
447+
border: 0;
448+
overflow: hidden;
449+
}
450+
428451
.video-container {
429452
position: relative;
430453
padding-bottom: 56.25%; /* 16:9 */
@@ -470,6 +493,8 @@
470493
overflow: hidden;
471494
}
472495

496+
497+
473498
/* Add compatibility for mobile devices */
474499
/* ================================================================================== */
475500
/* ================================================================================== */
@@ -513,12 +538,12 @@
513538

514539
/* No ToC */
515540
/* ================================================================================== */
516-
@media (max-width: 750px) {
541+
/* @media (max-width: 750px) {
517542
.video-container iframe {
518543
width: 60vw;
519544
height: 33.75vw;
520545
}
521-
}
546+
} */
522547

523548

524549
/* ================================================================================== */
@@ -556,26 +581,27 @@
556581
}
557582

558583
/* Sets images size in tables */
559-
.md-typeset table:not([class]) td img {
560-
width: 100%;
561-
max-width: 150px;
562-
max-height: 150px;
584+
.md-typeset table:not([class]) * + figure img {
585+
max-width: 75px;
563586
}
564587

565-
566588
/* ================================================================================== */
567-
/* YoutTube Videos */
589+
/* YouTube Videos */
568590
/* ================================================================================== */
569591

570-
.video-container iframe {
592+
.video {
571593
display: none;
572594
}
573595

574-
.video-500px iframe {
596+
.video-container {
575597
display: none;
576598
}
577599

578-
.video-300px iframe {
600+
.video-500px {
601+
display: none;
602+
}
603+
604+
.video-300px {
579605
display: none;
580606
}
581607

@@ -607,42 +633,6 @@
607633
}
608634

609635

610-
611-
/* Fixes positioning of admonition icon */
612-
/* .md-typeset :is(.admonition-title,summary):before {
613-
top: 0.6rem;
614-
left: 0.6rem;
615-
} */
616-
/* Fixes appearance of admonition icon */
617-
/* .md-typeset :is(.admonition,details)>:last-child {
618-
background-color: transparent;
619-
} */
620-
621-
/* Fixes margin spacing for lists */
622-
/* .md-typeset ol,ul {
623-
margin-left: 1.5rem;
624-
} */
625-
626-
/* Adjusts page break for PDF generator */
627-
article h2,h3,h4,h5,h6,ol,ul {
628-
page-break-before: avoid;
629-
}
630-
article div.admonition {
631-
page-break-before: avoid;
632-
}
633-
article table,ol,ul {
634-
page-break-inside: auto !important;
635-
}
636-
637-
/* Displays first tab (workaround to rendering issue) */
638-
/* * + .tabbed-content {
639-
display: contents;
640-
}
641-
* + .tabbed-content .tabbed-block {
642-
display: contents;
643-
page-break-after: always;
644-
} */
645-
646636
/* Prevents page break when tabs are embedded in an admonition*/
647637
/* article details.note {
648638
display: inline-block;

‎docs/system_overview.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,20 @@
66
The GNSS Flex system is designed to be modular with a standardized pin layout that keeps the ecosystem pin-compatible for upgrades and allows boards to be easily swapped for repairs. The ecosystem is comprised of two boards, which mate through two 2x10-pin, 2mm pitch headers.
77

88

9+
<div class="grid" markdown>
10+
11+
<div markdown>
12+
913
<figure markdown>
1014
<model-viewer alt="Utilizing the GNSS Flex System" src="../assets/3d_model/GNSS_Flex-Stack_Animation.glb" poster="./assets/img/hookup_guide/animation-attach_module.gif" camera-controls autoplay tone-mapping="neutral" shadow-intensity="2" shadow-softness="0.2" camera-orbit="0deg 70deg 16.7m" field-of-view="18deg" camera-target="2.93m 1.16m -1.29m" style="width: 500px; height: 300px;">
1115
</model-viewer>
1216
<figcaption markdown>Attaching a GNSS Flex module to a GNSS Flex *carrier* board.</figcaption>
1317
</figure>
1418

19+
</div>
20+
21+
22+
<div markdown>
1523

1624
???+ tip "Manipulate 3D Model"
1725
<article style="text-align: center;" markdown>
@@ -24,6 +32,10 @@ The GNSS Flex system is designed to be modular with a standardized pin layout th
2432

2533
</article>
2634

35+
</div>
36+
37+
</div>
38+
2739

2840
The SparkPNT GNSS Flex modules function as *plug-in* boards that feature different GNSS receivers. They are designed to mate with *carrier* boards for various purposes; such as a breakout board, Raspberry Pi pHAT, SparkPNT product line, etc.
2941

‎docs/troubleshooting_tips.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,4 @@
1515
<!-- QR Code for Hookup Guide (Displayed when printed) -->
1616
<article style="text-align: center;" markdown>
1717
![QR code to the hookup guide](./assets/img/qr_code/hookup_guide.png){ .qr }
18-
</article>
18+
</article>

‎flex_boards/SparkPNT_GNSS_Flex_Module_LG290P/docs/assets/img/qr_code/video-quectel_lg290p.png‎

-29.2 KB
Loading

‎flex_boards/SparkPNT_GNSS_Flex_Module_LG290P/docs/hardware_overview.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -155,10 +155,11 @@ The centerpiece of the LG290P GNSS Flex module, is the [LG290P GNSS module](./as
155155

156156
<div class="grid cards" markdown>
157157

158-
<div markdown>
158+
<div style="text-align: center;" markdown>
159159

160-
<article class="video-500px" style="text-align: center; margin: auto;" markdown>
161160
![QR code to product video](./assets/img/qr_code/video-quectel_lg290p.png){ .qr width=100 }
161+
162+
<article class="video-500px" style="margin: auto;" markdown>
162163
<iframe src="https://player.vimeo.com/video/1000742664?dnt=1&amp;app_id=122963" title="Quectel: Product Intro for LG290P GNSS Module" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
163164
</article>
164165

‎flex_boards/SparkPNT_GNSS_Flex_Module_mosaic-X5/docs/hardware_overview.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -346,10 +346,11 @@ The centerpiece of the mosaic-X5 GNSS Flex module, is the [mosaic-X5 module](./a
346346

347347
<div class="grid cards" markdown>
348348

349-
<div markdown>
349+
<div style="text-align: center;" markdown>
350350

351-
<article class="video-500px" style="text-align: center; margin: auto;" markdown>
352351
![QR code to product video](./assets/img/qr_code/video-septentrio_mosaic-x5.png){ .qr width=100 }
352+
353+
<article class="video-500px" style="margin: auto;" markdown>
353354
<iframe src="https://www.youtube.com/embed/Co8hrVeklAA" title="Septentrio: Mosaic - GNSS / GPS module receiver range" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
354355
</article>
355356

‎flex_boards/SparkPNT_GNSS_Flex_Module_mosaic-X5/docs/software_overview.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -216,10 +216,11 @@ With the USB driver installed, the mosaic-X5 module supports Ethernet-over-USB.
216216
</div>
217217

218218

219-
<div markdown>
219+
<div style="text-align: center;" markdown>
220220

221-
<article class="video-500px" style="text-align: center; margin: auto;" markdown>
222221
![QR code to product video](./assets/img/qr_code/video-getting_started-mosaic-x5.png){ .qr width=100 }
222+
223+
<article class="video-500px" style="margin: auto;" markdown>
223224
<iframe src="https://www.youtube.com/embed/hrL5J6Q5gX8" title="Septentrio: Getting started with the Septentrio mosaic receiver module" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
224225
</article>
225226

‎flex_boards/SparkPNT_GNSS_Flex_Module_mosaic-X5/docs/troubleshooting_tips.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,11 @@ The mosaic-X5 module is sensitive to [ESD](https://en.wikipedia.org/wiki/Electro
2222
As recommended by the manufacturer, we highly recommend that users take the necessary precautions to avoid damaging their module.
2323

2424

25-
<article class="video-500px" style="text-align: center; margin: auto;" markdown>
25+
<article style="text-align: center;" markdown>
2626
![QR code to product video](./assets/img/qr_code/video-getting_started-mosaic-x5.png){ .qr width=100 }
27+
</article>
28+
29+
<article class="video-500px" style="margin: auto;" markdown>
2730
<iframe src="https://www.youtube.com/embed/hrL5J6Q5gX8?si=jOPBat8rzMnL7Uz4&amp;start=26;&amp;end=35;" title="Septentrio: Getting Started Video (playback starts at ESD warning)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
2831
</article>
2932

0 commit comments

Comments
 (0)