diff --git a/public/css/app.css b/public/css/app.css index deb9244..a8995dd 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -1503,6 +1503,16 @@ body { margin: auto; } +.container.wide { + max-width: 100ch; +} + +@media (min-width: 768px) { + .container { + margin-top: 6em; + } +} + img { max-width: 100%; cursor: pointer; @@ -1512,14 +1522,6 @@ a { color: #0fa0ce; } -.link { - color: #0fa0ce; - border: none; - background: none; - text-decoration: underline; - padding: 0; -} - p { line-height: 1.5rem; } @@ -1528,6 +1530,7 @@ article { box-shadow: 3px 3px 10px 0px #aaa; padding: 2ch 10ch; margin-bottom: 2em; + background-color: white; } /****************************************************************************** @@ -1536,13 +1539,12 @@ article { .pure-form textarea { height: 25ch; - min-width: calc(80ch - 2em); - max-width: calc(80ch - 2em); + resize: vertical; } .pure-form input[type=text], .pure-form textarea { - width: calc(80ch - 2em); + width: 100%; } .pure-form input[type=text], @@ -1565,51 +1567,107 @@ article { text-align: right; } -.pure-form { - box-shadow: 0px 0px 20px -15px #241f1e; - padding: 1em; -} - /****************************************************************************** => Menu *******************************************************************************/ -.pure-menu-horizontal { - display: flex; - padding-left: 40ch; - padding-right: 40ch; - padding-bottom: 1em; - padding-top: 1em; - margin-bottom: 1em; - box-shadow: 0 -5px 10px black; +.menu { + padding-top: 2ch; + padding-bottom: 2ch; + box-shadow: 0px 3px 5px 0px #ccc; + background-color: #fdfcfc; } -.pure-menu-horizontal .pure-menu-list { +.menu-list { display: flex; - justify-content: right; + flex-direction: column; + max-width: 80ch; + margin: auto; + padding-left: 10ch; + list-style: none; +} + +.menu-item { + margin: 0; + padding: 0.5ch 0; + height: 100%; +} + +.menu-link, +.menu-heading { + display: inline-block; + text-decoration: none; + color: #241f1e; width: 100%; } -.pure-menu-link { - color: #241f1e; -} - -.pure-menu-link:hover, -.pure-menu-highlight { +.menu-link:hover, +.menu-heading:hover, +.menu-highlight { color: #0fa0ce; - border-bottom: 1px #0fa0ce solid; - background-color: transparent; } -.pure-menu-heading { +.menu-heading { + text-transform: uppercase; + font-weight: bold; + margin-bottom: 1ch; letter-spacing: 0.5ch; - padding: 0.5em 0; +} + +@media (min-width: 768px) { + .menu { + width: 100%; + position: fixed; + height: 1.75em; + top: 0; + } + + .menu-list { + flex-direction: row; + align-items: center; + padding-left: 0; + } + + .menu-link, + .menu-heading { + width: auto; + } + + .menu-item { + margin-left: 1em; + } + + .menu-heading { + flex-grow: 1; + margin-bottom: 0; + } +} + +.separator { + width: 100%; + height: 2px; + margin-bottom: 1em; + box-shadow: 0px 10px 10px #ccc; } /****************************************************************************** => Buttons & Links *******************************************************************************/ +.pure-button { + letter-spacing: 0.2em; + min-width: 20ch; + border-radius: 0; + background-image: none; + border: none; +} + +.pure-button:focus, +.pure-button:hover, +.pure-button:active { + background-image: none; +} + .special-link { color: #ee1155; } @@ -1624,24 +1682,18 @@ article { background-color: white; color: #241f1e; border: #241f1e solid 1px; - border-radius: 0; - min-width: 20ch; } .button-black-white:focus, .button-black-white:hover { background-color: white; color: #241f1e; - border: #241f1e solid 1px; - background-image: none; box-shadow: inset 1px 1px 4px -2px #241f1e; } .button-black-white:active { background-color: white; color: #241f1e; - border: #241f1e solid 1px; - background-image: none; box-shadow: inset 1px 1px 2px #241f1e; } @@ -1649,8 +1701,8 @@ article { => Tables *******************************************************************************/ -.table-heading { - margin-bottom: 1em; +.pure-table { + margin-top: 1em; } .pure-table, @@ -1680,7 +1732,7 @@ article { } .pure-table .controls { - width: 16ch; + width: 22ch; } .pure-table .controls > * { @@ -1689,7 +1741,7 @@ article { .pure-table .controls .pure-button.button-black-white { min-width: auto; - width: 7ch; + width: 10ch; padding: 0.5em 0; } diff --git a/public/js/app.js b/public/js/app.js index 66ea5e1..11d11a0 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -94,7 +94,7 @@ /***/ (function(module, exports) { // Highlight links if in his page -if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("proyectos-link").classList.add("pure-menu-highlight");else if (window.location.pathname == "/setup") document.getElementById("setup-link").classList.add("pure-menu-highlight"); // Makes all images clickeable +if (window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") document.getElementById("blog-link").classList.add("menu-highlight");else if (window.location.pathname == "/now") document.getElementById("now-link").classList.add("menu-highlight");else if (window.location.pathname == "/projects") document.getElementById("projects-link").classList.add("menu-highlight");else if (window.location.pathname == "/setups") document.getElementById("setup-link").classList.add("menu-highlight"); // Makes all images clickeable var images = document.getElementsByTagName("img"); diff --git a/resources/js/app.js b/resources/js/app.js index 1653b08..877ed80 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,12 +1,12 @@ // Highlight links if in his page if(window.location.pathname == "/blog" || window.location.pathname == "/blog.archive") - document.getElementById("blog-link").classList.add("pure-menu-highlight"); + document.getElementById("blog-link").classList.add("menu-highlight"); else if(window.location.pathname == "/now") - document.getElementById("now-link").classList.add("pure-menu-highlight"); + document.getElementById("now-link").classList.add("menu-highlight"); else if(window.location.pathname == "/projects") - document.getElementById("proyectos-link").classList.add("pure-menu-highlight"); -else if(window.location.pathname == "/setup") - document.getElementById("setup-link").classList.add("pure-menu-highlight"); + document.getElementById("projects-link").classList.add("menu-highlight"); +else if(window.location.pathname == "/setups") + document.getElementById("setup-link").classList.add("menu-highlight"); // Makes all images clickeable var images = document.getElementsByTagName("img"); diff --git a/resources/sass/app.scss b/resources/sass/app.scss index ff5ac84..2555859 100644 --- a/resources/sass/app.scss +++ b/resources/sass/app.scss @@ -23,6 +23,16 @@ body { margin: auto; } +.container.wide { + max-width: 100ch; +} + +@media (min-width: 768px){ + .container { + margin-top: 6em; + } +} + img { max-width: 100%; cursor: pointer; @@ -32,14 +42,6 @@ a { color: $primary-color; } -.link { - color: $primary-color; - border: none; - background: none; - text-decoration: underline; - padding: 0; -} - p { line-height: 1.5rem; } @@ -48,6 +50,7 @@ article { box-shadow: 3px 3px 10px 0px #aaa; padding: 2ch 10ch; margin-bottom: 2em; + background-color: lighten($background-color, 10%); } /****************************************************************************** @@ -55,13 +58,12 @@ article { *******************************************************************************/ .pure-form textarea { height: 25ch; - min-width: calc(80ch - 2em); - max-width: calc(80ch - 2em); + resize: vertical; } .pure-form input[type="text"], .pure-form textarea { - width: calc(80ch - 2em); + width: 100%; } .pure-form input[type="text"], @@ -84,51 +86,106 @@ article { text-align: right; } -.pure-form { - box-shadow: 0px 0px 20px -15px $foreground-color; - //border: 1px $foreground-color solid; - //background-color: darken($background-color, 5%); - padding: 1em; -} - /****************************************************************************** => Menu *******************************************************************************/ -.pure-menu-horizontal { - display: flex; - padding-left: 40ch; - padding-right: 40ch; - padding-bottom: 1em; - padding-top: 1em; - margin-bottom: 1em; - box-shadow: 0 -5px 10px black; +.menu { + padding-top: 2ch; + padding-bottom: 2ch; + box-shadow: 0px 3px 5px 0px #ccc; + background-color: $background-color; } -.pure-menu-horizontal .pure-menu-list { +.menu-list { display: flex; - justify-content: right; + flex-direction: column; + max-width: 80ch; + margin: auto; + padding-left: 10ch; + list-style: none; +} + +.menu-item { + margin: 0; + padding: .5ch 0; + height: 100%; +} + + +.menu-link, +.menu-heading { + display: inline-block; + text-decoration: none; + color: $foreground-color; width: 100%; } -.pure-menu-link { - color: $foreground-color; -} - -.pure-menu-link:hover, .pure-menu-highlight { +.menu-link:hover, +.menu-heading:hover, +.menu-highlight { color: $primary-color; - border-bottom: 1px $primary-color solid; - background-color: transparent; } -.pure-menu-heading { +.menu-heading { + text-transform: uppercase; + font-weight: bold; + margin-bottom: 1ch; letter-spacing: .5ch; - padding: .5em 0; +} + + +@media (min-width: 768px){ + .menu { + width: 100%; + position: fixed; + height: 1.75em; + top: 0; + } + .menu-list { + flex-direction: row; + align-items: center; + padding-left: 0; + } + + .menu-link, .menu-heading { + width: auto; + } + + .menu-item{ + margin-left: 1em; + } + + .menu-heading { + flex-grow: 1; + margin-bottom: 0; + } +} + +.separator { + width:100%; + height: 2px; + margin-bottom: 1em; + box-shadow: 0px 10px 10px #ccc; } /****************************************************************************** => Buttons & Links *******************************************************************************/ +.pure-button { + letter-spacing: .2em; + min-width: 20ch; + border-radius: 0; + background-image: none; + border: none; +} + +.pure-button:focus, +.pure-button:hover, +.pure-button:active{ + background-image: none; +} + .special-link { color: $admin-color; } @@ -143,31 +200,25 @@ article { background-color: lighten($background-color, 10%); color: $foreground-color; border: $foreground-color solid 1px; - border-radius: 0; - min-width: 20ch; } .button-black-white:focus, .button-black-white:hover { background-color: lighten($background-color, 10%); color: $foreground-color; - border: $foreground-color solid 1px; - background-image: none; box-shadow: inset 1px 1px 4px -2px $foreground-color; } .button-black-white:active{ background-color: lighten($background-color, 10%); color: $foreground-color; - border: $foreground-color solid 1px; - background-image: none; box-shadow: inset 1px 1px 2px $foreground-color; } /****************************************************************************** => Tables *******************************************************************************/ -.table-heading { - margin-bottom: 1em; +.pure-table { + margin-top: 1em; } .pure-table, @@ -198,7 +249,7 @@ article { } .pure-table .controls { - width: 16ch; + width: 22ch; } .pure-table .controls > *{ @@ -207,7 +258,7 @@ article { .pure-table .controls .pure-button.button-black-white{ min-width: auto; - width: 7ch; + width: 10ch; padding: .5em 0; } diff --git a/resources/views/admin/base.blade.php b/resources/views/admin/base.blade.php index b6b81df..0be2816 100644 --- a/resources/views/admin/base.blade.php +++ b/resources/views/admin/base.blade.php @@ -7,18 +7,28 @@ -