Responsive UI first draft
This commit is contained in:
parent
29614f532a
commit
98d1bd5538
8 changed files with 118 additions and 9 deletions
|
@ -5,12 +5,32 @@ body {
|
|||
height: 100vh;
|
||||
font-size: 20px;
|
||||
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;
|
||||
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 */
|
||||
|
@ -21,7 +41,7 @@ header {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .9em;
|
||||
box-shadow: 3px 0 3px 2px #ccc;
|
||||
box-shadow: 1px 3px 3px 0 #bbb;
|
||||
}
|
||||
|
||||
header .name {
|
||||
|
@ -73,12 +93,24 @@ header .logo img {
|
|||
margin: auto .5em;
|
||||
}
|
||||
|
||||
header .menu-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header .menu-icon img {
|
||||
height: 2.5em;
|
||||
padding-top: .25em;
|
||||
}
|
||||
|
||||
/* ---- */
|
||||
/* Main */
|
||||
/* ---- */
|
||||
main {
|
||||
height: calc(100% - 3em);
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
line-height: 1.5em;
|
||||
color: rgb(75, 75, 75);
|
||||
text-rendering: optimizelegibility;
|
||||
|
@ -109,3 +141,28 @@ main section .right {
|
|||
main section img {
|
||||
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
BIN
www/fonts/Poppins.ttf
Normal file
Binary file not shown.
BIN
www/fonts/fira-sans-200.ttf
Normal file
BIN
www/fonts/fira-sans-200.ttf
Normal file
Binary file not shown.
BIN
www/fonts/fira-sans-300.ttf
Normal file
BIN
www/fonts/fira-sans-300.ttf
Normal file
Binary file not shown.
14
www/fonts/fira-sans.css
Normal file
14
www/fonts/fira-sans.css
Normal 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
7
www/fonts/poppins.css
Normal 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
BIN
www/img/menu-icon.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 3.5 KiB |
|
@ -3,12 +3,21 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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" type="text/css" href="css/application.css">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<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">
|
||||
<link rel="stylesheet" href="fonts/poppins.css">
|
||||
<link rel="stylesheet" href="fonts/fira-sans.css">
|
||||
<link rel="stylesheet" href="css/application.css">
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
@ -20,7 +29,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="right is-desktop">
|
||||
<div class="item">
|
||||
<a href="https://git.platypush.tech/platypush" target="_blank">Git</a>
|
||||
</div>
|
||||
|
@ -34,6 +43,12 @@
|
|||
<a href="https://git.platypush.tech/platypush/platypush/-/wikis/home" target="_blank">Wiki</a>
|
||||
</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>
|
||||
|
||||
<main>
|
||||
|
@ -72,6 +87,22 @@
|
|||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
Loading…
Reference in a new issue