finished restyling; ready to deploy
This commit is contained in:
parent
9c8f88a973
commit
b74ceb69e0
2
.gitignore
vendored
2
.gitignore
vendored
@ -1 +1 @@
|
|||||||
.DS_Store
|
.DS_Store
|
||||||
|
|||||||
@ -8,8 +8,7 @@ pipeline:
|
|||||||
key:
|
key:
|
||||||
from_secret: DOPrivateKey
|
from_secret: DOPrivateKey
|
||||||
target: /u/jsquotes
|
target: /u/jsquotes
|
||||||
source: .
|
source: ./src
|
||||||
overwrite: true
|
|
||||||
|
|
||||||
restart:
|
restart:
|
||||||
image: appleboy/drone-ssh
|
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.
BIN
src/assets/fonts/Fantasque Sans Mono Bold Nerd Font Complete.ttf
Normal file
BIN
src/assets/fonts/Fantasque Sans Mono Bold Nerd Font Complete.ttf
Normal file
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 |
71
src/css/styles.less
Normal file
71
src/css/styles.less
Normal 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
34
src/index.html
Normal 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">
|
||||||
|
©<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 iteratorID = 0;
|
||||||
let currQuote;
|
let currQuote;
|
||||||
|
|
||||||
fetch("FavouriteQuotes.json")
|
fetch("assets/FavouriteQuotes.json")
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
return response.json();
|
return response.json();
|
||||||
})
|
})
|
||||||
@ -30,4 +30,4 @@ function getQuote(data) {
|
|||||||
let noQuotes = Object.entries(data).length;
|
let noQuotes = Object.entries(data).length;
|
||||||
let randNo = Math.floor(Math.random() * noQuotes);
|
let randNo = Math.floor(Math.random() * noQuotes);
|
||||||
return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
|
return data[randNo].quote + "\n\n" + data[randNo].author.replace(/"/g, '');
|
||||||
}
|
}
|
||||||
23
src/js/layout.js
Normal file
23
src/js/layout.js
Normal 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++;
|
||||||
|
}
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user