diff --git a/narrowstyle.css b/narrowstyle.css index 3c405f9..6fd089e 100644 --- a/narrowstyle.css +++ b/narrowstyle.css @@ -7,6 +7,7 @@ font-weight: normal; font-style: italic; } + @font-face { font-family: "Computer Modern Typewriter Light"; src: url("cmunbtl.eot"); @@ -16,6 +17,7 @@ font-weight: normal; font-style: normal; } + @font-face { font-family: "Computer Modern Typewriter Light"; src: url("cmunbto.eot"); @@ -25,12 +27,14 @@ font-weight: normal; font-style: italic; } + html { box-sizing: border-box; height: 100%; font-size: 14pt; line-height: 16pt; } + *, *:before, *:after { @@ -38,21 +42,25 @@ html { -moz-box-sizing: inherit; box-sizing: inherit; } + body { margin: 0rem; font-family: "Computer Modern Typewriter Light"; background-color: #393c56; color: #ffe4fd; } + iframe, video { border: none; width: inherit; } + a, button { cursor: pointer; } + .note { font-size: 0.8rem; position: fixed; @@ -60,6 +68,7 @@ button { right: 0; margin: 0.2rem; } + .about { font-family: "Computer Modern Classical Serif Italic"; font-size: 1.2rem; @@ -70,11 +79,13 @@ button { margin: 1rem; color: #ffffe5; } + .about a { font-size: 1rem; color: #ffffe5; text-decoration: none; } + .sidebar { height: 100%; position: fixed; @@ -99,6 +110,7 @@ button { transition: margin-left 2s; margin-left: 40px; } + button.minimize { box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd; font-size: 1rem; @@ -111,6 +123,7 @@ button.minimize { margin: 0.5rem; border: none; } + .sidetop, .sidebottom { overflow-y: scroll; @@ -123,6 +136,7 @@ button.minimize { flex-direction: column; padding: 1rem 1rem; } + .sidetop { height: 45vh; font-size: 1.2rem; @@ -153,40 +167,49 @@ button.minimize { .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; box-shadow: 10rem -6rem 4rem #ffe4fd; } + .sidebottom p { margin: 0.25rem 0rem; } + .sidebottom a { color: #aec7ea; } + .sidebottom p:last-child { padding-bottom: 2rem; } + .live { margin-left: 300px; display: inline-block; height: 100%; width: 100%; } + .live > * { /* touch-action: none;*/ } @@ -201,6 +224,7 @@ button.minimize { border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; position: relative; } + .drag::before, .resize-drag::before, .live > *::before { @@ -238,6 +262,7 @@ button.minimize { -webkit-border-radius: 1% 0% 0% 0% / 45% 0% 0% 0%; } } + @-webkit-keyframes corners { 0% { border-radius: 2rem 0rem 1rem 2rem;