Browse Source

Adjustments to link and button styles (#5755)

Jason Crist 3 years ago
parent
commit
2ae31940f3
2 changed files with 52 additions and 5 deletions
  1. 46 1
      pendant/style.css
  2. 6 4
      pendant/theme.json

+ 46 - 1
pendant/style.css

@@ -24,6 +24,42 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 	-webkit-font-smoothing: antialiased;
 }
 
+/*
+ * Opinionated Style for Anchors.
+ * Anchors get a thin underline offset more than default.
+ * Headings get slightly different dimensions.
+ * Any anchors IN the content are underlined by default, then none on hover.
+ * Any anchors OUT of the content behave the opposite.
+ * Buttons have no underlines.
+ */
+a {
+	cursor: pointer;
+	text-underline-offset: 0.3em;
+	text-decoration-thickness: 0.05em;
+	text-decoration-line: none;
+}
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+	text-underline-offset: 0.15em;
+	text-decoration-thickness: 0.02em;
+}
+a:hover,
+a:focus {
+	text-decoration-line: underline;
+}
+.block-editor-block-list__layout a,
+.wp-block-post-content a {
+	text-decoration-line: underline;
+}
+.block-editor-block-list__layout a:hover,
+.block-editor-block-list__layout a:focus,
+.wp-block-post-content a:focus,
+.wp-block-post-content a:hover {
+	text-decoration: none;
+}
+ .wp-block-post-content .wp-block-button a {
+	text-decoration: none;
+}
+
 /*
  * Button hover styles.
  * Necessary until the following issue is resolved in Gutenberg:
@@ -33,7 +69,16 @@ Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, feature
 .wp-block-search__button:hover,
 .wp-block-file .wp-block-file__button:hover,
 .wp-block-button__link:hover {
-	background-color: var(--wp--preset--color--primary);
+	background-color: var(--wp--preset--color--background);
+	color: var(--wp--preset--color--foreground);
+	border: 2px solid var(--wp--preset--color--foreground);
+    	padding: 0.667em 1.333em;
+}
+
+.wp-block-button.is-style-outline .wp-block-button__link:hover {
+	background-color: var(--wp--preset--color--foreground);
+	color: var(--wp--preset--color--background);
+	border: 2px solid var(--wp--preset--color--foreground);
 }
 
 /*

+ 6 - 4
pendant/theme.json

@@ -203,9 +203,11 @@
                 },
                 "typography": {
                     "fontFamily": "var(--wp--preset--font-family--body-font)",
-                    "fontSize": "var(--wp--preset--font-size--medium)",
-                    "fontWeight": "normal",
-                    "lineHeight": 2
+                    "fontSize": "var(--wp--preset--font-size--small)",
+                    "letterSpacing": "0.1em",
+                    "textTransform": "uppercase",
+                    "fontWeight": "600",
+                    "lineHeight": 1.7 
                 }
             },
             "core/heading": {
@@ -279,7 +281,7 @@
             },
             "link": {
                 "color": {
-                    "text": "var(--wp--preset--color--primary)"
+                    "text": "var(--wp--preset--color--foreground)"
                 }
             }
         },