diff --git a/README.md b/README.md index c27c2c3..2912bef 100644 --- a/README.md +++ b/README.md @@ -125,7 +125,7 @@ If something is missing for you, please open an issue. - [x] localized RSS links - [ ] links to navigate between languages - [ ] other - - [ ] ASCII banner does not overflow + - [x] ASCII banner does not overflow - [ ] write setup/configuration guide - [ ] reference water.css semantic styling - [x] RSS links diff --git a/sass/_mobile.scss b/sass/_mobile.scss new file mode 100644 index 0000000..500665c --- /dev/null +++ b/sass/_mobile.scss @@ -0,0 +1,4 @@ +@media screen and (max-width: 62em) { + // Do not overflow the ASCII art on smaller screens + header > pre { font-size: 0.4em; } +} diff --git a/sass/style.scss b/sass/style.scss index 9c2965a..e29e3c6 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -1,4 +1,4 @@ -@import 'widgets/menu.scss'; +@import 'mobile'; .nav-menu { font-weight: bold; diff --git a/sass/widgets/menu.scss b/sass/widgets/menu.scss deleted file mode 100644 index 8679b66..0000000 --- a/sass/widgets/menu.scss +++ /dev/null @@ -1,40 +0,0 @@ -/************************************************************ -************************************************************* -******************* SQUAT THEME ********************* -********** Javascript-free attempt at a better web ********** -************************************************************* -************************************************************/ - -/* Menu widget styles */ -.widget-menu { - width: 100%; white-space: nowrap; box-sizing: border-box; - ul { - list-style: none; margin: 0; padding: 0; - display: inline-block; - @media screen and (max-width: 62em) { display: none; } - li { display: inline-block; padding: 0; margin: 0; position: relative; } - } -} - - -#menu-nav-main { text-align: center; font-size: 1.2rem; } -.pure-menu-link, .pure-menu-open { display: block; padding: 0.5em 1em; } -#menu-nav-main .pure-menu-children { left: 50% !important; transform: translateX(-50%); } - -.pure-menu-open { - display: none; - @media screen and (max-width: 62em) { - display: block; - &:target { - display: none; - & ~ .pure-menu-close { display: inline-block; } - & ~ ul { - display: block; - li { display: block; position: relative; } - } - } - } -} - -/* Making pureCSS menu responsive without Javascript */ -.pure-menu-close { display: none; }