Skip to content

Commit b8ffb53

Browse files
eksrhaeksrha
committed
new home design
1 parent 4ef6516 commit b8ffb53

8 files changed

Lines changed: 331 additions & 3 deletions

File tree

‎docs/assets/icons/devops.svg‎

Lines changed: 29 additions & 0 deletions
Loading

‎docs/assets/icons/githubactions.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎docs/assets/icons/library.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎docs/index.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
# Welcome
1+
---
2+
template: home.html
23

3-
Welcome to the official documentation/ blog for [fullstack-devops](https://github.com/fullstack-devops)
4+
---
45

56

67
### What to expect?

docs/stylesheets/custom.css renamed to docs/overrides/custom.css

File renamed without changes.

‎docs/overrides/home.css‎

Lines changed: 210 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,210 @@
1+
.md-search {
2+
margin-right: 20px;
3+
}
4+
5+
.md-header__source {
6+
display: none;
7+
}
8+
9+
/* .md-main {
10+
flex-grow: 0;
11+
}
12+
13+
.md-main__inner {
14+
display: flex;
15+
height: 100%;
16+
} */
17+
18+
.tx-container {
19+
padding-top: 0rem;
20+
/* background: linear-gradient(
21+
to bottom,
22+
var(--md-primary-fg-color),
23+
hsla(160deg, 47%, 55%, 1) 99%,
24+
#fff 99%
25+
); */
26+
}
27+
28+
.tx-hero {
29+
margin: 32px 2.8rem;
30+
color: var(--md-primary-bg-color);
31+
justify-content: center;
32+
}
33+
34+
.tx-hero h1 {
35+
margin-bottom: 1rem;
36+
font-weight: 700;
37+
}
38+
39+
.tx-hero__content {
40+
padding-bottom: 1rem;
41+
margin: 0 auto;
42+
}
43+
44+
.tx-hero__image {
45+
width: 17rem;
46+
height: 17rem;
47+
order: 1;
48+
padding-right: 2.5rem;
49+
}
50+
51+
/* .tx-hero .md-button {
52+
margin-top: 0.5rem;
53+
margin-right: 0.5rem;
54+
color: var(--md-primary-bg-color);
55+
}
56+
57+
.tx-hero .md-button--primary {
58+
background-color: var(--md-primary-bg-color);
59+
color: hsla(280deg, 37%, 48%, 1);
60+
border-color: var(--md-primary-bg-color);
61+
}
62+
63+
.tx-hero .md-button:focus,
64+
.tx-hero .md-button:hover {
65+
background-color: var(--md-accent-fg-color);
66+
color: var(--md-default-bg-color);
67+
border-color: var(--md-accent-fg-color);
68+
} */
69+
70+
.feature-item h2 svg {
71+
height: 30px;
72+
float: left;
73+
margin-right: 10px;
74+
transform: translateY(10%);
75+
}
76+
77+
.feature-item h2 img {
78+
height: 30px;
79+
float: left;
80+
margin-right: 10px;
81+
transform: translateY(10%);
82+
}
83+
84+
85+
.top-hr {
86+
margin-top: 42px;
87+
}
88+
89+
.feature-item {
90+
font-family: "Lato", sans-serif;
91+
font-weight: 300;
92+
box-sizing: border-box;
93+
padding: 0 15px;
94+
word-break: break-word;
95+
}
96+
97+
.feature-item h2 {
98+
font-weight: 300;
99+
font-size: 25px;
100+
height: 35px;
101+
white-space: nowrap;
102+
overflow: hidden;
103+
text-overflow: ellipsis;
104+
line-height: 35px;
105+
margin-top: 20px;
106+
margin-bottom: 10px;
107+
font-family: inherit;
108+
}
109+
110+
.feature-item p {
111+
font-size: 16px;
112+
line-height: 1.8em;
113+
text-rendering: optimizeLegibility;
114+
-webkit-font-smoothing: antialiased;
115+
margin: 0 0 10px;
116+
display: block;
117+
}
118+
119+
@media screen and (max-width: 30em) {
120+
.tx-hero h1 {
121+
font-size: 1.4rem;
122+
}
123+
}
124+
125+
@media screen and (min-width: 60em) {
126+
.tx-hero {
127+
display: flex;
128+
align-items: center;
129+
justify-content: center;
130+
}
131+
132+
.tx-hero__content {
133+
max-width: 22rem;
134+
margin-top: 3.5rem;
135+
margin-bottom: 3.5rem;
136+
margin-left: 1rem;
137+
margin-right: 4rem;
138+
align-items: center;
139+
}
140+
}
141+
142+
@media screen and (min-width: 76.25em) {
143+
.top-hr {
144+
width: 100%;
145+
display: flex;
146+
max-width: 61rem;
147+
margin-right: auto;
148+
margin-left: auto;
149+
padding: 0 0.2rem;
150+
}
151+
152+
.bottom-hr {
153+
margin-top: 10px;
154+
width: 100%;
155+
display: flex;
156+
max-width: 61rem;
157+
margin-right: auto;
158+
margin-left: auto;
159+
padding: 0 0.2rem;
160+
}
161+
162+
.feature-item {
163+
flex: 1;
164+
min-width: 0;
165+
}
166+
167+
.feature-item:hover {
168+
background-color: #526cfe47;
169+
border-radius: 3px;
170+
}
171+
}
172+
173+
.hr {
174+
border-bottom: 1px solid #eee;
175+
width: 100%;
176+
margin: 20px 0;
177+
}
178+
179+
.text-center {
180+
text-align: center;
181+
padding-right: 15px;
182+
padding-left: 15px;
183+
margin-right: auto;
184+
margin-left: auto;
185+
margin-top: 15px;
186+
font-family: "Lato", sans-serif;
187+
font-size: 23px;
188+
font-weight: 300;
189+
padding-bottom: 10px;
190+
}
191+
192+
.logos {
193+
display: flex;
194+
align-items: center;
195+
justify-content: center;
196+
flex-flow: row wrap;
197+
margin: 0 auto;
198+
}
199+
200+
.logos img {
201+
flex: 1 1 auto;
202+
padding: 25px;
203+
max-height: 130px;
204+
vertical-align: middle;
205+
}
206+
207+
.hr-logos {
208+
margin-top: 0;
209+
margin-bottom: 30px;
210+
}

‎docs/overrides/home.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!-- Custom HTML site displayed as the Home chapter -->
2+
{% extends "main.html" %}
3+
{% block tabs %}
4+
{{ super() }}
5+
<style>
6+
.md-sidebar--primary {
7+
display: none;
8+
}
9+
.md-content__inner h1 {
10+
display: none;
11+
}
12+
</style>
13+
14+
15+
<!-- Main site Entry button descriptions -->
16+
<section class="tx-container">
17+
<div class="md-grid md-typeset">
18+
<div class="tx-hero">
19+
<div class="tx-hero__image">
20+
<img src="assets/full-logo.png" draggable="false">
21+
</div>
22+
<div class="tx-hero__content">
23+
<h1>Fullstack applications and DevOps solutions</h1>
24+
<p>Find blueprints, best practices and more documented here</p>
25+
<a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}"
26+
class="md-button md-button--primary">
27+
Get started
28+
</a>
29+
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
30+
Go to GitHub
31+
</a>
32+
</div>
33+
</div>
34+
</div>
35+
</section>
36+
37+
<!-- Main site box descriptions -->
38+
<!-- <div class="top-hr">
39+
<div class="feature-item">
40+
<h2>
41+
<img src="assets/icons/devops.svg" draggable="false">
42+
DevOps
43+
</h2>
44+
<p>
45+
Find DevOps Solutions in some of the Repositories
46+
</p>
47+
</div>
48+
<div class="feature-item">
49+
<h2>
50+
<img src="assets/icons/library.svg" draggable="false">
51+
Libraries
52+
</h2>
53+
<p>
54+
Use Librarys for varoius frameworkscode developed in the department in your own project and support us in its further development with help
55+
or ideas.
56+
</p>
57+
</div>
58+
<div class="feature-item">
59+
<h2>
60+
<img src="assets/icons/githubactions.svg" draggable="false">
61+
GitHub actions
62+
</h2>
63+
<p>
64+
Use templates for Github actions and exchange ideas with others to build and maintain your software as
65+
automated as possible
66+
</p>
67+
</div>
68+
</div> -->
69+
70+
<!-- <div class="top-hr">
71+
<div class="hr">
72+
</div>
73+
</div> -->
74+
75+
76+
{% endblock %}
77+
{% block footer %}{% endblock %}

‎mkdocs.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ edit_uri: "edit/main/docs"
1313
# Configuration
1414
theme:
1515
name: material
16+
custom_dir: docs/overrides
1617

1718
# Static files
1819
static_templates:
@@ -61,7 +62,8 @@ theme:
6162
favicon: https://avatars.githubusercontent.com/u/97617148?s=200&v=4
6263
logo: assets/full-logo.png
6364
extra_css:
64-
- stylesheets/custom.css
65+
- overrides/custom.css
66+
- overrides/home.css
6567

6668
docs_dir: ./docs
6769
use_directory_urls: false

0 commit comments

Comments
 (0)