initial commit

2026-08-14 03:02:31 +00:00 · 2026-07-29 09:16:38 +09:00
commit 586b599d4c
67 changed files with 9906 additions and 0 deletions
@@ -0,0 +1,135 @@
+/*
+ * Design tokens.
+ *
+ * Every colour, border, font and metric the app uses is declared here as a
+ * custom property. Nothing further down the cascade hard-codes a hex value, so
+ * a complete retheme is possible by overriding this block alone:
+ *
+ *   .profile-page { --ms-module-header-bg: #2d0b3a; --ms-link: #ff77cc; }
+ *
+ * Palette is the classic 2003-2007 MySpace default: navy chrome, cornflower
+ * module headers, peach blurb bars, and Verdana at a size that would horrify a
+ * modern accessibility audit.
+ */
+
+:root {
+  /* ----------------------------------------------------------- typography */
+  --ms-font-family: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
+  --ms-font-family-heading: Verdana, Geneva, Tahoma, Arial, Helvetica, sans-serif;
+  --ms-font-family-mono: 'Courier New', Courier, monospace;
+
+  /** Chrome text: nav bars, table labels, captions. */
+  --ms-font-size: 11px;
+  /** Prose: bios, blog entries, comments. */
+  --ms-font-size-content: 12px;
+  --ms-font-size-small: 10px;
+  --ms-font-size-heading: 14px;
+  --ms-font-size-title: 20px;
+  --ms-line-height: 1.4;
+
+  /* --------------------------------------------------------------- colour */
+  --ms-page-bg: #ffffff;
+  --ms-page-fg: #000000;
+  --ms-canvas-bg: #e5e5e5;
+
+  --ms-link: #003399;
+  --ms-link-visited: #003399;
+  --ms-link-hover: #0055cc;
+  --ms-link-decoration: none;
+  --ms-link-decoration-hover: underline;
+
+  /** The navy band across the top and the primary nav strip. */
+  --ms-chrome-bg: #003399;
+  --ms-chrome-fg: #ffffff;
+  --ms-chrome-link: #ffffff;
+  --ms-chrome-border: #000000;
+
+  /** The secondary (lighter) nav row. */
+  --ms-nav-bg: #6699cc;
+  --ms-nav-fg: #ffffff;
+  --ms-nav-link: #ffffff;
+  --ms-nav-active-bg: #ff9900;
+  --ms-nav-active-fg: #ffffff;
+  --ms-nav-separator: rgba(255, 255, 255, 0.55);
+
+  /* ------------------------------------------------------------- modules */
+  /* The bordered boxes: "Contacting Tom", "Tom's Interests", "My Mail". */
+  --ms-module-bg: #ffffff;
+  --ms-module-border: #6699cc;
+  --ms-module-border-width: 1px;
+  --ms-module-radius: 0;
+  --ms-module-header-bg: #6699cc;
+  --ms-module-header-fg: #ffffff;
+  --ms-module-header-font-size: 11px;
+  --ms-module-header-weight: 700;
+  --ms-module-header-padding: 3px 6px;
+  --ms-module-body-padding: 6px;
+  --ms-module-gap: 10px;
+
+  /* The peach "…'s Blurbs" / "…'s Friend Space" bars in the main column. */
+  --ms-band-bg: #ffcc99;
+  --ms-band-fg: #ff6600;
+  --ms-band-border: #ff9933;
+  --ms-band-padding: 3px 8px;
+
+  /** Section headings inside blurbs: "About me:", "Who I'd like to meet:". */
+  --ms-heading-fg: #ff6600;
+
+  /* --------------------------------------------------------------- tables */
+  --ms-table-border: #6699cc;
+  --ms-table-label-bg: #b3c7e6;
+  --ms-table-label-fg: #000000;
+  --ms-table-value-bg: #ffffff;
+  --ms-table-value-fg: #000000;
+  --ms-table-cell-padding: 4px 6px;
+  --ms-table-stripe-bg: #f2f5fa;
+
+  /* --------------------------------------------------------------- forms */
+  --ms-input-bg: #ffffff;
+  --ms-input-fg: #000000;
+  --ms-input-border: #7f9db9;
+  --ms-button-bg: linear-gradient(#ffffff, #e3e3e3);
+  --ms-button-fg: #000000;
+  --ms-button-border: #999999;
+  --ms-button-active-bg: #d4d4d4;
+  --ms-focus-ring: #ff6600;
+
+  /* -------------------------------------------------------------- status */
+  --ms-muted-fg: #666666;
+  --ms-online-fg: #cc6600;
+  --ms-error-bg: #ffeeee;
+  --ms-error-border: #cc0000;
+  --ms-error-fg: #990000;
+  --ms-notice-bg: #ffffcc;
+  --ms-notice-border: #e6c200;
+  --ms-highlight-bg: #ffffcc;
+
+  /* -------------------------------------------------------------- layout */
+  --ms-page-width: 800px;
+  --ms-page-width-wide: 990px;
+  --ms-column-left-width: 300px;
+  --ms-column-gap: 10px;
+  --ms-page-padding: 8px;
+
+  /* Height of the mark in the header lockup; width follows its 3100:2120 ratio. */
+  --ms-logo-height: 34px;
+
+  /*
+   * The mark ships as solid navy on transparent, so it is knocked out to white
+   * to sit on the chrome band. Set this to `none` if you theme the band to a
+   * light colour and want the artwork's own navy back.
+   */
+  --ms-logo-filter: brightness(0) invert(1);
+
+  /* -------------------------------------------------------------- avatars */
+  --ms-avatar-size: 42px;
+  --ms-avatar-size-large: 190px;
+  --ms-avatar-size-friend: 74px;
+  --ms-avatar-border: #999999;
+  --ms-avatar-radius: 0;
+
+  /* --------------------------------------------------------------- misc */
+  --ms-hr-color: #cccccc;
+  --ms-emoji-size: 1.1em;
+  --ms-transition: none;
+}