smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-04-18 15:31:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: styling complete

Browse source
This commit is contained in:
Smigz 2023-11-22 11:28:14 -05:00
parent b4cc28cb40
commit f801569353
3 changed files with 49 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
library/css/style.css
View file

@ -1,5 +1,8 @@
:root {
--background-color: #000000;
--background-color: #DBDADD;
--card-color: #EFEEF0;
--btn-red-color: #e15252;
--btn-green-color: #7ed7a9;
--spacing-sm: 16px;
--spacing-md: 20px;
}
@ -9,11 +12,16 @@ body, html {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
min-height: 100vh;
background-color: var(--background-color);
}
button {
font-size: 1.3rem;
font-family: inherit;
cursor: pointer;
border: none;
border-radius: 5px;
}
dialog {
@ -43,30 +51,49 @@ dialog {
}
.content {
min-height: 1000px;
min-width: 1000px;
min-width: 1200px;
margin-left: 30px;
}
.book-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(300px, 370px));
gap: 10px;
}
.card {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
gap: 20px;
width: 300px;
min-height: 250px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
padding: 20px;
margin: 20px;
background-color: var(--card-color);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.card p {
font-size: 1.5rem;
padding: 0;
margin: 0;
}
.card>.card-title {
font-weight: 700;
}
.card>.card-author {
font-weight: 300;
}
.modal {
/* display: flex; */
flex-direction: column;
@ -117,8 +144,18 @@ dialog {
.close-btn {
height: 30px;
align-self: center;
padding: 4px;
}
.btn {
padding: var(--spacing-sm) var(--spacing-md);
}
.red-btn-color {
background-color: var(--btn-red-color);
}
.green-btn-color {
background-color: var(--btn-green-color);
}

2
library/index.html
View file

@ -16,7 +16,7 @@
<body>
<div class="container">
<nav class="navbar">
<h1 class="header">Anonymous BookClub</h1>
<h1 class="header">Anonymous Library</h1>
<button class="show-modal btn">Add Book</button>
</nav>
<div class="content">

8
library/js/script.js
View file

@ -46,8 +46,12 @@ function displayBooks(books) {
const author = document.createElement('p');
author.classList.add('card-author');
const readBtn = document.createElement('button');
readBtn.classList.add('btn','read-btn');
readBtn.textContent = element.read ? "read" : "not read";
const readBtnFlag = element.read ? "read" : "not read";
const readBtnColor = element.read ? "green-btn-color" : "red-btn-color";
console.log(readBtnColor, element.read, readBtnFlag);
readBtn.classList.add('btn','read-btn',readBtnColor);
readBtn.textContent = readBtnFlag;
const deleteBtn = document.createElement('button');
deleteBtn.classList.add('btn', 'delete-btn')
deleteBtn.textContent = 'delete book';