158 lines
2.7 KiB
Sass
158 lines
2.7 KiB
Sass
@use '@angular/material' as mat
|
|
|
|
@use 'layout'
|
|
|
|
@include mat.core()
|
|
|
|
:root
|
|
// color-scheme: light dark
|
|
@include mat.theme((
|
|
color: (
|
|
primary: mat.$azure-palette,
|
|
tertiary: mat.$blue-palette,
|
|
// theme-type: light,
|
|
),
|
|
typography: (
|
|
plain-family: Montserrat,
|
|
brand-family: Montserrat,
|
|
),
|
|
density: 0,
|
|
))
|
|
font-family: 'Helvetica Neue', Montserrat, sans-serif
|
|
|
|
|
|
html,
|
|
body
|
|
height: 100%
|
|
overscroll-behavior-y: contain
|
|
|
|
|
|
a
|
|
color: rgb(0, 0, 238)
|
|
text-decoration: underline
|
|
|
|
|
|
button.mat-primary:not(:disabled)
|
|
background: var(--mat-sys-primary) !important
|
|
color: var(--mat-sys-on-primary) !important
|
|
|
|
|
|
button.mat-warn:not(:disabled)
|
|
background: var(--mat-sys-error) !important
|
|
color: var(--mat-sys-on-error) !important
|
|
|
|
|
|
// ---------------- Recipe book print layout (A4) ----------------
|
|
|
|
.recipe-print
|
|
background: #fff
|
|
color: #111
|
|
max-width: 210mm
|
|
margin: 0 auto
|
|
padding: 12mm 14mm
|
|
box-sizing: border-box
|
|
font-family: 'Helvetica Neue', Montserrat, sans-serif
|
|
|
|
.recipe-print__title
|
|
margin: 0
|
|
font-size: 28px
|
|
line-height: 1.2
|
|
|
|
.recipe-print__meta
|
|
display: flex
|
|
flex-wrap: wrap
|
|
gap: 10px 18px
|
|
margin-top: 6px
|
|
font-size: 12px
|
|
|
|
.recipe-print__hr
|
|
margin: 12px 0
|
|
border: none
|
|
border-top: 1px solid rgba(0, 0, 0, 0.12)
|
|
|
|
.recipe-print__section
|
|
margin: 0 0 14px
|
|
|
|
.recipe-print__section h2
|
|
margin: 0 0 8px
|
|
font-size: 16px
|
|
text-transform: uppercase
|
|
letter-spacing: 0.04em
|
|
|
|
.recipe-print__ingredients
|
|
margin: 0
|
|
padding-left: 18px
|
|
font-size: 13px
|
|
|
|
.recipe-print__ingredients li
|
|
margin: 2px 0
|
|
|
|
.recipe-print__steps
|
|
margin: 0
|
|
padding-left: 18px
|
|
font-size: 13px
|
|
|
|
.recipe-print__steps li
|
|
margin: 10px 0
|
|
break-inside: avoid
|
|
|
|
.recipe-print__steps .step-head
|
|
font-weight: 700
|
|
|
|
.recipe-print__steps .phase
|
|
display: inline-block
|
|
border: 1px solid rgba(0, 0, 0, 0.25)
|
|
border-radius: 999px
|
|
padding: 0 8px
|
|
margin-right: 8px
|
|
font-size: 11px
|
|
font-weight: 700
|
|
|
|
.recipe-print__steps .step-text
|
|
margin-top: 4px
|
|
white-space: pre-wrap
|
|
|
|
.recipe-print__steps .step-notes
|
|
margin-top: 4px
|
|
opacity: 0.9
|
|
white-space: pre-wrap
|
|
|
|
.recipe-print__photos
|
|
display: grid
|
|
grid-template-columns: repeat(2, 1fr)
|
|
gap: 10px
|
|
|
|
.recipe-print__photos figure
|
|
margin: 0
|
|
break-inside: avoid
|
|
|
|
.recipe-print__photos img
|
|
width: 100%
|
|
height: auto
|
|
border-radius: 8px
|
|
border: 1px solid rgba(0, 0, 0, 0.12)
|
|
|
|
.recipe-print__photos figcaption
|
|
font-size: 12px
|
|
margin-top: 4px
|
|
|
|
.recipe-print__notes p
|
|
margin: 6px 0
|
|
white-space: pre-wrap
|
|
|
|
.page-break-before
|
|
break-before: page
|
|
page-break-before: always
|
|
|
|
@media print
|
|
@page
|
|
size: A4
|
|
margin: 12mm
|
|
|
|
body
|
|
background: #fff !important
|
|
|
|
.recipe-print
|
|
padding: 0
|
|
max-width: none
|
|
margin: 0 |