Skip to content

Commit fee3f08

Browse files
calvellidocalvellido
authored
Website improvements (#23)
* Fix footer showing * Fix mobile navbar button colour * Fix home mobile navbar colour and sizes * Home layout various improvements * Make images in docs to not overflow * Various doc layout improvements * Add some meta info, inluding the image preview
1 parent 548b3d1 commit fee3f08

14 files changed

+136
-42
lines changed

‎docs/_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: Bow OpenAPI
33
#-------------------------
44
name: Bow OpenAPI # To be used on meta tags mainly
55
#-------------------------
6-
description: A command-line tool to generate a Swift network client from an OpenAPI / Swagger specification file. Please, refer to the project website for extensive and detailed documentation about the project.
6+
description: A command-line tool to generate a Swift network client from an OpenAPI / Swagger specification file.
77
#-------------------------
88
author: 47 Degrees
99
keywords: functional-programming, monads, monad-transformers, functional-data-structure, swift, bow, xcode, xcode-playgrounds, playgrounds, fp-types, adt, free-monads, tagless-final, mtl, for-comprehension, category-theory

‎docs/_includes/_head-docs.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222

2323
<meta name="twitter:text:description" content="{{site.description}}" />
2424
<meta name="twitter:card" content="summary_large_image">
25-
<meta name="twitter:site" content="@47deg">
26-
<meta name="twitter:creator" content="@47deg">
25+
<meta name="twitter:site" content="@bow_swift">
26+
<meta name="twitter:creator" content="@bow_swift">
2727
<meta name="twitter:image" content="{{ 'img/poster.png' | relative_url }}" />
2828

2929
<meta property="github-info" data-github-owner="{{ site.github-owner }}" data-github-repo="{{ site.github-repo }}" />

‎docs/_includes/_head.html

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
<head>
22
<meta charset="UTF-8">
3-
<title>{{site.name}}</title>
3+
4+
{% if page.title %}
5+
{% assign pageTitle = site.title | append: ': ' | append: page.title %}
6+
{% else %}
7+
{% assign pageTitle = site.title %}
8+
{% endif %}
9+
10+
<title>{{ pageTitle }}</title>
411
<meta name="viewport" content="width=device-width, initial-scale=1.0">
512
<meta name="description" content="{{site.description}}">
613
<meta name="keywords" content="{{site.keywords}}">
714

8-
<meta property="og:image" content="" />
9-
<meta property="og:title" content="{{site.name}}" />
10-
<meta property="og:site_name" content="{{site.name}}" />
15+
<meta property="og:image" content="{{ 'img/poster.png' | relative_url }}" />
16+
<meta property="og:title" content="{{ pageTitle }}" />
17+
<meta property="og:site_name" content="{{ pageTitle }}" />
1118
<meta property="og:url" content="{{ site.url }}" />
1219
<meta property="og:type" content="website" />
1320
<meta property="og:description" content="{{site.description}}" />
@@ -17,13 +24,13 @@
1724
<meta name="twitter:card" content="summary_large_image">
1825
<meta name="twitter:site" content="@bow_swift">
1926
<meta name="twitter:creator" content="@bow_swift">
20-
<meta name="twitter:image" content="" />
27+
<meta name="twitter:image" content="{{ 'img/poster.png' | relative_url }}" />
2128

2229
<script defer src="{{ '/js/main.js' | relative_url }}"></script>
2330

2431
<!-- Favicon -->
2532
<link rel="shortcut icon" href="{{ '/img/favicon.png' | relative_url }}">
2633

27-
<!-- Bow-Openapi main css -->
34+
<!-- Main css -->
2835
<link rel="stylesheet" type="text/css" href="{{ '/css/styles.css' | relative_url }}">
2936
</head>

‎docs/_includes/_header.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ <h1>Generation of Swift networking code <span>from an <strong>OpenAPI</strong> s
66
<a class="header-button" href="{{ site.baseurl }}/docs/" title="Docs">Learn more</a>
77
</div>
88
<div class="header-image">
9-
<img src="{{ site.baseurl }}/img/header-image.svg" alt="Bow-OpenAPI logo">
9+
<img src="{{ site.baseurl }}/img/header-image.svg" title="Bow OpenAPI logo" alt="Bow OpenAPI logo">
1010
</div>
1111
</div>
1212
</div>

‎docs/_includes/_sidebar.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
{% assign sub_url_slash = sub_url | append: '/' %}
4646
{% if sub_url == page_url or sub_url_slash == page_url %}
4747
{% assign open_submenu = 'open' %}
48+
{% assign active_item = 'active' %}
4849
{% endif %}
4950
{% endfor %}
5051
{% endif %}

‎docs/_sass/components/_doc.scss

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,17 +55,15 @@
5555
}
5656

5757
.doc-content {
58-
padding: ($base-point-grid * 4);
58+
padding: ($base-point-grid * 2) ($base-point-grid * 4);
5959
}
6060

6161
h1 {
6262
font-size: 2.5rem;
63-
border-bottom: 1px solid $border-color;
6463
}
6564

6665
h2 {
6766
font-size: 2rem;
68-
border-bottom: 1px solid $border-color;
6967
}
7068

7169
h3 {
@@ -102,6 +100,10 @@
102100

103101
p {
104102
margin: ($base-point-grid * 2) 0;
103+
104+
img {
105+
max-width: 100%;
106+
}
105107
}
106108

107109
ol,

‎docs/_sass/components/_footer.scss

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
// -----------------------------------------------
44
#site-footer {
55
flex: 0 0 0;
6-
height: 200px;
76
padding: ($base-point-grid * 10) 0;
87
background: $gray-primary;
98
color: rgba($white, 0.5);
@@ -62,14 +61,14 @@
6261
}
6362

6463
.footer-dev {
65-
padding-bottom: ($base-point-grid * 2);
66-
margin-bottom: ($base-point-grid * 2);
64+
padding-bottom: ($base-point-grid * 4);
65+
margin-bottom: ($base-point-grid * 4);
6766
text-align: center;
68-
border-bottom: 1px solid rgba($white, 0.2);
67+
border-bottom: 1px solid rgba($white, 0.1);
6968
}
7069

7170
.footer-menu {
72-
justify-content: center;
71+
justify-content: space-evenly;
7372

7473
li {
7574
&:not(:last-child) {

‎docs/_sass/components/_header.scss

Lines changed: 48 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@
1616

1717
.header-text {
1818
width: $column-5;
19+
height: 100%;
20+
justify-content: space-evenly;
21+
display: flex;
22+
flex-direction: column;
1923

2024
h1 {
2125
color: $base-font-color;
@@ -35,18 +39,45 @@
3539
}
3640

3741
.header-button {
38-
padding: ($base-point-grid * 1.5) ($base-point-grid * 6);
42+
align-self: flex-start;
43+
padding: ($base-point-grid / 2) ($base-point-grid * 6);
3944
display: inline-block;
4045
font-weight: $font-semibold;
4146
text-transform: uppercase;
4247
color: $white;
4348
border: none;
4449
background: $brand-primary;
45-
border-radius: 300px;
50+
position: relative;
4651
transition:
4752
color $base-duration $base-timing,
4853
background-color $base-duration $base-timing;
4954

55+
&::before {
56+
content: "";
57+
width: 100%;
58+
height: 0;
59+
position: absolute;
60+
top: -($base-point-grid);
61+
left: 0;
62+
border-bottom: $base-point-grid solid $brand-primary;
63+
border-left: $base-point-grid solid transparent;
64+
border-right: $base-point-grid solid transparent;
65+
transition: border $base-duration $base-timing;
66+
}
67+
68+
&::after {
69+
content: "";
70+
width: 100%;
71+
height: 0;
72+
position: absolute;
73+
bottom: -($base-point-grid);
74+
left: 0;
75+
border-top: $base-point-grid solid $brand-primary;
76+
border-left: $base-point-grid solid transparent;
77+
border-right: $base-point-grid solid transparent;
78+
transition: border $base-duration $base-timing;
79+
}
80+
5081
&:visited {
5182
color: $white;
5283
}
@@ -55,6 +86,11 @@
5586
text-decoration: none;
5687
color: $white;
5788
background: darken($brand-primary, 20);
89+
90+
&::before,
91+
&::after {
92+
border-color: darken($brand-primary, 20) transparent;
93+
}
5894
}
5995

6096
&:active {
@@ -65,8 +101,12 @@
65101
}
66102

67103
.header-image {
104+
height: 100%;
68105
width: 33%;
69106
text-align: center;
107+
display: flex;
108+
justify-content: center;
109+
align-items: center;
70110

71111
img {
72112
width: 100%;
@@ -93,12 +133,16 @@
93133
@include bp(medium) {
94134
#site-header {
95135
.header-flex {
96-
padding: ($base-point-grid * 20) 0;
97-
98136
.header-text {
137+
height: 300px;
99138
text-align: center;
100139
width: $column-12;
101140

141+
.header-button {
142+
align-self: center;
143+
width: 50%;
144+
}
145+
102146
h1 {
103147
font-size: 2.5rem;
104148
}

‎docs/_sass/components/_nav.scss

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,19 +78,19 @@
7878

7979
.nav-icon-close {
8080
display: none;
81-
padding: 6px;
81+
padding: ($base-point-grid * 3);
8282
position: absolute;
83-
background: rgba($brand-primary, 0.96);
83+
background: rgba($gray-primary, 0.96);
8484
right: 100%;
85-
top: 32px;
85+
top: ($base-point-grid * 5);
8686

8787
img {
8888
display: block;
8989
transition: transform 0.3s ease;
90+
}
9091

91-
&:hover {
92-
transform: rotate(180deg);
93-
}
92+
&:hover img {
93+
transform: rotate(180deg);
9494
}
9595
}
9696
}
@@ -102,25 +102,27 @@
102102
#site-nav {
103103
.nav-flex {
104104
.nav-menu {
105+
font-size: 1.4rem;
105106
position: fixed;
106-
padding: ($base-point-grid * 4) ($base-point-grid * 6);
107-
background: rgba($brand-primary, 0.96);
107+
padding: ($base-point-grid * 5) ($base-point-grid * 6);
108+
background: rgba($gray-primary, 0.96);
108109
height: 100%;
109110
right: -100%;
110111
top: 0;
111-
width: 50%;
112+
width: 70%;
112113
z-index: 2;
113114
transition: right $base-duration $base-timing;
114115

115116
&.open {
116117
right: 0;
118+
box-shadow: 0 0 100px $gray-primary;
117119
}
118120

119121
ul {
120122
flex-direction: column;
121123

122124
.nav-menu-item {
123-
padding: $base-point-grid 0;
125+
padding: ($base-point-grid * 2) 0;
124126

125127
&:not(:last-child) {
126128
margin-right: 0;

‎docs/_sass/components/_sidebar-menu.scss

Lines changed: 28 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,33 @@
1111
flex-direction: column;
1212
position: relative;
1313

14+
&::before {
15+
content: "";
16+
position: absolute;
17+
left: 20px;
18+
top: 9px;
19+
height: 48px;
20+
width: 16px;
21+
background-image: url("../img/sidebar-bullet.svg");
22+
background-repeat: no-repeat;
23+
background-position-x: center;
24+
background-position-y: center;
25+
transition: background-position 0.1s ease;
26+
}
27+
1428
.sub-menu {
15-
background: $sidebar-active-color;
29+
// background: $sidebar-active-color;
1630
max-height: 0;
1731
transition: max-height 0.3s ease-in-out;
1832
overflow: hidden;
33+
margin-left: 26px;
34+
box-shadow: 3px 0 rgba($white, 0.1) inset;
1935

2036
a {
2137
display: flex;
2238
justify-content: flex-start;
2339
align-items: center;
24-
padding: $base-point-grid * 2 $base-point-grid * 4;
40+
padding: $base-point-grid * 2 $base-point-grid * 3;
2541
font-size: 0.875rem;
2642
height: auto;
2743

@@ -40,8 +56,9 @@
4056
display: flex;
4157
justify-content: space-between;
4258
align-items: center;
43-
padding: $base-point-grid * 2;
59+
padding: $base-point-grid * 3 $base-point-grid * 2 $base-point-grid * 3 $base-point-grid * 6;
4460
line-height: $base-point-grid * 2;
61+
text-align: left;
4562
width: 100%;
4663
color: $white;
4764

@@ -57,7 +74,7 @@
5774
.caret {
5875
position: absolute;
5976
right: ($base-point-grid * 3);
60-
top: $base-point-grid * 2;
77+
top: $base-point-grid * 3;
6178
pointer-events: none;
6279
transform-origin: 0% 75%;
6380
height: 8px;
@@ -85,24 +102,28 @@
85102
}
86103

87104
&.active {
105+
&::before {
106+
background-image: url("../img/sidebar-bullet-active.svg");
107+
}
108+
88109
> a,
89110
button {
90-
box-shadow: 3px 0 $brand-primary inset;
111+
// box-shadow: 3px 0 $brand-primary inset;
91112
}
92113
}
93114

94115
&.open {
95116
> a,
96117
button {
97-
background: $sidebar-head-active-color;
118+
// background: $sidebar-head-active-color;
98119
}
99120

100121
.caret {
101122
transform: rotateZ(90deg);
102123
}
103124

104125
.caret::after {
105-
border-left-color: $sidebar-head-active-color;
126+
// border-left-color: $sidebar-head-active-color;
106127
}
107128

108129
.sub-menu {

‎docs/img/nav-icon-open.svg

Lines changed: 3 additions & 3 deletions
Loading

‎docs/img/poster.png

-159 KB
Loading

0 commit comments

Comments
 (0)