Skip to content

Commit

Permalink
Add and improve link styling (#92)
Browse files Browse the repository at this point in the history 
* add global default link styles

inspired by links in header. closes #34.

* make post control links look consistent and fix spacing.

closes #33

* add focus/hover styling for forum and topic row links

* specify supported browsers

* remove unused .toplinks styling

* remove unnecessary cursor definition

* topic row: move mod checkbox inline, use more accessible topic link
inline mod checkbox avoids disruptions to original design

* add hover/focus state to topic row links

* main profile: make hovered .main-links more obvious, add :focus

* also apply header links hover style on focus

* also apply face claim and member directory hover styles on focus

* add hover/focus styles to member directory entries

* don't suppress text-decoration for thread tracker links

* guidebook: add link focus styles, make focused/hovered more obvious

* main profile: apply tab hover styles on focus, make more obvious

* member list: apply submit button's hover style on focus as well

* thread tracker: make link styling work on focus as well as hover, tie hover/focus to focusable element
  • Loading branch information
@thewildmage
thewildmage authored Nov 8, 2021
1 parent 876210a commit 91c3efb
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 72 deletions.
7 changes: 7 additions & 0 deletions .browserslistrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# supported browsers

> 5%
last 2 versions
Firefox ESR
not dead
not ie > 0
145 changes: 76 additions & 69 deletions dist/assets/stylesheet.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,22 @@ ELEMENTS
-----
*/

a {
color: inherit;
text-decoration-color: rgba(var(--black), 0.3);

/* skip-ink, thickness, and offset may not work everywhere, but fallback just fine */
text-decoration-skip-ink: auto;
text-decoration-thickness: 0.1em;
text-underline-offset: 0.1em;
}

a:focus,
a:hover {
text-decoration-color: var(--blue-hex);
text-decoration-line: underline overline;
}

img {
max-inline-size: 100%;
}
Expand Down Expand Up @@ -313,46 +329,6 @@ LEEANN'S HEADER & NAVIGATION
margin-right: 5rem;
}

#topbar .toplinks #myLinks {
background: var(--black-hex);
display: none;
max-width: 80%;
position: absolute;
right: 0;
top: 51px;
width: 200px;
}

#topbar .toplinks:hover #myLinks,
#topbar .toplinks:focus-within #myLinks {
display: initial;
}

#topbar .toplinks a,
#topbar .toplinks .icon {
color: var(--white-hex);
display: block;
fill: var(--white-hex);
font-size: 17px;
padding: 14px 16px;
text-decoration: none;
}

#topbar .toplinks .icon {
background: var(--black-hex);
display: block;
position: absolute;
right: 0;
top: 0;
}

#topbar .toplinks a:hover,
#topbar .toplinks .icon:hover {
background-color: var(--white-hex);
color: var(--black-hex);
fill: var(--black-hex);
}

#sidebar {
background: var(--white-hex);
display: grid;
Expand Down Expand Up @@ -511,8 +487,8 @@ LEEANN'S HEADER & NAVIGATION
z-index: -1;
}

#header .info .links a:focus,
#header .info .links a:hover {
cursor: pointer;
text-shadow: -1px -1px 0 var(--pink-hex), 0 -1px 0 var(--pink-hex),
1px -1px 0 var(--pink-hex), 1px 0 0 var(--pink-hex),
1px 1px 0 var(--pink-hex), 0 1px 0 var(--pink-hex),
Expand Down Expand Up @@ -702,6 +678,11 @@ RAY'S CATEGORIES, FORUMS, TOPICS
text-decoration: none;
}

.forum-last-post a:focus,
.forum-last-post a:hover {
background-color: rgba(var(--pink), 0.7);
}

.subforums {
padding: 1vw;
}
Expand All @@ -716,6 +697,11 @@ RAY'S CATEGORIES, FORUMS, TOPICS
text-decoration: none;
}

.subforums a.tooltip:focus,
.subforums a.tooltip:hover {
background-color: var(--pink-hex);
}

.topic-row {
display: grid;
gap: 4vw 4vw;
Expand All @@ -732,6 +718,10 @@ RAY'S CATEGORIES, FORUMS, TOPICS
margin: 10px;
}

.topic-wrapper a:not(:focus):not(:hover) {
text-decoration-line: none;
}

.topic-wrapper .topic-title {
font-family: var(--display);
font-size: 2rem;
Expand All @@ -747,10 +737,10 @@ RAY'S CATEGORIES, FORUMS, TOPICS
gap: 1vw 2vw;
grid-area: topic-info;
grid-template-areas:
"topic-desc topic-desc topic-desc topic-desc"
"topic-last-post-av topic-last-post topic-last-post topic-last-post"
"topic-starter topic-starter topic-starter topic-starter"
"topic-pagination topic-pagination topic-pagination topic-pagination";
"topic-desc topic-desc topic-desc topic-desc"
"topic-last-post-av topic-last-post topic-last-post topic-last-post"
"topic-starter topic-starter topic-starter topic-starter"
"topic-pagination topic-pagination topic-pagination topic-pagination";
grid-template-columns: auto 1fr 1fr 1fr;
grid-template-rows: repeat(3, auto) 1fr;
}
Expand Down Expand Up @@ -801,7 +791,6 @@ RAY'S CATEGORIES, FORUMS, TOPICS
margin: 2px;
min-width: 50%;
text-align: center;
text-decoration: none;
}

.topic-wrapper .topic-starter {
Expand Down Expand Up @@ -1169,23 +1158,20 @@ JULIET'S POST ROW
border: var(--black-hex) solid 2px;
display: flex;
font: 400 8px var(--sans);
gap: 15px;
height: 30px;
justify-content: center;
letter-spacing: 2px;
line-height: 90%;
margin: -90px auto 75px 0;
padding: 0 0 0 15px;
padding-inline-end: 15px;
padding-inline-start: 15px;
position: relative;
text-transform: uppercase;
width: max-content;
z-index: 999;
}

.pr-wrap .pr-box .box-bord .box-edits span {
display: inline-block;
margin-right: 15px;
}

.pr-wrap .pr-box .box-bord .box-edits span:empty {
display: none;
}
Expand Down Expand Up @@ -1487,12 +1473,14 @@ MONTY'S MAIN PROFILE
transition: 0.3s;
}

.main-links a:focus,
.main-links a:hover {
background: linear-gradient(
to left,
rgba(var(--green), 0.45),
rgba(var(--yellow), 0.45)
);
border-color: var(--blue-hex);
}

.main-inner-account {
Expand Down Expand Up @@ -1581,13 +1569,16 @@ MONTY'S MAIN PROFILE
right: auto;
}

.tab-forward:focus,
.tab-back:focus,
.tab-forward:hover,
.tab-back:hover {
background: linear-gradient(
to left,
rgba(var(--green), 0.45),
rgba(var(--yellow), 0.45)
);
border-color: var(--blue-hex);
}

.dot-labels {
Expand Down Expand Up @@ -1823,6 +1814,7 @@ RORA'S MEMBER LIST
transition: var(--transi-quick);
}

.cp-memsearch .forminput.submit:focus,
.cp-memsearch .forminput.submit:hover {
background: var(--pink-hex);
transition: var(--transi-quick);
Expand Down Expand Up @@ -2421,6 +2413,8 @@ LEEANN'S SITE PACK
width: 100%;
}

.box-post .cc-fc .text col-1 a:focus .x,
.box-post .cc-fc .text col-2 a:focus .x,
.box-post .cc-fc .text col-1 a:hover .x,
.box-post .cc-fc .text col-2 a:hover .x {
opacity: 0;
Expand All @@ -2429,6 +2423,8 @@ LEEANN'S SITE PACK
width: 100%;
}

.box-post .cc-fc .text col-1 a:focus .y,
.box-post .cc-fc .text col-2 a:focus .y,
.box-post .cc-fc .text col-1 a:hover .y,
.box-post .cc-fc .text col-2 a:hover .y {
background: var(--black-hex);
Expand Down Expand Up @@ -2494,6 +2490,8 @@ LEEANN'S SITE PACK
width: 80%;
}

.box-post .cc-md .text col-1 a:focus,
.box-post .cc-md .text col-2 a:focus,
.box-post .cc-md .text col-1 a:hover,
.box-post .cc-md .text col-2 a:hover {
background: var(--black-hex);
Expand Down Expand Up @@ -2599,10 +2597,13 @@ LEEANN'S SITE PACK
color: var(--black-hex);
font: 400 1.5rem var(--display);
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
}

.box-post .cc-md-rep .body .char char-name a:not(:focus):not(:hover) {
text-decoration-line: none;
}

.box-post .cc-md-rep .body .char char-info {
align-self: start;
background: var(--group-gradient-fade);
Expand Down Expand Up @@ -3668,12 +3669,25 @@ IZZY'S DEV PACK
.dev-tracker .thread {
--color: var(--black-hex);

border-right: 2px solid var(--color);
margin: 16px 16px 16px 24px;
position: relative;
}

.dev-tracker .thread::after {
.dev-tracker .thread-name {
border-right: 2px solid var(--color);
color: var(--color);
display: block;
font-weight: 500;
letter-spacing: 0.1px;
padding: 4px 16px 16px 8px;
}

.dev-tracker .thread-name:focus,
.dev-tracker .thread-name:hover {
--color: var(--group);
}

.dev-tracker .thread-name::after {
border-bottom: 2px solid var(--color);
bottom: 8px;
content: "";
Expand All @@ -3684,18 +3698,6 @@ IZZY'S DEV PACK
right: -8px;
}

.dev-tracker .thread:hover {
--color: var(--group);
}

.dev-tracker .thread-name {
color: var(--color);
display: block;
font-weight: 500;
letter-spacing: 0.1px;
padding: 4px 16px 16px 8px;
}

/*
-----
ROSE'S DEV PACK
Expand Down Expand Up @@ -3949,7 +3951,7 @@ ROSE'S DEV PACK
color: var(--white-hex);
font-size: 10px;
font-weight: bold;
text-decoration: none;
text-decoration-color: currentColor;
text-transform: uppercase;
}

Expand Down Expand Up @@ -4092,13 +4094,18 @@ ABI'S WEBPAGES
line-height: 2.5;
padding-left: 10px;
padding-right: 10px;
text-decoration: none;
text-transform: uppercase;
transition: 1s ease;
}

.webpagesidebar .webpagesidebarcont a:not(:focus):not(:hover) {
text-decoration-color: transparent;
}

.webpagesidebar .webpagesidebarcont a:focus,
.webpagesidebar .webpagesidebarcont a:hover {
letter-spacing: 2px;
text-decoration-line: underline;
transition: 1s ease;
}

Expand Down
9 changes: 6 additions & 3 deletions dist/html-templates/topic_row.html
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,27 @@
<div class="topic-wrapper">
<div class="topic-title">
<!-- |prefix| -->
<!-- |topic| -->
<a href="<!-- |topic_url| -->"><!-- |topic_text| --></a>
<!-- |mod_checkbox| -->
</div>

<div class="topic-info">
<div class="topic-desc"><!-- |topic_desc| --></div>

<div class="topic-last-post-av">
<!-- |last_poster_avatar| -->
</div>

<div class="topic-last-post">
last post by:
<!-- |last_poster| -->
</div>

<div class="topic-starter">
topic started by:
<!-- |starter| -->
</div>

<div class="topic-pagination">
<!-- |pages| -->
<div class="views-replies-flex">
Expand All @@ -32,6 +37,4 @@
</div>
</div>
</div>

<!-- |mod_checkbox| -->
</div>

0 comments on commit 91c3efb

Please sign in to comment.