Modificato lo stile per i cellulari.

This commit is contained in:
Emiliano Vavassori 2021-11-11 00:30:24 +01:00
parent 8aa5fc2430
commit 10ebcced16
5 changed files with 122 additions and 71 deletions

View file

@ -5,13 +5,17 @@ html {
}
/* Titles */
h1 { text-transform: uppercase }
h1 {
text-transform: uppercase;
display: block;
}
h1, h2 {
font-weight: normal;
margin-top: 10px;
margin-bottom: 10px;
}
.mobile-menu { display: none; }
.title
{
@ -147,8 +151,8 @@ aside > h2 {
}
#avatar img {
max-width: 100px;
display: block;
width: 100px;
-webkit-transition: 200ms;
-moz-transition: 200ms;
-ms-transition: 200ms;
@ -200,6 +204,7 @@ aside > h2 {
border-radius: 10px 10px;
}
#mobile-menu { display: none; }
.blog_roll_link
{
@ -210,10 +215,27 @@ aside > h2 {
border-radius: 10px 10px;
}
.liveactive {
font-weight: bold;
animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite;
-moz-animation: blinker 1s linear infinite;
}
td.icon {
width: 15px;
text-align: center;
vertical-align: top;
}
td.hours {
width: 100px;
text-align: center;
vertical-align: top;
}
/*--------Responsive------------*/
@media (max-width: 800px) {
@media screen and (max-width: 1024px) {
aside {
left: 0;
@ -251,26 +273,55 @@ aside > h2 {
}
}
img {
max-width: 100%;
}
@media screen and (max-width: 700px) {
.liveactive {
font-weight: bold;
animation: blinker 1.7s cubic-bezier(.5, 0, 1,1) infinite;
-moz-animation: blinker 1s linear infinite;
#license,
aside #partners,
aside .social,
aside nav.nav { display: none; }
aside .sidetitle {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px 0px;
}
aside #avatar,
aside .sidetitle h1,
aside .sidetitle span {
flex-grow: 1;
display: inline-block;
float: left;
margin: 0px;
}
aside #avatar img,
aside #avatar img a {
padding: 0px;
max-height: 100%;
}
aside .sidetitle h1 {
flex-grow: 4;
padding: 0em 0.5em;
text-align: left;
}
aside .sidetitle span {
float: right;
padding: 0px 0px;
border: 0px solid #73d08a;
border-radius: 10px 10px;
}
aside .sidetitle span a {
color: white;
float: right;
border: 1px solid white;
padding: 0.77273rem 1rem;
margin: 0px 5px 0px 0px;
border-radius: 10px 10px;
}
}
@keyframes blinker { 50% { opacity: 0; } }
td.icon {
width: 15px;
text-align: center;
vertical-align: top;
}
td.hours {
width: 100px;
text-align: center;
vertical-align: top;
}