diff options
Diffstat (limited to 'scss')
| -rw-r--r-- | scss/modules/btn.scss | 9 | ||||
| -rw-r--r-- | scss/modules/link.scss | 33 | ||||
| -rw-r--r-- | scss/modules/nav.scss | 46 | ||||
| -rw-r--r-- | scss/modules/news-index.scss | 7 | ||||
| -rw-r--r-- | scss/normalize.scss | 107 | ||||
| -rw-r--r-- | scss/utils.scss | 4 |
6 files changed, 134 insertions, 72 deletions
diff --git a/scss/modules/btn.scss b/scss/modules/btn.scss index 1d52b9c..e9db392 100644 --- a/scss/modules/btn.scss +++ b/scss/modules/btn.scss @@ -1,7 +1,5 @@ .btn { display: block; - box-sizing: border-box; - color: var(--text-color); border: solid var(--relative-eighth-rem) var(--text-color); font-weight: 600; text-align: center; @@ -33,3 +31,10 @@ .btn:active { transform: scale(1.1, 1.1); } + +/* Override anchor styling. */ +a.btn { + color: var(--text-color); + text-decoration: none; +} + diff --git a/scss/modules/link.scss b/scss/modules/link.scss index dfcabcf..83206d4 100644 --- a/scss/modules/link.scss +++ b/scss/modules/link.scss @@ -1,32 +1,31 @@ -.link { +a, .link { color: var(--special-text-color); text-decoration-line: underline; text-decoration-color: var(--special-text-color); text-decoration-thickness: var(--relative-eighth-rem); text-underline-offset: var(--relative-eighth-rem); border: dotted transparent var(--relative-eighth-rem); - border-radius: calc(3 * var(--relative-eighth-rem)); transition: color 100ms, text-decoration-color 100ms, text-decoration-thickness 100ms, border-color 100ms; -} -.link:is(:hover, :focus, :focus-visible, :focus-within), -.group-hover:is(:hover, :focus, :focus-visible, :focus-within) .link { - text-decoration-color: currentColor; - text-decoration-thickness: calc(3 * var(--relative-eighth-rem)); - transition: - color 300ms, - text-decoration-color 300ms, - text-decoration-thickness 300ms, - border-color 300ms; -} + &:is(:hover, :focus, :focus-visible, :focus-within), + .group-hover:is(:hover, :focus, :focus-visible, :focus-within) & { + text-decoration-color: currentColor; + text-decoration-thickness: calc(3 * var(--relative-eighth-rem)); + transition: + color 300ms, + text-decoration-color 300ms, + text-decoration-thickness 300ms, + border-color 300ms; + } -.link:focus, .link:focus-visible { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); + &:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + } } diff --git a/scss/modules/nav.scss b/scss/modules/nav.scss index aebcbcf..765c44f 100644 --- a/scss/modules/nav.scss +++ b/scss/modules/nav.scss @@ -1,5 +1,11 @@ -.nav > :not(:last-child) { - margin-block: 0 var(--margin-block-sm); +.nav { + & > :not(:last-child) { + margin-block: 0 var(--margin-block-sm); + } + + li { + list-style-type: none; + } } .nav__bottom-row { @@ -44,33 +50,31 @@ ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; -} -.nav__logo a { - text-decoration: none; - border: var(--relative-eighth-rem) dotted transparent; - transition: border-color 100ms; -} + a { + text-decoration: none; + border: var(--relative-eighth-rem) dotted transparent; + transition: border-color 100ms; -.nav__logo a:is(:focus, :focus-visible, :focus-within) { - box-shadow: none; - outline: none; - border-color: var(--special-text-color); - transition: border-color 300ms; + &:is(:focus, :focus-visible, :focus-within) { + box-shadow: none; + outline: none; + border-color: var(--special-text-color); + transition: border-color 300ms; + } + } } .nav__breadcrumbs { display: flex; flex-wrap: wrap; -} - -.nav__breadcrumbs li { - list-style-type: none; - min-width: max-content; -} -.nav__breadcrumbs li::before { - content: '/' + li { + min-width: max-content; + &::before { + content: '/' + } + } } .nav__switch-language-link { diff --git a/scss/modules/news-index.scss b/scss/modules/news-index.scss index 0050f70..5d9bab2 100644 --- a/scss/modules/news-index.scss +++ b/scss/modules/news-index.scss @@ -8,6 +8,11 @@ width: var(--width-prose); } +a.news-index__item { + text-decoration: none; + color: var(--text-color); +} + .news-index__item:not(:first-child) { border-top-width: 0; } @@ -28,4 +33,4 @@ .news-index__item:is(:focus, :focus-visible, :focus-within) { border-color: var(--special-text-highlight-color); border-style: dotted; -}
\ No newline at end of file +} diff --git a/scss/normalize.scss b/scss/normalize.scss index 9d59ef8..0f7e02f 100644 --- a/scss/normalize.scss +++ b/scss/normalize.scss @@ -1,3 +1,9 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + :root, html, body, @@ -22,31 +28,48 @@ h4 { padding: 0; } +/* + * Prevent font size inflation + * https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ + */ html { - -webkit-text-size-adjust: 100%; -} - -main { - display: block; + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; } +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ hr { box-sizing: content-box; height: 0; overflow: visible; } -pre { - font-family: monospace, monospace; - font-size: 1em; +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ +code, kbd, pre, samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ } +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ b, strong { font-weight: bolder; @@ -56,8 +79,12 @@ small { font-size: 80%; } -sub, -sup { +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +@mixin baseline-adjustment { font-size: 75%; line-height: 0; position: relative; @@ -65,48 +92,66 @@ sup { } sub { + @include baseline-adjustment; bottom: -0.25em; } sup { + @include baseline-adjustment; top: -0.5em; } -img { - border-style: none; -} - -button, [type='button'], [type='reset'], [type='submit'] { +@mixin form-control-reset { font-family: inherit; font-size: 100%; line-height: 1.15; - text-transform: none; - overflow: visible; + margin: 0; + text-transform: none; /* For buttons (Firefox, Edge) and selects (Firefox) */ } -:is(button, [type='button'], [type='reset'], [type='submit'])::-moz-focus-inner { - border-style: none; - padding: 0; +:is( + button, + [type='button'], + [type='reset'], + [type='submit'] +) { + @include form-control-reset; + text-transform: none; + + /** + * Remove the inner border and padding in Firefox. + */ + &::-moz-focus-inner { + border-style: none; + padding: 0; + } + + /** + * Restore the focus styles unset by the previous rule. + */ + &:-moz-focusring { + outline: 1px dotted ButtonText; + } } -:is(button, [type='button'], [type='reset'], [type='submit']):-moz-focusring { - outline: 1px dotted ButtonText; +input, +optgroup, +select, +textarea { + @include form-control-reset; } +/** + * Corrects the display in Firefox and Edge. + */ details { display: block; } +/* + * Add the correct display in all browsers. + */ summary { display: list-item; } -[hidden] { - display: none; -} - -a, :link, :visited { - background-color: transparent; - color: currentColor; - text-decoration: none; -} diff --git a/scss/utils.scss b/scss/utils.scss index a05a216..f8336eb 100644 --- a/scss/utils.scss +++ b/scss/utils.scss @@ -5,3 +5,7 @@ .font-weight-lighter { font-weight: lighter; } + +li.list-style-none, .list-style-none li { + list-style-type: none; +} |