replace buttons to a secondary button, make images smaller, update te… (#134)

…xt to SG conventions

Problem
=======
Need to use updated SG and update text sizes, images, and buttons
Link to GitHub Issue(s): #133 

Solution
========
- install latest SG version
- update styling

with @jeanettedepatie 

Change summary:
---------------
- [ ] Updated Spec Versions
- [ ] Tidy, well formulated change
- [ ] Another great message
- [ ] Something else I/we did

Steps to Verify:
----------------
1. check it looks good in light and dark
2. check that button links work on the outlined buttons that were added
in HTML to the markdown

Screenshots (optional):
-----------------------

<img width="956" height="1115" alt="Screenshot 2025-10-07 at 2 26 36 PM"
src="https://github.com/user-attachments/assets/87f95f96-18d7-4ccc-9941-40223c71e4ee"
/>
<img width="954" height="856" alt="Screenshot 2025-10-07 at 2 27 05 PM"
src="https://github.com/user-attachments/assets/20582b3c-7312-4098-9fbd-102ba50bb78c"
/>

Author: claireclark1

css/button-links.css

@@ -1,63 +1,102 @@
 .button-links,
-.button-links > p {
-  display: flex;
-  justify-content: space-around;
-  align-content: center;
-  align-items: stretch;
-  flex-wrap: wrap;
+.button-links-outlined {
+  max-width: 800px;
+  margin: 48px auto 0 auto;
 }
 
-.button-links > p {
-  width: 100%;
+.button-links,
+.button-links > p,
+.button-links-outlined,
+.button-links-outlined > p {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  place-items: center;
+  gap: 24px;
+}
+
+/* center when there's only one child */
+.button-links:has(> :only-child),
+.button-links-outlined:has(> :only-child) {
+  grid-template-columns: 1fr;
+  justify-items: center;
   margin: 0;
+  max-width: 400px;
+}
+
+.button-links > p,
+.button-links-outlined > p {
+  width: 100%;
 }
 
 .button-links a,
 .button-links > p a,
 .button-links a:link,
 .button-links > p a:link,
 .button-links a:visited,
-.button-links > p a:visited {
+.button-links > p a:visited,
+.button-links-outlined a,
+.button-links-outlined > p a,
+.button-links-outlined a:link,
+.button-links-outlined > p a:link,
+.button-links-outlined a:visited,
+.button-links-outlined > p a:visited {
+  @apply docsBodyText;
   text-decoration: none;
-  box-sizing: content-box;
   font-weight: 700;
-  color: var(--button-nav-fg);
-  background-color: var(--button-nav-bg);
   border-radius: 9999px;
   user-select: none;
-  padding: 20px 10%;
-  margin: 10px;
   display: flex;
-  font-size: 20px;
   flex: 0.5;
   transition: none;
   justify-content: center;
   align-items: center;
   text-align: center;
   white-space: nowrap;
+  max-width: 388px;
+  width: 100%;
+}
+
+.button-links a,
+.button-links > p a,
+.button-links a:link,
+.button-links > p a:link,
+.button-links a:visited,
+.button-links > p a:visited {
+  padding: 12px 10%;
+  color: var(--button-nav-fg);
+  background-color: var(--button-nav-bg);
+}
+
+.button-links-outlined a,
+.button-links-outlined > p a,
+.button-links-outlined a:link,
+.button-links-outlined > p a:link,
+.button-links-outlined a:visited,
+.button-links-outlined > p a:visited {
+  padding: 8px 10%;
+  color: var(--button-outlined-text);
+  border: 2px solid var(--button-outlined-border);
+  background: var(--button-outlined-bg);
 }
 
 @media screen and (max-width: 1080px) {
-  .button-links a,
-  .button-links > p a,
-  .button-links a:link,
-  .button-links > p a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 90%;
-    width: 100%;
-    white-space: normal;
+  .button-links,
+  .button-links > p,
+  .button-links-outlined,
+  .button-links-outlined > p {
+    grid-template-columns: 1fr;
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 1080px) {
   .button-links a,
   .button-links > p a,
   .button-links a:link,
-  .button-links > p a:link {
-    box-sizing: border-box;
-    margin: 10px 6px;
-    flex: 0 0 100%;
+  .button-links > p a:link,
+  .button-links-outlined a,
+  .button-links-outlined > p a,
+  .button-links-outlined a:link,
+  .button-links-outlined > p a:link {
     width: 100%;
     white-space: normal;
   }
@@ -71,3 +110,12 @@
   color: var(--button-nav-hover-fg);
   background: var(--button-nav-hover-bg);
 }
+
+.button-links-outlined a:hover,
+.button-links-outlined > p a:hover,
+.button-links-outlined a:visited:hover,
+.button-links-outlined > p a:visited:hover {
+  text-decoration: none;
+  color: var(--button-outlined-hover-text);
+  border: 2px solid var(--button-outlined-hover-border);
+}

css/highlight-dark.css

@@ -104,9 +104,13 @@ pre .hljs {
 
 .svg-embed-light {
   display: none;
+  max-width: 800px;
+  margin: 0 auto;
 }
 .svg-embed-coal {
   display: block;
+  max-width: 800px;
+  margin: 0 auto;
 }
 
 .no-js .svg-embed-light {

css/overrides.css

@@ -10,7 +10,7 @@
 }
 
 body {
-  font-size: 18px;
+  @apply docsBodyText;
   font-family: "Poppins", sans-serif;
 }
 
@@ -269,7 +269,7 @@ body#sidebar {
 #content {
   overflow-y: auto;
   min-height: 100vh;
-  padding: 32px 45px 128px 6px;
+  padding: 10px 45px 128px 6px;
 }
 
 #content .nav-wrapper {
@@ -278,8 +278,8 @@ body#sidebar {
 }
 
 #content .mobile-nav-chapters {
+  @apply docsSubHeaderText;
   display: block;
-  font-size: 1em;
   font-weight: 700;
   text-align: center;
   text-decoration: none;

package.json

@@ -19,7 +19,7 @@
     "lint": "npm run lint:md && npm run lint:spellcheck"
   },
   "devDependencies": {
-    "@frequency-chain/style-guide": "^0.3.0",
+    "@frequency-chain/style-guide": "v0.4.1",
     "@tailwindcss/cli": "^4.1.7",
     "remark": "^15.0.1",
     "remark-cli": "^12.0.1",

pages/Architecture/index.md

@@ -2,4 +2,4 @@
 
 Frequency is a Layer 1 blockchain built to support high volume, data-driven applications within a decentralized environment. This section outlines the core components that make up Frequency and the ecosystem in which it operates.
 
-{{#button-links}}
+{{#button-links-outlined}}

pages/Data/index.md

@@ -5,5 +5,4 @@ This data can be stored directly on each node for critical and frequently access
 
 This section discusses the different types of data management provided by Frequency, and the tradeoffs of using each in terms of high availability, scalability, and throughput.
 
-
-{{#button-links}}
+{{#button-links-outlined}}

pages/Delegation/index.md

@@ -14,4 +14,4 @@ Users can also directly revoke delegated permissions, even if they are Coinless
 
 MSAs allow users to delegate tasks to Providers on their behalf and ensure Messages and Stateful Storage (i.e. non-financial transactions) have verifiable chains of authorship, while maintaining the ability to revoke a delegation at any time without cost.
 
-{{#button-links}}
+{{#button-links-outlined}}

pages/Guides/BecomeAProvider.md

@@ -9,16 +9,16 @@ Providers handle transactions, manage user delegations, and facilitate various o
 
 {{#svg-embed pages/images/Become_Provider.svg Become a Provider}}
 
-### From a Developer's Perspective, Providers
+### **From a Developer's Perspective, Providers**
 
 - **Manage Delegated Tasks:** Users delegate specific permissions to Providers, allowing them to perform only those specified actions on the user's behalf in a secure and transparent manner.
-- **Create and Update User-Generated Content with Permission:**  Providers publish new content or modify existing content on behalf of users, such as posts, comments, and other social interactions, after obtaining the user's consent.
-- **Maintain the User's Social Graph:**  Providers manage and update users' social connections on Frequency, (based on a user’s direction and consent) such as following or unfollowing other users, and maintaining friend lists. These actions ensure that the user's relationships are accurately represented on the blockchain.
+- **Create and Update User-Generated Content with Permission:** Providers publish new content or modify existing content on behalf of users, such as posts, comments, and other social interactions, after obtaining the user's consent.
+- **Maintain the User's Social Graph:** Providers manage and update users' social connections on Frequency, (based on a user’s direction and consent) such as following or unfollowing other users, and maintaining friend lists. These actions ensure that the user's relationships are accurately represented on the blockchain.
 - **Store User-Generated Content and Write Links to It on Frequency:** Providers store user-generated content files (e.g., media files, documents) and publish links to the content on chain or batched metadata in The InterPlanetary File Service (IPFS). This enables decentralized access and verification. Providers have many options for user-generated content file storage including decentralized storage like IPFS.
 - **Simplify User Participation:** By handling transaction complexities and fees, Providers make blockchain applications more accessible to end-users who may not possess sufficient technical knowledge or hold tokens.
 - **Enhance User Experience:** Providers may offer intuitive user interfaces and seamless interactions, so users don’t need to experience or understand the underlying blockchain mechanics.
 
-## How You Can Become a Provider
+## **How You Can Become a Provider**
 
 ### Step 1: Generate Your Keys
 
@@ -59,4 +59,8 @@ You can also use the [Provider Dashboard](https://provider.frequency.xyz/) to ad
 
 Ready to move to production? [Become a Provider on Mainnet](https://projectlibertylabs.github.io/gateway/GettingStarted/BecomeProvider.html#mainnet).
 
-**[Become a Provider Today](https://provider.frequency.xyz/)**
+<div class="button-links-outlined">
+  <a href="https://provider.frequency.xyz/" target="_blank" rel="noopener noreferrer">
+    Become a Provider Today
+  </a>
+</div>

pages/Guides/Gateway.md

@@ -11,12 +11,12 @@
 Gateway offers a suite of tools and services hosted by you that make it easy to connect your applications to the Frequency blockchain.
 This allows your development team to focus on building outstanding user experiences without managing the complexity of blockchain interactions.
 
-## What is Frequency Developer Gateway?
+## **What is Frequency Developer Gateway?**
 
 **Frequency Developer Gateway** has a simple API to interact with the Frequency social layers (including identity, Universal Social Graph, user-generated content, and more).
 It includes a suite of self-hosted tools you can select from to build the best applications for your users.
 
-### Key Features:
+### **Key Features:**
 
 #### Decentralize with Web2 API Simplicity:
 
@@ -31,12 +31,12 @@ It includes a suite of self-hosted tools you can select from to build the best a
 - **Connect Your Users with Their Universal Social Graph:** Access and manage user relationships across the Frequency Ecosystem.
 - **Read, Write, and Interact with Social Media Content:** Enable rich social interactions within your application.
 
-## How Can I Integrate Frequency Developer Gateway?
+## **How Can I Integrate Frequency Developer Gateway?**
 
 Frequency Developer Gateway is composed of independent, self-hosted, standalone microservices, allowing you to use only those components you need.
 These microservices include simple APIs for interacting with various aspects of the Frequency Ecosystem.
 
-### Key Microservices:
+### **Key Microservices:**
 
 #### 1. Account Service
 
@@ -45,22 +45,21 @@ Accounts are defined with an `msaId` (64-bit identifier) and can contain additio
 
 [Account Service Docs](https://projectlibertylabs.github.io/gateway/Build/AccountService/AccountService.html)
 
-##### Features:
+Features:
 
 - **Account Authentication and Single Sign-On:** Simplifies user onboarding with Sign-In with Frequency (SIWF).
 - **Delegation Management:** Manages permissions and actions delegated by users.
 - **User Handle Creation and Retrieval:** Creates and manages unique, user-selected user handles on Frequency.
 - **User Key Retrieval and Management:** Accesses and securely manages user cryptographic keys.
 
-
 #### 2. Universal Social Graph Service
 
 The Graph Service enables easy interaction with social graphs on Frequency.
 Each graph connection can be private or public and can be unidirectional (a follow) or bidirectional (mutually opted-in friend connection).
 
 [Social Graph Service Docs](https://projectlibertylabs.github.io/gateway/Build/GraphService/GraphService.html)
 
-##### Features:
+Features:
 
 - **Fetch User Graph:** Retrieves a user's social connections and relationships.
 - **Update Delegated User Graphs:** Modifies social graphs on behalf of users with their permission.
@@ -74,7 +73,7 @@ User-generated content can be stored using IPFS or other systems.
 
 [Content Publishing Service Docs](https://projectlibertylabs.github.io/gateway/Build/ContentPublishing/ContentPublishing.html)
 
-##### Features:
+Features:
 
 - **Create Posts to Publicly Broadcast:** Publishes links to content metadata to the chain.
 - **Create Replies to Posts:** Facilitates conversations by allowing users to publish responses to user-generated content.
@@ -89,10 +88,14 @@ The Content Watcher Service helps your application process content from the Freq
 
 [Content Watcher Service Docs](https://projectlibertylabs.github.io/gateway/Build/ContentWatcher/ContentWatcher.html)
 
-##### Features:
+Features:
 
 - **Parse and Validate Frequency Content:** Ensures content is well formed and complies with network standards.
 - **Filterable Webhooks:** Receive notifications based on specific filters.
 - **Scanning Control:** Manage how and when the service scans Frequency.
 
-**[Start Using Frequency Developer Gateway](https://projectlibertylabs.github.io/gateway/)**
+<div class="button-links-outlined">
+  <a href="https://projectlibertylabs.github.io/gateway/" target="_blank" rel="noopener noreferrer">
+    Start Using Frequency Developer Gateway
+  </a>
+</div>

pages/Guides/SSO.md

@@ -8,28 +8,26 @@ Sign-in With Frequency (SIWF) allows Providers to enhance their apps with secure
 
 {{#svg-embed pages/images/Single_Sign_On.svg Single Sign-On Flow}}
 
-## What is Sign-In with Frequency?
+## **What is Sign-In with Frequency?**
 
 Sign-in With Frequency (SIWF) provides tools and documentation to integrate an easy-to-use single sign-on identity solution for users of Frequency, currently supporting Frequency Access for key management.
 SIWF simplifies the authentication process, allowing users to access the entire Frequency ecosystem effortlessly while maintaining control over their personal data.
 
 By leveraging Frequency Access, Providers can offer users a seamless experience, making it easier for consumers to engage with applications without confronting the complexities of blockchain technology.
 Additionally, developers benefit by receiving verified emails, enhancing security and trust within your application.
 
-### Key Features
+### **Key Features**
 
 #### Easy Integration:
 
 - Utilize developer-friendly documentation and tools to quickly add SIWF to your applications.
 - SIWF streamlines the setup process, allowing Providers to integrate authentication and identity management with minimal effort.
 
-
 #### Secure Authentication:
 
 - SIWF works with Frequency Access to verify users and manages the signing of requested payloads, ensuring a secure authentication process.
 - Developers can receive emails that Frequency Access has previously verified to enhance communication and security within their applications.
 
-
 #### Universal Identity and Authentication:
 
 - Offers users a familiar and standardized sign-in experience with a consistent sign-in button.
@@ -45,4 +43,8 @@ Additionally, developers benefit by receiving verified emails, enhancing securit
 - Offers a familiar sign-in process that allows users to effortlessly take control of their accounts.
 - Reduces barriers to entry, encouraging more users to engage with your application.
 
-**[Integrate SIWF with Your App](https://projectlibertylabs.github.io/gateway/GettingStarted/SSO.html)**
+<div class="button-links-outlined">
+  <a href="https://projectlibertylabs.github.io/gateway/GettingStarted/SSO.html" target="_blank" rel="noopener noreferrer">
+    Integrate SIWF with Your App
+  </a>
+</div>