From 2c6c54d211dc66211da54ceab346a6cbb6b3d0bb Mon Sep 17 00:00:00 2001 From: XeonSquared Date: Thu, 31 Jan 2019 07:37:02 +1100 Subject: [PATCH] max aesthetic --- static/account.html | 58 +++++++++++++++++++++++++++++--------------------- static/css/columns.css | 28 ++++++++++++++++++++++++ static/css/haiku.css | 45 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 24 deletions(-) create mode 100644 static/css/columns.css create mode 100644 static/css/haiku.css diff --git a/static/account.html b/static/account.html index 689d5d8..76f6e70 100644 --- a/static/account.html +++ b/static/account.html @@ -16,34 +16,44 @@ display: none; } #changepass:target { - display:block; + display: block; + } + body { + background-image: url(/img/dolphins.png); + background-repeat: repeat; } + + - Redeem invite code Generate invite code Change password -
-
- Invite code:
- Username:
- Password:
- Email:
- -
+
+Redeem invite codeGenerate invite codeChange password +
+
+
+ Invite code
+ Username
+ Password
+ Email
+
+
+
+
+
+ Username
+ Password
+
+
+
+
+
+ Username
+ Password
+ New Password
+
+
+
-
-
- Username:
- Password:
- -
-
-
-
- Username:
- Password:
- New Password:
- -
diff --git a/static/css/columns.css b/static/css/columns.css new file mode 100644 index 0000000..2f40a18 --- /dev/null +++ b/static/css/columns.css @@ -0,0 +1,28 @@ +.centre-column { + width: 90%; + text-align: left; +} +.centre-column, .cwrapper { + margin: 0px auto; + overflow: hidden; +} +@media screen and (min-width: 801px) { + .left-column, .right-column { + width: 49%; + text-align: left; + padding-bottom: 32767; + margin-bottom: -32767px; + } + .left-column { + float: left; + } + .right-column { + float: right; + } +} +@media screen and (min-width: 1024px) { + body { + width: 80%; + padding-left: 10%; + } +} diff --git a/static/css/haiku.css b/static/css/haiku.css new file mode 100644 index 0000000..14da141 --- /dev/null +++ b/static/css/haiku.css @@ -0,0 +1,45 @@ +.title { + border-top: 1px solid #9d9d9d; + border-right: 1px solid #9d9d9d; + background: linear-gradient(#ffefb4, #ffcb00); + padding: 2px; + display: inline-block; + border-bottom: 0px; + line-height: 1.5em; + font-size: 1em; + text-decoration: none; + color: black; +} +.twrapper { + border-left: 1px solid #9d9d9d; + display: inline-block; +} +.wrapper { + border: 1px solid #9d9d9d; + min-height: 400px; + background: #d8d8d8; + box-sizing: border-box; + padding: 1em +} +.wbutton { + display: inline-block; + vertical-align: middle; + padding: 4px; +} +.wlbutton { + padding-right: 16px; +} +.wrbutton { + padding-left: 16px; +} +input { + width: 100%; + border: 1px solid black; + padding: 0.3em; +} +input[type=text], input[type=password] { + background: #ffffff; +} +input[type=submit] { + background: linear-gradient(#e9e9e9 0%, #e9e9e9 50%, #dddddd 50.01%, #dddddd 100%); +}