zaire/campfire
1
0
Fork 0
forked from blisstown/campfire
Code Pull requests Activity

first commit! 🎉

Browse source
This commit is contained in:
ari melody 2024-06-16 07:31:16 +01:00
commit 8dc8190cdf
Signed by: ari
GPG key ID: CF99829C92678188
12 changed files with 1327 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

240
public/css/style.css Normal file
View file

@ -0,0 +1,240 @@
:root {
--fg0: #eee;
--bg0: #080808;
--bg1: #101010;
--bg2: #121212;
--accent: #b7fd49;
}
body {
margin: 0;
padding: 0;
background-color: var(--bg0);
color: var(--fg0);
font-family: "Inter", sans-serif;
}
#feed {
width: 720px;
margin: 0 auto;
background-color: var(--bg1);
}
.post-container {
padding: 20px 32px;
border-bottom: 1px solid #8884;
transition: background-color .1s;
}
.post-container:hover {
background-color: var(--bg2);
}
.post-context {
margin-bottom: 8px;
padding-left: 58px;
display: flex;
flex-direction: row;
align-items: center;
color: var(--accent);
opacity: .8;
transition: opacity .1s;
}
.post-container:hover .post-context {
opacity: 1;
}
.post-context-icon {
margin-right: 4px;
}
.post-context a,
.post-context a:visited,
.post-header-container a,
.post-header-container a:visited {
color: inherit;
text-decoration: none;
}
.post-context a:hover,
.post-header-container a:hover {
text-decoration: underline;
}
.post-context-time {
margin-left: auto;
}
article.post { /* ... */ }
.post-header-container {
display: flex;
flex-direction: row;
}
.post-avatar-container {
margin-right: 12px;
}
.post-avatar {
border-radius: 8px;
box-shadow: 2px 2px #0004;
/* transition: transform .2s ease-out; */
}
/* .post-avatar:hover { */
/* transform: scale(1.1); */
/* } */
.post-header {
display: flex;
flex-grow: 1;
flex-direction: row;
}
.post-info {
margin-left: auto;
}
.post-user-info a {
display: block;
}
.post-body {
margin-top: 8px;
}
.post-media-container {
margin-top: 8px;
display: grid;
grid-gap: 8px;
}
.post-media-container[data-count="1"] {
grid-template-rows: 1fr;
}
.post-media-container[data-count="2"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
}
.post-media-container[data-count="3"] {
grid-template-columns: 1fr .5fr;
grid-template-rows: 1fr 1fr;
}
.post-media-container[data-count="4"] {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.post-media {
border-radius: 12px;
background-color: #000;
overflow: hidden;
}
.post-media a {
width: 100%;
height: 100%;
display: block;
cursor: zoom-in;
}
.post-media a img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.post-media-container > :nth-child(1) {
grid-column: 1/2;
grid-row: 1/2;
}
.post-media-container[data-count="3"] > :nth-child(1) {
grid-row: 1/3;
}
.post-media-container > :nth-child(2) {
grid-column: 2/2;
grid-row: 1/2;
}
.post-media-container > :nth-child(3) {
grid-column: 1/2;
grid-row: 2/2;
}
.post-media-container[data-count="3"] > :nth-child(3) {
grid-column: 2/2;
grid-row: 2/2;
}
.post-media-container > :nth-child(4) {
grid-column: 2/2;
grid-row: 2/2;
}
.post-container footer {
opacity: .8;
transition: opacity .1s;
}
.post-container:hover footer {
opacity: 1;
}
.post-reactions {
margin-top: 8px;
}
button.reaction {
padding: 6px 8px;
font-size: 1em;
background: none;
color: inherit;
border: none;
border-radius: 8px;
/* transition: transform .1s ease-out; */
}
button.reaction:hover,
.post-actions button:hover {
/* transform: scale(1.1); */
background: #8881;
}
button.reaction:active,
.post-actions button:active {
/* transform: scale(.95); */
background: #0001;
}
button.reaction.active,
.post-actions button.active {
background: var(--accent);
color: var(--bg0);
}
.post-actions {
margin-top: 8px;
}
.post-actions button {
padding: 6px 8px;
font-size: 1em;
background: none;
color: inherit;
border: none;
border-radius: 8px;
transition: transform .1s ease-out;
}
.post-actions button .count {
opacity: .5;
}