platypush/platypush-home
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Responsive UI first draft

Browse source
This commit is contained in:
Fabio Manganiello 2021-02-05 13:38:07 +01:00
parent 29614f532a
commit 98d1bd5538
8 changed files with 118 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
www/css/application.css
View file

@ -5,12 +5,32 @@ body {
height: 100vh; height: 100vh;
font-size: 20px; font-size: 20px;
font-family: 'Fira Sans', sans-serif; font-family: 'Fira Sans', sans-serif;
/*font-family: "Asap", "Helvetica Neue", Helvetica, "Segoe UI", Tahoma, Arial, sans-serif;*/
/*font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;*/
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
} }
/* ------------- */
/* Responsive UI */
/* ------------- */
@media screen and (max-width: 799px) {
.is-mobile {
display: block;
}
.is-desktop {
display: none !important;
}
}
@media screen and (min-width: 800px) {
.is-mobile {
display: none !important;
}
.is-desktop {
display: block;
}
}
/* ------ */ /* ------ */
/* Header */ /* Header */
@ -21,7 +41,7 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: .9em; font-size: .9em;
box-shadow: 3px 0 3px 2px #ccc; box-shadow: 1px 3px 3px 0 #bbb;
} }
header .name { header .name {
@ -73,12 +93,24 @@ header .logo img {
margin: auto .5em; margin: auto .5em;
} }
header .menu-icon {
background: none;
border: none;
cursor: pointer;
}
header .menu-icon img {
height: 2.5em;
padding-top: .25em;
}
/* ---- */ /* ---- */
/* Main */ /* Main */
/* ---- */ /* ---- */
main { main {
height: calc(100% - 3em); height: calc(100% - 3em);
overflow: auto; overflow: auto;
position: relative;
line-height: 1.5em; line-height: 1.5em;
color: rgb(75, 75, 75); color: rgb(75, 75, 75);
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
@ -109,3 +141,28 @@ main section .right {
main section img { main section img {
width: 100%; width: 100%;
} }
/* *********** */
/* Mobile menu */
/* *********** */
@media screen and (min-width: 799px) {
#mobile-menu {
display: none !important;
}
}
#mobile-menu {
display: none;
}
#mobile-menu.visible {
width: 10em;
height: calc(100% - .1em);
position: absolute;
top: .1em;
right: 0;
display: flex;
flex-direction: column;
background: white;
}

BIN
www/fonts/Poppins.ttf Normal file
View file

Binary file not shown.

BIN
www/fonts/fira-sans-200.ttf Normal file
View file

Binary file not shown.

BIN
www/fonts/fira-sans-300.ttf Normal file
View file

Binary file not shown.

14
www/fonts/fira-sans.css Normal file
View file

@ -0,0 +1,14 @@
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(./fira-sans-200.ttf) format('truetype');
}
@font-face {
font-family: 'Fira Sans';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(./fira-sans-300.ttf) format('truetype');
}

7
www/fonts/poppins.css Normal file
View file

@ -0,0 +1,7 @@
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(./Poppins.ttf) format('truetype');
}

BIN
www/img/menu-icon.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3.5 KiB

43
www/index.html
View file

@ -3,12 +3,21 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"> <link rel="stylesheet" href="fonts/poppins.css">
<link rel="stylesheet" type="text/css" href="css/application.css"> <link rel="stylesheet" href="fonts/fira-sans.css">
<link rel="preconnect" href="https://fonts.gstatic.com"> <link rel="stylesheet" href="css/application.css">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@200;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<title>Platypush</title> <title>Platypush</title>
<script type="text/javascript">
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
console.log(menu);
if (menu.classList.length)
menu.className = '';
else
menu.className = 'visible';
}
</script>
</head> </head>
<body> <body>
@ -20,7 +29,7 @@
</a> </a>
</div> </div>
<div class="right"> <div class="right is-desktop">
<div class="item"> <div class="item">
<a href="https://git.platypush.tech/platypush" target="_blank">Git</a> <a href="https://git.platypush.tech/platypush" target="_blank">Git</a>
</div> </div>
@ -34,6 +43,12 @@
<a href="https://git.platypush.tech/platypush/platypush/-/wikis/home" target="_blank">Wiki</a> <a href="https://git.platypush.tech/platypush/platypush/-/wikis/home" target="_blank">Wiki</a>
</div> </div>
</div> </div>
<div class="right is-mobile">
<button type="button" class="menu-icon" title="Menu" onclick="toggleMobileMenu()">
<img src="img/menu-icon.png">
</button>
</div>
</header> </header>
<main> <main>
@ -72,6 +87,22 @@
</div> </div>
</div> </div>
</section> </section>
<div id="mobile-menu">
<div class="item">
<a href="https://git.platypush.tech/platypush" target="_blank">Git</a>
</div>
<div class="item">
<a href="https://docs.platypush.tech" target="_blank">Docs</a>
</div>
<div class="item">
<a href="https://blog.platypush.tech">Blog</a>
</div>
<div class="item">
<a href="https://git.platypush.tech/platypush/platypush/-/wikis/home" target="_blank">Wiki</a>
</div>
</div>
</main> </main>
</body> </body>
</html> </html>