diff --git a/www/css/ppty.css b/www/css/ppty.css index ecf388d..a540afe 100644 --- a/www/css/ppty.css +++ b/www/css/ppty.css @@ -3,12 +3,6 @@ /* =========================================================== */ .ppty { - /* display: block; */ - /* flex-direction: column; */ - /* justify-content: start; */ - /* align-content: center; */ - /* align-items: start; */ - overflow: hidden; font-family: monospace; diff --git a/www/css/style.css b/www/css/style.css index 67aec8a..424539d 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1,10 +1,23 @@ +html, body { + inset: 0 0 0 0; + margin: 0; + padding: 0; + width: 100%; + height: 100%; +} + body { - background-color: var(--theme-bg); + min-height: 100%; } main { visibility: hidden; opacity: 0; + + width: 100%; + height: 100%; + + z-index: 0; } #bg-canvas { @@ -20,7 +33,7 @@ main { .centered-container { position: absolute; inset: 0 0 0 0; - margin: auto; + margin: auto auto; display: flex; } @@ -35,8 +48,8 @@ main { border: 0.5ch solid var(--theme-tty-border); padding: 20px; - width: auto; - height: auto; + /* width: auto; */ + /* height: auto; */ background-color: var(--theme-bg); color: var(--theme-text); @@ -45,46 +58,99 @@ main { font-size: 1.5em } +#boot-ppty { + z-index: 1; +} + +#frames { + /* border-box means padding+margin are included in width+height */ + box-sizing: border-box; + width: 100%; + height: 100%; + padding: 5% 10% 0% 5%; + + display: grid; + grid-template-areas: + "whoami butterfly" + "socials butterfly" + "disclaimer disclaimer" + ; + grid-template-columns: 1fr 1fr; +} + +#whoami { + grid-area: whoami; + + width: 100%; + height: 100%; + + display: flex; + align-items: center; + justify-content: start; + gap: 2ch; +} + +#whoami .avatar { + height: 18ch; + display: block; /* avoid inline-image gaps */ + object-fit: scale-down; +} + +#socials { + grid-area: socials; +} + +#butterfly { + grid-area: butterfly; +} + +#disclaimer { + grid-area: disclaimer; +} + .socials-list { - /* display: flex; */ - /* flex-direction: column; */ - /* gap: 1ch; */ - /* align-content: centerr; */ - /* align-items: start; */ + margin: 0; + padding: 0; + width: 45ch; list-style: none; - width: 45ch; } .socials-item { + border-bottom: 1px solid var(--theme-icon-off); + padding: 8px 0; + display: flex; - align-items: start; gap: 12px; - padding: 8px 0; - border-bottom: 1px solid var(--theme-icon-off); } .socials-icon { width: 2ch; height: 2ch; - object-fit: contain; + flex: 0 0 40px; /* fixed column */ + object-fit: contain; } .socials-name { - flex: 1 1 140px; - text-align: left; - min-width: 0; /* important to allow truncation if needed */ + flex: 1 1 9ch; overflow: hidden; - text-overflow: ellipsis; white-space: nowrap; + + text-align: left; + text-overflow: ellipsis; } .socials-link { - flex: 0 0 auto; /* fixed link column width; adjust as needed */ - text-align: left; - color: var(--theme-link); - text-decoration: none; + min-width: 0; /* important to allow truncation if needed */ + + overflow: hidden; white-space: nowrap; + + text-align: left; + text-decoration: none; + text-overflow: ellipsis; + + color: var(--theme-tty-command); } diff --git a/www/css/themes/core.css b/www/css/themes/core.css index e8af746..661c075 100644 --- a/www/css/themes/core.css +++ b/www/css/themes/core.css @@ -1,6 +1,7 @@ .theme-base { color: var(--theme-base); } .theme-bg { color: var(--theme-bg); } .theme-text { color: var(--theme-text); } +.theme-text-muted { color: var(--theme-text-muted); } .theme-link { color: var(--theme-link); } .theme-icon { color: var(--theme-icon); } diff --git a/www/css/themes/maps/rose-pine.css b/www/css/themes/maps/rose-pine.css index a9fd520..36c7a68 100644 --- a/www/css/themes/maps/rose-pine.css +++ b/www/css/themes/maps/rose-pine.css @@ -21,6 +21,7 @@ Variables: --theme-base: var(--palette-rose-pine-base); --theme-bg: var(--palette-rose-pine-base); --theme-text: var(--palette-rose-pine-text); + --theme-text-muted: var(--palette-rose-pine-muted); --theme-link: var(--palette-rose-pine-foam); --theme-icon: var(--palette-rose-pine-pine); diff --git a/www/index.html b/www/index.html index 75391a0..6297589 100644 --- a/www/index.html +++ b/www/index.html @@ -1,5 +1,4 @@ - @@ -20,31 +19,24 @@ - - - + - -