Emi Matchu
95ae669549
Yeah, I don't remember why So Many Years Ago I felt it was important to use the Droid fonts; I adapted this choice into the Noto fonts when modernizing the other day, but, tbh, the default system fonts are probably just a better fit for like. everything we do, and then *not* downloading MB of font files. I also feel like a lot of the contexts where we used serif fonts were like, frankly incidental, based on where we chose `<p>` for semantic reasons? I don't think any of them actually are made much better by serifs, I'm okay with just simplifying and dropping that, instead of looking for a better serif font stack to replace it.
245 lines
4.3 KiB
Sass
245 lines
4.3 KiB
Sass
@import "partials/icon"
|
|
@import "partials/clean/constants"
|
|
@import "partials/clean/mixins"
|
|
|
|
/* Reset
|
|
|
|
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
|
|
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
|
|
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b,
|
|
u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table,
|
|
caption, tbody, tfoot, thead, tr, th, td
|
|
margin: 0
|
|
padding: 0
|
|
border: 0
|
|
font-size: 100%
|
|
vertical-align: baseline
|
|
background: transparent
|
|
|
|
/* Typography
|
|
|
|
html, body
|
|
height: 100%
|
|
|
|
body
|
|
background: $background-color
|
|
color: $text-color
|
|
font:
|
|
family: $main-font
|
|
size: 90%
|
|
line-height: 1.5
|
|
|
|
a[href]
|
|
color: $link-color
|
|
|
|
input, button, select
|
|
font:
|
|
family: inherit
|
|
size: 100%
|
|
|
|
p
|
|
margin-bottom: 1em
|
|
|
|
h1, h2, h3
|
|
+header-text
|
|
|
|
h1
|
|
font-size: 3em
|
|
line-height: 1
|
|
margin-bottom: 0.50em
|
|
|
|
h2
|
|
font-size: 2em
|
|
margin-bottom: 0.75em
|
|
|
|
h3
|
|
font-size: 1.5em
|
|
line-height: 1
|
|
margin-bottom: 1.00em
|
|
|
|
.inline-image
|
|
margin-right: 1em
|
|
vertical-align: middle
|
|
|
|
/* Main
|
|
|
|
$container_width: 800px
|
|
|
|
#container
|
|
margin: .25em auto
|
|
padding-top: $container-top-padding
|
|
position: relative
|
|
width: $container_width
|
|
|
|
input, button, select, label
|
|
cursor: pointer
|
|
|
|
input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], select, textarea
|
|
border-radius: 3px
|
|
background: #fff
|
|
border: 1px solid $input-border-color
|
|
color: $text-color + #444444
|
|
padding: .25em
|
|
&:focus, &:active
|
|
color: inherit
|
|
|
|
textarea
|
|
font: inherit
|
|
|
|
// TODO: This conflicts with button styles in embedded wardrobe-2020
|
|
// components. It'd be nice to not apply it to ALL button elements.
|
|
a.button, input[type=submit], button
|
|
+awesome-button
|
|
&.loud
|
|
+loud-awesome-button
|
|
.icon
|
|
margin-right: .25em
|
|
vertical-align: middle
|
|
|
|
ul.buttons
|
|
margin-bottom: 1em
|
|
li
|
|
list-style: none
|
|
margin: 0 .5em
|
|
&, form
|
|
display: inline
|
|
|
|
#footer
|
|
clear: both
|
|
font-size: 75%
|
|
margin-bottom: 1em
|
|
padding-top: 2em
|
|
text-align: center
|
|
ul, div
|
|
display: inline
|
|
margin: 0 1em
|
|
li, div ul
|
|
display: inline
|
|
margin: 0 .5em
|
|
#locale-form
|
|
float: right
|
|
.terms
|
|
&[data-updated-recently]
|
|
font-weight: bold
|
|
|
|
=flash
|
|
margin-bottom: 1em
|
|
padding: .25em .5em
|
|
text-align: center
|
|
|
|
.notice, .alert, .warning
|
|
+flash
|
|
|
|
.notice
|
|
+notice
|
|
|
|
.alert
|
|
+error
|
|
|
|
.warning
|
|
+warning
|
|
|
|
#userbar
|
|
+header-text
|
|
position: absolute
|
|
right: 0
|
|
top: 0
|
|
> *
|
|
display: inline
|
|
margin: 0 .25em
|
|
|
|
#userbar-image-mode
|
|
font-weight: bold
|
|
margin-right: 1em
|
|
text-decoration: none
|
|
img
|
|
+icon
|
|
|
|
#userbar-log-in
|
|
text-decoration: none
|
|
img
|
|
margin:
|
|
bottom: -4px
|
|
right: .25em
|
|
span
|
|
text-decoration: underline
|
|
&:hover span
|
|
text-decoration: none
|
|
|
|
.object
|
|
+inline-block
|
|
margin: $object-padding 0
|
|
padding: 0 $object-padding
|
|
position: relative
|
|
text-align: center
|
|
vertical-align: top
|
|
width: $object-width
|
|
a
|
|
text-decoration: none
|
|
img
|
|
+opacity(0.75)
|
|
img
|
|
display: block
|
|
height: $object-img-size
|
|
margin: 0 auto
|
|
width: $object-img-size
|
|
&:hover img, a:hover img
|
|
// behave in browsers that only respond to a:hover, but also be in the
|
|
// hover state more often for browsers who support div:hover
|
|
// (quantity form in user items)
|
|
+opacity(1)
|
|
|
|
.nc-icon, .closeted-icons
|
|
+opacity(1)
|
|
background: rgba(255, 255, 255, 0.75)
|
|
line-height: 1
|
|
position: absolute
|
|
top: $object-img-size - $nc-icon-size
|
|
&:hover
|
|
+opacity(0.5)
|
|
background: transparent
|
|
|
|
.nc-icon, .closeted-icons img
|
|
display: inline
|
|
height: $nc-icon-size
|
|
width: $nc-icon-size
|
|
|
|
.nc-icon
|
|
right: ($object-width - $object-img-size) / 2 + $object-padding
|
|
|
|
$closeted-icons-left: ($object-width - $object-img-size) / 2 + $object-padding
|
|
.closeted-icons
|
|
left: $closeted-icons-left
|
|
|
|
dt
|
|
font-weight: bold
|
|
|
|
dd
|
|
margin: 0 0 1.5em 1em
|
|
|
|
#home-link
|
|
+header-text
|
|
font:
|
|
size: 175%
|
|
weight: bold
|
|
left: 0
|
|
line-height: 1
|
|
padding-left: .25em
|
|
padding-right: .25em
|
|
position: absolute
|
|
top: 0
|
|
&:hover
|
|
background: $module-bg-color
|
|
text-decoration: none
|
|
span:before
|
|
content: "<< "
|
|
|
|
#home-link, #userbar
|
|
padding-top: 6px
|
|
padding-bottom: 6px
|
|
|
|
.pagination
|
|
a, span
|
|
margin: 0 .5em
|
|
.current
|
|
font-weight: bold
|