finished restyling; ready to deploy
This commit is contained in:
parent
9c8f88a973
commit
b74ceb69e0
|
|
@ -1 +1 @@
|
|||
.DS_Store
|
||||
.DS_Store
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@ pipeline:
|
|||
key:
|
||||
from_secret: DOPrivateKey
|
||||
target: /u/jsquotes
|
||||
source: .
|
||||
overwrite: true
|
||||
source: ./src
|
||||
|
||||
restart:
|
||||
image: appleboy/drone-ssh
|
||||
|
|
|
|||
22
index.html
22
index.html
|
|
@ -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">
|
||||
©<span id="jsyear"></span> Camille Frantz (<a href="https://github.com/fyrfli" target="_blank">@fyrfli</a>).
|
||||
</footer>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">
|
||||
©<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>
|
||||
|
|
@ -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, '');
|
||||
}
|
||||
}
|
||||
|
|
@ -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++;
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue