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;
|
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
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>
|
<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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue