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> <div>
<img src="../static/images/converge.svg"/> <img src="../static/images/converge.svg" style="max-width: 800px"/>
</div> </div>
The connection between The connection between

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

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

39
static/css/converge.css
View File

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