diff options
Diffstat (limited to 'src/styles/base/_typography.scss')
| -rw-r--r-- | src/styles/base/_typography.scss | 64 | 
1 files changed, 7 insertions, 57 deletions
| diff --git a/src/styles/base/_typography.scss b/src/styles/base/_typography.scss index f1cb38a..2c3c8cc 100644 --- a/src/styles/base/_typography.scss +++ b/src/styles/base/_typography.scss @@ -1,5 +1,4 @@  @use "@styles/abstracts/functions" as fun; -@use "@styles/abstracts/variables" as var;  h1 {    font-size: var(--font-size-3xl); @@ -116,34 +115,28 @@ dl {  ul,  ol,  dl { -  margin: var(--spacing-md) 0; +  margin: var(--spacing-sm) 0;    & & {      margin: var(--spacing-2xs) 0 0;    } -} - -dt { -  flex: 0 0 max-content; -  font-weight: 600; -} -dd { -  flex: 0 0 auto; -  margin: 0; +  ::marker { +    color: var(--color-primary-dark); +  }  }  a {    background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%) -    0 0 / 100% 200% no-repeat; +    0 0 / 100% 201% no-repeat;    color: var(--color-primary); -  text-decoration-thickness: 13%; +  text-decoration-thickness: 0.15em;    text-underline-offset: 20%;    transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;    &:hover {      color: var(--color-primary-light); -    text-decoration-thickness: 23%; +    text-decoration-thickness: 0.25em;    }    &:focus { @@ -156,39 +149,6 @@ a {      color: var(--color-primary-dark);      text-decoration-thickness: 18%;    } - -  &.external { -    &::after { -      display: inline-block; -      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); -    } - -    &:focus:not(:active)::after { -      content: "\0000a0"url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>')); -    } -  } - -  &[hreflang] { -    &::after { -      display: inline-block; -      content: "\0000a0["attr(hreflang) "]"; -      font-size: var(--font-size-sm); -    } - -    &.external { -      &::after { -        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( -            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' -          )); -      } - -      &:focus:not(:active)::after { -        content: "\0000a0["attr(hreflang) "]\0000a0"url(fun.encode-svg( -            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>' -          )); -      } -    } -  }  }  button, @@ -233,13 +193,3 @@ pre {    word-break: normal;    word-wrap: normal;  } - -figure { -  margin: var(--spacing-md) 0; -} - -figcaption { -  margin-top: var(--spacing-xs); -  font-size: var(--font-size-sm); -  text-align: center; -} | 
