BradNut/awesome-uses
1
0
Fork 0
mirror of https://github.com/BradNut/awesome-uses synced 2025-09-08 17:40:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

mqs

Browse source
This commit is contained in:
Wes Bos 2020-01-08 13:32:10 -05:00
parent 754c90bff6
commit a474f7aae5
3 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/Person.js
View file

@ -109,6 +109,9 @@ const PersonInner = styled.div`
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
grid-gap: 0 1rem; grid-gap: 0 1rem;
@media all and (max-width: 400px) {
grid-template-columns: 1fr;
}
img { img {
grid-row: 1 / -1; grid-row: 1 / -1;
background: var(--lightblue); background: var(--lightblue);
@ -151,6 +154,14 @@ const PersonDeets = styled.div`
.phone { .phone {
padding: 0; padding: 0;
} }
@media all and (max-width: 400px) {
display: grid;
grid-template-columns: 1fr 1fr;
> *:nth-child(2) ~ * {
/* lol */
border-block-start: 1px solid var(--vape);
}
}
`; `;
const TwitterHandle = styled.span` const TwitterHandle = styled.span`

28
src/components/layout.js
View file

@ -27,16 +27,28 @@ const Layout = ({ children }) => {
return ( return (
<> <>
<GlobalStyle /> <GlobalStyle />
<Header siteTitle={data.site.siteMetadata.title} />
<Main> <Main>
<Header siteTitle={data.site.siteMetadata.title} />
{children} {children}
<footer> <footer>
© {new Date().getFullYear() - Math.floor(Math.random() * 777)} Made by{' '} <center ya-i-used-a-center-tag="sue me">
<a href="https://wesbos.com">Wes Bos</a> with{' '} <p>
<a href="https://www.gatsbyjs.org">Gatsby</a>. Source on{' '} Made by <a href="https://wesbos.com">Wes Bos</a> with{' '}
<a href="https://github.com/wesbos/awesome-uses/">GitHub</a>. Icons <a href="https://www.gatsbyjs.org">Gatsby</a> ©{' '}
from <a href="icons8.com">icons8.com</a>. Domain provided by{' '} {new Date().getFullYear() - Math.floor(Math.random() * 777)}
<a href="https://get.tech/">.Tech</a> </p>
<p>
Source on{' '}
<a href="https://github.com/wesbos/awesome-uses/">GitHub</a>. Add
yourself!
</p>
<p>
Icons from <a href="icons8.com">icons8.com</a>
</p>
<p>
Domain provided by <a href="https://get.tech/">.Tech</a>
</p>
</center>
</footer> </footer>
</Main> </Main>
</> </>
@ -68,7 +80,7 @@ const GlobalStyle = createGlobalStyle`
body { body {
font-size: 2rem; font-size: 2rem;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; /* overflow-x: hidden; */
} }
h1,h2,h3,h4,h5,h6 { h1,h2,h3,h4,h5,h6 {
font-weight: 500; font-weight: 500;

3
src/pages/index.js
View file

@ -54,4 +54,7 @@ const People = styled.div`
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
grid-gap: 5rem; grid-gap: 5rem;
@media all and (max-width: 400px) {
grid-template-columns: 1fr;
}
`; `;