ui-overhaul #24

Merged
valberg merged 15 commits from ui-overhaul into main 2024-01-13 20:07:37 +00:00
3 changed files with 22 additions and 24 deletions
Showing only changes of commit 73da307728 - Show all commits

View file

@ -26,11 +26,11 @@ p, h1, h2, h3, h4, h5, h6 {
:root { :root {
/* Colors */ /* Colors */
--light : #fff; --light : #fff;
--light-dust : #fcfcfc; --light-dust : #f6f6f6;
--dust : #f1f1f1; --dust : #f1f1f1;
--dark-dust : #bfbfbf; --dark-dust : #bfbfbf;
--fade : #878787; --fade : #878787;
--twilight : #3c3c3c; --twilight : #4a4a4a;
--dark : #2a2a2a; --dark : #2a2a2a;
--custard : #f0dcac; --custard : #f0dcac;
--water : #a8f3f4; --water : #a8f3f4;
@ -214,12 +214,9 @@ div.infobox {
justify-content : space-between; justify-content : space-between;
} }
/* div.infobox button {
div.services > div:hover { margin-top : var(--double-space);
transform : scale(1.02);
transition : all 0.2s;
} }
*/
div.services > div > div.description { div.services > div > div.description {
margin-bottom : var(--double-space); margin-bottom : var(--double-space);
@ -263,9 +260,9 @@ form > div >label {
form > div > input[type="text"], form > div > input[type="text"],
form > div > input[type="password"] { form > div > input[type="password"] {
border : 1px solid var(--twilight); border : 2px solid var(--twilight);
border-radius : 3px; border-radius : 6px;
padding : 6px 12px; padding : 8px;
background : var(--light-dust); background : var(--light-dust);
width : 100%; width : 100%;
} }
@ -279,14 +276,12 @@ form > div > input[type="password"] {
#loginbox { #loginbox {
border-radius : var(--space); border-radius : var(--space);
background : var(--dust);
border : 6px solid white; border : 6px solid white;
width : 800px; width : 800px;
height : 500px; height : 500px;
display : flex; display : flex;
flex-flow : row; flex-flow : row;
//justify-content : space-between;
} }
#loginbox > div { #loginbox > div {
@ -299,19 +294,27 @@ form > div > input[type="password"] {
} }
#loginbox > div.login { #loginbox > div.login {
background : var(--light-dust);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
justify-content: space-between; justify-content: space-between;
} }
#loginbox > div.signup { #loginbox > div.signup {
border-radius : 0 var(--space) var(--space) 0;
background : var(--water); background : var(--water);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
align-items: center; align-items: center;
} }
#loginbox > div:first-child {
border-radius : var(--half-space) 0 0 var(--half-space);
}
#loginbox > div:last-child {
border-radius : 0 var(--half-space) var(--half-space) 0;
}
#loginbox > div:last-child > * { #loginbox > div:last-child > * {
flex : 1; flex : 1;
} }
@ -333,13 +336,11 @@ form > div > input[type="password"] {
} }
footer { footer {
position : fixed; margin : var(--space) var(--outer-space);
bottom : 0; padding : var(--space);
left : 0; border-radius : var(--quarter-space);
right : 0;
background : var(--dark); background : var(--dark);
color : var(--dust); color : var(--dust);
padding : 12px;
font-size : 0.78em; font-size : 0.78em;
opacity : 0.8; opacity : 0.8;
} }

View file

@ -35,8 +35,8 @@
</aside> </aside>
<nav> <nav>
<ol> <ol>
<li><a href="/">Dashboard</a></li> <li><a href="/" class="current">Dashboard</a></li>
<li><a href="/services" class="current">Services</a></li> <li><a href="/services">Services</a></li>
<li><a href="#">Payment</a></li> <li><a href="#">Payment</a></li>
<li><a href="/membership">Settings</a></li> <li><a href="/membership">Settings</a></li>
</ol> </ol>

View file

@ -7,12 +7,9 @@
{% block content %} {% block content %}
<div class="content-view"> <div class="content-view">
<h2>Welcome {{ user }}!</h2> <h2>Welcome {{ user }}!</h2>
<p>
Boink?
</p>
<div class="infobox"> <div class="infobox">
<p> <p>
To get started we need you to verify your email! To get you started we need to verify your email!
</p> </p>
<button>Verify email</button> <button>Verify email</button>
</div> </div>