diff --git a/www/css/ppty.css b/www/css/ppty.css index a540afe..ecf388d 100644 --- a/www/css/ppty.css +++ b/www/css/ppty.css @@ -3,6 +3,12 @@ /* =========================================================== */ .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 424539d..67aec8a 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -1,23 +1,10 @@ -html, body { - inset: 0 0 0 0; - margin: 0; - padding: 0; - width: 100%; - height: 100%; -} - body { - min-height: 100%; + background-color: var(--theme-bg); } main { visibility: hidden; opacity: 0; - - width: 100%; - height: 100%; - - z-index: 0; } #bg-canvas { @@ -33,7 +20,7 @@ main { .centered-container { position: absolute; inset: 0 0 0 0; - margin: auto auto; + margin: auto; display: flex; } @@ -48,8 +35,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); @@ -58,99 +45,46 @@ 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 { - margin: 0; - padding: 0; - width: 45ch; + /* display: flex; */ + /* flex-direction: column; */ + /* gap: 1ch; */ + /* align-content: centerr; */ + /* align-items: start; */ 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; - - flex: 0 0 40px; /* fixed column */ object-fit: contain; + flex: 0 0 40px; /* fixed column */ } .socials-name { - flex: 1 1 9ch; - overflow: hidden; - white-space: nowrap; - + flex: 1 1 140px; text-align: left; + min-width: 0; /* important to allow truncation if needed */ + overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } .socials-link { - min-width: 0; /* important to allow truncation if needed */ - - overflow: hidden; - white-space: nowrap; - + flex: 0 0 auto; /* fixed link column width; adjust as needed */ text-align: left; + color: var(--theme-link); text-decoration: none; - text-overflow: ellipsis; - - color: var(--theme-tty-command); + white-space: nowrap; } diff --git a/www/css/themes/core.css b/www/css/themes/core.css index 661c075..e8af746 100644 --- a/www/css/themes/core.css +++ b/www/css/themes/core.css @@ -1,7 +1,6 @@ .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 36c7a68..a9fd520 100644 --- a/www/css/themes/maps/rose-pine.css +++ b/www/css/themes/maps/rose-pine.css @@ -21,7 +21,6 @@ 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 6297589..75391a0 100644 --- a/www/index.html +++ b/www/index.html @@ -1,4 +1,5 @@ +
@@ -19,24 +20,31 @@ + + - + - -