Template:Main page/styles.css: Difference between revisions
Jump to navigation
Jump to search
Reserve the final homepage card for Add your lolcow |
Style the homepage directory for communities, projects, and general articles |
||
| Line 83: | Line 83: | ||
.lc-home .lc-add-profile-link:focus { outline: 2px solid currentColor; outline-offset: 3px; } | .lc-home .lc-add-profile-link:focus { outline: 2px solid currentColor; outline-offset: 3px; } | ||
.lc-home .lc-add-profile-plus { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; font-size: 26px; font-weight: 400; line-height: 1; } | .lc-home .lc-add-profile-plus { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; font-size: 26px; font-weight: 400; line-height: 1; } | ||
/* Automatically populated standalone subject lists. */ | |||
.lc-explore-group { min-width: 0; padding: 13px 0; border-top: 1px solid #eaecf0; } | |||
.lc-explore-group:first-child { padding-top: 0; border-top: 0; } | |||
.lc-explore-group:last-child { padding-bottom: 0; } | |||
.lc-home .lc-explore-group h3 { display: block; margin: 0 0 5px; padding: 0; border: 0; font: 600 14px/1.5 "RootWikiBrand", Inter, sans-serif; } | |||
.lc-explore-pages { margin: 6px 0 9px 20px; } | |||
.lc-explore-pages li { margin: 4px 0; overflow-wrap: anywhere; } | |||
.lc-explore-actions { font-size: 12px; overflow-wrap: anywhere; } | |||
Latest revision as of 14:21, 29 October 2026
.lc-home {
font-family: "RootWikiBrand", Inter, sans-serif;
font-size: 14px;
line-height: 1.65;
color: #202122;
}
.lc-home a { text-decoration: none; }
.lc-home a:hover { text-decoration: underline; }
.lc-home .mw-heading { margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; }
.lc-home .lc-welcome h2, .lc-home .lc-profile h3 { display: block; }
.lc-welcome {
background: #fff8fa;
border: 1px solid #e4cbd3;
border-top: 4px solid #ff004b;
padding: 24px 28px 18px;
text-align: center;
}
.lc-eyebrow { color: #8c3d54; font-size: 11px; font-weight: 600; letter-spacing: .12em; }
.lc-welcome h2 { border: 0; margin: 7px 0 12px; padding: 0; font: bold 32px/1.25 Georgia, serif; color: #202122; }
.lc-welcome p { margin: 4px 0; }
.lc-quicklinks { border-top: 1px solid #eadce1; margin-top: 17px; padding-top: 12px; font-weight: 600; }
.lc-home span { margin: 0 5px; color: #72777d; }
.lc-stats { margin-top: 9px; font-size: 12px; color: #54595d; }
.lc-callout { border: 1px solid #c8ccd1; border-left: 4px solid #ff004b; background: #f8f9fa; margin: 16px 0; padding: 12px 16px; }
.lc-columns { display: flex; align-items: flex-start; gap: 16px; }
.lc-main { flex: 2; min-width: 0; }
.lc-side { flex: 1; min-width: 280px; }
.lc-panel { border: 1px solid #c8ccd1; background: #fff; margin-bottom: 16px; }
.lc-home .lc-panel-title { font-family: "RootWikiBrand", Inter, sans-serif; font-size: 16px; line-height: 1.4; font-weight: 600; border: 0; border-bottom: 1px solid #d9b8c3; background: #f8e5eb; margin: 0; padding: 9px 14px; color: #202122; }
.lc-home .lc-title-blue { background: #eaf0f7; border-bottom-color: #c5d0dd; }
.lc-panel-body { padding: 14px; }
.lc-panel-body p:first-child { margin-top: 0; }
.lc-panel-body p:last-child { margin-bottom: 0; }
.lc-section-intro { color: #54595d; margin: 0 0 14px; font-size: 13px; }
.lc-profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.lc-profile { box-sizing: border-box; width: calc(50% - 6px); display: flex; align-items: center; gap: 13px; background: #f8f9fa; border: 1px solid #d8dce1; border-radius: 3px; padding: 15px 13px; }
.lc-profile:hover { background: #fff8fa; border-color: #d8a8b7; }
.lc-avatar { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 56px; border: 1px dashed #d7a8b7; border-radius: 3px; background: #faeaf0; color: #97435e; font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.lc-profile-copy { min-width: 0; overflow-wrap: break-word; }
.lc-home .lc-profile h3 { border: 0; padding: 0; margin: 0; font: 600 15px/1.45 "RootWikiBrand", Inter, sans-serif; overflow-wrap: break-word; }
.lc-profile p { margin: 3px 0 4px; color: #72777d; font-size: 11px; }
.lc-profile-links { font-size: 12px; }
.lc-profile-links span { margin: 0 4px; }
.lc-section-footer { text-align: right; border-top: 1px solid #eaecf0; margin-top: 14px; padding-top: 10px; font-size: 12px; }
.lc-update-label { display: inline-block; border: 1px solid #d7a8b7; background: #fff1f5; color: #8c3d54; padding: 2px 8px; margin-bottom: 9px; font-size: 11px; font-weight: 600; }
.lc-update-heading { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.lc-update-copy { font-size: 13px; }
.lc-update-edit { border-top: 1px solid #eaecf0; padding-top: 9px; margin-top: 13px; font-size: 11px; }
.lc-steps { margin: 0 0 14px 23px; }
.lc-steps li { margin-bottom: 11px; padding-left: 3px; font-size: 13px; }
.lc-action-link { font-size: 13px; font-weight: 600; }
.lc-side .lc-panel-body > p { font-size: 13px; }
.lc-navrow { display: flex; gap: 16px; padding: 9px 14px; border-top: 1px solid #eaecf0; font-size: 13px; }
.lc-navrow > strong { flex: none; width: 142px; }
.lc-navrow > div { min-width: 0; }
@media screen and (max-width: 1050px) {
.lc-columns { display: block; }
.lc-side { min-width: 0; }
}
@media screen and (max-width: 600px) {
.lc-welcome { padding: 19px 14px 15px; }
.lc-welcome h2 { font-size: 26px; }
.lc-quicklinks { font-size: 12px; }
.lc-profile { width: 100%; }
.lc-panel-body { padding: 12px; }
.lc-navrow { display: block; }
.lc-navrow > strong { display: block; width: auto; margin-bottom: 4px; }
}
.lc-discord-cta { margin: 18px 0 4px; }
.lc-home .lc-discord-cta a { display: inline-block; box-sizing: border-box; max-width: 100%; padding: 11px 22px; border: 1px solid #4752c4; border-radius: 4px; background: #5865f2; background-image: none; color: #fff; font-size: 15px; line-height: 1.5; font-weight: 600; text-decoration: none; overflow-wrap: break-word; }
.lc-home .lc-discord-cta a:hover, .lc-home .lc-discord-cta a:focus { background: #4752c4; color: #fff; text-decoration: underline; }
.lc-home .lc-discord-cta a:focus { outline: 3px solid #202122; outline-offset: 3px; }
/* The last homepage card is a single, keyboard-accessible contribution link. */
.lc-home .lc-profile-add { padding: 0; border-style: dashed; border-color: #b9637c; background: #fff8fa; }
.lc-home .lc-profile-add:hover { background: #fff1f5; border-color: #b60036; }
.lc-home .lc-add-profile-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; box-sizing: border-box; width: 100%; height: 100%; padding: 15px 13px; color: #9b0031; text-decoration: none; }
.lc-home .lc-add-profile-link:hover, .lc-home .lc-add-profile-link:focus { color: #9b0031; text-decoration: none; }
.lc-home .lc-add-profile-link:hover h3, .lc-home .lc-add-profile-link:focus h3 { text-decoration: underline; }
.lc-home .lc-add-profile-link:focus { outline: 2px solid currentColor; outline-offset: 3px; }
.lc-home .lc-add-profile-plus { flex: none; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0; border: 1px solid currentColor; border-radius: 50%; color: inherit; font-size: 26px; font-weight: 400; line-height: 1; }
/* Automatically populated standalone subject lists. */
.lc-explore-group { min-width: 0; padding: 13px 0; border-top: 1px solid #eaecf0; }
.lc-explore-group:first-child { padding-top: 0; border-top: 0; }
.lc-explore-group:last-child { padding-bottom: 0; }
.lc-home .lc-explore-group h3 { display: block; margin: 0 0 5px; padding: 0; border: 0; font: 600 14px/1.5 "RootWikiBrand", Inter, sans-serif; }
.lc-explore-pages { margin: 6px 0 9px 20px; }
.lc-explore-pages li { margin: 4px 0; overflow-wrap: anywhere; }
.lc-explore-actions { font-size: 12px; overflow-wrap: anywhere; }