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:
Schimon Jehudah, Adv. 2024-10-10 11:38:07 +03:00
parent 43f285e008
commit 458e88a817
6 changed files with 47 additions and 72 deletions

View file

@ -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;

View file

@ -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>

View file

@ -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">

View file

@ -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>

View file

@ -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>

View file

@ -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>