Skip to content

Commit

Permalink
Update layout
Browse files Browse the repository at this point in the history
  • Loading branch information
Xi Zhang committed Sep 14, 2023
1 parent a12127d commit 41efe0b
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 50 deletions.
37 changes: 17 additions & 20 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,29 @@ <h1>Culture Bobbin</h1>
<a href="mailto:[email protected]">Contact</a>
</li>
</ul>
</nav>
<main>
<article>
<h3>About me</h3>
<p>
My name is
<span class="bold">Xi</span>.
I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
</p>
<h3>About this site</h3>
<p>
This page was made lovingly by hand without any JavaScript.

HTML should be written the way Bordier makes Yuzu butter.
</p>
<h3>Social Media</h3>
<div class="social-media">
<div>
<a href="https://www.linkedin.com/in/xi-zhang-9358bb1a/">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>LinkedIn</title><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
</a>
</div>
<div>
<a href="https://twitter.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
</a>
</div>
<div>
<a href="https://github.com/aefhm">
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
Expand All @@ -49,22 +61,7 @@ <h1>Culture Bobbin</h1>
</a>
</div>
</div>
</nav>
<div class="main">
<article>
<h2>About me</h2>
<p>
My name is
<span class="bold">Xi</span>.
I currently work as an engineer in Web3! Once upon a time, I studied cultural anthropology. I really like people.
</p>
<h3>About this site</h3>
<p>
This page was made lovingly by hand without any JavaScript.

HTML should be written the way Bordier makes Yuzu butter.
</p>
</article>
</div>
</main>
</body>
</html>
53 changes: 23 additions & 30 deletions public/style.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,20 @@
/* h1 {
text-align: center;
font-size: 36px;
font-weight: 200;
max-width: 600px;
}
*/

html {
background-color: bisque;
font-family: 'Noto Sans', sans-serif;
}

body {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(100px, auto);
grid-template-areas:
"header header header header"
"nav main main main";
@media screen {
article {
display: grid;
column-gap: 20px;
}

nav ul {
display: flex;
}

nav li {
flex: 1;
}
}

header {
Expand All @@ -30,36 +27,33 @@ header {
font-weight: 600;
}

.main {
grid-area: main;
padding-right: 36px;
}

svg {
width: 20px;
padding: 10px;
}

nav {
grid-area: nav;
}

nav ul {
border: 1px solid black;
display: flex;
list-style: none;
padding: unset;
}

nav ul a {
border: 1px solid black;
color: inherit;
display: block;
font-size: small;
font-family: 'Noto Sans', sans-serif;
font-weight: bolder;
color: inherit;
padding: 10px;
text-align: center;
text-decoration: none;
text-transform: UPPERCASE;
}

.description {
display: flex;
justify-content: center;
nav ul a:hover {
background: azure;
}

.recipes {
Expand All @@ -69,5 +63,4 @@ nav ul a {

.social-media {
display: flex;
padding-left: 30px;
}

0 comments on commit 41efe0b

Please sign in to comment.