Change link styles when in a post (#15)

Vlad Ionescu

02.55.2018 a83b909eeaf0dc2f5c367e4f0e58f64e5a43b2ad

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.

 static/css/style.min.css

@@ -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}

 static/less/style.less

@@ -2,6 +2,7 @@
@fg-color: #323232;
@darker-bg-color: #dcdcdc;
@darker-fg-color: #000;
@link-color: #3366CC;


*,
@@ -42,6 +43,16 @@

p {
  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,