diff --git a/index.html b/index.html index f4ba6e8..5a71084 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,51 @@ -computer man
- + + + + + + + + ~floppy + + + +
+
+
+

~floppy

+
+
+

+ Certified PHP User
+ "My life is a living nightmare!" +

+
+
+
+
    +
  • 19 y/o, British
    • +
  • Theatre Technician
    • +
  • "Web Developer"
    • +
  • Part-time NixOS user
    • +
  • Self-taught programmer
    • +
  • Somewhat a weather nerd
    • +
+ + +
+
Websites: + diskfloppy.me / + hyprcat.net / + weh.moe +
+
+
+ + + diff --git a/master.css b/master.css new file mode 100644 index 0000000..b8d6e99 --- /dev/null +++ b/master.css @@ -0,0 +1,101 @@ +:root { + --background: #11111b; + --foreground: #cdd6f4; + --drop-shadow-color: #cdd6f43c; + --drop-shadow-size: 8px 8px; + --links: #89b4fa; + --profile-image-size: 200px; + --page-width: 520px; +} + +body { + color: var(--foreground); + background-color: var(--background); + font-family: monospace; +} + +h1, +p { + margin: 0; +} + +a { + color: var(--links); + text-decoration: underline dotted; +} + +a:hover { + text-decoration: underline solid; +} + +ul { + margin: 0; + padding: 0; + list-style: square; + list-style-position: inside; +} + +ul.social { + list-style: none; +} + +li { + padding-left: 0; + text-indent: 1em; +} + +/* +li:before { + content: "-"; + padding-right: 5px; +} */ + + +div.page-container { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + width: var(--page-width); +} + +div.grid { + display: grid; + grid-template-columns: var(--profile-image-size) auto; + grid-template-rows: auto auto; + grid-column-gap: 10px; + grid-row-gap: 10px; + border: 1px solid var(--foreground); + background-color: var(--background); + padding: 10px; + filter: drop-shadow(var(--drop-shadow-size) var(--drop-shadow-color)) +} + +div.grid div:nth-child(2) { + margin: auto 0; + text-align: right; +} + +div.grid div:nth-child(4) { + vertical-align: middle; + margin: auto 0; +} + +div.grid div:last-child { + grid-column: span 2; +} + +div.grid>div { + text-align: left; +} + +img.profile-image { + width: var(--profile-image-size); + border: 2px solid var(--foreground) +} + +p.social-heading { + margin-top: 0.75em; +} diff --git a/profile-image.png b/profile-image.png new file mode 100644 index 0000000..b83de39 Binary files /dev/null and b/profile-image.png differ