diff --git a/index.html b/index.html index 1d1bc4b..e25aee2 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,15 @@ Celebrating Christmas! + + + -
+
+
+

Loading...

+
+
\ No newline at end of file diff --git a/json/quotes.json b/json/quotes.json new file mode 100644 index 0000000..8d1cf21 --- /dev/null +++ b/json/quotes.json @@ -0,0 +1,24 @@ +{ + "christmasQuotes": [ + { + "quote": "You can mess with a lot of things, but you can't mess with kids on Christmas", + "attribution": "Kevin McCallister, \"Home Alone 2: Lost in New York\"" + }, + { + "quote": "I never thought it was such a bad little tree. It’s not bad at all really. Maybe it just needs a little love.", + "attribution": "Charlie Brown, \"A Charlie Brown Christmas\"" + }, + { + "quote": "Christmas was on its way. Lovely, glorious, beautiful Christmas, upon, which the entire kid year revolved.", + "attribution": "Ralphie, \"A Christmas Story\"" + }, + { + "quote": "Just remember, the true spirit of Christmas lies in your heart.", + "attribution": "Santa, \"The Polar Express\"" + }, + { + "quote": "Seeing is believing, but sometimes the most real things in the world are the things we can’t see.", + "attribution": "Conductor, \"The Polar Express\"" + } + ] +} \ No newline at end of file diff --git a/pages/home.html b/pages/home.html new file mode 100644 index 0000000..06b921f --- /dev/null +++ b/pages/home.html @@ -0,0 +1,3 @@ +

+ Merry Christmas! +

\ No newline at end of file diff --git a/static/site.css b/static/site.css new file mode 100644 index 0000000..d736420 --- /dev/null +++ b/static/site.css @@ -0,0 +1,119 @@ +/* Imports */ +@import url('https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Mountains+of+Christmas:wght@400;700&family=Pompiere&family=Short+Stack&display=swap'); + +/* Properties */ + +/* HTML Tags*/ + +html { + margin: 0; + padding: 0; + background: #FF0000; + background: linear-gradient(180deg,rgba(255, 0, 0, 0.75) 0%, rgba(99, 2, 2, 1) 15%, rgba(2, 99, 2, 1) 85%, rgba(0, 255, 0, 0.75) 100%); + scroll-behavior: smooth; +} + +body { + margin: 0; + padding: 0; + width: 100vw; + height: 100vh; + display: flex; + font-family: sans-serif; +} + +/* Attributes */ + +/* Classes */ + +.main { + margin: auto; + width: 65vw; + height: 65vh; + background: rgba(255,255,255,.25); + padding: 10px; + border-radius: 5px; + box-shadow: 0 0 25px rgba(0,0,0,0.5); + overflow-y: auto; +} + +.body-content { + font-family: "Pompiere", sans-serif; + font-size: 2em; + color: white; + text-shadow: 0 0 5px black; + user-select: none; +} + +.loading { + text-align: center; + text-decoration-style: wavy; + margin: 0; + padding: 0; +} + +.site-title { + font-family: "Mountains of Christmas", serif; + font-size: 3em; + font-weight: bold; + text-align: center; + color: rgba(200,255,200,1); + text-shadow: 0 0 15px rgba(99, 2, 2, 1); +} + +/* ===== Scrollbar CSS ===== */ +/* Firefox */ +* { + scrollbar-width: auto; + scrollbar-color: rgba(2, 99, 2, 1) rgba(99, 2, 2, 1); +} + +/* Chrome, Edge, and Safari */ +*::-webkit-scrollbar { + width: 16px; +} + +*::-webkit-scrollbar-track { + background: rgba(99, 2, 2, 1); +} + +*::-webkit-scrollbar-thumb { + background-color: rgba(2, 99, 2, 1); + border-radius: 10px; + border: 3px solid rgba(235, 220, 35, 1); +} + +/* + Google Font Notes +*/ + + +.short-stack-regular { + font-family: "Short Stack", cursive; + font-weight: 400; + font-style: normal; +} + +.pompiere-regular { + font-family: "Pompiere", sans-serif; + font-weight: 400; + font-style: normal; +} + +.mountains-of-christmas-regular { + font-family: "Mountains of Christmas", serif; + font-weight: 400; + font-style: normal; +} + +.mountains-of-christmas-bold { + font-family: "Mountains of Christmas", serif; + font-weight: 700; + font-style: normal; +} + +.berkshire-swash-regular { + font-family: "Berkshire Swash", serif; + font-weight: 400; + font-style: normal; +} \ No newline at end of file