Skip to content

Commit c89dfc0

Browse files
DavidMStraubDavidMStraub
committed
New landing page!
1 parent 38416e8 commit c89dfc0

File tree

4 files changed

+178
-60
lines changed

4 files changed

+178
-60
lines changed

‎docs/index.md‎

Lines changed: 1 addition & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,6 @@
11
---
2+
template: home.html
23
hide:
34
- toc
45
- navigation
56
---
6-
7-
<!--
8-
Default Material Margins are poor and not per good layout guidelines. We tweak them slightly on this page only. Its
9-
the landing page, so we want it to look nice
10-
-->
11-
12-
<style>
13-
.md-content {
14-
margin: 0px 25px;
15-
}
16-
</style>
17-
18-
19-
# Welcome to Gramps Web!
20-
21-
<p style="float:right; margin-left: 50px; margin-top: 5px; font-size: .8em">
22-
<img src="main_landing_image.jpg" width = "400px">
23-
<br><i>Click image to see more Screenshots!</i>
24-
</p>
25-
26-
27-
<!--
28-
by using HTML below, we can set these image display to 'none' so the image do not show; however, they will show if
29-
the user clicks the first image above and goes into 'glightbox' mode. Users can then 'scroll' through the various
30-
GrampsWeb UI images. Those who don't notice the 'next' arrow in glightbox and only view the one image displayed,
31-
then no harm, no foul, behavior is as expected; however, for others who do notice the 'right arrow' button in
32-
glightbox, then they can view additional images if they like. win-win
33-
-->
34-
35-
<p align="center" style="display:none">
36-
<img src="features/screenshots/fan.png">
37-
<img src="features/screenshots/blog.png">
38-
<img src="features/screenshots/dna.png">
39-
<img src="features/screenshots/map.png">
40-
<img src="features/screenshots/export.png">
41-
<img src="features/screenshots/lang.png">
42-
<img src="features/screenshots/list.png">
43-
<img src="features/screenshots/report.png">
44-
<img src="features/screenshots/sync.png">
45-
<img src="features/screenshots/mobile.png">
46-
</p>
47-
48-
**Gramps Web** is a web based application, ideally suited for collaborating with others to build your family tree together. It can be accessed from any mobile or portable web-enabled device. Gramps Web is free & open source software, with the privacy and control of your data a top priority!
49-
50-
Gramps Web is designed to be a companion to [*Gramps Desktop*](https://gramps-project.org/blog/), the leading open source genealogy desktop application. Gramps *Desktop* is the primary tool for building and managing your genealogy database and Gramps *Web* is a portal through which others can contribute to the database from afar without having to learn or install Gramps Desktop.
51-
52-
* [Gramps Web Features Overview](features/index.md)
53-
* [Install and Setup Information](install_setup/setup.md)
54-
* [Web Administrator's Guide](administration/admin.md)
55-
* [User Guide](user-guide/index.md)
56-
57-
***Want to try a Demo?*** Click the button below and login using any one of the following four usernames below. Use the same name for the password also.
58-
59-
`owner / editor / contributor / member `
60-
61-
[Go to Demo Login](https://demo.grampsweb.org/){ .md-button .md-button--primary target="_blank"}
62-
63-
64-

‎mkdocs.yml‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
nav:
2-
- Introduction: index.md
2+
- Home: index.md
33
- Features:
44
- features/index.md
55
- Install/Setup:
@@ -41,6 +41,10 @@ nav:
4141
- Use the blog: user-guide/blog.md
4242
- Manage tasks: user-guide/tasks.md
4343
- Revision history: user-guide/revisions.md
44+
# - DNA:
45+
# - Overview: user-guide/dna.md
46+
# - DNA matches: user-guide/dna-matches.md
47+
# - Chromosome browser: user-guide/chromosome-browser.md
4448
- Advanced features:
4549
- DNA: user-guide/dna.md
4650
- GQL filters: user-guide/gql.md
@@ -62,10 +66,12 @@ nav:
6266

6367

6468
site_name: Gramps Web
69+
site_description: Open Source Genealogy
6570
site_url: https://www.grampsweb.org
6671
edit_uri: https://github.com/gramps-project/gramps-web-docs/blob/main/docs/
6772
repo_url: https://github.com/gramps-project/gramps-web
6873
theme:
74+
custom_dir: overrides
6975
name: "material"
7076
features:
7177
- navigation.tabs
@@ -80,13 +86,17 @@ theme:
8086
accent: blue
8187
logo: logo.svg
8288
favicon: favicon.ico
89+
font:
90+
text: Inter
8391
plugins:
8492
- search
8593
- glightbox:
8694
manual: false # optional lightboxing. Requires HTML in markdown.
8795
- redirects:
8896
redirect_maps:
8997
'help.md': 'help/help.md'
98+
'development.md': 'development/dev.md'
99+
'development/index.md': 'development/dev.md'
90100
markdown_extensions:
91101
- admonition
92102
- pymdownx.highlight

‎overrides/home.html‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
{% extends "base.html" %}
2+
3+
4+
{% block styles %}
5+
{{ super() }}
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
9+
<style>
10+
11+
.hero-container {
12+
width: 100vw;
13+
/* position: absolute;
14+
top: 0;
15+
left: 0; */
16+
margin: 0;
17+
}
18+
19+
.hero {
20+
background: var(--md-primary-fg-color);
21+
position: relative;
22+
display: block;
23+
top: 0;
24+
width: 100%;
25+
font-family: Inter;
26+
text-align: center;
27+
color: rgba(255, 255, 255, 0.85);
28+
}
29+
30+
.home-content {
31+
margin-top: -50px;
32+
padding-bottom: 3rem;
33+
font-size: 16px;
34+
color:rgba(0, 0, 0, 0.8);
35+
}
36+
37+
38+
.home-content h2 {
39+
font-family: Poppins;
40+
color: rgba(0, 0, 0, 0.7);
41+
font-weight: 600;
42+
font-size: 1.7rem;
43+
}
44+
45+
.home-content a {
46+
font-weight: 600;
47+
opacity: 0.9;
48+
}
49+
50+
.home-content ul.home {
51+
list-style: none;
52+
padding: 0;
53+
margin: 0;
54+
}
55+
56+
.home-content ul.home li {
57+
margin: 0;
58+
padding: 0;
59+
margin-bottom: 1rem;
60+
}
61+
62+
.hero-content {
63+
width: 100%;
64+
height: 100%;
65+
background: linear-gradient(185deg, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 100%);
66+
display: flex;
67+
align-items: center;
68+
justify-content: center;
69+
gap: 50px;
70+
padding: 3rem;
71+
}
72+
73+
@media (max-width: 768px) {
74+
.hero-content {
75+
flex-direction: column;
76+
text-align: center;
77+
}
78+
}
79+
80+
.hero-image {
81+
max-width: 400px;
82+
}
83+
84+
.hero-image img {
85+
max-width: 100%;
86+
height: auto;
87+
display: block;
88+
border-radius: 14px;
89+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
90+
opacity: 0.9;
91+
}
92+
93+
.hero-text {
94+
max-width: 500px;
95+
text-align: left;
96+
}
97+
98+
.hero-text p {
99+
font-size: 18px;
100+
margin-top: 1rem;
101+
margin-bottom: 1rem;
102+
font-weight: 440;
103+
line-height: 28px;
104+
}
105+
106+
107+
.hero h1 {
108+
font-family: Poppins;
109+
color: rgba(255, 255, 255, 0.9);
110+
font-size: 2.8rem;
111+
margin: 0;
112+
font-weight: 600;
113+
}
114+
115+
.hero a, .hero a:link, .hero a:visited {
116+
display: inline-block;
117+
padding: 12px 24px;
118+
background: rgba(255, 255, 255, 0.8);
119+
color: var(--md-primary-fg-color);
120+
text-decoration: none;
121+
border-radius: 50px;
122+
transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
123+
margin-top: 1rem;
124+
font-size: 16px;
125+
}
126+
127+
.hero a:hover, .hero a:active {
128+
background: rgba(255, 255, 255, 0.45);
129+
color: var(--md-primary-bg-color);
130+
}
131+
</style>
132+
{% endblock %}
133+
134+
{% block tabs %}
135+
{{ super() }}
136+
<div class="hero-container">
137+
<div class="hero">
138+
<div class="hero-content">
139+
<div class="hero-image">
140+
<img src="screenshot.png" alt="Gramps Web">
141+
</div>
142+
<div class="hero-text">
143+
<h1>{{ config.site_name }}</h1>
144+
<p>The free, open-source genealogy system for building your family tree &ndash; together.
145+
Use it standalone or as a companion to Gramps Desktop, with full control over your data and privacy as the top priority.
146+
</p>
147+
<a href="https://demo.grampsweb.org/" target="_blank"><b>Try the demo</b> (owner / owner)</a>
148+
</div>
149+
</div>
150+
</div>
151+
{% endblock %}
152+
153+
154+
{% block content %}
155+
<div class="home-content">
156+
<h2>Learn more</h2>
157+
<ul class="home">
158+
<li><a href="features/">Gramps Web Features Overview</a><br>Explore the powerful features that make Gramps Web the ideal tool for collaborative family history research.</li>
159+
<li><a href="install_setup/setup/">Install and Setup Information</a><br>Get started with step-by-step instructions for installing and configuring Gramps Web.</li>
160+
<li><a href="administration/admin/">Web Administrator's Guide</a><br>Learn how to manage and maintain a Gramps Web instance with ease.</li>
161+
<li><a href="user-guide/">User Guide</a><br>Discover how to navigate and use Gramps Web for documenting your family history.</li>
162+
<li><a href="development/dev/">Developer Documentation</a><br>Dive into the codebase, API documentation, and technical details for extending Gramps Web.</li>
163+
</ul>
164+
</div>
165+
166+
{% endblock %}

‎overrides/screenshot.png‎

368 KB
Loading

0 commit comments

Comments
 (0)