diff --git a/saturn/server/static/css/index.css b/saturn/server/static/css/index.css index 2b49849..c9612f8 100644 --- a/saturn/server/static/css/index.css +++ b/saturn/server/static/css/index.css @@ -5,52 +5,70 @@ body { grid-template-rows: auto 1fr; - column-gap: 2rem; } body > h1 { grid-row: 1; grid-column: 1 / span 2; + margin: 3rem 3rem 1rem 3rem; } -body > * { +body > #events { margin: 2rem; } +@media (max-width: 672px) { + body > h1 { + margin: 1rem; + } + body > #events { + margin: 0; + } +} + .event { margin: 1rem; display: grid; grid-template-columns: 6rem 1fr; - row-gap: .5rem; - column-gap: 1rem; + gap: 1rem; background: var(--ui-01); padding: 1rem; } +.event * { + overflow-x: hidden; + text-overflow: ellipsis; +} .event > .summary { - font-weight: 400; - font-size: 1.5rem; + font-size: 1.75rem; + line-height: 2.25rem; grid-row: 1; grid-column: 1 / span 2; } .event > .date { grid-column: 1; - font-size: 1.1rem; + font-size: 1.25rem; + line-height: 1.75rem; display: grid; grid-template-columns: auto; + grid-template-rows: auto auto; gap: 1rem; text-align: center; } -.event > .date > div { - display: grid; - grid-template-columns: auto; +.event > .date > div > span { + display: block; } .date .day { - font-size: 3em; + font-size: 2.625rem; + line-height: 3.25rem; + font-weight: 300; + font-variant: tabular-nums; } .date .time { - font-size: 1.5em; + font-size: 1.75rem; + line-height: 2.25rem; + font-variant: tabular-nums; } .event .end-date, .event .other { @@ -65,3 +83,11 @@ body > * { auto; gap: 1rem; } +.event .description { + font-size: 1rem; + line-height: 1.5rem; +} +.event .other { + font-size: 1rem; + line-height: 1.375rem; +} diff --git a/saturn/server/static/css/main.css b/saturn/server/static/css/main.css index 713e80a..1d8ac18 100644 --- a/saturn/server/static/css/main.css +++ b/saturn/server/static/css/main.css @@ -3,20 +3,52 @@ --ui-01: var(--gray-10); --text-01: var(--gray-100); --text-02: var(--gray-70); + --link-01: var(--blue-60); + --hover-primary-text: var(--blue-70); + --focus: var(--blue-60); + --visited-link: var(--purple-60); --gray-10: #f4f4f4; --gray-70: #525252; --gray-100: #161616; + + --blue-60: #0f62fe; + --blue-70: #0043ce; + + --purple-60: #8a3ffc; } body { margin: 0; font-family: Inter, sans-serif; + font-size: .875rem; + font-weight: 400; + line-height: 1.125rem; background: var(--ui-background); color: var(--text-01); + + font-feature-settings: 'ss01', 'ss03'; } h1 { font-weight: 300; - font-size: 3rem; + font-size: 3.375rem; + line-height: 4rem; + font-feature-settings: 'ss01', 'ss02', 'ss03', 'cv11'; +} + +a { + color: var(--link-01); +} +a:hover { + color: var(--hover-primary-text); +} +a:active { + color: var(--text-01); +} +a:focus { + outline: 1px solid var(--focus); +} +a:visited { + color: var(--visited-link); }