diff --git a/index.html b/index.html index 0000d38..72df422 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,17 @@ Morse Converter + + - Morse Converter + + + Morse Converter +
writtenMorse
@@ -33,10 +38,28 @@
diff --git a/res/css/main.css b/res/css/main.css index 7100d4f..ddb07b9 100644 --- a/res/css/main.css +++ b/res/css/main.css @@ -10,17 +10,25 @@ body { background: #03a9f4; top: 0px; left: 0px; - padding-left: 340px; + padding-left: 320px; color: #fff; font-size: 25px; line-height: 60px; - -webkit-box-shadow: 4px 4px 4px 0px #999; - -moz-box-shadow: 4px 4px 4px 0px #999; - -ms-box-shadow: 4px 4px 4px 0px #999; - box-shadow: 4px 4px 4px 0px #999; } + -webkit-box-shadow: 0px 4px 4px 0px #999; + -moz-box-shadow: 0px 4px 4px 0px #999; + -ms-box-shadow: 0px 4px 4px 0px #999; + box-shadow: 0px 4px 4px 0px #999; } + +.menuicon { + height: 30px; + position: fixed; + top: 0px; + left: 0px; + padding: 15px; + cursor: pointer; } .drawer { - width: 320px; + width: 300px; top: 0px; left: 0px; position: absolute; @@ -28,7 +36,8 @@ body { background: #fff; border-right-width: 1px; border-right-color: #cecece; - border-right-style: solid; } + border-right-style: solid; + z-index: 50; } .drawerimg { width: 100%; } @@ -48,9 +57,9 @@ body { border-top-style: solid; } .main { - width: calc(100% - 320px); - height: 100%; - margin-left: 320px; + width: calc(100% - 300px); + height: calc(100%-60px); + margin-left: 300px; margin-top: 60px; } .card { @@ -90,12 +99,38 @@ body { .cardbutton { min-width: 64px; margin-left: 8px; - padding: 5px; } + padding: 5px; + color: #03a9f4; } .cardbutton:hover { background: #e0e0e0; } +.overlay { + background: #000; + opacity: 0; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + z-index: 30; } + #outputcard { display: none; } +@media screen and (max-width: 1400px) { + .drawer { + display: none; + border-right-width: 0px; } + + .actionbar { + padding-left: 60px; } + + .main { + width: 100%; + margin-left: 0px; } } +@media screen and (max-width: 750px) { + .card { + width: calc(100% - 36px); } } + /*# sourceMappingURL=main.css.map */ diff --git a/res/css/main.sass b/res/css/main.sass index c05c7ee..033de9f 100644 --- a/res/css/main.sass +++ b/res/css/main.sass @@ -1,7 +1,7 @@ $font-stack: 'Roboto', sans-serif $body-color: #f4f4f4 $primary-color: #03a9f4 -$drawer-width: 320px +$drawer-width: 300px $actionbar-height: 60px $actionbar-shadow: #999 $divider-color: #cecece @@ -38,7 +38,15 @@ body color: #fff font-size: 25px line-height: $actionbar-height - +box-shadow(4px,4px,4px,0px,$actionbar-shadow) + +box-shadow(0px,4px,4px,0px,$actionbar-shadow) + +.menuicon + height: 30px + position: fixed + top: 0px + left: 0px + padding: 15px + cursor: pointer .drawer width: $drawer-width @@ -50,6 +58,7 @@ body border-right-width: 1px border-right-color: $divider-color border-right-style: solid + z-index: 50 .drawerimg width: 100% @@ -69,8 +78,8 @@ body border-top-style: solid .main - width: calc(100% - 320px) - height: 100% + width: calc(100% - 300px) + height: calc(100%-60px) margin-left: $drawer-width margin-top: $actionbar-height @@ -107,9 +116,34 @@ body min-width: 64px margin-left: 8px padding: 5px + color: $primary-color .cardbutton:hover background: $hovered-element-color +.overlay + background: #000 + opacity: 0 + position: fixed + top: 0px + left: 0px + width: 100% + height: 100% + z-index: 30 + #outputcard display: none + +@media screen and (max-width: 1400px) + .drawer + display: none + border-right-width: 0px + .actionbar + padding-left: 60px + .main + width: 100% + margin-left: 0px + +@media screen and (max-width: 750px) + .card + width: calc(100% - 36px) diff --git a/res/img/menu.svg b/res/img/menu.svg new file mode 100644 index 0000000..e5cba3e --- /dev/null +++ b/res/img/menu.svg @@ -0,0 +1,114 @@ + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + +