Files
avusd/lib/modules/apostrophe-assets/public/css/main.sass

337 lines
7.7 KiB
Sass
Raw Normal View History

@use './common'
@font-face
font-family: 'Merriweather'
src: url('/modules/theme/fonts/Merriweather-Regular.ttf') format("truetype")
@font-face
font-family: 'MerriweatherSans'
src: url('/modules/theme/fonts/MerriweatherSans-VariableFont_wght.ttf') format("truetype")
@font-face
font-family: "LibreFranklin"
src: url('/modules/theme/fonts/LibreFranklin[wght].ttf') format("truetype")
@font-face
font-family: "Montserrat-ExtraBold"
src: url('/modules/theme/fonts/Montserrat-ExtraBold.ttf') format("truetype")
@font-face
font-family: "AlexBrush"
src: url('/modules/theme/fonts/AlexBrush-Regular.ttf') format("truetype")
2021-01-13 11:25:45 -08:00
p
text-indent: 0
// The important is necessary here because for some reason CKEditor outputs style="padding: 0; margin: 0" for every <p></p> tag.
// Remove !important if we can figure out how to remove the style CKEditor outputs.
margin: 0.3rem 0 0.7rem 0 !important
padding: 0 !important
font-family: Merriweather
font-size: 1.1rem
2021-01-13 11:25:45 -08:00
line-height: 1.4rem
p.indent
text-indent: 1rem
.apos-rich-text
td, th
text-indent: 0
margin: 0.3rem 0 0.7rem 0
padding: 0.25rem 0
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
p
margin: 0 !important
padding: 0 !important
td + td, th + th // All table data elements following another table data element should have a bit of space between element contents.
padding-left: 1rem
th
font-family: MerriweatherSans
font-weight: 700
h2.h2, h3.h3, h4.h4
font-family: MerriweatherSans
margin-bottom: 1rem
// Remove the margin-top from the paragraphs that follow a heading. Make !important because we have to override the styles set by CKEditor.
h2.h2 + p, h3.h3 + p, h4.h4 + p
margin-top: 0 !important
// Add more margin-top to headings when following content (p, unordered / ordered lists)
p + h2.h2, p + h3.h3, p + h4.h4, ul + h2.h2, ul + h3.h3, ul + h4.h4, ol + h2.h2, ol + h3.h3, ol + h4.h4, table + h2.h2, table + h3.h3, table + h4.h4
margin-top: 1.7rem
h2.h2
font-size: 2.2rem
line-height: 2.8rem
font-family: MerriweatherSans
font-weight: 700
h3.h3
font-size: 1.5rem
line-height: 2rem
font-family: MerriweatherSans
font-weight: 700
h4.h4
font-size: 1.2rem
line-height: 1.5rem
font-family: MerriweatherSans
font-weight: 900
//Links using Apostrophe Files or Rich Text Widgets
div[data-apos-widget='apostrophe-files'], .apos-rich-text
a
margin: 0.3rem 0 0.7rem 0 !important
font-family: MerriweatherSans
font-size: 1.4rem
line-height: 1.6rem
color: #1c1cc4
text-shadow: 0 0 0.6rem rgb(158, 243, 113)
transition: text-shadow 0.5s, color 0.5s
a:hover
color: #3d1cd0
text-shadow: 0 0 0.6rem rgb(123, 238, 238)
a:active
color: #7a29ec
div[data-apos-widget='apostrophe-files']
margin: 1rem 0 1.5rem 0.5rem
padding: 0.5rem 0.5rem 0 0.5rem
border: 1px solid #5b5b5b
a
display: block
padding: 0
font-size: 1.2rem
//Links embedded in a rich text widget.
.apos-rich-text
a
font-size: 1.2rem
line-height: 1.5rem
2021-01-13 11:25:45 -08:00
h5
font-size: 1.2rem
font-weight: 900
margin-top: 0.8rem
margin-bottom: 0.3rem
.navbar sup
font-weight: 700
font-size: 0.7rem
bottom: 0.25rem
2021-01-13 11:25:45 -08:00
.apos-slideshow h4
display: none
.apos-area-widget a
display: inline
2021-01-13 11:25:45 -08:00
padding-bottom: 0.8rem
.apos-rich-text ul
list-style-type: disc
list-style-position: inside
margin: 0.3rem 0 0.7rem 2rem
text-indent: -1.5rem
padding: 0
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
.apos-rich-text ul ul
margin-left: 2.5rem
text-indent: -1.7rem
2021-01-13 11:25:45 -08:00
list-style-type: circle
list-style-position: inside
.apos-rich-text ol
list-style-type: decimal
list-style-position: inside
margin: 0.3rem 0 0.7rem 2rem
text-indent: -1.5rem
padding: 0
font-family: Merriweather
font-size: 1.1rem
line-height: 1.4rem
.apos-rich-text ol ol
margin-left: 2.5rem
text-indent: -1.7rem
list-style-type: lower-alpha
list-style-position: inside
blockquote
font-family: AlexBrush
font-size: 1.2rem
line-height: 1.3rem
margin: .2rem 0
&:before
content: '\201C'
&:after
content: '\201D'
&:after, &:before
font-size: 4rem
line-height: 0
position: relative
top: 0.5rem
color: lighten(#000, 40%)
p
font-family: AlexBrush
font-size: 2rem
line-height: 2rem
display: inline
2021-01-13 11:25:45 -08:00
.apos-indent1
margin-left: 1rem
.apos-indent2
margin-left: 2rem
//.apos-rich-text > div //This was a work around to the rich text widget 'class' property not working in the style.
.highlighted
background: rgba(215, 187, 161, 0.3)
margin: 0 0 0 0
padding: 0.2rem 0 0.2rem 1rem
font-size: 1.1rem
2021-01-13 11:25:45 -08:00
font-weight: 700
color: #006400
a
font-size: 1rem
line-height: 1.2rem
text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)
.alert
//background: #581d17
2021-07-29 20:40:47 -07:00
margin: 1.2rem 0
padding: 0.3rem 0 0.3rem 0
font-size: 1.3rem
font-family: Montserrat-ExtraBold
line-height: 1.4rem
font-weight: 700
color: #000
&:before
content: "Alert:"
//color: #FFF
//background: #98025c
//background-image: linear-gradient(45deg, #3023AE 0%, #98025C 100%)
2021-07-29 20:40:47 -07:00
//border-radius: .5rem/1rem
padding: 0.5rem
letter-spacing: 0.2rem
margin-right: 1rem
color: #98025c
2021-07-29 20:40:47 -07:00
//border: 1px black solid
border: 0
a
font-size: 1.2rem
line-height: 1.3rem
text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)
2021-07-29 20:40:47 -07:00
.alert+.alert
margin-top: 0
padding-top: 0
.notice
//background: #581d17
margin: 1.2rem 0
padding: 0.3rem 0 0.3rem 0
font-size: 1.3rem
font-family: Montserrat-ExtraBold
line-height: 1.4rem
font-weight: 700
color: #000
&:before
content: "Notice:"
//color: #FFF
//background: #98025c
//background-image: linear-gradient(45deg, #3023AE 0%, #98025C 100%)
//border-radius: .5rem/1rem
padding: 0.5rem
letter-spacing: 0.2rem
margin-right: 1rem
color: #002170
//border: 1px black solid
border: 0
a
font-size: 1.2rem
line-height: 1.3rem
text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)
.notice+.notice
margin-top: 0
padding-top: 0
.update
//background: #581d17
margin: 1.2rem 0
padding: 0.3rem 0 0.3rem 0
font-size: 1.3rem
font-family: Montserrat-ExtraBold
line-height: 1.4rem
font-weight: 700
color: #000
&:before
content: "Update:"
//color: #FFF
//background: #98025c
//background-image: linear-gradient(45deg, #3023AE 0%, #98025C 100%)
//border-radius: .5rem/1rem
padding: 0.5rem
letter-spacing: 0.2rem
margin-right: 1rem
color: #155e01
//border: 1px black solid
border: 0
a
font-size: 1.2rem
line-height: 1.3rem
text-shadow: 0 0 0.6rem rgba(158, 243, 113, 0.3)
.update+.update
margin-top: 0
padding-top: 0
.date
background: black
color: white
text-align: right
padding: 1rem 1.5rem
margin-bottom: 1rem
margin-top: 2rem
font-weight: 700
2021-01-13 11:25:45 -08:00
//
// Redefine some of the Apostrophe administrative UI.
//
$bg-dark: #4F3A28
$bg-light: #d29a6b
.apos-login-logo
margin-bottom: 0
.apos-login-logo svg
width: 200px
height: 200px
.apos-login.apos-ui
background-color: $bg-light
.apos-ui
.apos-field
margin-bottom: 1rem
.apos-field-input
padding: 0.5rem
.apos-login-submit
margin-top: 3rem
.apos-button--major
background-color: saddlebrown
.apos-button--global
background-color: $bg-dark
.apos-field-input:focus
box-shadow: 0 0 15px 0 $bg-dark
.apos-login-wrapper, .apos-login-content, .apos-ui .apos-admin-bar
background-color: $bg-dark
@media only screen and (min-width: 1450px)
.apos-ui .apos-admin-bar-logo, .apos-ui .apos-admin-bar-logo svg
max-height: 40px
max-width: 40px
margin-right: 30px
//
2021-01-13 11:25:45 -08:00
// Everything scales off of the HTML tag font sizes since the whole site uses REM units.
//
@media only screen and (max-width: 1100px)
html
font-size: 14px !important
@media only screen and (max-width: 950px)
html
font-size: 12px !important
@media only screen and (max-width: 760px)
html
font-size: 10px !important
@media only screen and (max-width: 500px)
html
font-size: 8.5px !important