diff options
21 files changed, 160 insertions, 15 deletions
diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js index c2ebcd7..ebc0103 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.text.js @@ -29,7 +29,7 @@ export const ParagraphHeader = ({ paragraph, currentParagraph, currentAnnotation className={className} onDoubleClick={e => onDoubleClick(e, paragraph)} > - {text} + <span>{text}</span> </div> ) } diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 64fc915..ea2f08c 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -3,6 +3,7 @@ import { Route } from 'react-router-dom' import { bindActionCreators } from 'redux' import { connect } from 'react-redux' +import './viewer.fonts.css' import './viewer.css' import actions from 'app/actions' diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css index fba83bc..c52db20 100644 --- a/animism-align/frontend/app/views/viewer/viewer.css +++ b/animism-align/frontend/app/views/viewer/viewer.css @@ -1,23 +1,36 @@ -.viewer { +.body.viewer { + height: calc(100% - 3.125rem); background: #fff; color: #000; + font-family: "Neue Haas Unica", sans-serif; } /* transcript */ .transcript { - width: 100%; - height: calc(100% - 3.125rem); + position: absolute; + right: 0; + width: 30rem; + max-width: 100vw; + height: 100%; overflow: scroll; background: white; color: black; padding: 1rem; + border-left: 1px solid #000; + font-size: 15px; + line-height: 1.45; + transform: translateZ(0) translateX(100%); + transition: transform 0.2s; +} + +.transcript.visible { + transform: translateZ(0) translateX(0); } /* general paragraph styles */ .transcript .content { - font-family: 'Georgia', serif; width: 100%; padding-bottom: 6rem; position: relative; @@ -30,35 +43,40 @@ /* paragraph subtypes */ .transcript .header { - font-size: 32px; + text-align: center; +} +.transcript .header span { + border-bottom: 1px solid; } .transcript .paragraph, .transcript .hidden { - font-size: 16px; - line-height: 1.5; } .transcript .blockquote { padding-left: 3rem; - line-height: 1.5; + line-height: 1.45; } /* sentences */ .transcript span { margin-right: 4px; + box-shadow: 0 0 0 rgba(255,255,255,0.0); } .transcript .media span { margin-right: 0; + border-bottom: 1px solid; + cursor: pointer; } .transcript .paragraph .current { - box-shadow: -2px -3px 0 #fff, - 2px -3px 0 #fff, - -2px 3px 0 #fff, - 2px 3px 0 #fff; + box-shadow: -2px -1px 0 #e8e8e8, + 2px -1px 0 #e8e8e8, + -2px 1px 0 #e8e8e8, + 2px 1px 0 #e8e8e8; box-decoration-break: clone; - background: black; - color: white; + background: #e8e8e8; + color: #000; + transition: all 0.2s; } diff --git a/animism-align/frontend/app/views/viewer/viewer.fonts.css b/animism-align/frontend/app/views/viewer/viewer.fonts.css new file mode 100644 index 0000000..09631ee --- /dev/null +++ b/animism-align/frontend/app/views/viewer/viewer.fonts.css @@ -0,0 +1,63 @@ +@font-face{ + font-family: "Freight Text"; + src: url("//freigtexprobook-webfont.woff2") format("woff2"), + url("/static/fonts/eflux/freigtexprobook-webfont.woff") format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face{ + font-family: "Freight Text"; + src: url("/static/fonts/eflux/freigtexprobookit-webfont.woff2") format("woff2"), + url("/static/fonts/eflux/freigtexprobookit-webfont.woff") format("woff"); + font-weight: 400; + font-style: italic; +} + +@font-face{ + font-family: "Freight Text"; + src: url("/static/fonts/eflux/freigtexprobold-webfont.woff2") format("woff2"), + url("/static/fonts/eflux/freigtexprobold-webfont.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face{ + font-family: "Freight Text"; + src: url("/static/fonts/eflux/freigtexproboldit-webfont.woff2") format("woff2"), + url("/static/fonts/eflux/freigtexproboldit-webfont.woff") format("woff"); + font-weight: 700; + font-style: italic; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("/static/fonts/eflux/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2") format("woff2"), + url("/static/fonts/eflux/27645c8a-608b-4abf-a2f1-c4407b576723.woff") format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("/static/fonts/eflux/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2") format("woff2"), + url("/static/fonts/eflux/8546c78d-5a38-4c7b-9371-5a70d803922a.woff") format("woff"); + font-weight: 400; + font-style: italic; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("/static/fonts/eflux/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2") format("woff2"), + url("/static/fonts/eflux/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("/static/fonts/eflux/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2") format("woff2"), + url("/static/fonts/eflux/4142b00a-232a-49e8-803c-541f8b932fa1.woff") format("woff"); + font-weight: 700; + font-style: italic; +} diff --git a/animism-align/static/fonts/eflux/27645c8a-608b-4abf-a2f1-c4407b576723.woff b/animism-align/static/fonts/eflux/27645c8a-608b-4abf-a2f1-c4407b576723.woff Binary files differnew file mode 100755 index 0000000..319fe92 --- /dev/null +++ b/animism-align/static/fonts/eflux/27645c8a-608b-4abf-a2f1-c4407b576723.woff diff --git a/animism-align/static/fonts/eflux/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2 b/animism-align/static/fonts/eflux/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2 Binary files differnew file mode 100755 index 0000000..3dae639 --- /dev/null +++ b/animism-align/static/fonts/eflux/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2 diff --git a/animism-align/static/fonts/eflux/4142b00a-232a-49e8-803c-541f8b932fa1.woff b/animism-align/static/fonts/eflux/4142b00a-232a-49e8-803c-541f8b932fa1.woff Binary files differnew file mode 100755 index 0000000..3f9d5f5 --- /dev/null +++ b/animism-align/static/fonts/eflux/4142b00a-232a-49e8-803c-541f8b932fa1.woff diff --git a/animism-align/static/fonts/eflux/8546c78d-5a38-4c7b-9371-5a70d803922a.woff b/animism-align/static/fonts/eflux/8546c78d-5a38-4c7b-9371-5a70d803922a.woff Binary files differnew file mode 100755 index 0000000..ec4a9cf --- /dev/null +++ b/animism-align/static/fonts/eflux/8546c78d-5a38-4c7b-9371-5a70d803922a.woff diff --git a/animism-align/static/fonts/eflux/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff b/animism-align/static/fonts/eflux/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff Binary files differnew file mode 100755 index 0000000..7182ccd --- /dev/null +++ b/animism-align/static/fonts/eflux/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff diff --git a/animism-align/static/fonts/eflux/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2 b/animism-align/static/fonts/eflux/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2 Binary files differnew file mode 100755 index 0000000..79582b5 --- /dev/null +++ b/animism-align/static/fonts/eflux/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2 diff --git a/animism-align/static/fonts/eflux/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2 b/animism-align/static/fonts/eflux/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2 Binary files differnew file mode 100755 index 0000000..506efb4 --- /dev/null +++ b/animism-align/static/fonts/eflux/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2 diff --git a/animism-align/static/fonts/eflux/e-flux-fonts.scss b/animism-align/static/fonts/eflux/e-flux-fonts.scss new file mode 100644 index 0000000..48ceeda --- /dev/null +++ b/animism-align/static/fonts/eflux/e-flux-fonts.scss @@ -0,0 +1,63 @@ +@font-face{ + font-family: "Freight Text"; + src: url("../webfonts/freigtexprobook-webfont.woff2") format("woff2"), + url("../webfonts/freigtexprobook-webfont.woff") format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face{ + font-family: "Freight Text"; + src: url("../webfonts/freigtexprobookit-webfont.woff2") format("woff2"), + url("../webfonts/freigtexprobookit-webfont.woff") format("woff"); + font-weight: 400; + font-style: italic; +} + +@font-face{ + font-family: "Freight Text"; + src: url("../webfonts/freigtexprobold-webfont.woff2") format("woff2"), + url("../webfonts/freigtexprobold-webfont.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face{ + font-family: "Freight Text"; + src: url("../webfonts/freigtexproboldit-webfont.woff2") format("woff2"), + url("../webfonts/freigtexproboldit-webfont.woff") format("woff"); + font-weight: 700; + font-style: italic; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("../webfonts/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2") format("woff2"), + url("../webfonts/27645c8a-608b-4abf-a2f1-c4407b576723.woff") format("woff"); + font-weight: 400; + font-style: normal; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("../webfonts/cc589c6c-1ce4-4279-8684-c378497d1c68.woff2") format("woff2"), + url("../webfonts/8546c78d-5a38-4c7b-9371-5a70d803922a.woff") format("woff"); + font-weight: 400; + font-style: italic; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("../webfonts/39bb8fb3-84a4-4ab8-ae45-db1834f5d807.woff2") format("woff2"), + url("../webfonts/96fd4fb4-75db-412f-986d-d65380ee0ccf.woff") format("woff"); + font-weight: 700; + font-style: normal; +} + +@font-face{ + font-family: "Neue Haas Unica"; + src: url("../webfonts/dfa9d078-533c-44d9-9dd9-deaafbff5a96.woff2") format("woff2"), + url("../webfonts/4142b00a-232a-49e8-803c-541f8b932fa1.woff") format("woff"); + font-weight: 700; + font-style: italic; +} diff --git a/animism-align/static/fonts/eflux/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2 b/animism-align/static/fonts/eflux/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2 Binary files differnew file mode 100755 index 0000000..4de6166 --- /dev/null +++ b/animism-align/static/fonts/eflux/e0d80810-f7e3-4fea-8c57-ef8116f0465d.woff2 diff --git a/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff b/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff Binary files differnew file mode 100755 index 0000000..7e62850 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff diff --git a/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff2 b/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff2 Binary files differnew file mode 100755 index 0000000..8430916 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobold-webfont.woff2 diff --git a/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff b/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff Binary files differnew file mode 100755 index 0000000..4dbb1ef --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff diff --git a/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff2 b/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff2 Binary files differnew file mode 100755 index 0000000..c344fb1 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexproboldit-webfont.woff2 diff --git a/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff b/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff Binary files differnew file mode 100755 index 0000000..cc821e8 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff diff --git a/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff2 b/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff2 Binary files differnew file mode 100755 index 0000000..69a1837 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobook-webfont.woff2 diff --git a/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff b/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff Binary files differnew file mode 100755 index 0000000..d77ac2d --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff diff --git a/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff2 b/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff2 Binary files differnew file mode 100755 index 0000000..fd40892 --- /dev/null +++ b/animism-align/static/fonts/eflux/freigtexprobookit-webfont.woff2 |