diff --git a/startpage/style.css b/startpage/style.css index 2ae3ab4..29bf184 100644 --- a/startpage/style.css +++ b/startpage/style.css @@ -43,27 +43,30 @@ --outline: var(--blue); } -body { - background: var(--bg1); +html { + background: var(--bg1) !important; color: var(--fg0); font-size: 1.5em; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; + min-height: 100vh; } -#content { - width: 40em; - max-height: 100vh; +body { + background: transparent; + min-height: 100vh; margin: 1em; + display: flex; +} + +#content { + width: min(40em, 100%); + height: 100%; + margin: auto; } #cards { display: grid; - gap: 1rem; - grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: 0.75rem; + grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-rows: 1fr; } @@ -75,12 +78,12 @@ body { grid-column: 1 / 1; } -#cards > *:first-child{ +#cards > :first-child{ grid-row: 1 / 1; grid-column: 1 / 1; } -#cards > * { +#cards > a { color: inherit; text-decoration: none; display: flex; @@ -94,22 +97,22 @@ body { transition: 0.25s transform; } -#cards > * > * { +#cards > a > * { color: white; display: inline; height: 1em; } -#cards > :hover, #cards > :focus { +#cards > a:hover, #cards > a:focus { outline-width: 2px; outline-color: var(--outline); } -#cards > :focus { +#cards > a:focus { background: var(--highlight); transform: translateY(-0.25rem); } -#cards > :hover *, #cards > :focus * { +#cards > a:hover *, #cards > a:focus * { font-size: 1.0625em; }