Formatting updates

Updates footer, adds USWDS assets, and various style/format changes.

README.md

@@ -7,8 +7,9 @@
 
 This repository hosts wiki pages for the suite of softwares comprising the
 ITS Propagation Library. The wiki is generated with [Quarto](https://quarto.org/)
-and hosted using [GitHub Pages](https://pages.github.com/). The live version of the
-wiki is available [ntia.github.io/propagation-library-wiki](https://ntia.github.io/propagation-library-wiki)
+and hosted using [GitHub Pages](https://pages.github.com/). Additional styling
+uses the [U.S. Web Design System (USWDS)](https://designsystem.digital.gov/). The
+live version of the wiki is available [ntia.github.io/propagation-library-wiki](https://ntia.github.io/propagation-library-wiki)
 
 ## Contributing
 

_quarto.yml

@@ -43,9 +43,11 @@ website:
 
 format:
   html:
-    # Format options
+    # Format/theme options
     theme: [cosmo, theme.scss]
-    # css: uswds/dist/css/uswds.min.css  # Maybe compile from SASS instead?
+    css: uswds/css/uswds.min.css  # Maybe compile from SASS instead?
+    mainfont: $source-sans-pro    # Defined in theme.scss
+    fontcolor: $semi-black        # Defined in theme.scss
     # Table of Contents
     toc: true
     toc-title: On this page
@@ -58,14 +60,13 @@ format:
     code-fold: false
     code-overflow: scroll
     code-copy: true
-    code-block-border-left: $secondary
-    code-block-bg: rgba(233, 236, 239, 0.65) # default restored after enabling border
     # Figures
     fig-align: center
     fig-responsive: true
     # Links
     link-external-icon: true
     link-external-newwindow: true
+    link-external-filter: .*ntia\.gov.*
     # References
     bibliography: references.bib
     csl: ieee.csl

footer.html

@@ -1,77 +1,145 @@
-<footer class="usa-footer usa-footer-big">
-    <div class="usa-footer-primary-section additionallinks">
-        <div class="usa-grid">
-            <div class="usa-footer-nav ">
-                <div class="region region-footer-menu">
-                    <ol class="dotsbetween linesbetween">
-
-                        <li>
-                            <a href="https://www.ntia.gov/page/2011/ntia-privacy-policy" target="_blank">Privacy Policy</a>
-                        </li>
-                        <li>
-                            <a href="https://www.ntia.gov/page/2011/foia-information" target="_blank">FOIA</a>
-                        </li>
-                        <li>
-                            <a href="https://www.ntia.gov/page/2011/about-ntias-web-site-accessibility-policy" target="_blank">Accessibility</a>
-                        </li>
-                        <li>
-                            <a href="https://www.ntia.gov/page/2011/information-quality-guidelines" target="_blank">Information Quality</a>
-                        </li>
-                        <li>
-                            <a href="https://www.commerce.gov/vulnerability-disclosure-policy" target="_blank">Vulnerability Disclosure Policy</a>
-                        </li>
-
-                    </ol>
-                </div>
-            </div>
+<footer class="usa-footer">
+  <div class="grid-container usa-footer__return-to-top">
+    <a href="#">Return to top</a>
+  </div>
+  <div class="usa-footer__primary-section">
+    <nav class="usa-footer__nav" aria-label="Footer navigation">
+      <ul class="grid-row grid-gap">
+        <li
+          class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
+        >
+          <a
+            class="usa-footer__primary-link"
+            href="https://www.ntia.gov/page/ntia-privacy-policy"
+            >Privacy Policy</a
+          >
+        </li>
+        <li
+          class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
+        >
+          <a
+            class="usa-footer__primary-link"
+            href="https://www.ntia.gov/page/freedom-information-act-information"
+            >FOIA</a
+          >
+        </li>
+        <li
+          class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
+        >
+          <a
+            class="usa-footer__primary-link"
+            href="https://www.ntia.gov/page/about-ntias-web-site-accessibility-policy"
+            >Accessibility</a
+          >
+        </li>
+        <li
+          class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
+        >
+          <a
+            class="usa-footer__primary-link"
+            href="https://www.ntia.gov/page/information-quality-guidelines"
+            >Information Quality</a
+          >
+        </li>
+      </ul>
+    </nav>
+  </div>
+  <div class="usa-footer__secondary-section">
+    <div class="grid-container">
+      <div class="grid-row grid-gap">
+        <div
+          class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2"
+        >
+          <div class="mobile-lg:grid-col-auto">
+            <img
+              class=""
+              src="/images/ITSlogoOnly400.png"
+              alt="Institute for Telecommunication Sciences logo"
+            />
+            <p class="usa-footer__logo-heading">
+              Institute for Telecommunication Sciences
+            </p>
+            <address class="usa-footer__address">
+              <a href="https://ntia.gov"
+                >National Telecommunications and Information Administration</a
+              >
+              <br />
+              <a href="https://commerce.gov"
+                >United States Department of Commerce</a
+              >
+              <p>
+                325 Broadway, Boulder, CO 80305-3337 <br />
+                <a href="tel:1-303-497-3571">(303) 497-3571</a>
+                <a href="mailto:[email protected]">[email protected]</a>
+              </p>
+            </address>
+          </div>
         </div>
-    </div>
-    <div class="usa-footer-secondary_section usa-background-dark">
-        <div class="usa-grid">
-            <div class="usa-grid usa-width-one-half">
-                <div class="usa-footer-logo usa-width-two-thirds">
-
-                    <div class="footer-title">
-                        <div>
-                            Institute for Telecommunication Sciences
-                        </div>
-                        <div>
-                            <a href="https://www.ntia.gov/" target="_blank">
-                                National Telecommunications and Information Administration
-                            </a>
-                        </div>
-                        <div>
-                            <a href="https://www.commerce.gov/" target="_blank">
-                                United States Department of Commerce
-                            </a>
-                        </div>
-                        <div>
-                            325 Broadway, Boulder, CO 80305-3337
-                        </div>
-                        <div>
-                            (303) 497-3571 <a href="mailto:[email protected]">[email protected]</a>
-                        </div>
-
-                    </div>
-                </div>
+        <div class="usa-footer__contact-links mobile-lg:grid-col-6">
+          <div class="usa-footer__social-links grid-row grid-gap-1">
+            <div class="grid-col-auto">
+              <a class="usa-social-link" href="https://its.ntia.gov">
+                <img
+                  class="usa-social-link__icon"
+                  src="/uswds/img/usa-icons/home.svg"
+                  alt="ITS Homepage"
+                />
+              </a>
             </div>
-
-            <div class="usa-grid usa-width-one-half">
-                <div class="region region-footer-secondary">
-                    <ol class="dotsbetween">
-
-                        <li><a href="/about-its/visiting-its.aspx" title="Visiting ITS">Visiting the Boulder Labs</a></li>
-                        <li><a rel="noopener" href="https://www.boulder.doc.gov/docstatus.php" target="_blank">Boulder Labs Site Status</a></li>
-                    </ol>
-                </div>
-                <div>
-                    Have a question about government services? Contact <a href="https://usa.gov" target="_blank">USA.gov</a>.
-                </div>
+            <div class="grid-col-auto">
+              <a class="usa-social-link" href="https://github.com/NTIA">
+                <img
+                  class="usa-social-link__icon"
+                  src="/uswds/img/usa-icons/github.svg"
+                  alt="NTIA organization on GitHub"
+                />
+              </a>
             </div>
+            <div class="grid-col-auto">
+              <a
+                class="usa-social-link"
+                href="https://www.linkedin.com/company/institute-for-telecommunication-sciences/"
+              >
+                <img
+                  class="usa-social-link__icon"
+                  src="/uswds/img/usa-icons/linkedin.svg"
+                  alt="ITS profile on LinkedIn"
+                />
+              </a>
+            </div>
+            <div class="grid-col-auto">
+              <a
+                class="usa-social-link"
+                href="https://youtube.com/playlist?list=PLO2lqCK7WyTBV5JZrCd77CvJT6LhU_XJv&si=TGJIbvDeJYGRLIKz"
+              >
+                <img
+                  class="usa-social-link__icon"
+                  src="/uswds/img/usa-icons/youtube.svg"
+                  alt="ITS playlist on NTIA YouTube profile"
+                />
+              </a>
+            </div>
+          </div>
+          <p class="usa-footer__contact-heading">
+            PropLib Questions? Contact Us:
+          </p>
+          <address class="usa-footer__address">
+            <div class="usa-footer__contact-info grid-row grid-gap">
+              <div class="grid-col-auto">
+                <a href="mailto:[email protected]">[email protected]</a>
+              </div>
+            </div>
+          </address>
+          <div class="usa-footer__contact-info grid-row grid-gap">
+            <p>
+              Have a question about government services? Contact
+              <a href="https://usa.gov">USA.gov</a>.
+            </p>
+          </div>
         </div>
-        <div class="bottom-image">
-            <img src="/images/ITSlogoOnly400.png" id="its_logo" Width="256" Height="40" alt="Institute for Telecommunication Sciences Logo" />
-        </div>
+      </div>
     </div>
-
-</footer>
+  </div>
+</footer>
+<!-- USWDS Library -->
+<script src="/uswds/js/uswds.min.js"></script>

header.html

@@ -1,9 +1,29 @@
 <!-- ITS Favicon -->
-<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
-<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
-<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
+<link
+  rel="apple-touch-icon"
+  sizes="180x180"
+  href="images/apple-touch-icon.png"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="images/favicon-32x32.png"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="images/favicon-16x16.png"
+/>
 
 <!-- Webfont from Google -->
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap" rel="stylesheet">
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap"
+  rel="stylesheet"
+/> -->
+
+<!-- USWDS Initializer -->
+<script src="/uswds/js/uswds-init.min.js"></script>

models/ITM/python.qmd

@@ -17,7 +17,7 @@ The `itm` package requires `numpy`.
 
 Use the following command to install `itm` from the local pip repo:
 
-```
+```cmd
 pip install itm --no-index --find-links file://itsfs01/Tools/Python/pip
 ```
 

quick-start/matlab.qmd

@@ -64,7 +64,7 @@ For OSM (or HCHB) users,
 
 Once the installion has completed, you can verify and update the package location of `matpak`.  To do this, open "Windows Explorer" and nagivate to "Documents".  Inside the "MATLAB" directory, you should see a "matpak" subdirectory which contains a `settings.ini` file.  Open this file in a text editor.  The default setting should be:
 
-```
+```cmd
 SOURCE=\\itsfs01\tools\Matpak\packages
 ```
 
@@ -74,7 +74,7 @@ This is the location that `matpak` will use to search for packages.  Update this
 
 Installing packages requires only a single command.  To install the PropCore package, run:
 
-```
+```cmd
 >> matpak install propcore
 Matpak: Package 'PropCore' (Version 1.0.0) has been installed.
 >> 
@@ -88,7 +88,7 @@ Matpak: Package 'PropCore' (Version 1.0.0) has been installed.
 
 In a script file or the Command Window, copy the following snippet of code:
 
-```MATLAB
+```matlab
 theta = Terrestrial.TakeoffAngle(5, 1, 100, 8400)
 ```
 

quick-start/python.qmd

@@ -32,7 +32,7 @@ Modify example to avoid use of `conda`
 
 Create a new conda environment:
 
-```
+```cmd
 conda create --name prop
 conda activate prop
 ```