probablycorey/workshop
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

futuristic css (not really)

Browse Source
This commit is contained in:
Chris Wanstrath 2025-07-28 11:36:48 -07:00
parent 14d983974b
commit f882b535d6
2 changed files with 62 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/cubby/src/components/Projects.tsx
View File

@ -15,62 +15,7 @@ export function Projects({ projects }: ProjectsProps) {
return (
<div>
<style>
{`
.project-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
list-style: none;
padding: 0;
}
.project-card {
border: 1px solid #ccc;
padding: 15px;
border-radius: 4px;
width: 250px;
position: relative;
padding-bottom: 40px;
}
.status-icon {
font-size: 12px;
border-bottom: none;
cursor: default;
position: absolute;
top: 15px;
right: 15px;
}
.project-title {
margin: 0 0 10px 0;
font-size: 16px;
padding-right: 25px;
}
.project-meta {
font-size: 12px;
margin: 10px 0 0 0;
list-style: none;
padding: 0;
}
.project-meta li {
margin: 5px 0;
}
li {
list-style: none !important;
}
abbr {
border-bottom: none !important;
cursor: default !important;
}
.last-modified {
color: #666;
font-size: 11px;
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
}
`}
</style>
<link rel="stylesheet" href="/src/css/projects.css" />
<h1>Projects</h1>
<ul className="project-grid">
{projects.map(project => (

61
packages/cubby/src/css/projects.css Normal file
View File

@ -0,0 +1,61 @@
.project-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
list-style: none;
padding: 0;
}
.project-card {
border: 1px solid #ccc;
padding: 15px;
border-radius: 4px;
width: 250px;
position: relative;
padding-bottom: 40px;
}
@media (max-width: 600px) {
.project-card {
width: 100%;
}
}
.status-icon {
font-size: 12px;
border-bottom: none !important;
cursor: default !important;
position: absolute;
top: 15px;
right: 15px;
}
.project-title {
margin: 0 0 10px 0;
font-size: 16px;
padding-right: 25px;
}
.project-meta {
font-size: 12px;
margin: 10px 0 0 0;
list-style: none;
padding: 0;
}
.project-meta li {
margin: 5px 0;
}
.last-modified {
color: #666;
font-size: 11px;
position: absolute;
bottom: 15px;
left: 15px;
right: 15px;
}
li {
list-style: none !important;
}