Add new inline code styles

dart-lang · Jan 17, 2025 · 82aa089 · 82aa089
1 parent b5d5109
commit 82aa089
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 20 deletions.
diff --git a/src/_sass/_overwrites.scss b/src/_sass/_overwrites.scss
@@ -7,18 +7,6 @@ b, strong {
   font-weight: bold;
 }
 
-a {
-  code {
-    color: $default-link;
-  }
-
-  &:hover, &:focus, &:active {
-    code {
-      color: color.scale($default-link, $lightness: -15%, $saturation: 15%);
-    }
-  }
-}
-
 /* Effective Dart TOC */
 
 .effective_dart--summary_column {

diff --git a/src/_sass/_site.scss b/src/_sass/_site.scss
@@ -456,7 +456,7 @@ thead:has(th:empty) {
   border-radius: 0;
   color: $site-color-body;
   margin-top: 1rem;
-  padding: 1.5rem;
+  padding: 1.25rem;
 
   i.material-icons {
     font-size: 1.25em;

diff --git a/src/_sass/components/_code.scss b/src/_sass/components/_code.scss
@@ -4,8 +4,20 @@
 @use '../core/variables' as *;
 @use '../core/bootstrap';
 
+*:not(pre) > code {
+  font-size: 0.9em;
+  line-height: 1.25em;
+  padding: 0.1rem 0.25rem;
+  background-color: $site-color-light-grey;
+  background-color: color-mix(in srgb, $site-color-light-grey 40%, transparent);
+  border: 1px solid rgb(195, 201, 214);
+  border-radius: 0.25rem;
+  word-wrap: break-word;
+  white-space: nowrap;
+}
+
 pre {
-  margin-bottom: 1rem;
+  margin: 0 0 1rem;
   font-size: 0.9375rem;
   font-weight: 400;
   padding: 1.25rem;
@@ -27,7 +39,7 @@ pre {
       padding: 0;
     }
   }
-  
+
   &:focus {
     outline: none;
   }
@@ -139,15 +151,15 @@ pre {
 .code-block-wrapper {
   margin-bottom: 1rem;
   border: 1px solid $flutter-color-grey-500;
-  
+
   .code-block-header {
     background-color: #e9ecef;
     border-bottom: 1px solid $flutter-color-grey-500;
     font-size: 0.9375rem;
     font-weight: 500;
     padding: 0.75rem 0.5rem 0.67rem 1rem;
   }
-  
+
   .code-block-body {
     position: relative;
     background-color: $site-color-codeblock-bg;
@@ -170,16 +182,16 @@ pre {
       background-color: $alert-danger-bg;
     }
   }
-  
+
   &:has(:focus-visible) {
     border-color: #1389FD;
   }
-  
+
   pre {
     margin-bottom: 0;
     padding-right: 0;
     padding-left: 0;
-    
+
     &:not([lang="console"]) {
       line-height: 1.8;
     }

diff --git a/src/_sass/core/_base.scss b/src/_sass/core/_base.scss
@@ -14,6 +14,7 @@ body {
   color: $site-color-body;
   margin: 0;
   padding: 0;
+  line-height: 1.5;
 }
 
 section {
@@ -69,7 +70,9 @@ a, button {
   &:visited {
     color: $brand-primary;
   }
+}
 
+button {
   &:hover, &:focus, &:active {
     color: $flutter-color-blue-700;
     outline: none;
@@ -81,6 +84,19 @@ a, button {
   }
 }
 
+a {
+  border-radius: 0.25rem;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:active {
+    color: $flutter-color-blue-600;
+  }
+}
+
+
 img {
   max-width: 100%;
   height: auto;