forked from OpenNeo/impress
Emi Matchu
852dc74001
I was just scrolling our CSS and surprised to find we use Google Fonts embeds! I don't like depending on external hosts like that. Google Fonts doesn't offer the Droid fonts for download anymore, though—looks like the Noto fonts are their spiritual successor. The Droid Serif and Noto Serif fonts look visually identical to me, but the Sans ones are a bit different… I kinda like the charm of the Droid Sans better, but ah well! I'd rather be moving forward with a more modern font with more reliable glyph support etc for now.
269 lines
4.7 KiB
Sass
269 lines
4.7 KiB
Sass
@import "partials/icon"
|
|
@import "partials/clean/constants"
|
|
@import "partials/clean/mixins"
|
|
@import fonts
|
|
|
|
/* 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
|
|
|
|
p
|
|
font-family: $text-font
|
|
|
|
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
|
|
|
|
/* Fonts
|
|
|
|
/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl
|
|
@font-face
|
|
font-family: Delicious
|
|
src: local("Delicious"), font-url("Delicious-Roman.otf")
|
|
|
|
|
|
@font-face
|
|
font-family: Delicious
|
|
font-weight: bold
|
|
src: local("Delicious"), font-url("Delicious-Bold.otf")
|
|
|
|
|
|
@font-face
|
|
font-family: Delicious
|
|
font-style: italic
|
|
src: local("Delicious"), font-url("Delicious-Italic.otf")
|
|
|