rename main code directory
BIN
bookwyrm/static/fonts/icomoon.eot
Normal file
36
bookwyrm/static/fonts/icomoon.svg
Normal file
After Width: | Height: | Size: 22 KiB |
BIN
bookwyrm/static/fonts/icomoon.ttf
Normal file
BIN
bookwyrm/static/fonts/icomoon.woff
Normal file
822
bookwyrm/static/format.css
Normal file
@ -0,0 +1,822 @@
|
||||
/* some colors that are okay: #247BA0 #70C1B2 #B2DBBF #F3FFBD #FF1654 */
|
||||
|
||||
/* general override */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
line-height: 1.3em;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
html {
|
||||
background-color: #FFF;
|
||||
color: black;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #247BA0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: normal;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
h2 {
|
||||
font-weight: normal;
|
||||
font-size: 1rem;
|
||||
padding: 0.5rem 0.2rem;
|
||||
margin-bottom: 1rem;
|
||||
border-bottom: 3px solid #B2DBBF;
|
||||
}
|
||||
|
||||
h2 .edit-link {
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
float: right;
|
||||
}
|
||||
h2 .edit-link .icon {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
h3 small {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* fixed display top bar */
|
||||
body {
|
||||
padding-top: 90px;
|
||||
}
|
||||
#top-bar {
|
||||
overflow: visible;
|
||||
padding: 0.5rem;
|
||||
border-bottom: 3px solid #247BA0;
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
background-color: #FFF;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
height: 47px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* --- header bar content */
|
||||
#branding {
|
||||
flex-grow: 0;
|
||||
}
|
||||
#menu {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
margin-top: 1.5rem;
|
||||
flex-grow: 2;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
#menu li {
|
||||
display: inline-block;
|
||||
padding: 0 0.5em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#menu a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#actions {
|
||||
margin-top: 1em;
|
||||
}
|
||||
#actions > * {
|
||||
display: inline-block;
|
||||
}
|
||||
#actions > *:last-child {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
#notifications .icon {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
#notifications a {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
position: relative;
|
||||
top: 0.2rem;
|
||||
}
|
||||
#notifications .count {
|
||||
background-color: #FF1654;
|
||||
color: white;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 50%;
|
||||
display: block;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: -0.65rem;
|
||||
right: -0.5rem;
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
.notification {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em 0;
|
||||
background-color: #EEE;
|
||||
}
|
||||
.notification.unread {
|
||||
background-color: #DDD;
|
||||
}
|
||||
|
||||
#search button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
#main, header {
|
||||
margin: 0 auto;
|
||||
max-width: 55rem;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
/* pulldown */
|
||||
.pulldown-container {
|
||||
position: relative;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.pulldown {
|
||||
display: none;
|
||||
position: absolute;
|
||||
list-style: none;
|
||||
background: white;
|
||||
padding: 1em;
|
||||
right: 0;
|
||||
font-size: 0.9rem;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
|
||||
width: max-content;
|
||||
text-align: left;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pulldown-container:hover .pulldown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pulldown li a {
|
||||
display: block;
|
||||
margin-bottom: 0.5em;
|
||||
text-decoration: none;
|
||||
padding: 0.3em 0.8em
|
||||
}
|
||||
|
||||
div.pulldown-button {
|
||||
background-color: #eee;
|
||||
border-radius: 0.3em;
|
||||
color: #247BA0;
|
||||
width: max-content;
|
||||
margin: 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.post div.pulldown-button {
|
||||
border: 2px solid #247BA0;
|
||||
}
|
||||
|
||||
.pulldown-button form {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
div.pulldown-button button {
|
||||
display: inline;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: inherit;
|
||||
color: #247BA0;
|
||||
}
|
||||
div.pulldown-button .pulldown-toggle {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
position: relative;
|
||||
left: -0.5em;
|
||||
}
|
||||
|
||||
ul.pulldown button {
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background-color: white;
|
||||
color: #247BA0;
|
||||
}
|
||||
|
||||
.pulldown button[disabled] {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.pulldown button[disabled]:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.pulldown button:hover, .pulldown li:hover {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* content area */
|
||||
.content-container {
|
||||
margin: 1rem;
|
||||
}
|
||||
.content-container > * {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
#feed {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: 70px;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
margin-top: -2em;
|
||||
}
|
||||
|
||||
/* row component */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.row > * {
|
||||
flex-grow: 1;
|
||||
width: min-content;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.row > *:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.row.shrink > * {
|
||||
flex-grow: 0;
|
||||
width: max-content;
|
||||
}
|
||||
.row.wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.column > * {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
/* discover books page grid of covers */
|
||||
.book-grid .book-cover {
|
||||
height: 176px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.book-grid .no-cover {
|
||||
width: 115px;
|
||||
}
|
||||
.book-grid > * {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
/* special case forms */
|
||||
.review-form label {
|
||||
display: block;
|
||||
}
|
||||
.review-form textarea {
|
||||
width: 30rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.review-form.quote-form textarea#id_content {
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.follow-requests .row {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.follow-requests .row > *:first-child {
|
||||
width: 20em;
|
||||
}
|
||||
|
||||
|
||||
.login form {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.login form p {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.login form label {
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
.book-form textarea {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.book-form label {
|
||||
display: inline-block;
|
||||
width: 8rem;
|
||||
vertical-align: top;
|
||||
}
|
||||
.book-form .row label {
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* general form stuff */
|
||||
input, button {
|
||||
padding: 0.2em 0.5em;
|
||||
}
|
||||
button, input[type="submit"] {
|
||||
cursor: pointer;
|
||||
width: max-content;
|
||||
}
|
||||
.content-container button {
|
||||
border: none;
|
||||
background-color: #247BA0;
|
||||
color: white;
|
||||
padding: 0.3em 0.8em;
|
||||
font-size: 0.9em;
|
||||
border-radius: 0.3em;
|
||||
}
|
||||
button.secondary {
|
||||
background-color: #EEE;
|
||||
color: #247BA0;
|
||||
}
|
||||
.post button.secondary {
|
||||
border: 2px solid #247BA0;
|
||||
}
|
||||
|
||||
button.warning {
|
||||
background-color: #FF1654;
|
||||
}
|
||||
|
||||
form input {
|
||||
flex-grow: 1;
|
||||
}
|
||||
form div {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
textarea {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
/* icons */
|
||||
a .icon {
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
button .icon {
|
||||
font-size: 1.1rem;
|
||||
vertical-align: sub;
|
||||
}
|
||||
.hidden-text {
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/* star ratings */
|
||||
.stars {
|
||||
letter-spacing: -0.15em;
|
||||
display: inline-block;
|
||||
}
|
||||
.rate-stars .icon {
|
||||
cursor: pointer;
|
||||
color: goldenrod;
|
||||
}
|
||||
.rate-stars label.icon {
|
||||
color: black;
|
||||
}
|
||||
.rate-stars form {
|
||||
display: inline;
|
||||
width: min-content;
|
||||
}
|
||||
.rate-stars button.icon {
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: inline;
|
||||
}
|
||||
.cover-container .stars {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.rate-stars:hover .icon:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.rate-stars form:hover ~ form .icon:before{
|
||||
content: '\e9d7';
|
||||
}
|
||||
|
||||
.review-form .rate-stars:hover .icon:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.review-form .rate-stars label {
|
||||
display: inline;
|
||||
}
|
||||
.review-form .rate-stars input + .icon:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.review-form .rate-stars input:checked + .icon:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.review-form .rate-stars input:checked + * ~ .icon:before {
|
||||
content: '\e9d7';
|
||||
}
|
||||
.review-form .rate-stars:hover label.icon:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.review-form .rate-stars label.icon:hover:before {
|
||||
content: '\e9d9';
|
||||
}
|
||||
.review-form .rate-stars label.icon:hover ~ label.icon:before{
|
||||
content: '\e9d7';
|
||||
}
|
||||
.review-form .rate-stars input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* re-usable tab styles */
|
||||
.tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 3px solid #FF1654;
|
||||
padding-left: 1em;
|
||||
}
|
||||
.tabs.secondary {
|
||||
border-bottom: 3px solid #247BA0;
|
||||
}
|
||||
.tab {
|
||||
padding: 0.5em 1em;
|
||||
border-radius: 0.25em 0.25em 0 0;
|
||||
}
|
||||
.secondary .tab {
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
.tabs .tab.active {
|
||||
background-color: #FF1654;
|
||||
}
|
||||
.tabs.secondary .tab.active {
|
||||
background-color: #247BA0;
|
||||
}
|
||||
.tab.active a {
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
.user-pic {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 50%;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
bottom: 0.35em;
|
||||
}
|
||||
.user-pic.large {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
|
||||
.user-profile .row > * {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.user-profile .row > *:last-child {
|
||||
flex-grow: 1;
|
||||
margin-left: 2em;
|
||||
}
|
||||
|
||||
/* general book display */
|
||||
.book-preview {
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.book-preview.grid {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.cover-container {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.cover-container button {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.book-cover {
|
||||
width: 180px;
|
||||
height: auto;
|
||||
}
|
||||
.book-cover.small {
|
||||
width: 50px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.no-cover {
|
||||
position: relative;
|
||||
}
|
||||
.no-cover div {
|
||||
position: absolute;
|
||||
padding: 1em;
|
||||
color: white;
|
||||
top: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
}
|
||||
.no-cover .title {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
dl {
|
||||
font-size: 0.9em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
dt {
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
dd {
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
|
||||
.all-shelves {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.all-shelves h2 {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.all-shelves > div {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.all-shelves > div:last-child {
|
||||
padding-right: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.all-shelves > div > * {
|
||||
padding: 0;
|
||||
}
|
||||
.all-shelves > div:first-child > * {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.covers-shelf {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.covers-shelf .cover-container {
|
||||
margin-right: 1em;
|
||||
font-size: 0.9em;
|
||||
overflow: unset;
|
||||
width: min-content;
|
||||
}
|
||||
.covers-shelf .cover-container:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
.covers-shelf .book-cover:hover {
|
||||
cursor: pointer;
|
||||
box-shadow: #F3FFBD 0em 0em 1em 1em;
|
||||
}
|
||||
.covers-shelf .book-cover {
|
||||
height: 11rem;
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.all-shelves input[type='radio'] {
|
||||
display: none;
|
||||
}
|
||||
.compose-popout input[type="radio"] {
|
||||
display: none;
|
||||
}
|
||||
.compose-suggestion {
|
||||
display: none;
|
||||
box-shadow: 0 5px 10px rgba(0,0,0,0.15);
|
||||
padding-bottom: 1em;
|
||||
margin-top: 2em;
|
||||
}
|
||||
input:checked ~ .compose-suggestion {
|
||||
display: block;
|
||||
}
|
||||
.compose .book-preview {
|
||||
background-color: #EEE;
|
||||
padding: 1em;
|
||||
}
|
||||
.compose button {
|
||||
margin: 0;
|
||||
}
|
||||
.compose .stars {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.tag {
|
||||
display: inline-block;
|
||||
padding: 0.2em;
|
||||
border-radius: 0.2em;
|
||||
background-color: #EEE;
|
||||
}
|
||||
.tag form {
|
||||
display: inline;
|
||||
}
|
||||
.tag a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
white-space: pre-line;
|
||||
}
|
||||
blockquote .icon-quote-open, blockquote .icon-quote-close, .quote blockquote:before, .quote blockquote:after {
|
||||
font-size: 2rem;
|
||||
margin-right: 0.5rem;
|
||||
color: #888;
|
||||
}
|
||||
blockquote .icon-quote-open {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.quote {
|
||||
margin-bottom: 2em;
|
||||
position: relative;
|
||||
}
|
||||
.quote blockquote {
|
||||
background-color: white;
|
||||
margin: 1em;
|
||||
padding: 1em;
|
||||
}
|
||||
.quote blockquote:before, .quote blockquote:after {
|
||||
font-family: 'icomoon';
|
||||
position: absolute;
|
||||
}
|
||||
.quote blockquote:before {
|
||||
content: "\e904";
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.quote blockquote:after {
|
||||
content: "\e903";
|
||||
bottom: 1em;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.interaction {
|
||||
background-color: #B2DBBF;
|
||||
border-radius: 0 0 0.5em 0.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.interaction > * {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.interaction button:hover {
|
||||
box-shadow: #247BA0 0em 0em 1em 0em;
|
||||
color: #247BA0;
|
||||
}
|
||||
.interaction button {
|
||||
background: white;
|
||||
height: 2em;
|
||||
min-width: 3em;
|
||||
padding: 0;
|
||||
color: #888;
|
||||
}
|
||||
.interaction .active button .icon {
|
||||
color: #FF1654;
|
||||
}
|
||||
.interaction textarea {
|
||||
height: 2em;
|
||||
width: 23em;
|
||||
float: left;
|
||||
padding: 0.25em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
.interaction textarea:valid, .interaction textarea:focus {
|
||||
height: 4em;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin: 1em;
|
||||
}
|
||||
tr {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
tr:nth-child(even) {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
}
|
||||
th, td {
|
||||
padding: 1em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.errorlist {
|
||||
list-style: none;
|
||||
font-size: 0.8em;
|
||||
color: #FF1654;
|
||||
}
|
||||
|
||||
/* status css */
|
||||
.time-ago {
|
||||
float: right;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
.post {
|
||||
background-color: #EFEFEF;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 1em;
|
||||
}
|
||||
.post h2, .compose-suggestion h2 {
|
||||
position: relative;
|
||||
right: 2em;
|
||||
border: none;
|
||||
}
|
||||
.post .time-ago {
|
||||
position: relative;
|
||||
left: 2em;
|
||||
}
|
||||
.post .user-pic, .compose-suggestion .user-pic {
|
||||
right: 0.25em;
|
||||
}
|
||||
.post h2 .subhead {
|
||||
display: block;
|
||||
margin-left: 2em;
|
||||
}
|
||||
.post .subhead .time-ago {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* status page with replies */
|
||||
.comment-thread .reply h2 {
|
||||
background: none;
|
||||
}
|
||||
.comment-thread .post {
|
||||
margin-left: 4em;
|
||||
border-left: 2px solid #247BA0;
|
||||
}
|
||||
.comment-thread .post.depth-1 {
|
||||
margin-left: 0;
|
||||
border: none;
|
||||
}
|
||||
.comment-thread .post.depth-2 {
|
||||
margin-left: 1em;
|
||||
}
|
||||
.comment-thread .post.depth-3 {
|
||||
margin-left: 2em;
|
||||
}
|
||||
.comment-thread .post.depth-4 {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
/* pagination */
|
||||
.pagination a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.pagination .next {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* special one-off "delete all data" banner */
|
||||
#warning {
|
||||
background-color: #FF1654;
|
||||
text-align: center;
|
||||
}
|
138
bookwyrm/static/icons.css
Normal file
@ -0,0 +1,138 @@
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src: url('fonts/icomoon.eot?v0wquk');
|
||||
src: url('fonts/icomoon.eot?v0wquk#iefix') format('embedded-opentype'),
|
||||
url('fonts/icomoon.ttf?v0wquk') format('truetype'),
|
||||
url('fonts/icomoon.woff?v0wquk') format('woff'),
|
||||
url('fonts/icomoon.svg?v0wquk#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
/* use !important to prevent issues with browser extensions that change fonts */
|
||||
font-family: 'icomoon' !important;
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-arrow-right:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-arrow-left:before {
|
||||
content: "\e910";
|
||||
}
|
||||
.icon-arrow-up:before {
|
||||
content: "\e911";
|
||||
}
|
||||
.icon-arrow-down:before {
|
||||
content: "\e912";
|
||||
}
|
||||
.icon-x:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-cancel:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-close:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-search:before {
|
||||
content: "\e986";
|
||||
}
|
||||
.icon-star-empty:before {
|
||||
content: "\e9d7";
|
||||
}
|
||||
.icon-star-half:before {
|
||||
content: "\e9d8";
|
||||
}
|
||||
.icon-star-full:before {
|
||||
content: "\e9d9";
|
||||
}
|
||||
.icon-heart:before {
|
||||
content: "\e9da";
|
||||
}
|
||||
.icon-local:before {
|
||||
content: "\e914";
|
||||
}
|
||||
.icon-home:before {
|
||||
content: "\e913";
|
||||
}
|
||||
.icon-quote-close:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-quote-open:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-image:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-photo:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-picture-o:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-pencil:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-list:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.icon-unlock:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-unlisted:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-globe:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-global:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-federated:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-public:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-lock:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-private:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-chain-broken:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-unlink:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-chain:before {
|
||||
content: "\e90c";
|
||||
}
|
||||
.icon-link:before {
|
||||
content: "\e90c";
|
||||
}
|
||||
.icon-comments:before {
|
||||
content: "\e90d";
|
||||
}
|
||||
.icon-comment:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.icon-boost:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon-bell:before {
|
||||
content: "\e901";
|
||||
}
|
BIN
bookwyrm/static/images/default_avi.jpg
Normal file
After Width: | Height: | Size: 6.6 KiB |
BIN
bookwyrm/static/images/logo-small.png
Normal file
After Width: | Height: | Size: 7.9 KiB |
BIN
bookwyrm/static/images/logo.png
Normal file
After Width: | Height: | Size: 14 KiB |
BIN
bookwyrm/static/images/med.jpg
Normal file
After Width: | Height: | Size: 11 KiB |
BIN
bookwyrm/static/images/no_cover.jpg
Normal file
After Width: | Height: | Size: 2.0 KiB |
BIN
bookwyrm/static/images/profile.jpg
Normal file
After Width: | Height: | Size: 34 KiB |
BIN
bookwyrm/static/images/small.jpg
Normal file
After Width: | Height: | Size: 1.1 KiB |
65
bookwyrm/static/js/shared.js
Normal file
@ -0,0 +1,65 @@
|
||||
function interact(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
var identifier = e.target.getAttribute('data-id');
|
||||
var elements = document.getElementsByClassName(identifier);
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
if (elements[i].className.includes('hidden')) {
|
||||
elements[i].className = elements[i].className.replace('hidden', '');
|
||||
} else {
|
||||
elements[i].className += ' hidden';
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function reply(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
// TODO: display comment
|
||||
return true;
|
||||
}
|
||||
|
||||
function rate_stars(e) {
|
||||
e.preventDefault();
|
||||
ajaxPost(e.target);
|
||||
rating = e.target.rating.value;
|
||||
var stars = e.target.parentElement.getElementsByClassName('icon');
|
||||
for (var i = 0; i < stars.length ; i++) {
|
||||
stars[i].className = rating > i ? 'icon icon-star-full' : 'icon icon-star-empty';
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function tabChange(e) {
|
||||
e.preventDefault();
|
||||
var target = e.target.parentElement;
|
||||
var identifier = target.getAttribute('data-id');
|
||||
|
||||
var options_class = target.getAttribute('data-category');
|
||||
var options = document.getElementsByClassName(options_class);
|
||||
for (var i = 0; i < options.length; i++) {
|
||||
if (!options[i].className.includes('hidden')) {
|
||||
options[i].className += ' hidden';
|
||||
}
|
||||
}
|
||||
|
||||
var tabs = target.parentElement.children;
|
||||
for (i = 0; i < tabs.length; i++) {
|
||||
if (tabs[i].getAttribute('data-id') == identifier) {
|
||||
tabs[i].className += ' active';
|
||||
} else {
|
||||
tabs[i].className = tabs[i].className.replace('active', '');
|
||||
}
|
||||
}
|
||||
|
||||
var el = document.getElementById(identifier);
|
||||
el.className = el.className.replace('hidden', '');
|
||||
}
|
||||
|
||||
function ajaxPost(form) {
|
||||
fetch(form.action, {
|
||||
method : "POST",
|
||||
body: new FormData(form)
|
||||
});
|
||||
}
|