aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show and animate .mobile-label on normal screens.

Browse Source
This commit is contained in:
Madeorsk 2018-09-04 21:16:36 +02:00
parent a3a25eec6c
commit 4330600980
1 changed files with 640 additions and 617 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/css/main.css
View File

@ -97,8 +97,12 @@ header nav hr {
transform: skewX(-15deg);
}
header nav a {
display: block;
margin: 0 2em;
display: flex;
align-items: center;
position: relative;
align-self: stretch;
margin: 0;
padding: 0 2em;
font-size: 1em;
}
header nav a.title {
@ -107,8 +111,32 @@ header nav a.title {
font-size: 1.75em;
text-align: center;
}
header nav i {
font-size: 1.2em;
header nav a i { font-size: 1.2em; }
/* Only enable label animations on normal screens. */
@media screen and (min-width: 900px) {
header nav a i {
transition: all 0.2s ease;
margin: 0;
}
header nav a:hover i { margin-bottom: 0.75em; }
header nav a .mobile-label {
transition: all 0.2s ease;
display: block;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
font-size: 0.9em;
white-space: nowrap;
}
header nav a:hover .mobile-label {
opacity: 1;
transform: translate(-50%, 80%);
}
header nav a img + .mobile-label { display: none; }
}
/*
@ -577,10 +605,6 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
* Small Screens *
* ================= */
.mobile-label {
display: none;
}
@media screen and (max-width: 900px) {
header {
flex-direction: column;
@ -662,6 +686,9 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
width: 100%;
border: solid #F4F4F4 0.1rem;
}
header:focus-within #content > nav a .mobile-label {
display: initial;
}
body > main > * {
padding: 0 5%;
@ -678,10 +705,6 @@ form.new-post input[type="submit"]:hover { background: #DADADA; }
min-width: 80%;
min-height: 80%;
}
.mobile-label {
display: initial;
}
}
/*== Pagination ==*/