Skip to content

Commit e6b02de

Browse files
kalwaltkalwalt
committed
about us page and improves in the header
1 parent e0c8138 commit e6b02de

File tree

6 files changed

+115
-13
lines changed

6 files changed

+115
-13
lines changed

‎_includes/header.html

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<header id="header">
2+
<div class="logo">
3+
<a href="/">
4+
<img id="header-img" src="../resources/webarkit-logo-social.jpg" alt="webarkit logo" title="webarkit.org home"/>
5+
</a>
6+
</div>
7+
<nav id="nav-bar">
8+
<ul>
9+
<li><a class="nav-link" href="/blog">Blog</a></li>
10+
<li><a class="nav-link" href="/project">About the project</a></li>
11+
<li><a class="nav-link" href="/about-us">About us</a></li>
12+
</ul>
13+
</nav>
14+
</header>

‎_layouts/about.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
layout: default
3+
---
4+
<div id="page-wrapper">
5+
{% include header.html %}
6+
<section id="hero">
7+
<h2>About us</h2>
8+
<div>
9+
{{ content }}
10+
</div>
11+
{% include footer.html %}
12+
</section>
13+
</div>

‎_layouts/blog.html

+2-8
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
11
---
22
layout: default
33
---
4-
<header id="header">
5-
<div class="logo">
6-
<a href="/">
7-
<img id="header-img" src="../resources/webarkit-logo-social.jpg" alt="webarkit logo" title="webarkit.org home"/>
8-
</a>
9-
</div>
10-
</header>
11-
<main class="content" role="main">
4+
{% include header.html %}
5+
<main class="content" role="main" id="hero">
126
<section class="main-content">
137
{{ content }}
148
{% include footer.html %}

‎_sass/jekyll-theme-cayman.scss

+78
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@
2222
}
2323

2424
* {
25+
margin: 0;
26+
padding: 0;
2527
box-sizing: border-box;
2628
}
2729

@@ -43,6 +45,31 @@ a {
4345
}
4446
}
4547

48+
li {
49+
list-style: none;
50+
}
51+
52+
#page-wrapper {
53+
position: relative;
54+
}
55+
56+
header {
57+
position: fixed;
58+
top: 0;
59+
min-height: 75px;
60+
padding: 0px 20px;
61+
display: flex;
62+
justify-content: space-around;
63+
align-items: center;
64+
background-color: #eee;
65+
}
66+
67+
@media (max-width: 600px) {
68+
header {
69+
flex-wrap: wrap;
70+
}
71+
}
72+
4673
.logo {
4774
width: 60vw;
4875
}
@@ -72,6 +99,57 @@ a {
7299
}
73100
}
74101

102+
nav {
103+
font-weight: 400;
104+
}
105+
106+
@media (max-width: 650px) {
107+
nav {
108+
margin-top: 10px;
109+
width: 100%;
110+
display: flex;
111+
flex-direction: column;
112+
align-items: center;
113+
text-align: center;
114+
padding: 0 50px;
115+
}
116+
nav li {
117+
padding-bottom: 5px;
118+
}
119+
}
120+
121+
nav > ul {
122+
width: 35vw;
123+
display: flex;
124+
flex-direction: row;
125+
justify-content: space-around;
126+
}
127+
128+
@media (max-width: 650px) {
129+
nav > ul {
130+
flex-direction: column;
131+
}
132+
}
133+
134+
#hero {
135+
display: flex;
136+
flex-direction: column;
137+
align-items: center;
138+
justify-content: center;
139+
height: 400px;
140+
margin-top: 220px;
141+
}
142+
143+
#hero > h2 {
144+
margin-bottom: 20px;
145+
word-wrap: break-word;
146+
}
147+
148+
#hero > div {
149+
max-width: 80%;
150+
text-align: left;
151+
}
152+
75153
.btn {
76154
display: inline-block;
77155
margin-bottom: 1rem;

‎about-us.markdown

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
layout: about
3+
title: About
4+
permalink: /about-us/
5+
---
6+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
7+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
8+
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

‎about.markdown

-5
This file was deleted.

0 commit comments

Comments
 (0)