From ca999deb0fdaf2592760e28f540554299e420bd3 Mon Sep 17 00:00:00 2001 From: "Adam T. Carpenter" Date: Tue, 2 Jun 2020 23:42:45 -0400 Subject: good layout for content data; rebuild nearly complete --- styles/index.scss | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 144 insertions(+) create mode 100644 styles/index.scss (limited to 'styles/index.scss') diff --git a/styles/index.scss b/styles/index.scss new file mode 100644 index 0000000..ee298cc --- /dev/null +++ b/styles/index.scss @@ -0,0 +1,144 @@ +@charset "utf-8"; + +// Google Fonts +@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Indie+Flower|PT+Sans&display=swap"); + +// Palette +$darkteal: rgb(0, 100, 108); +$green: rgb(88, 169, 143); +$darkerteal: rgb(29, 133, 137); +$gray: rgb(157, 210, 211); +$teal: rgb(58, 165, 166); +$cyan: rgb(156, 210, 210); +$darkgray: rgb(127, 177, 181); +$darkgreen: rgb(59, 136, 114); +$yellow: rgb(186, 214, 187); + +// Update Bulma's global variables +$primary: $teal; +$link: $darkteal; +// $info: $cyan +$success: $green; +// $warning: $yellow +// $danger: $red +// $dark: $grey-darker +// $text: $grey-dark +$family-sans-serif: "PT Sans", sans-serif; +// $hr-background-color: $primary; +$title-color: $darkteal; +$title-family: "Architects Daughter", cursive; +$subtitle-color: $darkteal; +$subtitle-family: "Indie Flower", cursive; +//$body-font-size: 1.8rem; +// $body-background-color: $isabelline; + +// Import only what you need from Bulma +@import "../_bulma/node_modules/bulma/sass/utilities/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/base/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/elements/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/form/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/components/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/layout/_all.sass"; +@import "../_bulma/node_modules/bulma/sass/grid/_all.sass"; + +.offering { + color: white; +} +.offering .content u { + cursor: pointer; +} +.column .offering { + border: 1em solid $darkgray; +} +.darkteal { + background-color: $darkteal; +} +.green { + background-color: $green; +} +.darkerteal { + background-color: $darkerteal; +} +.darkgray { + background-color: $darkgray; +} +.darkgreen { + background-color: $darkgreen; +} + +.blurb { + 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%; + + // 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; +} + +.quiet { + background-color: white; +} + +.fawnseh { + font-family: "Architects Daughter", cursive; +} + +.has-text-shadow { + text-shadow: 0px 0px 4px #ffffff; +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.fadeIn { + animation-name: fadeIn; + animation-duration: 0.3s; +} + +body { + background-image: url("/assets/bg.png"); +} -- cgit v1.2.3