diff --git a/cmunci.eot b/cmunci.eot new file mode 100644 index 0000000..ee70212 Binary files /dev/null and b/cmunci.eot differ diff --git a/cmunci.ttf b/cmunci.ttf new file mode 100644 index 0000000..4d41d1f Binary files /dev/null and b/cmunci.ttf differ diff --git a/cmunci.woff b/cmunci.woff new file mode 100644 index 0000000..08554bb Binary files /dev/null and b/cmunci.woff differ diff --git a/narrowcast-playground.html b/narrowcast-playground.html new file mode 100644 index 0000000..603cf90 --- /dev/null +++ b/narrowcast-playground.html @@ -0,0 +1,154 @@ + + + + + NARROWCAST + + + + + +
back
↬ stage
+ + + +
+ + + + + + + +
+ + + + + + + + + \ No newline at end of file diff --git a/narrowstyle.css b/narrowstyle.css new file mode 100644 index 0000000..ef088fb --- /dev/null +++ b/narrowstyle.css @@ -0,0 +1,155 @@ +@font-face { + font-family: 'Computer Modern Classical Serif Italic'; + src: url('ClassicalSerifItalic/cmunci.eot'); + src: url('ClassicalSerifItalic/cmunci.eot?#iefix') format('embedded-opentype'), + url('ClassicalSerifItalic/cmunci.woff') format('woff'), + url('ClassicalSerifItalic/cmunci.ttf') format('truetype'), + url('ClassicalSerifItalic/cmunci.svg#cmunci') format('svg'); + font-weight: normal; + font-style: italic; +} +@font-face { + font-family: 'Computer Modern Typewriter Light'; + src: url('TypewriterLight/cmunbtl.eot'); + src: url('TypewriterLight/cmunbtl.eot?#iefix') format('embedded-opentype'), + url('TypewriterLight/cmunbtl.woff') format('woff'), + url('TypewriterLight/cmunbtl.ttf') format('truetype'), + url('TypewriterLight/cmunbtl.svg#cmuntt') format('svg'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'Computer Modern Typewriter Light'; + src: url('TypewriterLight/cmunbto.eot'); + src: url('TypewriterLight/cmunbto.eot?#iefix') format('embedded-opentype'), + url('TypewriterLight/cmunbto.woff') format('woff'), + url('TypewriterLight/cmunbto.ttf') format('truetype'), + url('TypewriterLight/cmunbto.svg#cmunbto') format('svg'); + font-weight: normal; + font-style: italic; +} +html { + box-sizing: border-box; + height: 100%; + font-size: 14pt; + line-height: 16pt; +} +*, *:before, *:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; +} +body{ + margin: 0rem; + font-family: 'Computer Modern Typewriter Light'; + background-color: #393c56; + color: #ffe4fd;; +} +iframe { + border: none; +} +a { + cursor: pointer; +} +.about { + font-family: 'Computer Modern Classical Serif Italic'; + font-size: 1.6rem; + line-height: 0.6rem; + position: fixed; + top: 0; + right: 0; + margin: 1rem; + color: #ffffe5; +} +.about a { + font-size: 1rem; +} +.sidebar { + height: 100%; + width: 300px; + padding: 1rem; + position: fixed; + z-index: 1; + top: 0; + left: 0; + box-shadow: 0.2rem -0.2rem 1rem #ffe4fd; + overflow-x: hidden; +} +.sidetop, .sidebottom { +overflow-y: scroll; +scrollbar-width: none; +overflow: -moz-scrollbars-none; +-ms-overflow-style: none; +-ms-overflow-style: -ms-autohiding-scrollbar; +overflow: -ms-autohiding-scrollbar; +display: flex; +flex-direction: column; +} +.sidetop { + height: 45vh; + font-size: 1.2rem; +} +.sidetop a { + color: #ffe4fd; + margin-top: auto; +} +.middle { + height: 10vh; + font-size: 0.8rem; + display: flex; + flex-direction: column; + justify-content: space-between; +} +.middle p{ + margin: 0px; +} +#livetitle { + font-size: 2rem; + animation: glow 1.6s infinite alternate; + -webkit-animation: glow 1.6s infinite alternate; +} +@-webkit-keyframes glow { + to { + text-shadow: 0 0 8px #ff029c; + } +} +@-webkit-keyframes glowbutton { + to { + box-shadow: 0 0 8px #ff029c; + } +} +.sidebottom { + height: 45vh; +} +.sidebottom a { + color: #aec7ea; +} +.live { + margin-left: 300px; + display: inline-block; + height: 100%; +} +.live > *{ +/* touch-action: none;*/ +} + +.resize-drag { + width: 620px; + border-radius: 2rem 0.2rem 2rem 0.6rem; + padding: 2rem 0.4rem 0.4rem 2rem; + margin: 1rem; + touch-action: none; + /* This makes things *much* easier */ + box-sizing: border-box; + box-shadow: inset 0.6rem 0.2rem 0.9rem #ffe4fd; +} +.resize-drag::before { + content: "◉ ➫ drag"; + font-size: 2rem; + width: 1rem; + height: 1rem; + color: #ff029c; + background-color: #ff029c; + position: absolute; + z-index: 999; +}