nathan/ptcoffee_django
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Revert "Update banner for sale"

Browse Source 
This reverts commit 7462c676d5ebcef2fc5906b0be1b40673db03dae.
This commit is contained in:
Nathan Chapman 2023-09-04 21:40:14 -06:00
parent 1f84389086
commit 8cf25ec8c0
3 changed files with 536 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/images/secret_sunday_sale_banner.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 937 KiB

94
static/styles/main.css
View File

@ -45,11 +45,7 @@ a {
color: var(--fg-color); color: var(--fg-color);
} }
h1, h1, h2, h3, h4, h5 {
h2,
h3,
h4,
h5 {
margin: 0; margin: 0;
font-weight: 700; font-weight: 700;
line-height: 1.3; line-height: 1.3;
@ -77,8 +73,7 @@ h5 {
font-size: 1.2rem; font-size: 1.2rem;
} }
small, small, .text-small {
.text-small {
font-size: 0.833rem; font-size: 0.833rem;
} }
@ -91,7 +86,6 @@ blockquote q {
/*font-weight: bold;*/ /*font-weight: bold;*/
font-size: 1.5rem; font-size: 1.5rem;
} }
blockquote cite { blockquote cite {
display: block; display: block;
} }
@ -137,12 +131,10 @@ table a {
border-collapse: separate; border-collapse: separate;
border-spacing: 0 1rem; border-spacing: 0 1rem;
} }
.form-table th, .form-table th,
.form-table td { .form-table td {
border: none; border: none;
} }
.form-table th, .form-table th,
.form-table td { .form-table td {
padding: 0 1rem 1rem 0; padding: 0 1rem 1rem 0;
@ -185,8 +177,8 @@ input[type=checkbox] {
accent-color: var(--yellow-color); accent-color: var(--yellow-color);
} }
input[type=radio]+label, input[type=radio] + label,
input[type=checkbox]+label { input[type=checkbox] + label {
display: inline-block; display: inline-block;
margin: 1rem 0; margin: 1rem 0;
} }
@ -199,11 +191,9 @@ textarea {
::-webkit-input-placeholder { ::-webkit-input-placeholder {
font-style: oblique; font-style: oblique;
} }
::-moz-input-placeholder { ::-moz-input-placeholder {
font-style: oblique; font-style: oblique;
} }
::-ms-input-placeholder { ::-ms-input-placeholder {
font-style: oblique; font-style: oblique;
} }
@ -257,7 +247,6 @@ figure {
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
img { img {
box-sizing: border-box; box-sizing: border-box;
max-width: 100%; max-width: 100%;
@ -271,9 +260,9 @@ main {
min-height: calc(100vh - 500px); min-height: calc(100vh - 500px);
} }
.site__header>nav, .site__header > nav,
main>article, main > article,
footer>section { footer > section {
max-width: 1280px; max-width: 1280px;
padding: 1rem; padding: 1rem;
margin: 0 auto; margin: 0 auto;
@ -298,8 +287,8 @@ section:not(:last-child) {
overflow: auto; overflow: auto;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: rgb(0, 0, 0); background-color: rgb(0,0,0);
background-color: rgba(0, 0, 0, 0.4); background-color: rgba(0,0,0,0.4);
} }
@ -354,7 +343,7 @@ section:not(:last-child) {
background-color: var(--bg-alt-color); background-color: var(--bg-alt-color);
} }
.site__logo>img { .site__logo > img {
height: 4rem; height: 4rem;
} }
@ -369,34 +358,28 @@ section:not(:last-child) {
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.site__logo, .site__logo,
.nav__main, .nav__main,
.nav__account { .nav__account {
margin-right: 0; margin-right: 0;
} }
.site__nav { .site__nav {
display: grid; display: grid;
grid-template-columns: 2fr 0.5fr 0.5fr; grid-template-columns: 2fr 0.5fr 0.5fr;
gap: 1rem; gap: 1rem;
} }
.site__logo { .site__logo {
grid-column: 1; grid-column: 1;
} }
.nav__main { .nav__main {
grid-column: 1/4; grid-column: 1/4;
grid-row: 2; grid-row: 2;
justify-content: space-between; justify-content: space-between;
} }
.nav__account { .nav__account {
grid-column: 2; grid-column: 2;
grid-row: 1; grid-row: 1;
} }
.site__cart { .site__cart {
grid-column: 3; grid-column: 3;
grid-row: 1; grid-row: 1;
@ -407,22 +390,18 @@ section:not(:last-child) {
.site__nav { .site__nav {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
.site__logo { .site__logo {
grid-column: span 2; grid-column: span 2;
justify-self: center; justify-self: center;
} }
.nav__main { .nav__main {
grid-column: 1/3; grid-column: 1/3;
grid-row: 3; grid-row: 3;
} }
.nav__account { .nav__account {
grid-column: 1; grid-column: 1;
grid-row: 2; grid-row: 2;
} }
.site__cart { .site__cart {
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
@ -522,8 +501,6 @@ section:not(:last-child) {
color: white; color: white;
display: flex; display: flex;
flex-direction: column;
gap: 1rem;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100vw; width: 100vw;
@ -537,35 +514,28 @@ section:not(:last-child) {
top: 0; top: 0;
left: 0; left: 0;
position: absolute; position: absolute;
background-image: url(/static/images/secret_sunday_sale_banner.jpg); background-image: url(/static/images/banner_sizes.jpg);
/*animation: slide-out-image-1 var(--total-duration) 3s animation: slide-out-image-1 var(--total-duration) 3s
cubic-bezier(0.54, 0.12, 0.44, 1) infinite; cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
*/
} }
/* start + pause + start + pause = totall */ /* start + pause + start + pause = totall */
/* 2.5s + 3s + 2.5s + 3s = 11s*/ /* 2.5s + 3s + 2.5s + 3s = 11s*/
@keyframes slide-out-image-1 { @keyframes slide-out-image-1 {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
25% { 25% {
transform: translateX(-100%); transform: translateX(-100%);
} }
25.0001% { 25.0001% {
transform: translateX(100%); transform: translateX(100%);
} }
50% { 50% {
transform: translateX(100%); transform: translateX(100%);
} }
75% { 75% {
transform: translateX(0%); transform: translateX(0%);
} }
100% { 100% {
transform: translateX(0%); transform: translateX(0%);
} }
@ -576,7 +546,8 @@ section:not(:last-child) {
right: 0; right: 0;
background-image: url(/static/images/banner_merch.jpg); background-image: url(/static/images/banner_merch.jpg);
position: absolute; position: absolute;
animation: slide-in-image-2 var(--total-duration) 3s cubic-bezier(0.54, 0.12, 0.44, 1) infinite; animation: slide-in-image-2 var(--total-duration) 3s
cubic-bezier(0.54, 0.12, 0.44, 1) infinite;
} }
/* start + pause + start + pause = totall */ /* start + pause + start + pause = totall */
@ -585,19 +556,15 @@ section:not(:last-child) {
0% { 0% {
transform: translateX(0); transform: translateX(0);
} }
25% { 25% {
transform: translateX(-100%); transform: translateX(-100%);
} }
50% { 50% {
transform: translateX(-100%); transform: translateX(-100%);
} }
75% { 75% {
transform: translateX(-200%); transform: translateX(-200%);
} }
100% { 100% {
transform: translateX(-200%); transform: translateX(-200%);
} }
@ -610,17 +577,14 @@ section:not(:last-child) {
.site__banner--site { .site__banner--site {
background-image: url("/static/images/site_banner.jpg"); background-image: url("/static/images/site_banner.jpg");
} }
.site__banner--fairtrade { .site__banner--fairtrade {
padding: 6rem 1rem; padding: 6rem 1rem;
background-image: url("/static/images/fairtrade_banner.jpg"); background-image: url("/static/images/fairtrade_banner.jpg");
} }
.site__banner--reviews { .site__banner--reviews {
padding: 6rem 1rem; padding: 6rem 1rem;
background-image: url("/static/images/reviews_banner.jpg"); background-image: url("/static/images/reviews_banner.jpg");
} }
.site__banner--about { .site__banner--about {
padding: 6rem 1rem; padding: 6rem 1rem;
background-image: url("/static/images/coffee_banner.jpg"); background-image: url("/static/images/coffee_banner.jpg");
@ -686,7 +650,6 @@ section:not(:last-child) {
.breadcrumbs { .breadcrumbs {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
.breadcrumbs menu { .breadcrumbs menu {
margin: 0; margin: 0;
padding: 0 1rem; padding: 0 1rem;
@ -701,7 +664,7 @@ section:not(:last-child) {
/* ========================================================================== /* ==========================================================================
Articles Articles
========================================================================== */ ========================================================================== */
article>header { article > header {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -723,7 +686,7 @@ article>header {
} }
article+article { article + article {
margin-top: 8rem; margin-top: 8rem;
} }
@ -802,7 +765,6 @@ article+article {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 6rem; gap: 6rem;
} }
.product__figure { .product__figure {
grid-row: span 2; grid-row: span 2;
} }
@ -866,7 +828,7 @@ article+article {
justify-items: center; justify-items: center;
} }
.subscription-products>div { .subscription-products > div {
border: var(--default-border); border: var(--default-border);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -878,7 +840,7 @@ article+article {
visibility: hidden; visibility: hidden;
} }
.subscription-products input[type=radio]:checked~.product-prices { .subscription-products input[type=radio]:checked ~ .product-prices {
visibility: visible; visibility: visible;
} }
@ -892,7 +854,6 @@ article+article {
.subscription-products { .subscription-products {
flex-direction: column; flex-direction: column;
} }
.subscription-coffee { .subscription-coffee {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
@ -939,7 +900,6 @@ article+article {
gap: 1rem; gap: 1rem;
flex-direction: column; flex-direction: column;
} }
.product__form #id_variant div label { .product__form #id_variant div label {
display: flex; display: flex;
gap: 1rem; gap: 1rem;
@ -955,23 +915,18 @@ article+article {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 4rem 1fr auto; grid-template-rows: 4rem 1fr auto;
} }
.product__gallery { .product__gallery {
display: flex; display: flex;
} }
.gallery__thumbnail { .gallery__thumbnail {
max-height: 4rem; max-height: 4rem;
} }
.gallery__thumbnail:not(:last-child) { .gallery__thumbnail:not(:last-child) {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
.product__image { .product__image {
max-height: 16rem; max-height: 16rem;
} }
.product__info { .product__info {
grid-column: 1; grid-column: 1;
} }
@ -983,7 +938,6 @@ article+article {
.cart__list { .cart__list {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.cart__item { .cart__item {
padding: 1rem 0; padding: 1rem 0;
border-bottom: var(--default-border); border-bottom: var(--default-border);
@ -1000,7 +954,6 @@ article+article {
.cart__summary { .cart__summary {
text-align: right; text-align: right;
} }
.cart__totals { .cart__totals {
width: unset; width: unset;
font-size: 1.5rem; font-size: 1.5rem;
@ -1010,7 +963,6 @@ article+article {
.cart__totals td { .cart__totals td {
border: none; border: none;
} }
.cart__totals th:first-child, .cart__totals th:first-child,
.cart__totals td:first-child { .cart__totals td:first-child {
text-align: right; text-align: right;
@ -1024,7 +976,7 @@ article+article {
justify-content: flex-end; justify-content: flex-end;
} }
.cart__proceed>.btn { .cart__proceed > .btn {
font-size: 1.75rem; font-size: 1.75rem;
} }
@ -1112,12 +1064,10 @@ article+article {
.checkout__address-form { .checkout__address-form {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.checkout__address-form .errorlist { .checkout__address-form .errorlist {
grid-column: 1; grid-column: 1;
}
} }
}
.checkout__address-form p:last-child { .checkout__address-form p:last-child {
align-self: end; align-self: end;
} }
@ -1175,7 +1125,7 @@ footer {
background-color: var(--bg-alt-color); background-color: var(--bg-alt-color);
} }
footer>section { footer > section {
text-align: center; text-align: center;
} }
@ -1196,10 +1146,10 @@ footer>section {
.wholesale-fields { .wholesale-fields {
width: fit-content; width: fit-content;
} }
.wholesale-field { .wholesale-field {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr);
gap: 0.5rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

7
templates/partials/carousel.html
View File

@ -1,9 +1,10 @@
<div class="carousel"> <div class="carousel">
<div class="carousel__wrapper"> <div class="carousel__wrapper">
<div class="carousel__item hero-image-1"> <div class="carousel__item hero-image-1">
<h1>Labor Day Weekend Sale</h1> <h1>Subscribe and save 10%</h1>
<h3>10% off 12oz and 16oz bags</h3> </div>
<h4>Use code: LABOR23</h4> <div class="carousel__item hero-image-2">
<h1>Merchandise now available!</h1>
</div> </div>
</div> </div>
</div> </div>