Added rough starter styling
This commit is contained in:
parent
d44b5aff13
commit
33ef0b3c0b
60
src/frontend/components/icons.tsx
Normal file
60
src/frontend/components/icons.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
export function GithubIcon(props: any) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
|
||||
<path d="M9 18c-4.51 2-5-2-7-2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function LinkedinIcon(props: any) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
|
||||
<rect width="4" height="12" x="2" y="9" />
|
||||
<circle cx="4" cy="4" r="2" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function XIcon(props: any) {
|
||||
return (
|
||||
<svg
|
||||
{...props}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 1200 1227"
|
||||
preserveAspectRatio="none"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="black" />
|
||||
</svg>
|
||||
)
|
||||
}
|
@ -1,25 +1,32 @@
|
||||
import { GithubIcon, LinkedinIcon, XIcon } from "../components/icons"
|
||||
|
||||
export function Home(){
|
||||
return (
|
||||
<div>
|
||||
<article>
|
||||
<article class="post-spotlight">
|
||||
<h2>Most Recent Blog Post Title</h2>
|
||||
<div>Posted on January 1, 2024</div>
|
||||
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
|
||||
<a href="/post/3">Continue Reading...</a>
|
||||
</article>
|
||||
<hr />
|
||||
<aside>
|
||||
<div>
|
||||
<div class="about">
|
||||
<h3>About Me</h3>
|
||||
<p>I'm a software engineer</p>
|
||||
|
||||
<h3>Connect with me</h3>
|
||||
<ul>
|
||||
<li>Twitter</li>
|
||||
<li>GitHub</li>
|
||||
<li>LinkedIn</li>
|
||||
<li>
|
||||
<a href=""><XIcon /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><GithubIcon /></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href=""><LinkedinIcon /></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<div class="content-categories">
|
||||
<h3>Categories</h3>
|
||||
<ul>
|
||||
<li>Web Development</li>
|
||||
|
@ -1,5 +1,7 @@
|
||||
body, a {
|
||||
margin: 0px;
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
|
||||
header {
|
||||
@ -7,7 +9,8 @@ header {
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
background-color: #f2f2f2;
|
||||
padding: 15px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
@ -31,7 +34,64 @@ nav a {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
header hr {
|
||||
hr {
|
||||
margin: 0px;
|
||||
opacity: 75%;
|
||||
}
|
||||
}
|
||||
|
||||
.post-spotlight {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 30px;
|
||||
padding: 4em;
|
||||
}
|
||||
|
||||
article {
|
||||
font-family: 'Arial Narrow Bold', sans-serif;
|
||||
}
|
||||
|
||||
article > h2 {
|
||||
font-size: 3em;
|
||||
font-weight: bold;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
article > div {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
article > a {
|
||||
text-decoration: none;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background-color: #f2f2f2;
|
||||
color: black;
|
||||
text-align: end;
|
||||
|
||||
}
|
||||
|
||||
aside {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
margin: 15px;
|
||||
}
|
||||
|
||||
aside h3 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
aside ul {
|
||||
list-style-type: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.about ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user