Readeability adjustements (#1077)

* css adjsutments for readeability and — repalcement in content recently added by me

---------

Co-authored-by: jdv <julien@crowdsec.net>

Author: rr404

crowdsec-docs/docs/appsec/quickstart/haproxy_spoa.mdx

@@ -13,7 +13,7 @@ Make sure the following are already done on the machine running HAProxy (each is
 
 1. **CrowdSec Security Engine** installed and running — see the [Linux quickstart](/u/getting_started/installation/linux).
 2. **HAProxy** already running and proxying your application(s).
-3. **HAProxy SPOA bouncer** (`crowdsec-haproxy-spoa-bouncer`) installed and registered against the CrowdSec LAPI — see the [SPOA bouncer guide](/u/bouncers/haproxy_spoa).
+3. **HAProxy SPOA bouncer** (`crowdsec-haproxy-spoa-bouncer`) installed and registered against the CrowdSec LAPI. See the [SPOA bouncer guide](/u/bouncers/haproxy_spoa).
 
 ## 1. Install the AppSec rule collections
 

crowdsec-docs/docs/appsec/rules_deploy.md

@@ -40,7 +40,7 @@ labels:
 
 Once the rule behaves as expected, the remaining steps package it for CrowdSec, wire it into the acquisition pipeline, and test it end to end.
 
-## Step 1 — Stage the Rule File
+## Step 1 - Stage the Rule File
 
 CrowdSec loads AppSec rules from `/etc/crowdsec/appsec-rules/`. Copy your YAML rule into that directory (create a `custom/` subfolder to keep things tidy if you manage several rules):
 
@@ -56,7 +56,7 @@ Make sure the `name` inside the rule file matches the file name convention you p
 If you run CrowdSec in a container, copy the file into the volume that is mounted at `/etc/crowdsec/appsec-rules/` inside the container.
 :::
 
-## Step 2 — Create an AppSec Configuration
+## Step 2 - Create an AppSec Configuration
 
 An AppSec configuration lists which rules to load and how to handle matches. Create a new file under `/etc/crowdsec/appsec-configs/` that targets your custom rule:
 
@@ -73,7 +73,7 @@ Key points:
 - `inband_rules` (and/or `outofband_rules`) accept glob patterns, so you can load multiple rules with a single entry such as `custom/block-*`.
 - During the reload step CrowdSec validates the syntax; if anything is off, the reload fails and the service logs the parsing error.
 
-## Step 3 — Reference the Configuration in the Acquisition File
+## Step 3 - Reference the Configuration in the Acquisition File
 
 The AppSec acquisition file (`/etc/crowdsec/acquis.d/appsec.yaml`) controls which configurations are active for the WAF component. Add your configuration to the `appsec_configs` list. Order matters: later entries override conflicting defaults such as `default_remediation`.
 
@@ -89,7 +89,7 @@ source: appsec
 
 If you only want to run your custom configuration, remove other entries and keep the list with a single item.
 
-## Step 4 — Reload CrowdSec and Validate the Load
+## Step 4 - Reload CrowdSec and Validate the Load
 
 Apply the changes by reloading the CrowdSec service:
 
@@ -106,7 +106,7 @@ sudo cscli appsec-configs list | grep block-nonnumeric-user-id
 
 The rule should appear as `enabled`, and the configuration should show up in the list. CrowdSec logs confirm the configuration was loaded without errors.
 
-## Step 5 — Functional Test with `curl`
+## Step 5 - Functional Test with `curl`
 
 Trigger the behaviour your rule is meant to catch to ensure it blocks as expected. For the example rule, send a request with a non-numeric `user_id` value:
 

crowdsec-docs/docs/getting_started/sdk_intro.mdx

@@ -9,9 +9,9 @@ CrowdSec offers lightweight SDKs for Python and PHP to help developers seamlessl
 By using these SDKs, you can report signals such as suspicious IP activity or confirmed attacks directly to the Central API (CAPI). In return, your users gain access to the CrowdSec Community Blocklist, a curated and constantly updated list of IPs involved in malicious behavior observed across the global CrowdSec network.
 
 Why Integrate the SDK:
-- **Simple Integration** — Add signal sharing with just a few lines of code
-- **Community-Powered Protection** — Contributions help power our global threat intelligence network
-- **Mutual Benefit** — Your platform shares valuable intelligence and gains stronger real-time protection in return
+- **Simple Integration**: Add signal sharing with just a few lines of code
+- **Community-Powered Protection**: Contributions help power our global threat intelligence network
+- **Mutual Benefit**: Your platform shares valuable intelligence and gains stronger real-time protection in return
 
 ## Supported SDKs
 

crowdsec-docs/docs/intro.mdx

@@ -54,7 +54,7 @@ Under the hood, the Security Engine has various components:
 -   The [Local API](local_api/intro.md) acts as a middleman:
     -   Between the [Log Processors](/log_processor/intro.mdx) and the [Remediation Components](/u/bouncers/intro) which are in charge of enforcing decisions.
     -   And with the [Central API](/central_api/intro.md) to share alerts and receive blocklists.
--   The [Remediation Components](/u/bouncers/intro) (also called bouncers) block malicious IPs at your chosen level—IpTables, firewalls, web servers, or reverse proxies. [See the full list on the CrowdSec Hub.](https://app.crowdsec.net/hub/remediation-components)
+-   The [Remediation Components](/u/bouncers/intro) (also called bouncers) block malicious IPs at your chosen level: IpTables, firewalls, web servers, or reverse proxies. [See the full list on the CrowdSec Hub.](https://app.crowdsec.net/hub/remediation-components)
 
 ## Deployment options
 

crowdsec-docs/src/components/data/cti-integrations.ts

@@ -13,7 +13,7 @@ export const ctiIntegrations: CtiIntegrationData[] = [
 		slug: "ipdex",
 		href: "/u/cti_api/api_integration/integration_ipdex",
 		plugin: "CrowdSec CTI Reports",
-		desc: "IPDEX extracts IP addresses from your logs and cross-references them against CrowdSec's global threat intelligence network — instantly.",
+		desc: "IPDEX extracts IP addresses from your logs and cross-references them against CrowdSec's global threat intelligence network instantly.",
 		color: "#e55c2f",
 	},
 	{
@@ -29,7 +29,7 @@ export const ctiIntegrations: CtiIntegrationData[] = [
 		slug: "gigasheet",
 		href: "/u/cti_api/api_integration/integration_gigasheet",
 		plugin: "No-Code API Enrichment",
-		desc: "Enrich spreadsheet columns with CTI data using Gigasheet's no-code API enrichment feature — no scripting required.",
+		desc: "Enrich spreadsheet columns with CTI data using Gigasheet's no-code API enrichment feature. No scripting required.",
 		color: "#00b4d8",
 	},
 	{

crowdsec-docs/src/css/code.css

@@ -5,7 +5,7 @@
 }
 
 pre {
-	@apply rounded-lg font-semibold;
+	@apply rounded-lg font-medium;
 }
 
 .prism-code .token.plain {
@@ -18,5 +18,5 @@ pre {
 }
 
 code:not(.prism-code code) {
-	@apply bg-gray-100 dark:bg-gray-50 border-primary/20 border-solid border text-primary px-1 py-0.5 rounded-md font-semibold;
+	@apply bg-gray-100 dark:bg-gray-50 border-primary/20 border-solid border text-primary px-1 py-0.5 rounded-md font-medium;
 }

crowdsec-docs/src/css/colors.css

@@ -192,7 +192,8 @@ html[data-theme="dark"],
 	--ifm-global-shadow-md: 0px;
 	--ifm-code-font-size: 95%;
 	--ifm-font-family-base: "Instrument Sans", sans-serif; /* For body text */
-	--ifm-font-family-monospace: "Courier New", monospace; /* For code blocks */
+	--ifm-font-family-monospace:
+		"Roboto Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace; /* For code blocks */
 	--ifm-dropdown-background-color: rgb(var(--card));
 
 	/* Algolia global search colors */

crowdsec-docs/src/css/custom.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Roboto+Mono:wght@400;500&display=swap");
 
 @import "tailwindcss/base";
 @import "tailwindcss/components";
@@ -113,7 +113,7 @@ div.markdown {
 	padding: 14px 16px;
 }
 
-/* Quick-access strip — label + pill buttons in a row (matches homepage "Already running?" strip) */
+/* Quick-access strip - label + pill buttons in a row (matches homepage "Already running?" strip) */
 .doc-quick-strip {
 	display: flex;
 	align-items: center;

crowdsec-docs/src/pages/index.tsx

@@ -183,7 +183,7 @@ const SchemaBlock = ({ id, color, eyebrowIcon, eyebrow, title, ctaLabel, ctaHref
 			}}
 		/>
 
-		{/* header — always visible, clickable to toggle */}
+		{/* header - always visible, clickable to toggle */}
 		<button
 			type="button"
 			onClick={onToggle}
@@ -359,7 +359,7 @@ const intents: IntentCardProps[] = [
 		icon: <img src="/img/icons/shield.webp" className="h-8 w-8 border-0" alt="Blocklists" />,
 		accent: GREEN,
 		title: "Push a Blocklists into my firewall, CDN or WAF",
-		desc: "You manage network perimeter devices and want a URL to subscribe to — no agent to install.",
+		desc: "You manage network perimeter devices and want a URL to subscribe to. No agent to install.",
 		pill: "Blocklist Integration Endpoint",
 		href: "/blocklists",
 		aka: ["Threat Feeds", "IOC Streams", "Deny-list"],
@@ -389,7 +389,7 @@ const schemas: Omit<SchemaBlockProps, "open" | "onToggle">[] = [
 				num: 1,
 				icon: "⚡",
 				title: "Install the Security Engine",
-				desc: "Runs on your server, detects attack patterns in real time — immediately protected, and continuously updated with CrowdSec Community Blocklist.",
+				desc: "Runs on your server, detects attack patterns in real time. Immediately protected, and continuously updated with CrowdSec Community Blocklist.",
 			},
 			{
 				num: 2,
@@ -448,15 +448,15 @@ const schemas: Omit<SchemaBlockProps, "open" | "onToggle">[] = [
 		color: BLUE,
 		eyebrowIcon: "🔍",
 		eyebrow: "IP Reputation & CTI",
-		title: "Query threat intel — in the browser or via API in your tools",
+		title: "Query threat intel in the browser or via API in your tools",
 		ctaLabel: "Explore CTI →",
 		ctaHref: "/u/cti_api/intro",
 		steps: [
 			{
 				num: 1,
 				icon: "🖥️",
 				title: "Look up any IP in the Console",
-				desc: "Search instantly from our Web UI— get reputation score, behaviors, attack history, and CVE links.",
+				desc: "Search instantly from our Web UI. Get reputation score, behaviors, attack history, and CVE links.",
 			},
 			{
 				num: 2,
@@ -610,7 +610,7 @@ const HomePage = () => {
 					</div>
 				</section>
 
-				{/* How each path works — accordion */}
+				{/* How each path works - accordion */}
 				<section className="py-6 px-4">
 					<div className="container mx-auto" style={{ maxWidth: "940px" }}>
 						<div

crowdsec-docs/unversioned/bouncers/cloudflare-workers.mdx

@@ -293,7 +293,7 @@ The Remediation Component does the following:
 
 :::info
 Autonomous mode is ideal for users who prefer not to run a continuous process on their host/VM.  
-Combined with [Blocklist as a Service (BLaaS)](/u/integrations/remediationcomponent), this provides the minimal footprint deployment—only running setup/cleanup commands when needed.
+Combined with [Blocklist as a Service (BLaaS)](/u/integrations/remediationcomponent), this provides the minimal footprint deployment, only running setup/cleanup commands when needed.
 :::
 
 In autonomous mode (enabled with the `-S` flag), the Remediation Component functions without requiring a continuously running Go daemon process. Instead: