hnasheralneam/profile-site
1
0
Fork 0
mirror of https://github.com/hnasheralneam/hnasheralneam.github.io.git synced 2025-05-22 14:49:50 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add guestbook

Browse source
This commit is contained in:
Hamza Nasher-Alneam 2024-12-17 22:08:01 -05:00
parent 6a917cb574
commit 9dab44d852
5 changed files with 284 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

188
styles/guestbook.css Normal file
View file

@ -0,0 +1,188 @@
.guestbook {
padding-top: 2rem;
position: relative;
}
.guestbook * {
font-family: "Comic Sans MS", "Comic Sans", cursive;
}
.guestbook .messages {
margin: 1rem 0;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
text-align: center;
}
.guestbook .messages::-webkit-scrollbar {
display: none;
}
.guestbook .card {
display: inline-block;
margin: 0 .3rem;
min-height: 14rem;
min-width: 20rem;
max-width: 25rem;
/* max-width: 700px; */
border: solid .2rem var(--theme-color);
border-radius: 1rem;
white-space: wrap;
vertical-align: top;
margin-bottom: .8rem;
padding: 1rem;
display: inline-flex;
justify-content: center;
align-items: center;
}
.guestbook .card .message {
margin: 0;
font-size: 1.4rem;
}
.guestbook .card .name {
text-decoration: none;
}
.guestbook .card .name:hover {
text-decoration: underline;
}
.guestbook .card i {
font-size: .9rem;
color: #888;
font-style: italic;
}
.guestbook .post-button {
position: absolute;
top: 0;
right: 0;
}
.guestbook .show-all-messages {
margin: auto;
text-align: center;
}
.guestbook .guestbook-title {
position: absolute;
top: 0;
left: 0;
font-size: 1.5rem;
line-height: 1rem;
padding-bottom: 2rem;
}
.new-message-container {
position: fixed;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
background-color: #eeeeee88;
backdrop-filter: blur(.2rem);
pointer-events: none;
opacity: 0;
transition: .2s;
}
.new-message {
padding: 2rem;
border-radius: 2rem;
background-color: #ddddddaa;
box-shadow: 0 0 .2rem #999;
backdrop-filter: blur(.5rem);
text-align: center;
}
.new-message .message-header {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.new-message textarea {
min-width: 20rem;
min-height: 6rem;
margin: 1rem 0;
padding: .5rem;
font-size: 1.2rem;
box-sizing: border-box;
border-radius: 1rem;
background-color: #fff;
border: solid .2rem #aaa;
color: #222;
transition: .2s;
}
.new-message textarea:focus {
outline: none;
border-color: var(--theme-color);
}
.new-message .text-label {
margin: 4rem;
}
.new-message input.text {
padding: .3rem .6rem;
font-size: 1rem;
box-sizing: border-box;
border-radius: 1rem;
background-color: #fff;
border: solid .2rem #aaa;
color: #222;
transition: .2s;
}
.new-message input.text:focus {
outline: none;
border-color: var(--theme-color);
}
.new-message input[type="submit"] {
padding: .3rem .6rem;
font-size: 1rem;
box-sizing: border-box;
border-radius: 1rem;
background-color: var(--theme-color);
color: white;
border: none;
cursor: pointer;
transition: .2s;
}
.new-message input[type="submit"]:active {
transform: scale(.95);
}
@media (prefers-color-scheme: dark) {
.new-message-container {
background-color: #00000088;
}
.new-message {
background-color: #222222aa;
box-shadow: 0 0 .2rem #444;
}
.new-message textarea {
background-color: #111;
border: solid .2rem #333;
color: #fff;
}
.new-message input.text {
background-color: #111;
border: solid .2rem #333;
color: #fff;
}
}