Update CSS, fix fragements and home.
This commit is contained in:
parent
213c5a2c94
commit
a70dca56f7
@ -96,6 +96,10 @@ html, body {
|
||||
color: var(--c-black)
|
||||
}
|
||||
|
||||
main {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-family: "Fira Mono";
|
||||
@ -104,6 +108,11 @@ h1, h2, h3, h4, h5 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: var(--u2);
|
||||
}
|
||||
@ -125,16 +134,59 @@ li {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
table td,
|
||||
table th {
|
||||
padding: var(--u0);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
table th {
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
}
|
||||
|
||||
table tr:nth-child(2n+1) {
|
||||
background-color: var(--c-base-highlight);
|
||||
}
|
||||
|
||||
/*
|
||||
* NAV
|
||||
*/
|
||||
|
||||
nav {
|
||||
|
||||
}
|
||||
|
||||
nav h1 {
|
||||
font-size: var(--u0);
|
||||
margin: 0rem;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
nav li li {
|
||||
margin-left: var(--u0);
|
||||
}
|
||||
|
||||
nav li a {
|
||||
padding: var(--u0);
|
||||
transition: all 0.1s ease-out;
|
||||
}
|
||||
|
||||
nav li a:hover,
|
||||
nav li a.selected {
|
||||
padding: var(--u0);
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
}
|
||||
/*
|
||||
* FOOTER
|
||||
*/
|
||||
@ -172,8 +224,9 @@ input[type="password"]::placeholder {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
button, .botton {
|
||||
button, .button {
|
||||
font-family: "Fira Mono";
|
||||
font-weight: bold;
|
||||
|
||||
background-color: var(--c-primary);
|
||||
color: var(--c-base);
|
||||
@ -195,7 +248,7 @@ button, .botton {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
button:active, .botton:active {
|
||||
button:active, .button:active {
|
||||
background-color: var(--c-primary-highlight);
|
||||
}
|
||||
|
||||
@ -209,6 +262,7 @@ button,
|
||||
label {
|
||||
display: block;
|
||||
min-width: 10em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -238,18 +292,29 @@ label {
|
||||
padding-right: var(--u0);
|
||||
}
|
||||
|
||||
.flex {
|
||||
.bar-flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.flex > * {
|
||||
.bar-flex > * {
|
||||
margin: var(--u0);
|
||||
}
|
||||
|
||||
.flex > .spacer {
|
||||
.bar-flex > .spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar-layout {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.sidebar-layout > *:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@ -259,6 +324,15 @@ label {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid.vertical-center {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.grid.center {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
flex: 1;
|
||||
margin: var(--u0);
|
||||
@ -294,7 +368,6 @@ label {
|
||||
/* box-shadow: var(--s-0-secondary); */
|
||||
}
|
||||
|
||||
|
||||
.grid.s > .spacer {
|
||||
box-shadow: none;
|
||||
|
||||
@ -308,7 +381,6 @@ label {
|
||||
}
|
||||
|
||||
.grid.s > * {
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
min-width: 7.5rem;
|
||||
}
|
||||
@ -384,7 +456,7 @@ label {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.input-icon > form > button {
|
||||
.input-icon > button {
|
||||
margin: 0px;
|
||||
|
||||
border-top-left-radius: 0px;
|
||||
@ -393,8 +465,6 @@ label {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*
|
||||
* CONTENT
|
||||
*/
|
||||
@ -404,28 +474,3 @@ label {
|
||||
font-size: var(--u1);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* Prototype stuff
|
||||
*/
|
||||
.dialog {
|
||||
display: none; /* Hidden by default */
|
||||
position: fixed; /* Stay in place */
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%; /* Full width */
|
||||
height: 100%; /* Full height */
|
||||
overflow: auto; /* Enable scroll if needed */
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: var(--c-black);
|
||||
margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
|
||||
border: 1px solid #888;
|
||||
width: 50%; /* Could be more or less, depending on screen size */
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
</head>
|
||||
<body>
|
||||
<footer class="hero-black" th:fragment="footer">
|
||||
<div class='content-width flex'>
|
||||
<div class='content-width bar-flex'>
|
||||
<h3>Project eCommerce</h3>
|
||||
<div class="spacer"></div>
|
||||
<div>
|
||||
|
||||
@ -6,18 +6,16 @@
|
||||
</head>
|
||||
<body>
|
||||
<nav class='hero' th:fragment="header">
|
||||
<div class='content-width flex'>
|
||||
<div class='content-width bar-flex'>
|
||||
<h1>Project eCommerce</h1>
|
||||
<button>Angebote</button>
|
||||
<div class='spacer input-icon secondary'>
|
||||
<form class='spacer input-icon secondary' th:action="@{/login}" method="GET">
|
||||
<input type="text" placeholder="Nach Produkten suchen..."/>
|
||||
<form class="button" th:action="@{/searchresults}" method="GET">
|
||||
<button type="submit">Finden</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<button>Finden</button>
|
||||
</form>
|
||||
<!-- TODO: Do not use get for passwords -->
|
||||
<form class="button" th:action="@{/login}" method="GET">
|
||||
<button type="submit">Login</button>
|
||||
<button>Login</button>
|
||||
</form>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@ -78,9 +78,9 @@
|
||||
<h2>Werde jetzt Kunde</h2>
|
||||
<p> Jetzt Kunde werden und viele Vorteile sichern,
|
||||
wie z.B. personalisierte Empfehlungen. </p>
|
||||
<form class="button" th:action="@{/register}">
|
||||
<button type="submit" name="action" value="register">Registieren</button>
|
||||
</form>
|
||||
<p>
|
||||
<a class="button" th:href="@{/register}">Registieren</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user