[Seedlet] Replacing border for text-decoration to add underline to links (#5195)

* replacing border for text-decoraction to add underline to links

* Spearhead: Replacing boder-bottom by text-decoration underline

* Seedlet: disable text-decoration for site title

* spaces to tabs

* reorder properties

* rebuild

* reorder properties

Co-authored-by: Ben Dwyer <ben@scruffian.com>

seedlet/assets/css/style-editor.css

@@ -285,14 +285,14 @@
  * Output
  */
 a {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
+	text-decoration: underline 1px var(--global--color-secondary);
+	text-underline-offset: 0.3em;
+	transition: text-decoration 0.1s ease-out;
 }
 
 a:hover, a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 a:hover {
@@ -308,11 +308,11 @@ a:active {
 }
 
 .has-link-color a {
-	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
+	text-decoration-color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 .has-link-color a:hover, .has-link-color a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 .has-primary-background-color a:not(.has-link-color):not(.has-text-color) {

seedlet/assets/sass/base/_base.scss

@@ -1,13 +1,13 @@
 // Links styles
 a {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var( --wp--style--color--link, var(--global--color-primary) );
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
+	text-decoration: underline 1px var(--global--color-secondary);
+	text-underline-offset: 0.3em;
+	transition: text-decoration 0.1s ease-out;
 
 	&:hover,
 	&:focus {
-		border-bottom-color: transparent;
+		text-decoration: none;
 	}
 
 	&:hover {
@@ -25,11 +25,11 @@ a {
 	// If a custom link color has been assigned,
 	// switch the color of the bottom border too.
 	.has-link-color & {
-		border-bottom: 1px solid var( --wp--style--color--link, var(--global--color-primary) );
+		text-decoration-color: var( --wp--style--color--link, var(--global--color-primary) );
 
 		&:hover,
 		&:focus {
-			border-bottom-color: transparent;
+			text-decoration: none;
 		}
 	}
 

seedlet/assets/sass/components/header/_header-branding.scss

@@ -8,7 +8,6 @@
 // Site title
 
 .site-title {
-
 	color: var(--branding--color-link);
 	font-family: var(--branding--title--font-family);
 	font-size: var(--branding--title--font-size-mobile);
@@ -24,6 +23,8 @@
 		border-bottom: none;
 		color: currentColor;
 		font-weight: var(--branding--title--font-weight);
+		text-decoration: none;
+
 		text-shadow:
 			1px 0px var(--global--color-background),
 			-1px 0px var(--global--color-background),

seedlet/style-rtl.css

@@ -927,14 +927,14 @@ body {
 }
 
 a {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
+	text-decoration: underline 1px var(--global--color-secondary);
+	text-underline-offset: 0.3em;
+	transition: text-decoration 0.1s ease-out;
 }
 
 a:hover, a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 a:hover {
@@ -950,11 +950,11 @@ a:active {
 }
 
 .has-link-color a {
-	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
+	text-decoration-color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 .has-link-color a:hover, .has-link-color a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 .has-primary-background-color a:not(.has-link-color):not(.has-text-color) {
@@ -2959,6 +2959,7 @@ pre.wp-block-verse {
 	border-bottom: none;
 	color: currentColor;
 	font-weight: var(--branding--title--font-weight);
+	text-decoration: none;
 	text-shadow: -1px 0px var(--global--color-background), 1px 0px var(--global--color-background), 2px 0px var(--global--color-background), -2px 0px var(--global--color-background), 3px 0px var(--global--color-background), -3px 0px var(--global--color-background), 4px 0px var(--global--color-background), -4px 0px var(--global--color-background), 5px 0px var(--global--color-background), -5px 0px var(--global--color-background);
 	transition: background-size 0.1s ease-out;
 }

seedlet/style.css

@@ -8,7 +8,7 @@ Description: Seedlet is a free WordPress theme. A two-column layout and classica
 Requires at least: 5.5
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.1.18-wpcom
+Version: 1.1.16-wpcom
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: seedlet
@@ -927,14 +927,14 @@ body {
 }
 
 a {
-	border-bottom: 1px solid var(--global--color-secondary);
 	color: var(--wp--style--color--link, var(--global--color-primary));
-	text-decoration: none;
-	transition: border-color 0.1s ease-out;
+	text-decoration: underline 1px var(--global--color-secondary);
+	text-underline-offset: 0.3em;
+	transition: text-decoration 0.1s ease-out;
 }
 
 a:hover, a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 a:hover {
@@ -950,11 +950,11 @@ a:active {
 }
 
 .has-link-color a {
-	border-bottom: 1px solid var(--wp--style--color--link, var(--global--color-primary));
+	text-decoration-color: var(--wp--style--color--link, var(--global--color-primary));
 }
 
 .has-link-color a:hover, .has-link-color a:focus {
-	border-bottom-color: transparent;
+	text-decoration: none;
 }
 
 .has-primary-background-color a:not(.has-link-color):not(.has-text-color) {
@@ -2980,6 +2980,7 @@ pre.wp-block-verse {
 	border-bottom: none;
 	color: currentColor;
 	font-weight: var(--branding--title--font-weight);
+	text-decoration: none;
 	text-shadow: 1px 0px var(--global--color-background), -1px 0px var(--global--color-background), -2px 0px var(--global--color-background), 2px 0px var(--global--color-background), -3px 0px var(--global--color-background), 3px 0px var(--global--color-background), -4px 0px var(--global--color-background), 4px 0px var(--global--color-background), -5px 0px var(--global--color-background), 5px 0px var(--global--color-background);
 	transition: background-size 0.1s ease-out;
 }

spearhead/assets/sass/_footer.scss

@@ -1,4 +1,9 @@
 .site-footer {
+	.menu-item {
+		a {
+			border-bottom: none;
+		}
+	}
 	> .site-info {
 		font-family: var(--global--font-secondary);
 		a.site-name {

spearhead/assets/sass/_header.scss

@@ -10,7 +10,7 @@ $site-branding-height: 68px;
 		}
 
 		a {
-			border-bottom: 1px solid transparent;
+			text-decoration: none;
 		}
 
 		@include media( laptop-only ){
@@ -68,6 +68,7 @@ $site-branding-height: 68px;
 
 			> a {
 				background: inherit;
+				text-decoration: none;
 				text-shadow: none;
 			}
 		}

spearhead/assets/sass/_posts-and-pages.scss

@@ -104,6 +104,7 @@
 		display: inline-block;
 		font-size: var(--entry-meta--font-size);
 		margin-top: 0;
+		text-decoration: 1px solid underline var(--global--color-primary);
 
 		&:hover {
 			color: var(--global--color-primary-hover);

spearhead/assets/sass/_text.scss

@@ -1,11 +1,11 @@
 .has-link-color a, a {
-    border-bottom: 1px solid;
     border-color: transparent;
     transition: all 0.1s ease;
+    text-decoration: none;
 
     &:hover {
         color: var( --global--color-primary-hover );
-        border-color: var( --global--color-primary-hover );
+        text-decoration: 1px solid underline;
     }
 }
 

spearhead/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "spearhead",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

spearhead/style-rtl.css

@@ -159,6 +159,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	display: inline-block;
 	font-size: var(--entry-meta--font-size);
 	margin-top: 0;
+	text-decoration: 1px solid underline var(--global--color-primary);
 }
 
 .entry-content .more-link:hover {
@@ -187,14 +188,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-link-color a, a {
-	border-bottom: 1px solid;
 	border-color: transparent;
 	transition: all 0.1s ease;
+	text-decoration: none;
 }
 
 .has-link-color a:hover, a:hover {
 	color: var(--global--color-primary-hover);
-	border-color: var(--global--color-primary-hover);
+	text-decoration: 1px solid underline;
 }
 
 .wp-block a,
@@ -219,7 +220,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header a {
-	border-bottom: 1px solid transparent;
+	text-decoration: none;
 }
 
 @media only screen and (max-width: 829px) {
@@ -277,6 +278,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .site-branding .site-title > a {
 	background: inherit;
+	text-decoration: none;
 	text-shadow: none;
 }
 
@@ -429,6 +431,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-footer .menu-item a {
+	border-bottom: none;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }

spearhead/style.css

@@ -7,7 +7,7 @@ Description: Share your podcast with the world using Spearhead.
 Requires at least: 5.5
 Tested up to: 5.5
 Requires PHP: 5.6.2
-Version: 1.3.4
+Version: 1.3.3
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: seedlet
@@ -159,6 +159,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	display: inline-block;
 	font-size: var(--entry-meta--font-size);
 	margin-top: 0;
+	text-decoration: 1px solid underline var(--global--color-primary);
 }
 
 .entry-content .more-link:hover {
@@ -187,14 +188,14 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-link-color a, a {
-	border-bottom: 1px solid;
 	border-color: transparent;
 	transition: all 0.1s ease;
+	text-decoration: none;
 }
 
 .has-link-color a:hover, a:hover {
 	color: var(--global--color-primary-hover);
-	border-color: var(--global--color-primary-hover);
+	text-decoration: 1px solid underline;
 }
 
 .wp-block a,
@@ -219,7 +220,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 }
 
 .has-main-navigation .site-header a {
-	border-bottom: 1px solid transparent;
+	text-decoration: none;
 }
 
 @media only screen and (max-width: 829px) {
@@ -277,6 +278,7 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 
 .site-header .site-branding .site-title > a {
 	background: inherit;
+	text-decoration: none;
 	text-shadow: none;
 }
 
@@ -429,6 +431,10 @@ Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-me
 	margin: 0;
 }
 
+.site-footer .menu-item a {
+	border-bottom: none;
+}
+
 .site-footer > .site-info {
 	font-family: var(--global--font-secondary);
 }