Merge pull request mendix#7450 from mendix/db-link-styling

Link styling

Author: dbreseman

assets/scss/_front-page.scss

@@ -19,17 +19,6 @@ div.card-icon{
         color: $blue;
     }
 }
-div.link-title{
-    font-weight: $font-weight-bold;
-    font-size: 1.2rem;
-    padding: 0 0 5% 0;
-    a {
-        color: $secondary;
-        &:hover {
-            color: $blue;
-        }
-    }
-}
 ul.landing-list{
     padding-left: 0.5rem;
 }
@@ -43,13 +32,16 @@ li.link-list{
     font-size: 1rem;
     list-style-position: outside;
     list-style: none;
-    color: $blue;
+    color: $link-color;
     a {
+        text-decoration: none;
         &:hover {
-            color: darken($blue, 20%);
+            color: $link-hover-color;
+            text-decoration: underline;
         }
     }
 }
+
 p.rn-date{
     color: $gray-600;
     font-size: 0.85rem;
@@ -137,6 +129,17 @@ img.my-icon{
     float:left;
     margin: 0rem 0.5rem 0.5rem 0.5rem;
 }
+img.ToC-icon{
+    width: 2.5rem;
+    height: 2.5rem;
+    float:left;
+    margin: 0rem 0.5rem 0rem 0.5rem;
+    padding: 0.3rem;
+    border-radius: 4px;
+    &:hover {
+        background-color: $gray-light;
+    };
+}
 img.nav-icon{
     width: 24px;
     height: 24px;
@@ -153,10 +156,9 @@ h4.card-title-w-50{
     font-weight: $font-weight-medium; // NK - adjusted weight
     font-size: $h3-font-size; // NK - adjusted size
     margin: 0.5rem 0rem 0.5rem 1rem; // NK - bring title closer to icon
-
         &:hover {
-            color: $blue;
-            text-decoration: none;
+            color: $link-hover-color;
+            text-decoration: underline;
         }
 }
 div.card-body{

assets/scss/_styles_project.scss

@@ -226,6 +226,26 @@
     }
 }
 
+// Style visited links but exclude buttons and left sidebar
+a:not(.btn):not(.td-sidebar-link):visited {
+    color: $purple;
+}
+
+// Add icon after external links in main content (but exclude buttons)
+main a[href*="https://"]:not(.btn)::after {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-left: .2rem;
+    vertical-align: sub;
+    content: url("/icons/external-unvisited.svg"); // Fill color is $link-color (blue-8 from PDS). Keep it updated with _variables_project.scss.
+}
+
+// Change external link icon (color) upon hover
+main a[href*="https://"]:hover:not(.btn)::after {
+          content: url("/icons/external-hover.svg"); // Fill color is $link-color (blue-8 from PDS). Keep it updated with _variables_project.scss.
+}
+
 .btn {
     border-radius: 0.25rem;
 }
@@ -420,7 +440,7 @@ nav.foldable-nav {
     }
 
     .ul-1 .with-child > input:checked ~ label:before { 
-        color: $primary;
+        color: $link-color;
         transform: rotate(90deg);
         transition: transform 0s; // NK - disables animation transition time, now switch is instant
     }
@@ -431,13 +451,13 @@ nav.foldable-nav {
     nav.foldable-nav {
 
         .ul-1 .with-child > label:hover:before { 
-            color: $primary;
+            color: $link-color;
             transform: rotate(30deg);
             transition: transform 0s; // NK - disables animation transition time, now switch is instant
         }
 
         .ul-1 .with-child > input:checked ~ label:hover:before { 
-            color: $primary;
+            color: $link-color;
             transform: rotate(60deg) !important;
             transition: transform 0s; // NK - disables animation transition time, now switch is instant
         }
@@ -473,6 +493,11 @@ nav.foldable-nav {
     vertical-align: top;
 
 }
+
+.toc-title { // DB – added class for ToC title styling 
+    color: $gray-800 !important;
+}
+
 .td-toc {
 
     height: calc(100vh - 180px); // NK - added to allow scrolling
@@ -500,15 +525,15 @@ nav.foldable-nav {
             padding-top: .25rem;
 
             &:hover {
-                color: $blue;
-                text-decoration: none;
+                color: $link-hover-color;
+                text-decoration: underline;
             }
         }
         // NK - styling for ToC highlighting
         .activeToc {
             font-weight: $font-weight-bold;
-            color: $blue;
-            border-left-color: $blue;
+            color: $link-color;
+            border-left-color: $link-color;
         }
     }
 }
@@ -549,7 +574,10 @@ nav.foldable-nav {
         // NK - overrides special styling for pages with no children
         &__page {
             color: inherit;//$gray-700;
-            font-weight: inherit;//$font-weight-light;
+            font-weight: inherit;//$font-weight-light;`
+        }
+        :hover {
+            text-decoration: underline;
         }
     }
 
@@ -676,11 +704,11 @@ nav.foldable-nav {
          justify-content: center;
          gap: 0.5rem;
          flex-wrap: wrap;
-         background-color: #f7f7f7;
+         background-color: $gray-100;
          color: rgba(10, 19, 36, 0.7);
          font-size: 0.75rem;
          text-align: center;
-         border-top: 1px solid #e7e7e9;
+         border-top: 1px solid $gray-300;
          padding: 1rem;
          font-family: 'noto-sans', 'Noto Sans', sans-serif;
    }
@@ -708,13 +736,13 @@ nav.foldable-nav {
 
          > li::before {
                content: '';
-               border-left: 1px solid #e7e7e9;
+               border-left: 1px solid $gray-300;
                margin-right: 0.5rem;
          }
    }
 
    .mx-footer__link:hover {
-         color: #0123c6;
+         color: $link-hover-color;
          text-decoration: underline;
    }
 
@@ -723,7 +751,7 @@ nav.foldable-nav {
    }
 
    .mx-footer__link:focus-visible {
-         outline: 2px solid #298efb;
+         outline: 2px solid $info-6;
          outline-offset: 2px;
     }
 
@@ -735,8 +763,8 @@ nav.foldable-nav {
 //_badge.scss
 
 .badge-warning {
-    color: #fff;
-    background-color: #C97800;
+    color: $white;
+    background-color: $warning-8;
   }
 
 .badge-pill {
@@ -750,7 +778,7 @@ nav.foldable-nav {
 .swagger-ui .info .title,
 .swagger-ui .model-title {
     font-family: $font-family !important;
-    color: var(--bs-body-color);
+    color: $secondary;
 }
 
 .swagger-ui .info a {

assets/scss/_variables_project.scss

@@ -76,6 +76,8 @@ $danger-8: #bc1622;
 $danger-9: #9e051b;
 $danger-10: #780328;
 
+$purple: #4701d4;
+
 $custom-theme-colors: (
   "info-1":       $info-1,
   "info-2":       $info-2,
@@ -116,7 +118,8 @@ $custom-theme-colors: (
   "danger-7":     $danger-7,
   "danger-8":     $danger-8,
   "danger-9":     $danger-9,
-  "danger-10":    $danger-10
+  "danger-10":    $danger-10,
+  "$purple":      $purple,
 );
 
 
@@ -131,9 +134,8 @@ $td-sidebar-bg-color: $gray-light !default;//rgba($primary, 0.03) !default;
 // These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
 $td-box-colors: $dark, $primary, $secondary, $info, $primary-light, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, !default;
 
-$link-color: $blue !default; // NK - removed darken color
-$link-decoration: none !default;
-$link-hover-decoration: none !default;
+$link-color: $info-8;
+$link-hover-color: $info-9;
 
 // Fonts
 

content/en/docs/apidocs-mxsdk/mxsdk/sdk-howtos/sdk-old-versions-howtos/old-setting-up-your-development-environment.md

@@ -43,7 +43,7 @@ To set up your development tools, follow these steps:
     {{% alert color="info" %}}In the rest of the how-to's in these series, in blocks such as the above, lines starting with `$` represent commands to type into a terminal. Sometimes a line follows without a `$`, which represents the output of the command.
     {{% /alert %}}
 
-3. Install [Visual Studio Code](https://code.visualstudio.com/) (not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](http://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+) (you can check the version you are using via **Help** > **About**).
+3. Install [Visual Studio Code](https://code.visualstudio.com/) (not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](https://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+) (you can check the version you are using via **Help** > **About**).
 4. Install TypeScript 3.6.2 (or higher) with [`npm`](https://www.npmjs.com/), Node.js's package manager:
 
     ```bash {linenos=false}

content/en/docs/apidocs-mxsdk/mxsdk/sdk-howtos/setting-up-your-development-environment.md

@@ -41,7 +41,7 @@ To set up your development tools, follow these steps:
 
     In the rest of the how-to's, in blocks such as the above, lines starting with a `$` represent commands to type into a terminal. Sometimes a line follows without a $, represents output of the command.
 
-3. Install [Visual Studio Code](https://code.visualstudio.com/) (not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](http://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+); check the version you are using through Help > About when you have Code opened.
+3. Install [Visual Studio Code](https://code.visualstudio.com/) (not to be confused with Visual Studio), a text editor/IDE with good support for [TypeScript](https://www.typescriptlang.org/). Make sure you have a recent version (v1.11.0+); check the version you are using through Help > About when you have Code opened.
 4. Install TypeScript 4.4.3 or higher with [`npm`](https://www.npmjs.com/) (or [`yarn`](https://yarnpkg.com/)), Node.js's package manager:
 
     ```bash {linenos=false}

content/en/docs/apidocs-mxsdk/mxsdk/sdk-refguide/javascript-typescript-resources.md

@@ -9,7 +9,7 @@ weight: 2
 
 As a developer who works with the Mendix Platform, you may be familiar with implementing custom user actions using Java.
 
-The Mendix Platform and Model SDKs, however, are implemented in an entirely different language, namely [TypeScript](http://www.typescriptlang.org/). TypeScript is similar to JavaScript - in fact, TypeScript sources are "transpiled" into JavaScript before they're run. The main difference that sets TypeScript apart from JavaScript is that it adds explicit typing. This is [good news for developers with a Java background](http://blog.pikodat.com/2015/07/24/why-java-developers-might-love-typescript/), who expect that the compiler will warn them if they by accident try to treat an Integer as a String. At the same time, you can still take advantage of the rich ecosystem of JavaScript libraries that already exists.
+The Mendix Platform and Model SDKs, however, are implemented in an entirely different language, namely [TypeScript](https://www.typescriptlang.org/). TypeScript is similar to JavaScript - in fact, TypeScript sources are "transpiled" into JavaScript before they're run. The main difference that sets TypeScript apart from JavaScript is that it adds explicit typing. This is good news for developers with a Java background, who expect that the compiler will warn them if they by accident try to treat an Integer as a String. At the same time, you can still take advantage of the rich ecosystem of JavaScript libraries that already exists.
 
 To help you find your way in this new and exciting TypeScript universe, we've collected a few resources that we ourselves have found useful in getting the hang of developing with TypeScript and JavaScript libraries.
 
@@ -19,11 +19,11 @@ If you have any additional useful resources, feel free to mention them in the co
 
 * [TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/content/index.html) – available in a web version as well as e-book formats.
 * [Pro TypeScript](https://www.stevefenton.co.uk/publications/pro-typescript/) by Steve Fenton
-* [JavaScript: The Good Parts](http://shop.oreilly.com/product/9780596517748.do) by Douglas Crockford, O'Reilly
+* [JavaScript: The Good Parts](https://shop.oreilly.com/product/9780596517748.do) by Douglas Crockford, O'Reilly
 
 ## 3 Websites
 
-* [Official TypeScript website](http://www.typescriptlang.org/Handbook) – tutorial, handbook, and samples
+* [Official TypeScript website](https://www.typescriptlang.org/Handbook) – tutorial, handbook, and samples
 * [Definitive Guide to TypeScript](https://www.sitepen.com/blog/2013/12/31/definitive-guide-to-typescript/) – covers TypeScript 1.5 (slightly older than the current release, but still useful)
 * [Editing TypeScript](https://code.visualstudio.com/docs/languages/typescript) with Visual Studio Code
 * Debugging your app with [Node Inspector](https://www.npmjs.com/package/node-inspector)

content/en/docs/appstore/creating-content/connector-guide-build/connector-guide-best-practices.md

@@ -401,7 +401,7 @@ The following tools are part of the testing process of custom Java code in your
 * [JaCoCo](https://www.jacoco.org/jacoco/trunk/index.html) (Java Code Coverage) — This helps you check how well your code is covered by tests.
 * Gradle — This pulls everything together to manage Java dependencies, and provides a way to work with JUnit and Mockito.
 
-Gradle can handle managing Java dependencies and running [JUnit](http://junit.org) tests. Read about setting up Gradle in [Extending App Setup for Building Connectors with Java](#extend-app-java). If you have a pipeline, Mendix recommends running your tests as part of it. 
+Gradle can handle managing Java dependencies and running [JUnit](https://junit.org) tests. Read about setting up Gradle in [Extending App Setup for Building Connectors with Java](#extend-app-java). If you have a pipeline, Mendix recommends running your tests as part of it. 
 
 #### 6.2.2 Using the Java Unit Test Reference
 

content/en/docs/appstore/modules/audit-trail.md

@@ -59,5 +59,5 @@ Changing the audit behavior is easily done by altering the values of the constan
 * **CreateLogObjectWithoutMemberChanges** (default: false) – If none of the members have been changed, this property determines whether a commit will still generate a log record populated only with the `changed date` and `changed by` fields.
 * **LogLineDateFormat** (default: MM/dd/yyyy) – This constant determines the format to be used to convert date attributes to strings. It uses the same pattern as used by the [parse and format date function calls](/refguide/parse-and-format-date-function-calls/).
 * **LogServerTimeZoneDateNotation** (default: true) – This determines if the date should be audited in the **ServerTimeZone**. If both the session time zone and **ServerTimeZone** are enabled, you will see two dates in the audit overview.
-* **ServerTimeZone** (default: UTC) – This the time zone in which the server time zone is printed. This will be a static time zone and should match the notation as used in Java (for an example, see [TimeZones in Java](http://stackoverflow.com/questions/1694885/timezones-in-java)).
+* **ServerTimeZone** (default: UTC) – This is the time zone in which the server time zone is printed. This will be a static time zone and should match the notation as used in Java (for an example, see [TimeZones in Java](https://stackoverflow.com/questions/1694885/timezones-in-java)).
 * **LogSessionTimeZoneDateNotation** (default: false) – This determines if the date should be audited in the session time zone of the user that makes the change. If both the session time zone and the server time zone are enabled, you will see two dates in the audit overview.

content/en/docs/appstore/modules/database-connector.md

@@ -154,9 +154,9 @@ When using the Database connector, keep these best practices in mind:
 ## 5 Common JDBC Drivers{#links}
 
 * [Amazon Redshift](https://docs.aws.amazon.com/redshift/latest/mgmt/configure-jdbc-connection.html#download-jdbc-driver)
-* [Apache Derby](http://db.apache.org/derby/derby_downloads.html)
-* [Firebird](http://www.firebirdsql.org/en/jdbc-driver/)
-* [H2 Database Engine](http://www.h2database.com/html/main.html)
+* [Apache Derby](https://db.apache.org/derby/derby_downloads.html)
+* [Firebird](https://www.firebirdsql.org/en/jdbc-driver/)
+* [H2 Database Engine](https://www.h2database.com/html/main.html)
 * [HSQLDB](https://sourceforge.net/projects/hsqldb/files/)
 * [IBM DB2](https://www.ibm.com/support/pages/download-initial-version-115-clients-and-drivers)
 * [IBM Informix](https://www.ibm.com/products/informix?mhsrc=ibmsearch_a&mhq=informix)

content/en/docs/appstore/overview/use-content.md

@@ -261,4 +261,4 @@ To remove a module and user data from your app, follow these steps:
 
 * [Importing and Exporting Apps, Modules, Widgets, and Documents](/refguide/import-and-export/)
 * [Properties Common in the Page Editor](/refguide/common-widget-properties/)
-* [My Top 5 Mendix Widgets for Speeding Up Application Development](http://www.mendix.com/blog/top-5-mendix-widgets-speeding-application-development/)
+* [My Top 5 Mendix Widgets for Speeding Up Application Development](https://www.mendix.com/blog/top-5-mendix-widgets-speeding-application-development/)

content/en/docs/appstore/partner-solutions/apd/rg-apd/rg-one-apm/_index.md

@@ -34,7 +34,7 @@ The sections below provide an introduction to APM. There is an explanation of wh
 
 ## 2 Definition of APM
 
-Wikipedia provides a good definition of [Application Performance Management](http://en.wikipedia.org/wiki/Application_performance_management).
+Wikipedia provides a good definition of [Application Performance Management](https://en.wikipedia.org/wiki/Application_performance_management).
 
 APM is the monitoring and management of performance and availability of software applications.
 APM strives to detect and diagnose application performance problems to maintain an expected level of service.

content/en/docs/appstore/partner-solutions/apd/rg-apd/rg-three-apd/_index.md

@@ -32,7 +32,7 @@ The sections below provide a short explanation of APD along with its features an
 
 ## 2 Definition of the APD Tool
 
-APD is based on Wikipedia's definition of [application performance management](http://en.wikipedia.org/wiki/Application_performance_management). The goal of APD is to emphasize this point: "to detect and diagnose complex application performance problems to maintain an expected level of service."
+APD is based on Wikipedia's definition of [application performance management](https://en.wikipedia.org/wiki/Application_performance_management). The goal of APD is to emphasize this point: "to detect and diagnose complex application performance problems to maintain an expected level of service."
 
 You need the basic infrastructure probes to measure hardware parts like the CPU, memory, and disk as well as components like the database and web server. However, for higher quality support, you should also look at the application and how it is performing, and especially look to link this to the user’s business perspective.
 

content/en/docs/appstore/partner-solutions/apd/rg-apd/rg-two-apm/_index.md

@@ -27,7 +27,7 @@ The sections below provide a short explanation of APM along with its features an
 
 ## 2 Definition of APM
 
-CLEVR APM is based on Wikipedia's definition of [Application Performance Management](http://en.wikipedia.org/wiki/Application_performance_management), with emphasis on these points:
+CLEVR APM is based on Wikipedia's definition of [Application Performance Management](https://en.wikipedia.org/wiki/Application_performance_management), with emphasis on these points:
 
 * APM is the "monitoring and management of performance and availability of software applications"
 * APM strives "to detect and diagnose complex application performance problems to maintain an expected level of service"

content/en/docs/appstore/partner-solutions/ats/ht/v1/create-custom-actions/custom-action-general/custom-action-helpful-resources.md

@@ -24,7 +24,7 @@ Keep in mind that Google Chrome is the browser used in these documents.
 | [Stack Overflow](https://stackoverflow.com/) | A massive forum for developers. If you have a question regarding code, look for the answer here. |
 | [Guidelines for Creating a Custom Action](/appstore/partner-solutions/ats/ht-one-guidelines-custom-action/) | These are the guidelines to follow when creating custom actions. This is a prerequisite for each how-to. |
 | [ATS Selectors](/appstore/partner-solutions/ats/rg-one-selectors/) | This is documentation on the different selectors you can use within ATS. Most important are the ATS selectors, as these are pseudo-selectors and are not standard jQuery/CSS. This is a prerequisite for each how-to. |
-| [JavaScript Checker](http://www.jslint.com/) | This page checks your JavaScript for mistakes. |
+| [JavaScript Checker](https://www.jslint.com/) | This page checks your JavaScript for mistakes. |
 | [Custom Action Basics](/appstore/partner-solutions/ats/ht-one-custom-action-basics/) | This is a how-to for the basics of creating a custom action. |
 
 ## 3 Tools