CSS : Adapt the top bar instead of replacing it by a wide button;
HTML : Remove unused code, consequent to the CSS modifications.
This commit is contained in:
parent
43f285e008
commit
458e88a817
6 changed files with 47 additions and 72 deletions
|
@ -6,6 +6,10 @@ div, h1, h2, h3, h4, h5 {
|
||||||
font-family: system-ui;
|
font-family: system-ui;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5 {
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
@ -39,24 +43,24 @@ div:has(#bar) {
|
||||||
*/
|
*/
|
||||||
#bar {
|
#bar {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
|
display: flex;
|
||||||
filter: drop-shadow(0 0 4px grey);
|
filter: drop-shadow(0 0 4px grey);
|
||||||
min-height: 3em;
|
height: 3em;
|
||||||
padding-top: 1em;
|
justify-content: space-between;
|
||||||
padding-bottom: 1em;
|
|
||||||
margin-bottom: 2.5em;
|
margin-bottom: 2.5em;
|
||||||
|
padding-bottom: 1em;
|
||||||
|
padding-left: 0.5em;
|
||||||
|
padding-right: 0.5em;
|
||||||
|
padding-top: 1em;
|
||||||
/* position: fixed;
|
/* position: fixed;
|
||||||
width: 100%; */
|
width: 100%; */
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar > * {
|
|
||||||
margin-left: 0.5em;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
content: url(/img/logo-wordmark-horizontal.svg);
|
content: url(/img/logo-wordmark-horizontal.svg);
|
||||||
height: 3em;
|
height: 3em;
|
||||||
|
/* width: 20%; */
|
||||||
}
|
}
|
||||||
|
|
||||||
#xmpp-uri {
|
#xmpp-uri {
|
||||||
|
@ -91,9 +95,16 @@ label,
|
||||||
line-height: 3em; /* 2em */
|
line-height: 3em; /* 2em */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#bar > * {
|
||||||
|
display:cn;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
#download {
|
#download {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
#jid {
|
#jid {
|
||||||
font-size: 1.5em;
|
font-size: 1.5em;
|
||||||
|
@ -111,8 +122,8 @@ label,
|
||||||
|
|
||||||
#download,
|
#download,
|
||||||
#input {
|
#input {
|
||||||
border-radius: 26px;
|
border-radius: 2em;
|
||||||
font-size: 1.4em;
|
font-size: 1.34em;
|
||||||
padding: 0.5em;
|
padding: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -132,7 +143,6 @@ label,
|
||||||
|
|
||||||
#action > a,
|
#action > a,
|
||||||
#download,
|
#download,
|
||||||
#download-narrow,
|
|
||||||
#input {
|
#input {
|
||||||
color: #f5f5f5;
|
color: #f5f5f5;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
@ -142,32 +152,14 @@ label,
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
#download,
|
#download {
|
||||||
#download-narrow {
|
|
||||||
background: #d9541e; /* #e96d1f */
|
background: #d9541e; /* #e96d1f */
|
||||||
}
|
}
|
||||||
|
|
||||||
#download:hover,
|
#download:hover {
|
||||||
#download-narrow:hover {
|
|
||||||
background: #439639; /* #a0ce67 */
|
background: #439639; /* #a0ce67 */
|
||||||
}
|
}
|
||||||
|
|
||||||
#download-narrow {
|
|
||||||
border-bottom-left-radius: 16px;
|
|
||||||
border-bottom-right-radius: 16px;
|
|
||||||
font-size: 2em;
|
|
||||||
margin-bottom: 3em;
|
|
||||||
padding: 0.5em;
|
|
||||||
/* width: 60%; */
|
|
||||||
width: 360px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo-narrow {
|
|
||||||
height: 1em;
|
|
||||||
padding-right: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#download-narrow,
|
|
||||||
#logo-bottom {
|
#logo-bottom {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
@ -438,21 +430,21 @@ h3, h4, h5 {
|
||||||
background: #f5f5f5;
|
background: #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
#bar,
|
h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
padding-top: 21.44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bar {
|
||||||
|
border-bottom: 1px solid #c0c0c0;
|
||||||
|
filter: unset;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#message {
|
#message {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#download-narrow {
|
|
||||||
background: #a3a3a3;
|
|
||||||
display: inline-block;
|
|
||||||
margin-bottom: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
#download-narrow:hover {
|
|
||||||
background: #a7a7a7;
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo-bottom {
|
#logo-bottom {
|
||||||
display: unset;
|
display: unset;
|
||||||
}
|
}
|
||||||
|
@ -522,6 +514,18 @@ h3, h4, h5 {
|
||||||
|
|
||||||
@media (max-width: 572px) {
|
@media (max-width: 572px) {
|
||||||
|
|
||||||
|
#bar,
|
||||||
|
#logo {
|
||||||
|
height: 2.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#download {
|
||||||
|
font-size: 1em; /* 0.87em */
|
||||||
|
padding: 0.7em; /* 0.7em */
|
||||||
|
padding-left: 1.4em;
|
||||||
|
padding-right: 1.4em;
|
||||||
|
}
|
||||||
|
|
||||||
#action > a:nth-child(2) {
|
#action > a:nth-child(2) {
|
||||||
border-bottom-right-radius: 2em;
|
border-bottom-right-radius: 2em;
|
||||||
border-top-right-radius: 2em;
|
border-top-right-radius: 2em;
|
||||||
|
|
|
@ -36,12 +36,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
<div>
|
|
||||||
<a id="download-narrow" href="https://xmpp.org/software/">
|
|
||||||
<img id="logo-narrow" src="/img/logo.svg" />
|
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
{% if note %}
|
{% if note %}
|
||||||
<h2>{{note}}</h2>
|
<h2>{{note}}</h2>
|
||||||
|
|
|
@ -58,12 +58,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="container-of-profile">
|
<div id="container-of-profile">
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
<div>
|
|
||||||
<a id="download-narrow" href="https://xmpp.org/software/">
|
|
||||||
<img id="logo-narrow" src="/img/logo.svg" />
|
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
{% if filename %}
|
{% if filename %}
|
||||||
<div id="graphics">
|
<div id="graphics">
|
||||||
|
|
|
@ -27,18 +27,13 @@
|
||||||
<a href="https://xmpp.org">
|
<a href="https://xmpp.org">
|
||||||
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
|
<img id="logo" src="/img/logo-wordmark-horizontal.svg" />
|
||||||
</a>
|
</a>
|
||||||
|
<span id="space" />
|
||||||
<a id="download" href="https://xmpp.org/software/">
|
<a id="download" href="https://xmpp.org/software/">
|
||||||
Download
|
Download
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div id="container-of-profile">
|
<div id="container-of-profile">
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
<div>
|
|
||||||
<a id="download-narrow" href="https://xmpp.org/software/">
|
|
||||||
<img id="logo-narrow" src="/img/logo.svg" />
|
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>FASI</h1>
|
<h1>FASI</h1>
|
||||||
<h3>Fast And Sleek Invite</h3>
|
<h3>Fast And Sleek Invite</h3>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
@ -36,12 +36,6 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
<div>
|
|
||||||
<a id="download-narrow" href="https://xmpp.org/software/">
|
|
||||||
<img id="logo-narrow" src="/img/logo.svg" />
|
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
{% if note %}
|
{% if note %}
|
||||||
<h2>{{note}}</h2>
|
<h2>{{note}}</h2>
|
||||||
|
|
|
@ -31,12 +31,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div id="container-of-profile">
|
<div id="container-of-profile">
|
||||||
<div id="profile">
|
<div id="profile">
|
||||||
<div>
|
|
||||||
<a id="download-narrow" href="https://xmpp.org/software/">
|
|
||||||
<img id="logo-narrow" src="/img/logo.svg" />
|
|
||||||
Download
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<h1>{{title}}</h1>
|
<h1>{{title}}</h1>
|
||||||
{% if note %}
|
{% if note %}
|
||||||
<h3>{{note}}</h3>
|
<h3>{{note}}</h3>
|
||||||
|
|
Loading…
Reference in a new issue