Menu for navigation on mobile
This commit is contained in:
parent
10d885b2cf
commit
03e2367a68
6 changed files with 163 additions and 41 deletions
|
|
@ -43,14 +43,13 @@ header {
|
|||
}
|
||||
|
||||
[role=banner]{
|
||||
background-image: linear-gradient(#54b4eb, #2FA4E7 60%, #1d9ce5);
|
||||
background-color: #54b4eb /*linear-gradient(#54b4eb, #2FA4E7 60%, #1d9ce5)*/;
|
||||
height: auto;
|
||||
line-height: 50px;
|
||||
padding: 0 1%;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
|
|
@ -130,18 +129,13 @@ header a.title {
|
|||
|
||||
header .feeds {
|
||||
float: right;
|
||||
text-align: right;
|
||||
width: 25%;
|
||||
height: 41px;
|
||||
padding-top: 9px;
|
||||
padding-right: 9px;
|
||||
padding-right: 1.5em;
|
||||
}
|
||||
|
||||
header .feeds a {
|
||||
display: block;
|
||||
float: right;
|
||||
display: inline-block;
|
||||
padding-right: 5px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
header .feeds a:hover,
|
||||
|
|
@ -157,7 +151,26 @@ header .pages a {
|
|||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
#openmenu{
|
||||
display: inline-block;
|
||||
width: 1.5em;
|
||||
}
|
||||
#openmenu svg{
|
||||
height: 1.7em;
|
||||
}
|
||||
|
||||
#closemenu{
|
||||
float: right;
|
||||
width: 1.5em;
|
||||
}
|
||||
#closemenu svg{
|
||||
height: 1.7em;
|
||||
}
|
||||
|
||||
.menu-content{
|
||||
display: none;
|
||||
color: #4D4D4C;
|
||||
}
|
||||
/* Sidebar */
|
||||
|
||||
/* Titles */
|
||||
|
|
@ -241,7 +254,7 @@ article.summary .metadata {
|
|||
.metadata p {
|
||||
margin: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
/* Listings */
|
||||
|
||||
ol.archive li {
|
||||
|
|
@ -273,27 +286,27 @@ ol.archive li .tags
|
|||
border-bottom: none;
|
||||
}
|
||||
|
||||
.social a[id*='Buddycloud']::before {content: url('../images/icons/buddycloud-18px.png'); margin-right: 5px; vertical-align: -15%; }
|
||||
.social a[id*='Diaspora']::before {content: url('../images/icons/Diaspora-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Friendica']::before {content: url('../images/icons/friendica-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Forgejo']::before {content: url('../images/icons/forgejo-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Gitea']::before {content: url('../images/icons/gitea-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Github']::before {content: url('../images/icons/github-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Gitlab']::before {content: url('../images/icons/gitlab-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Gnusocial']::before {content: url('../images/icons/gnusocial-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Misskey']::before {content: url('../images/icons/misskey-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Movim']::before {content: url('../images/icons/movim-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Peertube']::before {content: url('../images/icons/peertube-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Pixelfed']::before {content: url('../images/icons/pixelfed-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Plume']::before {content: url('../images/icons/plume-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='Pump.io']::before {content: url('../images/icons/pumpio-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[id*='XMPP']::before {content: url('../images/icons/xmpp-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Buddycloud']::before {content: url('../images/icons/buddycloud-18px.png'); margin-right: 5px; vertical-align: -15%; }
|
||||
a[id*='Diaspora']::before {content: url('../images/icons/Diaspora-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Friendica']::before {content: url('../images/icons/friendica-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Forgejo']::before {content: url('../images/icons/forgejo-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Funkwhale']::before {content: url('../images/icons/funkwhale-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Gitea']::before {content: url('../images/icons/gitea-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Github']::before {content: url('../images/icons/github-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Gitlab']::before {content: url('../images/icons/gitlab-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Gnusocial']::before {content: url('../images/icons/gnusocial-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Hubzilla']::before {content: url('../images/icons/hubzilla-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Mastodon']::before {content: url('../images/icons/mastodon-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Matrix']::before {content: url('../images/icons/matrix-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Misskey']::before {content: url('../images/icons/misskey-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Movim']::before {content: url('../images/icons/movim-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Peertube']::before {content: url('../images/icons/peertube-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Pixelfed']::before {content: url('../images/icons/pixelfed-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Pleroma']::before {content: url('../images/icons/pleroma-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Plume']::before {content: url('../images/icons/plume-16.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='Pump.io']::before {content: url('../images/icons/pumpio-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='RedMatrix']::before {content: url('../images/icons/redmatrix-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
a[id*='XMPP']::before {content: url('../images/icons/xmpp-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[href*='rss.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
.social a[href*='atom.xml']:before {content: url('../images/icons/feed-18px.png'); margin-right: 5px; vertical-align: -15%;}
|
||||
|
||||
|
|
@ -392,7 +405,7 @@ display: block;
|
|||
position: absolute;
|
||||
left: 0; top: 10%;
|
||||
margin: 20px 0 0;
|
||||
width: 200px;
|
||||
width: 300px;
|
||||
font-size: 0.7em;
|
||||
color: #4D4D4C;
|
||||
border: thin solid #eeeeee;
|
||||
|
|
@ -438,15 +451,71 @@ background: white;
|
|||
}
|
||||
|
||||
|
||||
/* Menu */
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
.menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
z-index: 2;
|
||||
background: #54b4eb;
|
||||
transition: transform 0.4s ease;
|
||||
transform: translateX(110%);
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
list-style-type: none;
|
||||
padding-top: 1.5em;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
color: #E5E5E3;
|
||||
}
|
||||
|
||||
input:checked ~ nav{
|
||||
transform: translateX(0%);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@media (max-width: 900px) {
|
||||
|
||||
body {
|
||||
body {
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.container {
|
||||
}
|
||||
|
||||
header a.title {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.menu-content{
|
||||
display: block;
|
||||
}
|
||||
|
||||
.sidebar nav{
|
||||
display: none;
|
||||
}
|
||||
.social {
|
||||
display: none;
|
||||
}
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
margin: 0.3em 0;
|
||||
padding: 0.3em 0 0.1em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.container {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue