From a5c5af2149eedfebcb7ac07f1dbc2fb19ec4739d Mon Sep 17 00:00:00 2001
From: Sean Morton <smorton517@gmail.com>
Date: Wed, 7 Jul 2021 18:52:54 -0700
Subject: [PATCH] Commit missed files from previous commit

---
 .../brandon_grotesque.woff                    | Bin
 .../brandon_grotesque.woff2                   | Bin
 courtyard.png => images/courtyard.png         | Bin
 fern_canyon.jpg => images/fern_canyon.jpg     | Bin
 oxford.png => images/oxford.png               | Bin
 residence.png => images/residence.png         | Bin
 us.jpg => images/us.jpg                       | Bin
 rsvp.html                                     |  11 +-
 stylesheets/cards.css                         | 313 ++++++++++++++++++
 stylesheets/desktop_menu.css                  |  14 +
 stylesheets/fonts.css                         |   6 +
 stylesheets/media.css                         |  23 ++
 stylesheets/mobile_menu.css                   | 130 ++++++++
 stylesheets/style.css                         | 104 ++++++
 14 files changed, 598 insertions(+), 3 deletions(-)
 rename brandon_grotesque.woff => fonts/brandon_grotesque.woff (100%)
 rename brandon_grotesque.woff2 => fonts/brandon_grotesque.woff2 (100%)
 rename courtyard.png => images/courtyard.png (100%)
 rename fern_canyon.jpg => images/fern_canyon.jpg (100%)
 rename oxford.png => images/oxford.png (100%)
 rename residence.png => images/residence.png (100%)
 rename us.jpg => images/us.jpg (100%)
 create mode 100644 stylesheets/cards.css
 create mode 100644 stylesheets/desktop_menu.css
 create mode 100644 stylesheets/fonts.css
 create mode 100644 stylesheets/media.css
 create mode 100644 stylesheets/mobile_menu.css
 create mode 100644 stylesheets/style.css

diff --git a/brandon_grotesque.woff b/fonts/brandon_grotesque.woff
similarity index 100%
rename from brandon_grotesque.woff
rename to fonts/brandon_grotesque.woff
diff --git a/brandon_grotesque.woff2 b/fonts/brandon_grotesque.woff2
similarity index 100%
rename from brandon_grotesque.woff2
rename to fonts/brandon_grotesque.woff2
diff --git a/courtyard.png b/images/courtyard.png
similarity index 100%
rename from courtyard.png
rename to images/courtyard.png
diff --git a/fern_canyon.jpg b/images/fern_canyon.jpg
similarity index 100%
rename from fern_canyon.jpg
rename to images/fern_canyon.jpg
diff --git a/oxford.png b/images/oxford.png
similarity index 100%
rename from oxford.png
rename to images/oxford.png
diff --git a/residence.png b/images/residence.png
similarity index 100%
rename from residence.png
rename to images/residence.png
diff --git a/us.jpg b/images/us.jpg
similarity index 100%
rename from us.jpg
rename to images/us.jpg
diff --git a/rsvp.html b/rsvp.html
index 657829e..475266d 100644
--- a/rsvp.html
+++ b/rsvp.html
@@ -48,8 +48,13 @@
     </div>
   </nav>
   <div class="content">
-    <div class="contentSection">
-      <h3>Coming soon!</h3>
-    </div>
+    <iframe
+      src="http://localhost:3000/"
+      title="RSVP"
+      height="100%"
+      width="100%"
+      referrerpolicy="no-referrer"
+      loading="eager"
+    />
   </div>
 </body>
diff --git a/stylesheets/cards.css b/stylesheets/cards.css
new file mode 100644
index 0000000..45dbbf9
--- /dev/null
+++ b/stylesheets/cards.css
@@ -0,0 +1,313 @@
+/**
+ * Styles for CSS Playing Cards
+ *
+ * @author   Anika Henke <anika@selfthinker.org> and Sean Morton (modified from Anika's original)
+ * @license  CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
+ * @version  2019-10-29
+ * @link     http://selfthinker.github.com/CSS-Playing-Cards/
+ */
+
+/* card itself
+********************************************************************/
+.playingCards .card {
+    display: inline-block;
+    width: 150px;
+    height: 225px;
+    border: 1px solid #555;
+    border-radius: .3em;
+    -moz-border-radius: .3em;
+    -webkit-border-radius: .3em;
+    -khtml-border-radius: .3em;
+    padding: 1em;
+    margin: 0 .5em .5em 0;
+    font-weight: normal;
+    font-family: Arial, sans-serif;
+    position: relative;
+    background-color: #fff;
+    overflow: auto;
+}
+
+.playingCards a.card {
+    text-decoration: none;
+}
+.playingCards label.card {
+    cursor: pointer;
+}
+
+/* suit colours
+********************************************************************/
+
+.playingCards .card.diams {
+    color: #f00 !important;
+}
+.playingCards .card.hearts {
+    color: #f00 !important;
+}
+.playingCards .card.spades {
+    color: #000 !important;
+}
+.playingCards .card.clubs {
+    color: #000 !important;
+}
+.playingCards .card.joker {
+    color: #000 !important;
+}
+.playingCards .card.joker.big {
+    color: #f00 !important;
+}
+
+/* inner bits
+********************************************************************/
+
+/* top left main info (rank and suit) */
+
+.playingCards .card .rank,
+.playingCards .card .suit {
+    display: block;
+    line-height: 1;
+    text-align: left;
+}
+.playingCards .card .rank {
+}
+.playingCards .card .suit {
+    line-height: .7;
+}
+
+/* joker (top left symbol) */
+.playingCards .card.joker .rank {
+    position: absolute;
+}
+.playingCards .card.joker .rank:before {
+    content: "\2605";
+    top: 0;
+    left: 0;
+}
+.playingCards .card.joker .suit {
+    text-indent: -9999px;
+}
+
+/* inner card container */
+.playingCards .card .suit:after {
+    display: block;
+    margin-top: -.8em;
+    text-align: center;
+    white-space: pre;
+    line-height: .9;
+    font-size: 1.3em;
+    word-spacing: -.05em;
+}
+
+/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
+.playingCards .card.hearts .suit:after {
+    word-spacing: -.15em;
+}
+.playingCards .card.hearts.rank-10 .suit:after {
+    word-spacing: -.05em;
+    letter-spacing: -.1em;
+}
+.playingCards .card.clubs.rank-10 .suit:after {
+    word-spacing: -.15em;
+}
+
+
+/*____________ symbols in the middle (faces as images) ____________*/
+
+.playingCards.faceImages .card.rank-j .suit:after,
+.playingCards.faceImages .card.rank-q .suit:after,
+.playingCards.faceImages .card.rank-k .suit:after {
+    content: '';
+}
+.playingCards.faceImages .card.rank-j,
+.playingCards.faceImages .card.rank-q,
+.playingCards.faceImages .card.rank-k,
+.playingCards.faceImages .card.joker {
+    background-repeat: no-repeat;
+    background-position: -1em 0;
+    /* @change: smaller cards: more negative distance from the left
+       bigger cards: 0 or more positive distance from the left */
+
+    /* for a centered full background image:
+    background-position: .35em 0;
+    -moz-background-size: contain;
+    -o-background-size: contain;
+    -webkit-background-size: contain;
+    -khtml-background-size: contain;
+    background-size: contain;
+    */
+}
+
+.playingCards.faceImages .card.rank-j.diams  { background-image: url(faces/JD.gif); }
+.playingCards.faceImages .card.rank-j.hearts { background-image: url(faces/JH.gif); }
+.playingCards.faceImages .card.rank-j.spades { background-image: url(faces/JS.gif); }
+.playingCards.faceImages .card.rank-j.clubs  { background-image: url(faces/JC.gif); }
+
+.playingCards.faceImages .card.rank-q.diams  { background-image: url(faces/QD.gif); }
+.playingCards.faceImages .card.rank-q.hearts { background-image: url(faces/QH.gif); }
+.playingCards.faceImages .card.rank-q.spades { background-image: url(faces/QS.gif); }
+.playingCards.faceImages .card.rank-q.clubs  { background-image: url(faces/QC.gif); }
+
+.playingCards.faceImages .card.rank-k.diams  { background-image: url(faces/KD.gif); }
+.playingCards.faceImages .card.rank-k.hearts { background-image: url(faces/KH.gif); }
+.playingCards.faceImages .card.rank-k.spades { background-image: url(faces/KS.gif); }
+.playingCards.faceImages .card.rank-k.clubs  { background-image: url(faces/KC.gif); }
+
+.playingCards.faceImages .card.joker         { background-image: url(faces/joker.gif); }
+.playingCards.simpleCards .card.rank-j,
+.playingCards.simpleCards .card.rank-q,
+.playingCards.simpleCards .card.rank-k       { background-image: none !important; }
+
+/*____________ symbols in the middle (faces as dingbat symbols) ____________*/
+
+.playingCards.simpleCards .card .suit:after,
+.playingCards .card.rank-j .suit:after,
+.playingCards .card.rank-q .suit:after,
+.playingCards .card.rank-k .suit:after,
+.playingCards .card.rank-a .suit:after,
+.playingCards .card.joker .rank:after {
+    font-family: Georgia, serif;
+    position: absolute;
+    font-size: 3em;
+    right: .1em;
+    bottom: .25em;
+    word-spacing: normal;
+    letter-spacing: normal;
+    line-height: 1;
+}
+.playingCards .card.rank-j .suit:after {
+    content: "\265F";
+    right: .15em;
+}
+.playingCards .card.rank-q .suit:after {
+    content: "\265B";
+}
+.playingCards .card.rank-k .suit:after {
+    content: "\265A";
+}
+/* joker (inner symbol) */
+.playingCards.faceImages .card.joker .rank:after {
+    content: "";
+}
+.playingCards .card.joker .rank:after {
+    position: absolute;
+    content: "\2766";
+    top: .4em;
+    left: .1em;
+}
+
+/* big suits in middle */
+.playingCards.simpleCards .card .suit:after,
+.playingCards .card.rank-a .suit:after {
+    font-family: Arial, sans-serif;
+    line-height: .9;
+    bottom: .35em;
+}
+.playingCards.simpleCards .card.diams .suit:after,
+.playingCards .card.rank-a.diams .suit:after {
+    content: "\2666";
+    right: .4em;
+}
+.playingCards.simpleCards .card.hearts .suit:after,
+.playingCards .card.rank-a.hearts .suit:after {
+    content: "\2665";
+    right: .35em;
+}
+.playingCards.simpleCards .card.spades .suit:after,
+.playingCards .card.rank-a.spades .suit:after {
+    content: "\2660";
+    right: .35em;
+}
+.playingCards.simpleCards .card.clubs .suit:after,
+.playingCards .card.rank-a.clubs .suit:after {
+    content: "\2663";
+    right: .3em;
+}
+
+/*
+/* hover effect for card links
+********************************************************************/
+.playingCards a.card {
+    text-decoration: none;
+}
+/* selected and hover state */
+.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus {
+    bottom: 1em;
+}
+
+/* hand (in your hand or on table or as a deck)
+********************************************************************/
+.playingCards .hand {
+    position: relative;
+    height: 100%;
+}
+
+.playingCards .hand .card {
+    position: absolute;
+}
+
+.playingCards .hand .card:nth-child(1)  { left: 13%; }
+.playingCards .hand .card:nth-child(2)  { left: 25%; }
+.playingCards .hand .card:nth-child(3)  { left: 40%; }
+
+/* rotate cards if rotateHand option is on */
+.playingCards.rotateHand {
+  width: 300px;
+  max-width: 300px;
+  height: 275px;
+}
+
+.playingCards.rotateHand .card {
+  text-align: center;
+}
+
+.playingCards.rotateHand .hand .card:nth-child(1) {
+    -moz-transform: translate(1.9em, 1.9em) rotate(-36deg);
+    -webkit-transform: translate(1.9em, 1.9em) rotate(-36deg);
+    -o-transform: translate(1.9em, 1.9em) rotate(-36deg);
+    transform: translate(1.9em, 1.9em) rotate(-36deg);
+}
+.playingCards.rotateHand .hand .card:nth-child(2) {
+    -moz-transform: translate(1.5em, .5em) rotate(-18deg);
+    -webkit-transform: translate(1.5em, .5em) rotate(-18deg);
+    -o-transform: translate(1.5em, .5em) rotate(-18deg);
+    transform: translate(1.5em, .5em) rotate(-18deg);
+}
+.playingCards.rotateHand .hand .card:nth-child(3) {
+    -moz-transform: translate(1.1em, .3em) rotate(-0deg);
+    -webkit-transform: translate(1.1em, .3em) rotate(-0deg);
+    -o-transform: translate(1.1em, .3em) rotate(-0deg);
+    transform: translate(1.1em, .3em) rotate(-0deg);
+}
+
+/* deck */
+.playingCards ul.deck li:nth-child(1)  { left: 0;    bottom: 0; }
+.playingCards ul.deck li:nth-child(2)  { left: 2px;  bottom: 1px; }
+.playingCards ul.deck li:nth-child(3)  { left: 4px;  bottom: 2px; }
+.playingCards ul.deck li:nth-child(4)  { left: 6px;  bottom: 3px; }
+.playingCards ul.deck li:nth-child(5)  { left: 8px;  bottom: 4px; }
+.playingCards ul.deck li:nth-child(6)  { left: 10px; bottom: 5px; }
+.playingCards ul.deck li:nth-child(7)  { left: 12px; bottom: 6px; }
+.playingCards ul.deck li:nth-child(8)  { left: 14px; bottom: 7px; }
+.playingCards ul.deck li:nth-child(9)  { left: 16px; bottom: 8px; }
+.playingCards ul.deck li:nth-child(10) { left: 18px; bottom: 9px; }
+.playingCards ul.deck li:nth-child(11) { left: 20px; bottom: 10px; }
+.playingCards ul.deck li:nth-child(12) { left: 22px; bottom: 11px; }
+.playingCards ul.deck li:nth-child(13) { left: 24px; bottom: 12px; }
+.playingCards ul.deck li:nth-child(14) { left: 26px; bottom: 13px; }
+.playingCards ul.deck li:nth-child(15) { left: 28px; bottom: 14px; }
+.playingCards ul.deck li:nth-child(16) { left: 30px; bottom: 15px; }
+.playingCards ul.deck li:nth-child(17) { left: 32px; bottom: 16px; }
+.playingCards ul.deck li:nth-child(18) { left: 34px; bottom: 17px; }
+.playingCards ul.deck li:nth-child(19) { left: 36px; bottom: 18px; }
+.playingCards ul.deck li:nth-child(20) { left: 38px; bottom: 19px; }
+.playingCards ul.deck li:nth-child(21) { left: 40px; bottom: 20px; }
+.playingCards ul.deck li:nth-child(22) { left: 42px; bottom: 21px; }
+.playingCards ul.deck li:nth-child(23) { left: 44px; bottom: 22px; }
+.playingCards ul.deck li:nth-child(24) { left: 46px; bottom: 23px; }
+.playingCards ul.deck li:nth-child(25) { left: 48px; bottom: 24px; }
+.playingCards ul.deck li:nth-child(26) { left: 50px; bottom: 25px; }
+.playingCards ul.deck li:nth-child(27) { left: 52px; bottom: 26px; }
+.playingCards ul.deck li:nth-child(28) { left: 54px; bottom: 27px; }
+.playingCards ul.deck li:nth-child(29) { left: 56px; bottom: 28px; }
+.playingCards ul.deck li:nth-child(30) { left: 58px; bottom: 29px; }
+.playingCards ul.deck li:nth-child(31) { left: 60px; bottom: 30px; }
+.playingCards ul.deck li:nth-child(32) { left: 62px; bottom: 31px; }
diff --git a/stylesheets/desktop_menu.css b/stylesheets/desktop_menu.css
new file mode 100644
index 0000000..ee99950
--- /dev/null
+++ b/stylesheets/desktop_menu.css
@@ -0,0 +1,14 @@
+#desktopMenu li {
+  display: inline;
+  padding: 0 10px;
+}
+
+#desktopMenu a {
+  color: #ffd002;
+  transition: color 0.3s ease;
+  text-decoration: none;
+}
+
+#desktopMenu a:hover, #desktopMenu a.current-page {
+  color: #f16c00;
+}
diff --git a/stylesheets/fonts.css b/stylesheets/fonts.css
new file mode 100644
index 0000000..9fc654b
--- /dev/null
+++ b/stylesheets/fonts.css
@@ -0,0 +1,6 @@
+@font-face {
+  font-family:brandon_grotesque;
+  src: url(../fonts/brandon_grotesque.woff2) format("woff2"), url(../fonts/brandon_grotesque.woff) format("woff");
+  font-weight:400;font-style:normal;
+}
+
diff --git a/stylesheets/media.css b/stylesheets/media.css
new file mode 100644
index 0000000..1bb06bc
--- /dev/null
+++ b/stylesheets/media.css
@@ -0,0 +1,23 @@
+/* Desktop */
+@media screen and (min-width: 1024px) {
+  #mobileMenu {
+    display: none;
+  }
+}
+
+/* Mobile */
+@media screen and (max-width: 1023px) {
+  #desktopMenu {
+    display: none;
+  }
+
+  #title {
+    font-size: 32px;
+    margin-left: 20px;
+    padding-bottom: 5px;
+  }
+
+  nav {
+    text-align: left;
+  }
+}
diff --git a/stylesheets/mobile_menu.css b/stylesheets/mobile_menu.css
new file mode 100644
index 0000000..9f7fc38
--- /dev/null
+++ b/stylesheets/mobile_menu.css
@@ -0,0 +1,130 @@
+/*
+ * Adapted from https://codepen.io/erikterwan/pen/EVzeRP, thanks Erik!
+ */
+#mobileMenu
+{
+  display: block;
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 1;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+
+#mobileMenu input
+{
+  display: block;
+  width: 40px;
+  height: 32px;
+  position: absolute;
+  top: -7px;
+  left: -5px;
+  cursor: pointer;
+  opacity: 0; /* hide this */
+  z-index: 2; /* and place it over the hamburger */
+  -webkit-touch-callout: none;
+}
+
+/*
+ * Just a quick hamburger
+ */
+#mobileMenu span
+{
+  background: #ffd002;
+  display: block;
+  width: 33px;
+  height: 4px;
+  margin-bottom: 7px;
+  position: relative;
+  border-radius: 2px;
+  z-index: 1;
+  transform-origin: 4px 0px;
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
+              opacity 0.55s ease;
+}
+
+
+#mobileMenu span:first-child
+{
+  transform-origin: 0% 0%;
+}
+
+#mobileMenu span:nth-last-child(2)
+{
+  transform-origin: 0% 100%;
+}
+
+/*
+ * Transform all the slices of hamburger
+ * into a crossmark.
+ */
+#mobileMenu input:checked ~ span
+{
+  opacity: 1;
+  transform: rotate(45deg) translate(-1px, 0);
+  background: #232323;
+}
+
+/*
+ * But let's hide the middle one.
+ */
+#mobileMenu input:checked ~ span:nth-last-child(3)
+{
+  opacity: 0;
+  transform: rotate(0deg) scale(0.2, 0.2);
+}
+
+/*
+ * Ohyeah and the last one should go the other direction
+ */
+#mobileMenu input:checked ~ span:nth-last-child(2)
+{
+  transform: rotate(-45deg) translate(2px, -2px);
+}
+
+/*
+ * Make this absolute positioned
+ * at the top left of the screen
+ */
+#mobileLinks
+{
+  position: absolute;
+  width: 300px;
+  margin: -100px 0 0 -50px;
+  padding: 50px;
+  padding-top: 125px;
+  background: #cdcdcd;
+  border: 4px ridge #0d2a70;
+  list-style-type: none;
+  -webkit-font-smoothing: antialiased;
+  /* to stop flickering of text in safari */
+  transform-origin: 0% 0%;
+  transform: translate(-100%, 0);
+  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
+}
+
+#mobileLinks li
+{
+  padding: 10px 0;
+  font-size: 22px;
+  border-bottom: 1px solid #232323;
+}
+
+#mobileLinks a {
+  color: #232323;
+}
+
+#mobileLinks a:hover {
+  color: #f16c00;
+}
+
+/*
+ * And let's slide it in from the left
+ */
+#mobileMenu input:checked ~ ul
+{
+  transform: none;
+}
diff --git a/stylesheets/style.css b/stylesheets/style.css
new file mode 100644
index 0000000..eaa0763
--- /dev/null
+++ b/stylesheets/style.css
@@ -0,0 +1,104 @@
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background-image: url("../images/fern_canyon.jpg");
+  background-position: center;
+  background-size: cover;
+  background-repeat: none;
+  font-family: brandon_grotesque;
+  font-size: 22px;
+  text-rendering: optimizeLegibility;
+}
+
+nav {
+  color: #ffd002;
+  background-color: #0d2a70;
+  text-align: center;
+  font-size: 22px;
+}
+
+.content {
+  max-width: 1024px;
+  min-height: 1024px;
+  margin: auto;
+  background-color: #f6f7f6;
+  border: 1px solid #232323;
+}
+
+h2, h3, h4, h5, h6 {
+  text-align: center;
+  margin-bottom: 18px;
+}
+
+p {
+  margin-bottom: 12px;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.contentSection {
+  margin-top: 20px;
+  border-top: 1px solid #232323;
+  border-bottom: 1px solid #232323;
+  background-color: #fefffe;
+  padding: 25px;
+}
+
+.contentSection:first-child {
+  margin-top: 0;
+}
+
+.contentSection.alert {
+  color: red;
+  text-align: center;
+}
+
+.pull-left {
+  float: left;
+  padding-right: 25px;
+}
+
+.pull-right {
+  float: right;
+  padding-left: 25px;
+}
+
+.clear {
+  clear: both;
+  display: block;
+}
+
+#title {
+  text-align: center;
+  font-family: 'Brush Script MT', cursive;
+  font-size: 48px;
+}
+
+#welcomeMessage {
+  text-align: center;
+}
+
+#countdown {
+  font-family: courier;
+  font-size: 16px;
+  color: #00ff00;
+  background-color: #282928;
+  padding: 5px;
+  border: 1px ridge;
+}