Skip to content

Commit ff0e2fb

Browse files
dzinemondzinemon
committed
logo and author, post styling
1 parent b260b72 commit ff0e2fb

File tree

8 files changed

+140
-76
lines changed

8 files changed

+140
-76
lines changed

‎src/components/AuthorCard.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default function AuthorCard({ post }) {
7979

8080
<div className="px-4 flex flex-col justify-center">
8181
<p className="text-sm">
82-
by <strong className="font-bold">{authors[0].name}</strong> and <strong className="font-bold">{authors[1].name}</strong>
82+
<strong className="font-bold">{authors[0].name}</strong> and <strong className="font-bold">{authors[1].name}</strong>
8383
</p>
8484
<p className="font-light text-xs">{post.published_at_pretty}</p>
8585
</div>

‎src/components/AuthorPost.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export default function AuthorPost({post}) {
4949
</div>
5050
<div className="text-xs px-4 flex flex-col justify-center">
5151
<p className="text-sm">
52-
by <strong className="font-bold ">{item.name}</strong>
52+
<strong className="font-bold ">{item.name}</strong>
5353
</p>
5454
</div>
5555
</section>
@@ -101,7 +101,7 @@ export default function AuthorPost({post}) {
101101
</div>
102102
<div className="text-xs px-4 flex flex-col justify-center">
103103
<p className="text-sm">
104-
by <strong className="font-bold">{post.primary_author.name}</strong>
104+
<strong className="font-bold">{post.primary_author.name}</strong>
105105
</p>
106106
</div>
107107
</section>

‎src/components/Footer.js

Lines changed: 93 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,108 @@
11
import React from "react";
22

3-
import Logo from "../../assets/logo.svg";
3+
// import Logo from "../../static/logo.png";
4+
import Img from "gatsby-image";
45

56
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
67
import { faSlack, faTwitter } from '@fortawesome/free-brands-svg-icons'
78

8-
import { Link } from "gatsby"
9+
import { Link, StaticQuery, graphql } from "gatsby"
910

1011
export default function Footer() {
1112
return (
12-
<section className="bg-white z-10 relative pt-36">
13-
<div className="container mx-auto mb-20 md:mb-11">
14-
<div className="flex flex-col md:flex-row justify-center md:justify-start -mx-6">
15-
<div className="flex-shrink w-full md:w-3/12 px-6 mb-10">
16-
<Logo width="83" height="45" />
17-
<div className="flex flex-row -mx-1 mt-4">
18-
<div className="px-1">
19-
<Link target="_blank" rel="noopener"
20-
to="https://sdv-space.slack.com/join/shared_invite/zt-gdsfcb5w-0QQpFMVoyB2Yd6SRiMplcw#/"
21-
className="w-10 h-10 flex justify-center items-center bg-sdv-mute inline-block rounded-full">
22-
<FontAwesomeIcon width="16" icon={faSlack} />
23-
</Link>
24-
</div>
25-
<div className="px-1">
26-
<Link target="_blank" rel="noopener"
27-
to="https://twitter.com/sdv_dev"
28-
className="w-10 h-10 flex justify-center items-center bg-sdv-mute inline-block rounded-full">
29-
<FontAwesomeIcon width="16" icon={faTwitter} />
30-
</Link>
31-
</div>
32-
</div>
33-
</div>
34-
<div className="flex-grow md:w-9/12 px-6">
35-
<div className="flex flex-wrap">
36-
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
37-
<p className="font-bold mb-6">Site</p>
38-
<ul className="font-light">
39-
<li className="mb-4">
40-
<Link className="hover:underline" to="https://sdv.dev/blog">Blog</Link></li>
41-
<li className="mb-4">
42-
<Link className="hover:underline" to="https://sdv.dev/SDV">Docs</Link></li>
43-
44-
</ul>
45-
</div>
46-
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
47-
<p className="font-bold mb-6">Documentation</p>
48-
<ul className="font-light">
49-
<li className="mb-4">
50-
<Link className="hover:underline" to="https://sdv.dev/SDV/getting_started/index.html">Getting Started</Link></li>
51-
<li className="mb-4">
52-
<Link className="hover:underline" to="https://sdv.dev/SDV/user_guides/index.html">User Guides</Link></li>
53-
<li className="mb-4">
54-
<Link className="hover:underline" to="https://sdv.dev/SDV/api_reference/index.html">API</Link></li>
55-
<li className="mb-4">
56-
<Link className="hover:underline" to="https://sdv.dev/SDV/developer_guides/index.html">Developers</Link></li>
57-
</ul>
13+
14+
<StaticQuery
15+
query={graphql`
16+
query FooterImages {
17+
logo: file(
18+
relativePath: { eq: "logo.png" }
19+
) {
20+
childImageSharp {
21+
fixed(width: 84, quality: 100) {
22+
...GatsbyImageSharpFixed_noBase64
23+
}
24+
}
25+
}
26+
}
27+
`}
28+
render={data => {
29+
return (
30+
<section className="bg-white z-10 relative pt-36">
31+
<div className="container mx-auto mb-20 md:mb-11">
32+
<div className="flex flex-col md:flex-row justify-center md:justify-start -mx-6">
33+
<div className="flex-shrink w-full md:w-3/12 px-6 mb-10">
34+
<Img
35+
fadeIn={true}
36+
fixed={
37+
data.logo
38+
.childImageSharp.fixed
39+
}
40+
alt="The Synthetic Data Vault Blog"
41+
className=""
42+
/>
43+
<div className="flex flex-row -mx-1 mt-4">
44+
<div className="px-1">
45+
<Link target="_blank" rel="noopener"
46+
to="https://sdv-space.slack.com/join/shared_invite/zt-gdsfcb5w-0QQpFMVoyB2Yd6SRiMplcw#/"
47+
className="w-10 h-10 flex justify-center items-center bg-sdv-mute inline-block rounded-full">
48+
<FontAwesomeIcon width="16" icon={faSlack} />
49+
</Link>
50+
</div>
51+
<div className="px-1">
52+
<Link target="_blank" rel="noopener"
53+
to="https://twitter.com/sdv_dev"
54+
className="w-10 h-10 flex justify-center items-center bg-sdv-mute inline-block rounded-full">
55+
<FontAwesomeIcon width="16" icon={faTwitter} />
56+
</Link>
57+
</div>
58+
</div>
5859
</div>
59-
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
60-
<p className="font-bold mb-6">Github</p>
61-
<ul className="font-light">
62-
<li className="mb-4">
63-
<Link className="hover:underline" to="https://github.com/sdv-dev/SDV">SDV</Link></li>
64-
<li className="mb-4">
65-
<Link className="hover:underline" to="https://github.com/sdv-dev/CTGAN">CTGAN</Link></li>
66-
<li className="mb-4">
67-
<Link className="hover:underline" to="https://github.com/sdv-dev/Copulas">Copulas</Link></li>
68-
<li className="mb-4">
69-
<Link className="hover:underline" to="https://github.com/sdv-dev">All Libraries</Link></li>
70-
</ul>
60+
<div className="flex-grow md:w-9/12 px-6">
61+
<div className="flex flex-wrap">
62+
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
63+
<p className="font-bold mb-6">Site</p>
64+
<ul className="font-light">
65+
<li className="mb-4">
66+
<Link className="hover:underline" to="https://sdv.dev/blog">Blog</Link></li>
67+
<li className="mb-4">
68+
<Link className="hover:underline" to="https://sdv.dev/SDV">Docs</Link></li>
69+
70+
</ul>
71+
</div>
72+
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
73+
<p className="font-bold mb-6">Documentation</p>
74+
<ul className="font-light">
75+
<li className="mb-4">
76+
<Link className="hover:underline" to="https://sdv.dev/SDV/getting_started/index.html">Getting Started</Link></li>
77+
<li className="mb-4">
78+
<Link className="hover:underline" to="https://sdv.dev/SDV/user_guides/index.html">User Guides</Link></li>
79+
<li className="mb-4">
80+
<Link className="hover:underline" to="https://sdv.dev/SDV/api_reference/index.html">API</Link></li>
81+
<li className="mb-4">
82+
<Link className="hover:underline" to="https://sdv.dev/SDV/developer_guides/index.html">Developers</Link></li>
83+
</ul>
84+
</div>
85+
<div className="w-full md:w-6/12 lg:w-3/12 text-sdv-footer mb-4">
86+
<p className="font-bold mb-6">Github</p>
87+
<ul className="font-light">
88+
<li className="mb-4">
89+
<Link className="hover:underline" to="https://github.com/sdv-dev/SDV">SDV</Link></li>
90+
<li className="mb-4">
91+
<Link className="hover:underline" to="https://github.com/sdv-dev/CTGAN">CTGAN</Link></li>
92+
<li className="mb-4">
93+
<Link className="hover:underline" to="https://github.com/sdv-dev/Copulas">Copulas</Link></li>
94+
<li className="mb-4">
95+
<Link className="hover:underline" to="https://github.com/sdv-dev">All Libraries</Link></li>
96+
</ul>
97+
</div>
98+
</div>
7199
</div>
72100
</div>
73101
</div>
74-
</div>
75-
</div>
76-
</section>
102+
</section>
103+
)
104+
}}
105+
/>
106+
77107
);
78108
}

‎src/components/common/Article.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,15 @@ const PostDefaultLayout = ({ data, children, bodyClass, isPost }) => {
4848
>
4949
<Link to="/">
5050
<div className="w-20">
51-
<Logo />
51+
<Img
52+
fadeIn={true}
53+
fixed={
54+
data.logo
55+
.childImageSharp.fixed
56+
}
57+
alt="The Synthetic Data Vault Blog"
58+
className=""
59+
/>
5260
</div>
5361
{/* {site.logo ? (
5462
<img
@@ -119,6 +127,15 @@ const PostDefaultLayoutSettingsQuery = (props) => (
119127
}
120128
}
121129
}
130+
logo: file(
131+
relativePath: { eq: "logo.png" }
132+
) {
133+
childImageSharp {
134+
fixed(width: 84, quality: 100) {
135+
...GatsbyImageSharpFixed_noBase64
136+
}
137+
}
138+
}
122139
}
123140
`}
124141
render={(data) => <PostDefaultLayout data={data} {...props} />}

‎src/components/common/Layout.js

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,15 @@ const DefaultLayout = ({ data, children, bodyClass, isHome }) => {
5555
>
5656
<Link to="/">
5757
<div className="w-20">
58-
<Logo />
58+
<Img
59+
fadeIn={true}
60+
fixed={
61+
data.logo
62+
.childImageSharp.fixed
63+
}
64+
alt="The Synthetic Data Vault Blog"
65+
className=""
66+
/>
5967
</div>
6068
{/* {site.logo ? (
6169
<img
@@ -168,6 +176,15 @@ const DefaultLayoutSettingsQuery = (props) => (
168176
}
169177
}
170178
}
179+
logo: file(
180+
relativePath: { eq: "logo.png" }
181+
) {
182+
childImageSharp {
183+
fixed(width: 84, quality: 100) {
184+
...GatsbyImageSharpFixed_noBase64
185+
}
186+
}
187+
}
171188
}
172189
`}
173190
render={(data) => <DefaultLayout data={data} {...props} />}

‎src/styles/post.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,16 +55,16 @@
5555
margin-bottom: 22px;
5656
line-height: 1.75;
5757
letter-spacing: 0.5px;
58+
}
5859

59-
a {
60-
border-bottom: 1px dotted #03AFF1;
61-
color: #03AFF1;
62-
&:hover {
63-
border-bottom: 1px solid #03AFF1;
64-
}
60+
a {
61+
border-bottom: 1px dotted #03AFF1;
62+
color: #03AFF1;
63+
&:hover {
64+
border-bottom: 1px solid #03AFF1;
6565
}
6666
}
67-
67+
6868
figcaption {
6969
text-align: center;
7070
font-style: italic;

‎src/templates/post.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const Post = ({ data, location }) => {
122122
</div>
123123
</div>
124124

125-
<p className="font-light text-xs mb-6">
125+
<p className="font-light text-sm mb-6">
126126
{post.published_at_pretty}
127127
</p>
128128

‎static/logo.png

18.8 KB
Loading

0 commit comments

Comments
 (0)