edited footer and readme

README.md

@@ -7,11 +7,12 @@ All notes are visible in the main panel. However, clicking on a note allows to s
 
 Additionally, the tool's settings options allow to:
 
-- generate a random, inspirational quote (used external API),
+- generate a random, inspirational quote (used external API) that changes every hour,
+- pin a note to the top of a list,
 - change theme,
 - delete all notes.
 
-Tool also gives instructions for the first entry of new note, in the form of arrows and comments that dissapear on creation of a second note.
+Tool also gives instructions for the first entry of new note, in the form of arrows and comments, that dissapear on creation of a second note.
 
 Notes and theme settings are stored in a local storage.
 

index.html

@@ -7,7 +7,7 @@
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
- href="https://fonts.googleapis.com/css2?family=Roboto&family=Sail&display=swap"
+ href="https://fonts.googleapis.com/css2?family=Playfair+Display&family=Roboto&display=swap"
  rel="stylesheet"
  />
  <link rel="shortcut icon" type="image/x-icon" href="img/plus.svg" />
@@ -62,6 +62,17 @@
 
  <footer class="footer">
  <p>Notes 'n Quotes</p>
+ <div class="footer__logo">
+ <span>made by:</span>
+ <a
+ class="footer__logo"
+ href="https://bartosz.website/"
+ target="_blank"
+ rel="noopener noreferrer"
+ >
+ <img src="/img/logo.png" alt="" srcset="" />
+ </a>
+ </div>
  </footer>
  </body>
 </html>

style.css

@@ -2,7 +2,7 @@
 
 :root {
  --ff-primary: "Roboto", sans-serif;
- --ff-display: "Sail", cursive;
+ --ff-display: "Playfair Display", serif;
  --fs-xl: clamp(3.5rem, 6vw + 1rem, 5rem);
  --fs-600: clamp(3.25rem, 6vw + 1rem, 4rem);
  --fs-500: 2rem;
@@ -50,6 +50,7 @@ body {
  grid-gap: 2rem;
  font-size: calc(15px + 0.2vw);
  font-family: var(--ff-primary);
+ color: var(--color-black);
  font-weight: 400;
  line-height: 1.6;
  text-rendering: optimizeSpeed;
@@ -123,9 +124,6 @@ table {
 p {
  max-width: 70ch;
 }
-p:not(:last-child) {
- margin-bottom: 1rem;
-}
 
 fieldset {
  display: grid;
@@ -338,13 +336,22 @@ fieldset {
 
 .footer {
  align-self: end;
+ display: flex;
+ justify-content: space-between;
  padding: 1rem;
- line-height: 0.9;
- display: grid;
- justify-content: center;
  font-family: var(--ff-display);
- font-size: var(--fs-500);
- color: #d6e5e5;
+ font-size: var(--fs-400);
+ color: var(--color-white);
+}
+
+.footer__logo {
+ display: flex;
+ grid-gap: 1rem;
+ justify-self: end;
+}
+
+.footer__logo > img {
+ width: 10rem;
 }
 
 /* modal form */