lars/Portfolio-2026
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a11y styles, background gradient for header

Browse Source
This commit is contained in:
sefaria
2026-05-27 09:04:45 +02:00
parent 13632637a9
commit de4698e6fd
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/a11y.css
+6 -3
View File
@@ -1,3 +1,6 @@
body { *, a, span {
background: red; line-height: 1.5;
} letter-spacing: 0.12em;
word-spacing: 0.16em;
}
css/style.css
+9 -3
View File
@@ -481,6 +481,8 @@ button:visited, .button-primary:visited, .logo:visited {
background: var(--color-background-content-box); background: var(--color-background-content-box);
} }
/* Site header */
.site-header { .site-header {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -488,11 +490,13 @@ button:visited, .button-primary:visited, .logo:visited {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
background: linear-gradient(180deg, var(--color-neutral-900) 80%, rgba(115, 115, 115, 0.00) 100%);
/* backdrop-filter: blur(6px); */
} }
.site-header .menu-bar { .site-header .menu-bar {
width: 900px; width: 900px;
padding: var(--spacing-5) var(--spacing-6) 0 var(--spacing-5); padding: var(--spacing-5) var(--spacing-6) var(--spacing-4) var(--spacing-5);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -739,14 +743,14 @@ button:visited, .button-primary:visited, .logo:visited {
} }
/* Maint content */
main, footer { main, footer {
max-width: 900px; max-width: 900px;
border: none; border: none;
margin-left:auto; margin-left:auto;
margin-right:auto; margin-right:auto;
padding: var(--spacing-4) var(--spacing-6); padding: 0 var(--spacing-6) var(--spacing-4) var(--spacing-6);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -886,6 +890,8 @@ footer a:visited {
color: var(--color-neutral-900); color: var(--color-neutral-900);
} }
/* Footer */
.footer-content { .footer-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;