erik/converge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

better styling of the header with title font decreasing automatically

Browse Source 
and iamge not spilling outside of the content area.
This commit is contained in:
Erik Brakkee 2024-09-06 19:17:28 +02:00
parent dab90e106b
commit 1805542a2a
3 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/server/ui/about.templ
View File

@ -32,7 +32,7 @@ templ About() {
<div>
<img src="../static/images/converge.svg"/>
<img src="../static/images/converge.svg" style="max-width: 800px"/>
</div>
The connection between

22
pkg/server/ui/basepage.templ
View File

@ -29,16 +29,18 @@ templ BasePage(tab int) {
<title>Converge</title>
</head>
<body hx-boost="true" hx-ext="ws" ws-connect="../ws/sessions">
<div id="banner">
<img src="../static/images/wamblee_logo_go.25.png" />
<span class="title fs-4">
converge
<br/>
<span class="fs-5">a rendez-vous server for debugging continuous integration jobs
</span>
<br/>
</span>
</div>
<header id="banner" class="d-flex align-items-center">
<div class="container-fluid">
<div class="row">
<div class="col-auto">
<img src="../static/images/wamblee_logo_go.25.png" alt="Logo">
</div>
<div class="title-wrapper col d-flex align-items-center">
<h1 class="title">a rendez-vous server for debugging continuous integration jobs</h1>
</div>
</div>
</div>
</header>
<!-- script>
htmx.logAll();

39
static/css/converge.css
View File

@ -1,28 +1,37 @@
/* banner */
#banner {
background: url(../images/banner.png);
height: 150px;
width: 100%;
background-image: url(../images/banner.png);
background-repeat: repeat-x;
}
#banner img {
float: left;
margin: 0;
border: medium none;
max-width: 200px;
max-height: 150px;
width: auto;
height: auto;
}
#banner .title {
display: block;
font-size: 16px;
position: absolute;
text-align: center;
top: 10px;
left: 200px;
width: 600px;
.title-wrapper {
display: flex;
align-items: center;
height: 100%;
overflow: hidden;
}
.title {
font-size: clamp(1rem, 4vw, 1.7rem);
line-height: 1.2;
margin: 0;
padding: 0.5rem;
word-wrap: break-word;
overflow-wrap: break-word;
}
#banner .verysmall {
font-size: 0.4em;
}
img {
width: 100%;
object-fit: contain;
}