ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

juicy css mobile nav toggle

Browse Source
This commit is contained in:
Mashy 2019-05-17 16:14:26 +10:00
parent 00b0dd023b
commit 2dabf8e53f
10 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
client/.eslintrc.js Executable file → Normal file
View File

0
client/game.css → client/assets/styles/game.css
View File

0
client/instance.css → client/assets/styles/instance.css
View File

0
client/assets/normalize.css → client/assets/styles/normalize.css vendored
View File

0
client/assets/skeleton.css → client/assets/styles/skeleton.css vendored
View File

5
client/styles.css → client/assets/styles/styles.css
View File

@ -95,7 +95,6 @@ nav button {
display: block;
color: #888;
flex: 1 1 100%;
font-size: 16pt;
padding: 0;
margin: 0;
border-width: 0px;
@ -514,3 +513,7 @@ main .top {
flex-flow: column;
}
}
/* Mobile Nav*/
#toggle-nav { display: none; }
#toggle-nav-label { display: none; }

56
client/assets/styles/styles.mobile.css Normal file
View File

@ -0,0 +1,56 @@
@media (max-height: 800px), (max-width: 800px) {
#cryps {
font-size: 50%;
grid-template-columns: min-content 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
"tnav hd "
"main main";
}
svg {
height: 1em;
}
nav {
opacity: 0;
position: fixed;
margin-top: 4em;
pointer-events: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
main {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#toggle-nav { display: none; }
#toggle-nav-label {
grid-area: tnav;
color: whitesmoke;
line-height: 1.75em;
font-size: 1.5em;
display: block;
cursor: pointer;
margin-right: 0.5em;
}
#toggle-nav:checked #toggle-nav-label {
color: #ababab;
}
#toggle-nav:checked ~ nav {
opacity: 1;
pointer-events: auto;
}
#toggle-nav:checked ~ main {
opacity: 0.1;
pointer-events: none;
}
}

5
client/index.html
View File

@ -11,8 +11,9 @@
<link rel="manifest" href="manifest.webmanifest">
<link rel="stylesheet" href="./node_modules/izitoast/dist/css/iziToast.min.css"></script>
<link href="https://fonts.googleapis.com/css?family=Jura" rel="stylesheet">
<link rel="stylesheet" href="assets/normalize.css">
<link rel="stylesheet" href="assets/skeleton.css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/styles/normalize.css">
<link rel="stylesheet" href="assets/styles/skeleton.css">
</head>
</head>
<body>

7
client/index.js Executable file → Normal file
View File

@ -1,6 +1,7 @@
require('./styles.css');
require('./instance.css');
require('./game.css');
require('./assets/styles/styles.css');
require('./assets/styles/styles.mobile.css');
require('./assets/styles/instance.css');
require('./assets/styles/game.css');
// kick it off
require('./src/app');

2
client/src/app.jsx
View File

@ -51,6 +51,8 @@ document.fonts.load('16pt "Jura"').then(() => {
const Cryps = () => (
<div id="cryps" >
<input type="checkbox" id="toggle-nav"/>
<label id="toggle-nav-label" htmlFor="toggle-nav"><i className="fa fa-bars"></i></label>
<Header />
<Nav />
<Main />