Browse Source

interact.js file added to repo and linked to inxed script

minor adjustments on style
master
JoanaChicau 4 years ago
parent
commit
ecf2cb4f10
  1. 4
      index.html
  2. 3
      interact.min.js
  3. 18
      narrowstyle.css

4
index.html

@ -76,13 +76,13 @@
-->
<p class="note">* you can move and resize the elements here by dragging their corners and side *</p>
<p class="note"> * move and resize the elements above by dragging their corners and sides *</p>
</div>
<!-- drag and resize library: https://interactjs.io/docs/installation#cdn-streamlined -->
<script src="https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js"></script>
<script src="interact.min.js"></script>
<!-- also found this other options:
https://www.webcomponents.org/element/jifalops/drag-resize
https://codepen.io/zz85/pen/gbOoVP -->

3
interact.min.js

File diff suppressed because one or more lines are too long

18
narrowstyle.css

@ -76,12 +76,11 @@ a, button {
}
.sidebar {
height: 100%;
padding: 1rem;
position: fixed;
z-index: 1;
top: 0;
left: 0;
box-shadow: 0.2rem -0.2rem 1rem #ffe4fd;
box-shadow: 1rem 0rem 6rem #ffe4fd;
overflow-x: hidden;
overflow-y: hidden;
}
@ -100,7 +99,7 @@ a, button {
margin-left: 40px;
}
button.minimize{
box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd;
box-shadow: 0.3rem 0.2rem 0.6rem #ffe4fd;
font-size: 1rem;
width: 2rem;
background-color: #393c56;
@ -120,6 +119,7 @@ button.minimize{
overflow: -ms-autohiding-scrollbar;
display: flex;
flex-direction: column;
padding: 1rem 1rem;
}
.sidetop {
height: 45vh;
@ -136,13 +136,18 @@ button.minimize{
color: #ffe4fd;
margin-top: auto;
}
.middle {
height: 10vh;
height: 80px;
font-size: 0.8rem;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: -4rem 0.6rem 2rem #ffe4fd;
width: 100%;
padding: 0.5rem 1rem;
}
.middle p{
margin: 0px;
}
@ -164,14 +169,15 @@ button.minimize{
.sidebottom {
height: 45vh;
}
.sidebottom p {
margin: 0.25rem 0rem;
}
.sidebottom a {
color: #aec7ea;
}
.sidebottom p:last-child {
padding-bottom: 2rem;
}
.live {
margin-left: 300px;
display: inline-block;

Loading…
Cancel
Save