assets: improve welcome page style
Signed-off-by: Eric Callahan <arksine.code@gmail.com>
This commit is contained in:
parent
8d49a5d5ee
commit
2edbba3b53
|
@ -43,13 +43,13 @@
|
||||||
row-gap: 1.5rem;
|
row-gap: 1.5rem;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
.container {
|
.card {
|
||||||
background:none;
|
background:none;
|
||||||
border: 0px;
|
border: 0px;
|
||||||
border-radius: .75rem;
|
border-radius: .75rem;
|
||||||
width: 25rem;
|
width: 25rem;
|
||||||
}
|
}
|
||||||
.container h1 {
|
.card h1 {
|
||||||
background-color: #225353;
|
background-color: #225353;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 2.2rem;
|
line-height: 2.2rem;
|
||||||
|
@ -59,35 +59,36 @@
|
||||||
border-top-left-radius: .75rem;
|
border-top-left-radius: .75rem;
|
||||||
border-top-right-radius: .75rem;
|
border-top-right-radius: .75rem;
|
||||||
}
|
}
|
||||||
.container .content{
|
.card .content{
|
||||||
background-color: #1a1a1a;
|
background-color: #1a1a1a;
|
||||||
border-bottom-left-radius: .75rem;
|
border-bottom-left-radius: .75rem;
|
||||||
border-bottom-right-radius: .75rem;
|
border-bottom-right-radius: .75rem;
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
}
|
}
|
||||||
.container .entry {
|
.card .entry {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
.container .entry:not(:last-child) {
|
.card .entry:not(:last-child) {
|
||||||
margin-bottom: .4rem;
|
margin-bottom: .4rem;
|
||||||
}
|
}
|
||||||
.container .value {
|
.card .value {
|
||||||
float: right;
|
float: right;
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
.container ul {
|
|
||||||
margin: 0px;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
.container li:not(:last-child) {
|
|
||||||
margin-bottom: .4rem;
|
|
||||||
}
|
|
||||||
.messages {
|
.messages {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
width: 51.5rem;
|
width: 51.5rem;
|
||||||
padding: .5rem;
|
padding: .5rem;
|
||||||
}
|
}
|
||||||
|
.messages .item {
|
||||||
|
padding: .5rem;
|
||||||
|
background: #242424;
|
||||||
|
border-radius: .4rem;
|
||||||
|
}
|
||||||
|
.messages .item:not(:last-child) {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
.warning h1 {
|
.warning h1 {
|
||||||
animation: glow 1s ease-in-out infinite alternate;
|
animation: glow 1s ease-in-out infinite alternate;
|
||||||
}
|
}
|
||||||
|
@ -116,7 +117,7 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="status">
|
<div class="status">
|
||||||
<div class="container">
|
<article class="card">
|
||||||
<h1>Authorization</h1>
|
<h1>Authorization</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
|
@ -132,8 +133,8 @@
|
||||||
<div class="value">{{ cors_enabled }}</div>
|
<div class="value">{{ cors_enabled }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
<div class="container">
|
<article class="card">
|
||||||
<h1>Status</h1>
|
<h1>Status</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="entry">
|
<div class="entry">
|
||||||
|
@ -149,30 +150,27 @@
|
||||||
<div class="value">{{ klippy_state }}</div>
|
<div class="value">{{ klippy_state }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
{% if summary %}
|
{% if summary %}
|
||||||
<div class="container messages">
|
<article class="card messages">
|
||||||
<h1>Summary</h1>
|
<h1>Summary</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<ul>
|
|
||||||
{% for item in summary %}
|
{% for item in summary %}
|
||||||
<li>{{ item }}</li>
|
<article class="item">{{ item }}</article>
|
||||||
{% end %}
|
{% end %}
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
{% end %}
|
{% end %}
|
||||||
|
|
||||||
{% if warnings %}
|
{% if warnings %}
|
||||||
<div class="container messages warning">
|
<article class="card messages warning">
|
||||||
<h1>Warnings</h1>
|
<h1>Warnings</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<ul>
|
|
||||||
{% for warn in warnings %}
|
{% for warn in warnings %}
|
||||||
<li>{{ warn }}</li>
|
<article class="item">{{ warn }}</article>
|
||||||
{% end %}
|
{% end %}
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
{% end %}
|
{% end %}
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
Loading…
Reference in New Issue