222 lines
4.5 KiB
Sass
222 lines
4.5 KiB
Sass
@import _material-colors
|
|
|
|
[onclick]
|
|
cursor: pointer
|
|
|
|
.nodisplay
|
|
display: none
|
|
|
|
html
|
|
font-family: sans-serif
|
|
background: radial-gradient(circle, #7EB643, #619A35);
|
|
background-attachment: fixed;
|
|
|
|
@media screen and (max-width: 900px)
|
|
.pageWidthConstraint
|
|
max-width: 100%
|
|
|
|
@media screen and (min-width: 900px)
|
|
.pageWidthConstraint
|
|
max-width: 900px
|
|
$margin: calc( calc( 100% - 900px ) / 2 )
|
|
margin-left: $margin
|
|
margin-right: $margin
|
|
|
|
a, a:visited, a:active
|
|
border-bottom-style: dotted
|
|
|
|
a:hover
|
|
border-bottom-style: solid
|
|
|
|
*:link, a, a:hover, a:visited, a:active
|
|
color: material-color(light-green, 200)
|
|
border-bottom-color: material-color(light-green, 700)
|
|
border-bottom-width: 0.075em
|
|
text-decoration: none
|
|
|
|
html , body
|
|
margin: 0px
|
|
padding: 0px
|
|
|
|
h1
|
|
margin-top: 0px
|
|
margin-bottom: 0px
|
|
padding-top: 0.8em
|
|
padding-bottom: 0em
|
|
padding-left: 0.6em
|
|
padding-right: 0.6em
|
|
font-weight: 400
|
|
|
|
header
|
|
color: material-color(light-green, 50)
|
|
background: darken(material-color(light-green, 900), 10%)
|
|
|
|
|
|
.badge
|
|
white-space: nowrap
|
|
padding-left: 0.2em
|
|
padding-right: 0.2em
|
|
margin-left: 0.2em
|
|
margin-right: 0.2em
|
|
color: material-color(blue-grey, 100)
|
|
background-color: material-color(blue-grey, 700)
|
|
border-color: material-color(blue-grey, 600)
|
|
border-radius: 0.2em
|
|
border-width: 0.0925em
|
|
border-style: solid
|
|
|
|
section
|
|
padding-top: 0.25em
|
|
padding-left: 0.25em
|
|
padding-right: 0.25em
|
|
padding-bottom: 1.5em
|
|
|
|
.card
|
|
overflow: hidden
|
|
color: material-color(blue-grey, 100)
|
|
background-color: material-color(blue-grey, 900)
|
|
border-color: material-color(blue-grey, 800)
|
|
border-radius: 0.5em
|
|
border-width: 0.1em
|
|
border-style: solid
|
|
|
|
.card:not(:first-child)
|
|
margin-top: 0.75em
|
|
|
|
.card:not(:last-child)
|
|
margin-bottom: 0.75em
|
|
|
|
.cardBody
|
|
padding: 0.5em
|
|
|
|
.card .cardPic
|
|
width: 100%
|
|
|
|
.card.minicard
|
|
width: 30%
|
|
padding-bottom: 0.3em
|
|
|
|
.card.minicard>.cardBody
|
|
@extend .center
|
|
@extend .noticeablyLargerText
|
|
margin-left: 0.2em
|
|
margin-right: 0.2em
|
|
|
|
.minicardHolder
|
|
display: flex
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
justify-content: space-evenly
|
|
align-items: baseline
|
|
|
|
.cardBottom.minicardHolder
|
|
background: material-color(blue-grey, 700)
|
|
padding-top: 0.8em
|
|
padding-bottom: 0.8em
|
|
|
|
footer
|
|
padding-top: 0.45em
|
|
padding-bottom: 1.5em
|
|
padding-left: 0.5em
|
|
padding-right: 0.5em
|
|
color: material-color(light-green, 50)
|
|
background: darken(material-color(light-green, 900), 12%)
|
|
|
|
.justify
|
|
text-align: justify
|
|
text-justify: inter-word
|
|
|
|
.left
|
|
text-align: left
|
|
|
|
.right
|
|
text-align: right
|
|
|
|
.center
|
|
text-align: center
|
|
|
|
.noticeablyLargerText
|
|
font-size: 125%
|
|
|
|
dl
|
|
margin-top: 0px
|
|
margin-bottom: 0px
|
|
display: flex
|
|
flex-wrap: wrap
|
|
|
|
$dtdivision: 150px
|
|
$dddivision: calc( 100% - 150px )
|
|
|
|
dt
|
|
margin: 0px
|
|
flex: 0 0 $dtdivision
|
|
max-width: $dtdivision
|
|
|
|
dd
|
|
margin: 0px
|
|
flex: 0 0 $dddivision
|
|
max-width: $dddivision
|
|
|
|
$dtddspacing: 0.35em
|
|
|
|
dt:not(:last-of-type) , dd:not(:last-of-type)
|
|
border-bottom-color: darken(material-color(blue-grey, 900), 10%)
|
|
border-bottom-style: dotted
|
|
border-bottom-width: 0.0975em
|
|
padding-bottom: $dtddspacing
|
|
|
|
dt:not(:first-of-type) , dd:not(:first-of-type)
|
|
padding-top: $dtddspacing
|
|
|
|
.extraLineSpacing
|
|
line-height: 1.5
|
|
|
|
.fullscreenOverlay
|
|
position: fixed
|
|
background: #000000CC
|
|
z-index: 95
|
|
top: 0
|
|
left: 0
|
|
width: 100%
|
|
height: 100%
|
|
& .closeButton
|
|
position: fixed
|
|
top: 0
|
|
right: 0
|
|
z-index: 99
|
|
padding: 1em
|
|
background: material-color(red, 500)
|
|
color: material-color(blue, 50)
|
|
border-bottom-left-radius: 0.5em
|
|
|
|
#galleryImage
|
|
position: fixed
|
|
z-index: 96
|
|
width: 100%
|
|
height: 100%
|
|
background-position: center
|
|
background-repeat: no-repeat
|
|
background-size: contain
|
|
|
|
#imageQualities
|
|
z-index: 97
|
|
position: fixed
|
|
overflow: hidden
|
|
background: #00000099
|
|
color: material-color(white)
|
|
border-bottom-right-radius: 0.5em
|
|
& .quality:not(:first-of-type)
|
|
border-top-width: 1px
|
|
border-top-color: #FFFFFF44
|
|
border-top-style: solid
|
|
& .quality
|
|
& *
|
|
padding: 0.25em
|
|
& i.fa
|
|
border-right-width: 1px
|
|
border-right-color: #FFFFFF44
|
|
border-right-style: solid
|
|
|
|
#imageQualities>div>a
|
|
color: material-color(white)
|
|
border-bottom-style: none |