xenotime/src/style.sass

158 lines
3.0 KiB
Sass
Executable File

html
scrollbar-color: black lightgray
*
box-sizing: border-box
body
font-family: "Fira Sans","Noto Sans",Verdana,sans-serif
font-weight: 300
margin: 0 0 0 0
display: flex
flex-wrap: wrap
justify-content: space-around
main
max-width: 60em
width: 100%
padding: 0 1em 0 1em
margin-left: auto
margin-right: auto
&.has-sidebar
margin-right: 0
.sidebar
padding: 1em 1em 1em 1em
margin-right: auto
min-width: 16em
strong
font-weight: 600
h1, h2, h3, h4, h5, h6
&:first-of-type
border-bottom: 1px solid gray
margin: 0 0 0.2em 0
font-weight: 500
a
color: inherit
:not(pre) > code
background: black
color: white
padding: 0.3em
ul, ol
padding-left: 1em
ul
list-style-type: square
blockquote
border-left: 0.3em solid black
padding-left: 0.3em
table
border-collapse: collapse
th
background: black
color: white
font-weight: normal
td, th
padding: 0.2em 0.5em
td
border: 1px solid gray
tr:nth-child(2n+1)
background: lightgray
.md
margin-top: 0.5em
> *, p
margin: 0 0 0.5em 0
nav
margin-bottom: 0.5em
display: flex
.logged-in-user
margin-left: auto
align-self: center
img
max-width: 100%
.timestamp
color: gray
.selected
font-style: italic
.link-button, button, input[type=submit]
border: none
border-radius: 0
padding: 0.75em
background: gray
text-align: center
text-decoration: none
color: black
display: inline-block
font-size: 1rem
&:hover
// very hacky way to make the button darker when hovered
background-image: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.2))
&.new-thread
background-color: #75bbfd
&.submit-post
background-color: #703be7
&.index
background-color: #fd3c06
&.login
background-color: #76cd26
&.create-account
background-color: #dbb40c
input[type=search], input[type=text], input[type=password], .post
border: 1px solid gray
padding: 0.75em
width: 100%
border-radius: 0
margin-bottom: -1px
textarea
resize: vertical
width: 100%
height: 30em
border: 1px solid gray
margin-top: -1px
.new-post textarea
height: 15em
.flashmsg
padding: 0.5em
margin: 0.5em 0 0.5em 0
border: 1px solid black
&.info
background: skyblue
&.error
background: salmon
&.warning
background: orange
.post
.heading
display: flex
justify-content: space-between
.threads
width: 100%
.title
white-space: nowrap
/*display: grid
//thead, tbody, tr
// display: contents
//grid-template-columns: minmax(15em, 8fr) 2fr 1fr 3fr 3fr
//grid-template-columns: repeat(auto-fit, 20em 5em 1em 3em 5em)
@media (orientation: portrait)
.threads td, .threads th
//display: block
.threads .title
white-space: inherit