Change link styles when in a post (#15)
The difference between bolded text and links/ anchors was almost none which lead to confusion and having to hover to see which words are links and which ones are bold. This commit implements best practices for accessibility by having links in posts( and only in posts) be underlined.
This commit is contained in:
parent
826fa2ee18
commit
a83b909eea
|
@ -1 +1 @@
|
||||||
*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.navigation a{font-size:1.4rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{height:6rem;width:100%;text-align:center;line-height:6rem}.float-right{float:right}.float-left{float:left}
|
*,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{display:flex;color:#323232;background-color:#fefefe;font-family:'Fira Mono',monospace;font-size:1.6em;font-weight:400;letter-spacing:.0625em;line-height:1.8em}@media only screen and (min-device-width:320px) and (max-device-width:480px){body{font-size:1.4em;line-height:1.6em}}a{font-weight:700;color:#000;text-decoration:none}a:focus,a:hover{text-decoration:underline}p{margin:1.6rem 0 1.6rem 0}p a{font-weight:400;color:#000;text-decoration:underline;text-underline-position:under}p a:focus,p a:hover{color:#36c}h1,h2,h3,h4,h5,h6{color:#000;text-transform:uppercase;letter-spacing:.0625em;margin:3.2rem 0 1.6rem 0}h1{font-size:3.2rem;line-height:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h1{font-size:2.8rem;line-height:2.8rem}}h2{font-size:2.8rem;line-height:2.8rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h2{font-size:2.4rem;line-height:2.4rem}}h3{font-size:2.4rem;line-height:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h3{font-size:2rem;line-height:2rem}}h4{font-size:2.2rem;line-height:2.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h4{font-size:1.8rem;line-height:1.8rem}}h5{font-size:2rem;line-height:2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){h5{font-size:1.6rem;line-height:1.6rem}}h6{font-size:1.4rem;line-height:1.4rem}pre{margin:1.6rem 0 1rem 0;padding:1.6rem;overflow-x:auto}code{background-color:#000;color:#fefefe;padding:.4rem .8rem .4rem .8rem}blockquote{border-left:2px solid #dcdcdc;padding-left:1.6rem;font-style:italic}th,td{padding:1.6rem}table{border-collapse:collapse}table td,table th{border:2px solid #000}table tr:first-child th{border-top:0}table tr:last-child td{border-bottom:0}table tr td:first-child,table tr th:first-child{border-left:0}table tr td:last-child,table tr th:last-child{border-right:0}img{max-width:100%}.wrapper{display:flex;flex-direction:column;min-height:100vh;width:100%}.container{margin:0 auto;max-width:120rem;width:100%;padding-left:2rem;padding-right:2rem}.navigation{height:6rem;width:100%}.navigation a{display:inline;font-size:1.6rem;text-transform:uppercase;line-height:6rem;letter-spacing:.1rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.navigation a{font-size:1.4rem}}.navigation ul{list-style:none;margin-bottom:0;margin-top:0}.navigation ul li{float:left;margin:0;position:relative}.navigation ul li a{margin-left:1rem;margin-right:1rem}.content{flex:1;margin-top:1.6rem;margin-bottom:3.2rem}.content article header{margin-top:3.2rem;margin-bottom:3.2rem}.content article header h1,.content article header h2{margin:0}.content article header h2{margin-top:1rem;font-size:1.8rem;color:#323232}@media only screen and (min-device-width:320px) and (max-device-width:480px){.content article header h2{font-size:1.6rem}}.list ul{margin:3.2rem 0 3.2rem 0;list-style:none;padding:0}.list ul li{font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li{font-size:1.4rem;margin:1.6rem 0 1.6rem 0}}.list ul li span{display:inline-block;text-align:right;width:20rem;margin-right:3rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.list ul li span{display:block;text-align:left}}.list ul li a{text-transform:uppercase}.pagination{margin-top:6rem;text-align:center}.pagination li{display:inline;text-align:center}.pagination li span{margin:0;text-align:center;width:3.2rem}.pagination li a span{margin:0;text-align:center;width:3.2rem}.centered{display:flex;height:100%;align-items:center;justify-content:center}.centered .about{text-align:center}.centered .about h1{margin-top:2rem;margin-bottom:.5rem}.centered .about h2{margin-top:1rem;margin-bottom:.5rem;font-size:2.4rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about h2{font-size:2rem}}.centered .about ul{list-style:none;margin:3rem 0 1rem 0;padding:0}.centered .about ul li{display:inline;position:relative}.centered .about ul li a{text-transform:uppercase;margin-left:1rem;margin-right:1rem;font-size:1.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .about ul li a{font-size:1.4rem}}.centered .error{text-align:center}.centered .error h1{margin-top:2rem;margin-bottom:.5rem;font-size:4.6rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h1{font-size:3.2rem}}.centered .error h2{margin-top:2rem;margin-bottom:3.2rem;font-size:3.2rem}@media only screen and (min-device-width:320px) and (max-device-width:480px){.centered .error h2{font-size:2.8rem}}.footer{height:6rem;width:100%;text-align:center;line-height:6rem}.float-right{float:right}.float-left{float:left}
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
@fg-color: #323232;
|
@fg-color: #323232;
|
||||||
@darker-bg-color: #dcdcdc;
|
@darker-bg-color: #dcdcdc;
|
||||||
@darker-fg-color: #000;
|
@darker-fg-color: #000;
|
||||||
|
@link-color: #3366CC;
|
||||||
|
|
||||||
|
|
||||||
*,
|
*,
|
||||||
|
@ -42,6 +43,16 @@ a {
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin: 1.6rem 0 1.6rem 0;
|
margin: 1.6rem 0 1.6rem 0;
|
||||||
|
a {
|
||||||
|
font-weight: 400;
|
||||||
|
color: @darker-fg-color;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-position: under;
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
color: @link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
|
|
Loading…
Reference in New Issue