diff --git a/Seenginx/Pages/_Host.cshtml b/Seenginx/Pages/_Host.cshtml index 3bb279c..8d9d404 100644 --- a/Seenginx/Pages/_Host.cshtml +++ b/Seenginx/Pages/_Host.cshtml @@ -43,6 +43,5 @@ - diff --git a/Seenginx/SCSS/main.scss b/Seenginx/SCSS/main.scss index e1a1c87..0b4bbdf 100644 --- a/Seenginx/SCSS/main.scss +++ b/Seenginx/SCSS/main.scss @@ -1,4 +1,5 @@ @import "mixins.scss"; @import "base.scss"; @import "utility.scss"; -@import "side-menu.scss"; \ No newline at end of file +@import "side-menu.scss"; +@import "override-framework.scss"; \ No newline at end of file diff --git a/Seenginx/SCSS/override-framework.scss b/Seenginx/SCSS/override-framework.scss new file mode 100644 index 0000000..5732ee8 --- /dev/null +++ b/Seenginx/SCSS/override-framework.scss @@ -0,0 +1,25 @@ +@font-face { + font-family: 'Ubuntu'; + src: url(/fonts/ubuntu-light-webfont.woff2) format('woff2'); + font-weight: 300; + font-style: normal; +} +@font-face { + font-family: 'Ubuntu-Mono'; + src: url(/fonts/ubuntumono-regular-webfont.woff2) format('woff2'); + /*font-weight: 300;*/ + font-style: normal; +} + +html{ + font-family: Ubuntu, sans-serif; +} + +.pure-menu-heading{ + text-transform: none; + font-family: Ubuntu-Mono,'Noto Mono' +} +.pure-menu-link { + font-family: Ubuntu-Mono,'Noto Mono' +} + diff --git a/Seenginx/SCSS/side-menu.scss b/Seenginx/SCSS/side-menu.scss index 5069e22..56bf6d7 100644 --- a/Seenginx/SCSS/side-menu.scss +++ b/Seenginx/SCSS/side-menu.scss @@ -5,8 +5,8 @@ body { :root { --leftPanel: 150px; --negativeLeftPanel: -150px; - --mobileLeftPanel: 150px; - --mobileNegativeLeftPanel: -150px; + --mobileLeftPanel: 50px; + --mobileNegativeLeftPanel: -50px; } .pure-img-responsive { @@ -37,6 +37,11 @@ This is the parent `
` that contains the menu and the content area. &.active { + @include MediaQuery(phone) { + position: relative; + left: var(--leftPanel); + } + & .menu-link { left: var(--leftPanel); } @@ -121,7 +126,7 @@ small screens. left: 0; /* "#menu width" */ background: #000; background: rgba(0,0,0,0.7); - font-size: 16px; /* change this value to increase/decrease button size */ + font-size: 14px; /* change this value to increase/decrease button size */ z-index: 10; width: min-content; height: auto; @@ -140,14 +145,8 @@ small screens. /* Hides the menu at `48em`, but modify this based on your app's needs. */ -@media (min-width: 48em) { - - .header, - .content { - padding-left: 2em; - padding-right: 2em; - } +@media (min-width: 37.6em) { #layout { padding-left: var(--leftPanel); /* left col width "#menu" */ left: 0; @@ -167,16 +166,3 @@ Hides the menu at `48em`, but modify this based on your app's needs. left: var(--leftPanel); } } - -@media (max-width: 48em) { - /* Only apply this when the window is small. Otherwise, the following - case results in extra padding on the left: - * Make the window small. - * Tap the menu to trigger the active state. - * Make the window large again. - */ - #layout.active { - position: relative; - left: var(--leftPanel); - } -} diff --git a/Seenginx/SCSS/utility.scss b/Seenginx/SCSS/utility.scss index fb4a60c..97bd4cc 100644 --- a/Seenginx/SCSS/utility.scss +++ b/Seenginx/SCSS/utility.scss @@ -7,3 +7,8 @@ } } } + +.petiteCaps { + font-variant: petite-caps +} + diff --git a/Seenginx/Shared/NavMenu.razor b/Seenginx/Shared/NavMenu.razor index 8d7d1d8..ca1156c 100644 --- a/Seenginx/Shared/NavMenu.razor +++ b/Seenginx/Shared/NavMenu.razor @@ -8,27 +8,27 @@
- Seenginx + Seenginx diff --git a/Seenginx/Shared/NavMenu.razor.cs b/Seenginx/Shared/NavMenu.razor.cs index 32f5099..c105bfc 100644 --- a/Seenginx/Shared/NavMenu.razor.cs +++ b/Seenginx/Shared/NavMenu.razor.cs @@ -13,7 +13,7 @@ namespace Seenginx.Shared [Parameter] public string MenuActiveClass { get; set; } - [ParameterAttribute] + [Parameter] public EventCallback MenuActiveClassChanged { get; set; } protected async override Task OnInitializedAsync() diff --git a/Seenginx/wwwroot/css/main.css b/Seenginx/wwwroot/css/main.css index c7d0c90..6731aa1 100644 --- a/Seenginx/wwwroot/css/main.css +++ b/Seenginx/wwwroot/css/main.css @@ -33,14 +33,17 @@ body { .isHiddenMobile { display: none; } } +.petiteCaps { + font-variant: petite-caps; } + body { color: #777; } :root { --leftPanel: 150px; --negativeLeftPanel: -150px; - --mobileLeftPanel: 150px; - --mobileNegativeLeftPanel: -150px; } + --mobileLeftPanel: 50px; + --mobileNegativeLeftPanel: -50px; } .pure-img-responsive { max-width: 100%; @@ -65,6 +68,10 @@ This is the parent `
` that contains the menu and the content area. position: relative; left: 0; padding-left: 0; } + @media only screen and (max-width: 37.5em) { + #layout.active { + position: relative; + left: var(--leftPanel); } } #layout.active .menu-link { left: var(--leftPanel); } #layout.active #menu { @@ -130,7 +137,7 @@ small screens. /* "#menu width" */ background: #000; background: rgba(0, 0, 0, 0.7); - font-size: 16px; + font-size: 14px; /* change this value to increase/decrease button size */ z-index: 10; width: min-content; @@ -143,11 +150,7 @@ small screens. /* Hides the menu at `48em`, but modify this based on your app's needs. */ -@media (min-width: 48em) { - .header, - .content { - padding-left: 2em; - padding-right: 2em; } +@media (min-width: 37.6em) { #layout { padding-left: var(--leftPanel); /* left col width "#menu" */ @@ -161,13 +164,24 @@ Hides the menu at `48em`, but modify this based on your app's needs. #layout.active .menu-link { left: var(--leftPanel); } } -@media (max-width: 48em) { - /* Only apply this when the window is small. Otherwise, the following - case results in extra padding on the left: - * Make the window small. - * Tap the menu to trigger the active state. - * Make the window large again. - */ - #layout.active { - position: relative; - left: var(--leftPanel); } } +@font-face { + font-family: 'Ubuntu'; + src: url(/fonts/ubuntu-light-webfont.woff2) format("woff2"); + font-weight: 300; + font-style: normal; } + +@font-face { + font-family: 'Ubuntu-Mono'; + src: url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2"); + /*font-weight: 300;*/ + font-style: normal; } + +html { + font-family: Ubuntu, sans-serif; } + +.pure-menu-heading { + text-transform: none; + font-family: Ubuntu-Mono,'Noto Mono'; } + +.pure-menu-link { + font-family: Ubuntu-Mono,'Noto Mono'; } diff --git a/Seenginx/wwwroot/css/main.min.css b/Seenginx/wwwroot/css/main.min.css index ebc2da6..f4ce61e 100644 --- a/Seenginx/wwwroot/css/main.min.css +++ b/Seenginx/wwwroot/css/main.min.css @@ -1 +1 @@ -body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:150px;--mobileNegativeLeftPanel:-150px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:16px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:48em){.header,.content{padding-left:2em;padding-right:2em;}#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@media(max-width:48em){#layout.active{position:relative;left:var(--leftPanel);}} \ No newline at end of file +body{box-sizing:border-box;}*,::before,::after{box-sizing:inherit;}#blazor-error-ui{background:#ffffe0;bottom:0;box-shadow:0 -1px 2px rgba(0,0,0,.2);display:none;left:0;padding:.6rem 1.25rem .7rem 1.25rem;position:fixed;width:100%;z-index:1000;}#blazor-error-ui .dismiss{cursor:pointer;position:absolute;right:.75rem;top:.5rem;}.isHidden{display:none;}@media only screen and (max-width:37.5em){.isHiddenMobile{display:none;}}.petiteCaps{font-variant:petite-caps;}body{color:#777;}:root{--leftPanel:150px;--negativeLeftPanel:-150px;--mobileLeftPanel:50px;--mobileNegativeLeftPanel:-50px;}.pure-img-responsive{max-width:100%;height:auto;}#layout,#menu,.menu-link{-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;-ms-transition:all .2s ease-out;-o-transition:all .2s ease-out;transition:all .2s ease-out;}#layout{position:relative;left:0;padding-left:0;}@media only screen and (max-width:37.5em){#layout.active{position:relative;left:var(--leftPanel);}}#layout.active .menu-link{left:var(--leftPanel);}#layout.active #menu{left:var(--leftPanel);width:var(--leftPanel);}#menu{margin-left:var(--negativeLeftPanel);width:var(--leftPanel);position:fixed;top:0;left:0;bottom:0;z-index:1000;background:#191818;overflow-y:auto;-webkit-overflow-scrolling:touch;}#menu a{color:#999;border:none;padding:.6em 0 .6em .6em;}#menu .pure-menu,#menu .pure-menu ul{border:none;background:transparent;}#menu .pure-menu ul,#menu .pure-menu .menu-item-divided{border-top:1px solid #333;}#menu .pure-menu li a:hover,#menu .pure-menu li a:focus{background:#333;}#menu .pure-menu-selected,#menu .pure-menu-heading{background:#1f8dd6;}#menu .pure-menu-selected a{color:#fff;}#menu .pure-menu-heading{font-size:110%;color:#fff;margin:0;}.menu-link{position:fixed;display:block;top:0;left:0;background:#000;background:rgba(0,0,0,.7);font-size:14px;z-index:10;width:min-content;height:auto;padding:14px;}.menu-link:hover,.menu-link:focus{background:#000;}@media(min-width:37.6em){#layout{padding-left:var(--leftPanel);left:0;}#menu{left:var(--leftPanel);}.menu-link{position:fixed;left:var(--leftPanel);display:none;}#layout.active .menu-link{left:var(--leftPanel);}}@font-face{font-family:'Ubuntu';src:url(/fonts/ubuntu-light-webfont.woff2) format("woff2");font-weight:300;font-style:normal;}@font-face{font-family:'Ubuntu-Mono';src:url(/fonts/ubuntumono-regular-webfont.woff2) format("woff2");font-style:normal;}html{font-family:Ubuntu,sans-serif;}.pure-menu-heading{text-transform:none;font-family:Ubuntu-Mono,'Noto Mono';}.pure-menu-link{font-family:Ubuntu-Mono,'Noto Mono';} \ No newline at end of file diff --git a/Seenginx/wwwroot/fonts/ubuntu-light-webfont.woff2 b/Seenginx/wwwroot/fonts/ubuntu-light-webfont.woff2 new file mode 100644 index 0000000..b355e18 Binary files /dev/null and b/Seenginx/wwwroot/fonts/ubuntu-light-webfont.woff2 differ diff --git a/Seenginx/wwwroot/fonts/ubuntumono-regular-webfont.woff2 b/Seenginx/wwwroot/fonts/ubuntumono-regular-webfont.woff2 new file mode 100644 index 0000000..2320c01 Binary files /dev/null and b/Seenginx/wwwroot/fonts/ubuntumono-regular-webfont.woff2 differ diff --git a/Seenginx/wwwroot/js/ui.js b/Seenginx/wwwroot/js/ui.js deleted file mode 100644 index 6d7c20b..0000000 --- a/Seenginx/wwwroot/js/ui.js +++ /dev/null @@ -1,46 +0,0 @@ -(function (window, document) { - - var layout = document.getElementById('layout'), - menu = document.getElementById('menu'), - menuLink = document.getElementById('menuLink'), - content = document.getElementById('main'); - - function toggleClass(element, className) { - var classes = element.className.split(/\s+/), - length = classes.length, - i = 0; - - for(; i < length; i++) { - if (classes[i] === className) { - classes.splice(i, 1); - break; - } - } - // The className is not found - if (length === classes.length) { - classes.push(className); - } - - element.className = classes.join(' '); - } - - function toggleAll(e) { - var active = 'active'; - - e.preventDefault(); - toggleClass(layout, active); - toggleClass(menu, active); - toggleClass(menuLink, active); - } - - menuLink.onclick = function (e) { - toggleAll(e); - }; - - content.onclick = function(e) { - if (menu.className.indexOf('active') !== -1) { - toggleAll(e); - } - }; - -}(this, this.document));