From ed3a2fc8aeb2e5eb2b99925c9a2613f091355083 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Thu, 23 Apr 2020 20:47:55 -0400 Subject: those weren't the modals she's looking for... --- src/scss/flash-card.scss | 38 +++++++++++++++++ src/scss/flip-card.scss | 31 -------------- src/scss/index.scss | 108 +++++++++++++++++++++++++---------------------- 3 files changed, 96 insertions(+), 81 deletions(-) create mode 100644 src/scss/flash-card.scss delete mode 100644 src/scss/flip-card.scss (limited to 'src/scss') diff --git a/src/scss/flash-card.scss b/src/scss/flash-card.scss new file mode 100644 index 0000000..5ba4ce9 --- /dev/null +++ b/src/scss/flash-card.scss @@ -0,0 +1,38 @@ +.flash-card { + background-color: transparent; + width: 100%; + height: 200px; + perspective: 1000px; +} + +.flash-card-inner { + position: relative; + width: 100%; + height: 100%; + text-align: center; + transition: transform 0.5s; + transform-style: preserve-3d; +} + +.flash-card:hover .flash-card-inner { + transform: rotateY(180deg); +} + +.flash-card-front, +.flash-card-back { + position: absolute; + width: 100%; + height: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; +} + +.flash-card-front { + border-radius: $box-radius; + line-height: 150px; +} + +.flash-card-back { + border-radius: $box-radius; + transform: rotateY(180deg); +} diff --git a/src/scss/flip-card.scss b/src/scss/flip-card.scss deleted file mode 100644 index 1f9af5b..0000000 --- a/src/scss/flip-card.scss +++ /dev/null @@ -1,31 +0,0 @@ -.flip-card { - perspective: 1000px; -} - -.flip-card-inner { - position: relative; - width: 100%; - height: 100%; - transition: transform 0.8s; - transform-style: preserve-3d; -} - -.flip-card:hover .flip-card-inner { - transform: rotateY(180deg); -} - -.flip-card-front, .flip-card-back { - position: absolute; - width: 100%; - height: 100%; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; -} - -.flip-card-front { -} - -.flip-card-back { - transform: rotateY(180deg); -} - diff --git a/src/scss/index.scss b/src/scss/index.scss index 59aac49..79ed71d 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -1,7 +1,7 @@ @charset "utf-8"; // Google Fonts -@import url('https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap'); +@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap"); // Palette $darkteal: rgb(0, 100, 108); @@ -43,84 +43,92 @@ $body-font-size: 1.25rem; // Palette .darkteal { - background-color: $darkteal; - color: white; + background-color: $darkteal; + border: 1em solid $darkgray; + color: white; } .green { - background-color: $green; - color: white; + background-color: $green; + border: 1em solid $darkgray; + color: white; } .darkerteal { - background-color: $darkerteal; - color: white; -} -.gray { - background-color: $gray; - color: white; -} -.teal { - background-color: $teal; - color: white; -} -.cyan { - background-color: $cyan; - color: white; + background-color: $darkerteal; + border: 1em solid $darkgray; + color: white; } .darkgray { - background-color: $darkgray; - color: white; + background-color: $darkgray; + border: 1em solid $darkgray; + color: white; } .darkgreen { - background-color: $darkgreen; - color: white; -} -.yellow { - background-color: $yellow; - color: white; + background-color: $darkgreen; + border: 1em solid $darkgray; + color: white; } .blurb { - background-color: white; - clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%); + background-color: white; + clip-path: polygon( + 0% 0%, + 100% 0%, + 100% 75%, + 75% 75%, + 75% 100%, + 50% 75%, + 0% 75% + ); } .banner { - right: 100%; - padding-top: 5%; - padding-bottom: 5%; - padding-right: 5%; + right: 100%; + padding-top: 5%; + padding-bottom: 5%; + padding-right: 5%; - // gradient - background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%); - background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); - background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 50%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); + // gradient + background: -moz-linear-gradient( + left, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + background: -webkit-linear-gradient( + left, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + background: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 50% + ); + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } .has-banner { - //margin-top: 0px !important; - //margin-bottom: 0px !important; - padding-top: 0px !important; - padding-bottom: 0px !important; - padding-right: 0px !important; - padding-left: 10% !important; - + //margin-top: 0px !important; + //margin-bottom: 0px !important; + padding-top: 0px !important; + padding-bottom: 0px !important; + padding-right: 0px !important; + padding-left: 10% !important; } .quiet { - background-color: white; + background-color: white; } .fawnseh { - font-family: 'Architects Daughter', cursive; + font-family: "Architects Daughter", cursive; } .has-text-shadow { - text-shadow: 0px 0px 4px #ffffff; + text-shadow: 0px 0px 4px #ffffff; } body { - background-image: url("/bg.png"); + background-image: url("/bg.png"); } -@import "./flip-card.scss"; +@import "./flash-card.scss"; -- cgit v1.2.3