Skip to content

Commit d9a7acb

Browse files
sprocketcsprocketc
committed
update home page
1 parent 6e77077 commit d9a7acb

File tree

3 files changed

+124
-145
lines changed

3 files changed

+124
-145
lines changed

‎docs/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
template: overrides/home.html
3-
title: Studio
3+
title: Home
44
hide:
55
- navigation
66
- toc

‎mkdocs.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
site_name: Repath
1+
site_name: Repath Studio
22
site_description: Scalable Vector Graphics Manipulation
33
site_author: Konstantinos Kaloutas
44
site_url: https://repath.studio/

‎theme/overrides/home.html‎

Lines changed: 122 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -21,176 +21,155 @@
2121

2222
<!-- Render hero under tabs -->
2323
{% block tabs %}
24-
{{ super() }}
25-
26-
<!-- Additional styles for landing page -->
27-
<style>
28-
29-
/* Application header should be static for the landing page */
30-
.md-header {
31-
position: initial;
32-
}
33-
34-
.tx-container {
35-
background: linear-gradient(to bottom,var(--md-primary-fg-color),#75164f 99%);
24+
{{ super() }}
25+
26+
<!-- Additional styles for landing page -->
27+
<style>
28+
/* Application header should be static for the landing page */
29+
.md-header {
30+
position: initial;
31+
}
32+
33+
.tx-container {
34+
background: linear-gradient(to bottom, var(--md-primary-fg-color), #75164f 99%);
35+
}
36+
37+
.tx-hero {
38+
display: flex;
39+
flex-wrap: wrap;
40+
}
41+
42+
.tx-hero h2 {
43+
margin-top: 0;
44+
color: white;
45+
font-size: 1.5em;
46+
}
47+
48+
.tx-hero__image video {
49+
width: 100%;
50+
height: auto;
51+
min-height: 100px;
52+
box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
53+
}
54+
55+
.tx-hero__quote {
56+
margin: 2em 0 !important;
57+
font-size: .8em !important;
58+
}
59+
60+
.tx-hero__content {
61+
flex: 0 0 100%;
62+
padding: 18px;
63+
align-self: center;
64+
}
65+
66+
.tx-hero__tagline {
67+
margin: 0;
68+
color: var(--md-footer-fg-color--lighter);
69+
font-weight: 700;
70+
}
71+
72+
.tx-hero__warning {
73+
margin-top: 0.75em !important;
74+
color: var(--md-footer-fg-color--lighter);
75+
font-size: small;
76+
}
77+
78+
.tx-hero__image {
79+
padding: 2vh 18px;
80+
}
81+
82+
.tx-hero .md-button {
83+
padding: .425em 1.6em;
84+
}
85+
86+
.tx-hero .md-button:hover,
87+
.tx-hero .md-button:focus {
88+
color: var(--md-default-fg-color);
89+
}
90+
91+
.tx-hero .md-button--primary {
92+
color: var(--md-default-fg-color);
93+
}
94+
95+
/* Hide table of contents */
96+
@media screen and (min-width: 60em) {
97+
.md-sidebar--secondary {
98+
display: none;
3699
}
37100

38-
.tx-hero {
39-
display: flex;
40-
flex-wrap: wrap;
101+
.tx-hero__content {
102+
flex: 0 0 45%;
41103
}
42104

43-
.tx-hero h1 {
44-
margin-bottom: 12px;
45-
color: white;
46-
font-weight: 800;
47-
font-size: 40px;
105+
.tx-hero__image {
106+
order: 1;
107+
flex: 0 0 55%;
108+
padding: 100px 18px 50px 50px;
48109
}
49110

50111
.tx-hero h2 {
51-
margin-top: 0;
52-
color: white;
53-
font-size: 1.1em;
54-
}
55-
56-
.tx-hero__image video {
57-
width: 100%;
58-
height: auto;
59-
min-height: 100px;
60-
box-shadow: 0 20px 20px rgba(0, 0, 0, .2);
112+
margin-bottom: 1em;
113+
font-size: 2.5em;
61114
}
62115

63116
.tx-hero__quote {
64-
margin: 2em 0 !important;
65-
font-size: .8em !important;
66-
}
67-
68-
.tx-hero__content {
69-
flex: 0 0 100%;
70-
padding: 18px;
71-
}
72-
73-
.tx-hero__tagline {
74-
margin: 0;
75-
color: var(--md-footer-fg-color--lighter);
76-
font-weight: 700;
77-
}
78-
79-
.tx-hero__warning {
80-
margin-top: 0.75em !important;
81-
color: var(--md-footer-fg-color--lighter);
82-
font-size: small;
83-
}
84-
85-
.tx-hero__image {
86-
padding: 2vh 18px;
117+
margin: 2.5em 0 !important;
118+
font-size: 1em !important;
87119
}
88120

89121
.tx-hero .md-button {
90-
padding: .425em 1.6em;
91-
}
92-
93-
.tx-hero .md-button:hover,
94-
.tx-hero .md-button:focus {
95-
color: var(--md-default-fg-color);
122+
padding: .625em 2em;
96123
}
124+
}
97125

98-
.tx-hero .md-button--primary {
99-
color: var(--md-default-fg-color);
126+
/* Hide navigation */
127+
@media screen and (min-width: 76.25em) {
128+
.md-sidebar--primary {
129+
display: none;
100130
}
131+
}
101132

102-
/* Hide table of contents */
103-
@media screen and (min-width: 60em) {
104-
.md-sidebar--secondary {
105-
display: none;
106-
}
107-
108-
.tx-hero__content {
109-
flex: 0 0 45%;
110-
}
111-
112-
.tx-hero__image {
113-
order: 1;
114-
flex: 0 0 55%;
115-
padding: 100px 18px 50px 50px;
116-
}
117-
118-
.tx-hero h1 {
119-
margin-top: 70px;
120-
margin-bottom: 1rem;
121-
font-weight: 800;
122-
font-size: 70px;
123-
}
124-
125-
.tx-hero h2 {
126-
margin-bottom: 1em;
127-
font-size: 1.5625em;
128-
}
129-
130-
.tx-hero__quote {
131-
margin: 2.5em 0 !important;
132-
font-size: 1em !important;
133-
}
134-
135-
.tx-hero .md-button {
136-
padding: .625em 2em;
137-
}
138-
}
133+
=
134+
</style>
139135

140-
/* Hide navigation */
141-
@media screen and (min-width: 76.25em) {
142-
.md-sidebar--primary {
143-
display: none;
144-
}
145-
}
146-
=
147-
</style>
136+
<!-- Hero for landing page -->
137+
<section class="tx-container">
138+
<div class="md-grid md-typeset">
139+
<div class="tx-hero">
148140

149-
<!-- Hero for landing page -->
150-
<section class="tx-container">
151-
<div class="md-grid md-typeset">
152-
<div class="tx-hero">
153-
154-
<!-- Hero image -->
155-
<div class="tx-hero__image">
156-
<video poster="assets/images/studio.png">Your browser does not support the video tag.</video>
157-
</div>
141+
<!-- Hero image -->
142+
<div class="tx-hero__image">
143+
<video poster="assets/images/studio.png">Your browser does not support the video tag.</video>
144+
</div>
158145

159-
<!-- Hero content -->
160-
<div class="tx-hero__content">
161-
<h1>Studio</h1>
162-
<p class="tx-hero__tagline">Free - Open Source - Cross Platform</p>
163-
<h2>{{ config.site_description }}</h2>
164-
165-
<a
166-
href="{{ page.next_page.url | url }}"
167-
title="{{ page.next_page.title | striptags }}"
168-
class="md-button md-button--primary"
169-
>
170-
Download
171-
</a>
172-
<a
173-
href="https://demo.repath.studio/"
174-
target="_blank"
175-
title="{{ lang.t('source.link.title') }}"
176-
class="md-button"
177-
>
178-
Online Demo
179-
</a>
180-
<div class="tx-hero__warning">
181-
Some features are not available on the online demo.
182-
</div>
146+
<!-- Hero content -->
147+
<div class="tx-hero__content">
148+
<p class="tx-hero__tagline">Free - Open Source - Cross Platform</p>
149+
<h2>{{ config.site_description }}</h2>
150+
151+
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}"
152+
class="md-button md-button--primary">
153+
Download
154+
</a>
155+
<a href="https://demo.repath.studio/" target="_blank" title="{{ lang.t('source.link.title') }}"
156+
class="md-button">
157+
Online Demo
158+
</a>
159+
<div class="tx-hero__warning">
160+
Some features are not available on the online demo.
183161
</div>
184-
185162
</div>
186-
</div>
187-
</section>
163+
164+
</div>
165+
</div>
166+
</section>
188167

189168
{% endblock %}
190169

191170
<!-- Content -->
192171
{% block content %}
193-
{{ page.content }}
172+
{{ page.content }}
194173
{% endblock %}
195174

196175
<!-- Application footer -->

0 commit comments

Comments
 (0)