Commit missed files from previous commit

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>

stylesheets/cards.css

@@ -0,0 +1,313 @@
+/**
+ * Styles for CSS Playing Cards
+ *
+ * @author   Anika Henke <[email protected]> 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; }

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;
+}

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;
+}
+

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;
+  }
+}