gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 15:19:01 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(website): smart download now button in header

Browse Source
This commit is contained in:
Elian Doran 2025-09-26 22:44:27 +03:00
parent ea87161a91
commit 8bcae8cdb8
No known key found for this signature in database
2 changed files with 31 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/website2/src/index.html
View File

@ -7,8 +7,17 @@
</head> </head>
<body> <body>
<header> <header>
<div class="content-wrapper"><img src="./assets/icon-color.svg" width="300" height="300">&nbsp;<span>Trilium Notes</span></div> <div class="content-wrapper">
<img src="./assets/icon-color.svg" width="300" height="300">&nbsp;<span>Trilium Notes</span>
<nav>
<a class="download-button" href="https://github.com/TriliumNext/Trilium/releases/latest">
Download now
<span class="platform"></span>
</a>
</nav>
</div>
</header> </header>
<section class="hero-section no-wrap"> <section class="hero-section no-wrap">

24
apps/website2/src/style.css
View File

@ -20,6 +20,7 @@ body {
color: black; color: black;
} }
/* #region Header */
header { header {
padding: 1em; padding: 1em;
position: sticky; position: sticky;
@ -36,6 +37,11 @@ header .content-wrapper {
justify-items: center; justify-items: center;
} }
header > .content-wrapper,
section.hero-section > .content-wrapper {
min-width: 80vw;
}
header img { header img {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -45,6 +51,13 @@ header img+span {
font-size: 1.1em; font-size: 1.1em;
} }
header nav {
flex-grow: 1;
display: flex;
justify-content: flex-end;
}
/* #endregion */
.content-wrapper { .content-wrapper {
max-width: 920px; max-width: 920px;
margin: auto; margin: auto;
@ -110,13 +123,12 @@ section.hero-section.dark::after {
pointer-events: none; pointer-events: none;
} }
section.hero-section>.content-wrapper { section.hero-section > .content-wrapper {
display: flex; display: flex;
padding: 3em; padding: 3em;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-height: 60vh; min-height: 60vh;
min-width: 80vw;
} }
section.hero-section .title-section { section.hero-section .title-section {
@ -199,9 +211,8 @@ span.text-big {
.download-button { .download-button {
text-decoration: none; text-decoration: none;
background: var(--brand-1); background: var(--brand-1);
padding: 1em 2em; padding: 0.5em 1em;
border-radius: 6px; border-radius: 6px;
margin: 1em 0;
color: white; color: white;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
display: inline-block; display: inline-block;
@ -211,4 +222,9 @@ span.text-big {
font-size: 0.75em; font-size: 0.75em;
opacity: 0.75; opacity: 0.75;
} }
.hero-section .download-button {
padding: 1em 2em;
margin: 1em 0;
}
/* #endregion */ /* #endregion */