finished restyling; ready to deploy

This commit is contained in:
Camille Frantz 2023-01-22 09:37:03 -06:00
parent 9c8f88a973
commit b74ceb69e0
No known key found for this signature in database
26 changed files with 132 additions and 27 deletions

2
.gitignore vendored
View File

@ -1 +1 @@
.DS_Store
.DS_Store

View File

@ -8,8 +8,7 @@ pipeline:
key:
from_secret: DOPrivateKey
target: /u/jsquotes
source: .
overwrite: true
source: ./src
restart:
image: appleboy/drone-ssh

View File

@ -1,22 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>read quote</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</head>
<body>
<div class="display">
<div class="quote"></div>
</div>
<footer class="footer">
&copy;<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>).
</footer>
<script src="app.js"></script>
</body>
</html>

View File

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

71
src/css/styles.less Normal file
View File

@ -0,0 +1,71 @@
* {
margin: 0;
padding: 0;
border: 0;
list-style: none;
text-decoration: none;
border: none;
box-sizing: border-box;
}
body {
// font-family: "Fantasque", monospace;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 16px;
background-color: beige;
color: #0c024d;
margin: 2rem auto;
}
.header {
display: flex;
justify-content: space-between;
gap: 20px;
width: 85%;
align-items: center;
margin: auto;
}
.hdr-img {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 1px 3px 5px lightgrey;
}
.hdr-h1 {
font-size: 2rem;
text-align: center;
}
.container {
width: 90%;
margin: 2rem auto;
}
.quotes {
border: 1px solid lightgrey;
border-radius: 14px;
box-shadow: 1px 3px 5px #d6d6a3;
padding: 1rem;
columns: 300px;
column-gap: auto;
column-fill: balance;
margin: auto;
}
.quote {
background: linear-gradient(to bottom right, #0c024d, #0dbcc5);
background-attachment: fixed;
color: beige;
border: 1px solid lightgrey;
border-radius: 14px;
box-shadow: 1px 3px 5px lightgrey;
margin: 12px;
padding: 1rem;
max-width: 340px;
display: inline-block;
}
.footer {
font-size: 0.8rem;
text-align: center;
margin-top: 1rem;
}

34
src/index.html Normal file
View File

@ -0,0 +1,34 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>read quote</title>
<link rel="shortcut icon" href="./assets/img/favicon.ico" type="image/x-icon">
<link rel="stylesheet/less" type="text/css" href="/css/styles.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>
</head>
<body>
<header class="header">
<img src="https://cdn.fyrfli.link/i/hat-small.png"
alt="close-up of a black woman in a trilby, eyes down, the hat covering most of her face" class="hdr-img">
<h1 class="hdr-h1">fyrfli's quote library</h1>
</header>
<main class="container">
<article class="debug"></article>
<article class="quotes"></article>
</main>
<footer class="footer">
&copy;<span id="jsyear"></span> Camille (<a href="https://fyrfli.dev/fyrfli" target="_blank">@fyrfli</a>) Frantz.
</footer>
<!-- <script src="app.js"></script> -->
<script src="js/layout.js"></script>
</body>
</html>

View File

@ -10,7 +10,7 @@ let intervalID;
let iteratorID = 0;
let currQuote;
fetch("FavouriteQuotes.json")
fetch("assets/FavouriteQuotes.json")
.then((response) => {
return response.json();
})
@ -30,4 +30,4 @@ function getQuote(data) {
let noQuotes = Object.entries(data).length;
let randNo = Math.floor(Math.random() * noQuotes);
return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
}
}

23
src/js/layout.js Normal file
View File

@ -0,0 +1,23 @@
'use strict';
// Full year for footer
const todayDate = new Date();
jsyear.innerText = todayDate.getFullYear();
const quoteDisplay = document.querySelector(".quotes");
const debugDisplay = document.querySelector(".debug");
let i = 0;
let quote_section = "";
fetch("assets/FavouriteQuotes.json")
.then((response) => {
return response.json();
})
.then((data) => {
while (i < Object.entries(data).length) {
quote_section = document.createElement("section")
quote_section.className = "quote";
quote_section.innerText = "\"" + data[i].quote + "\"\n\n" + data[i].author;
quoteDisplay.appendChild(quote_section);
i++;
}
});