smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-06-28 04:45:36 -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
Download patch file Download diff file Expand all files Collapse all files

47
library/css/style.css
View file

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

8
library/js/script.js
View file

@ -46,8 +46,12 @@ function displayBooks(books) {
const author = document.createElement('p'); const author = document.createElement('p');
author.classList.add('card-author'); author.classList.add('card-author');
const readBtn = document.createElement('button'); const readBtn = document.createElement('button');
readBtn.classList.add('btn','read-btn'); const readBtnFlag = element.read ? "read" : "not read";
readBtn.textContent = 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'); const deleteBtn = document.createElement('button');
deleteBtn.classList.add('btn', 'delete-btn') deleteBtn.classList.add('btn', 'delete-btn')
deleteBtn.textContent = 'delete book'; deleteBtn.textContent = 'delete book';