405 lines
7.2 KiB
CSS
405 lines
7.2 KiB
CSS
@font-face {
|
|
font-family: "LatoHairline";
|
|
src: url("fonts/Lato-Hairline.ttf") format("truetype");
|
|
}
|
|
|
|
@font-face {
|
|
font-family: "LatoLight";
|
|
src: url("fonts/Lato-Light.ttf") format("truetype");
|
|
}
|
|
|
|
*{
|
|
box-sizing:border-box;
|
|
}
|
|
|
|
html,body{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
html{
|
|
font-family:'LatoLight', 'Lato', sans-serif;
|
|
font-weight:300;
|
|
font-size:100%;
|
|
}
|
|
|
|
a{color:inherit;}
|
|
|
|
.mobile{
|
|
display:none !important;
|
|
}
|
|
|
|
#top-bar{
|
|
background:#f5f5f5;
|
|
padding:8px 14px;
|
|
position:fixed;
|
|
z-index:1;
|
|
top:0;
|
|
height:55px;
|
|
width:100%;
|
|
text-align:center;
|
|
font-weight:300;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
#top-bar-spacer{
|
|
width:100%;
|
|
height:55px;
|
|
}
|
|
|
|
#top-bar .header{
|
|
position:absolute;
|
|
top:14px;
|
|
left:14px;
|
|
display:inline-block;
|
|
font-size:16px;
|
|
font-weight:300;
|
|
line-height:0.9em;
|
|
background:url('/images/friendica.svg') top left no-repeat;
|
|
background-size:14px;
|
|
padding-left:18px;
|
|
margin:0;
|
|
}
|
|
|
|
#top-bar .search-form{
|
|
margin:0 20px;
|
|
display:inline-block;
|
|
}
|
|
#top-bar .search-wrapper{
|
|
background:#fff;
|
|
}
|
|
|
|
nav#links{
|
|
position:absolute;
|
|
top:0;
|
|
right:14px;
|
|
line-height:55px;
|
|
}
|
|
nav#links a{
|
|
display:inline-block;
|
|
margin:0 4px;
|
|
padding:0 5px;
|
|
}
|
|
|
|
.sub-menu-outer{
|
|
background:#eee;
|
|
line-height:45px;
|
|
height:45px;
|
|
border-bottom:1px solid #ddd;
|
|
}
|
|
.sub-menu-outer .sub-menu-inner{
|
|
width:500px;
|
|
margin:auto;
|
|
}
|
|
.sub-menu-inner .option{
|
|
padding:9px 6px;
|
|
margin:0 5px;
|
|
}
|
|
.sub-menu-inner .option.active{
|
|
border-bottom:2px solid #f00;
|
|
}
|
|
|
|
.search-results,
|
|
.homepage-wrapper{
|
|
width:500px;
|
|
margin:auto;
|
|
text-align:center;
|
|
}
|
|
|
|
.search-results{
|
|
margin-bottom:25px;
|
|
}
|
|
|
|
.homepage-wrapper{
|
|
margin:120px auto;
|
|
}
|
|
|
|
.homepage-wrapper .header{
|
|
font-size:68px;
|
|
font-family:'LatoHairline', 'Lato', sans-serif;
|
|
font-weight:100;
|
|
line-height:0.9em;
|
|
background:url('/images/friendica.svg') top left no-repeat;
|
|
background-size:61px;
|
|
margin-left:40px;
|
|
}
|
|
.homepage-wrapper .about{
|
|
text-align:justify;
|
|
line-height:1.5em;
|
|
color:#555;
|
|
}
|
|
|
|
.homepage-wrapper .profiles{
|
|
margin-top:3em;
|
|
}
|
|
|
|
nav#links a,
|
|
.sub-menu-outer a,
|
|
.profiles a{
|
|
text-decoration:none;
|
|
}
|
|
|
|
.search-results .intro{
|
|
text-align:justify;
|
|
}
|
|
|
|
.site,
|
|
.profile{
|
|
display:table;
|
|
width:100%;
|
|
text-decoration:none;
|
|
color:#000;
|
|
padding:2px;
|
|
outline:none;
|
|
margin:10px 0;
|
|
}
|
|
|
|
.site{
|
|
padding:14px 2px;
|
|
margin:20px 0;
|
|
border-bottom:1px dashed #ccc;
|
|
}
|
|
|
|
.profile.selected,
|
|
.profile:focus,
|
|
.profile:hover{
|
|
padding:1px;
|
|
border:1px solid #ccc;
|
|
}
|
|
|
|
.site .site-info,
|
|
.site .site-supports,
|
|
.profile .profile-photo,
|
|
.profile .profile-info{
|
|
display:table-cell;
|
|
vertical-align:top;
|
|
text-align:left;
|
|
}
|
|
.site .site-supports{
|
|
text-align:right;
|
|
padding:8px;
|
|
}
|
|
|
|
.profile .profile-photo{
|
|
margin:8px;
|
|
border-radius:15px;
|
|
border:1px solid #ddd;
|
|
}
|
|
.site .site-info,
|
|
.profile .profile-info{
|
|
padding:8px;
|
|
width:100%;
|
|
}
|
|
.site .site-info strong,
|
|
.profile .profile-info strong{
|
|
font-weight:600;
|
|
}
|
|
.site .site-info .fa,
|
|
.profile .profile-info .fa{
|
|
line-height:1.1em;
|
|
color:#999;
|
|
}
|
|
.site .site-info .url,
|
|
.profile .profile-info .url{
|
|
font-size:80%;
|
|
margin-bottom:3px;
|
|
color:#555;
|
|
}
|
|
|
|
.search-wrapper{
|
|
position:relative;
|
|
display:inline-block;
|
|
width:500px;
|
|
background:#f5f5f5;
|
|
border:1px solid #ddd;
|
|
border-radius:8px;
|
|
height:38px;
|
|
line-height:22px;
|
|
}
|
|
.search-wrapper .search-field{
|
|
line-height:22px;
|
|
display:block;
|
|
border:none;
|
|
outline:none;
|
|
background:none;
|
|
padding:8px 12px;
|
|
padding-right:117px;
|
|
width:100%;
|
|
}
|
|
.search-wrapper .reset{
|
|
position:absolute;
|
|
top:0;
|
|
right:65px;
|
|
height:25px;
|
|
width:25px;
|
|
margin:6px;
|
|
padding:0;
|
|
line-height:1;
|
|
font-size:12px;
|
|
color:#555;
|
|
background:#eee;
|
|
border:1px solid #ddd;
|
|
border-radius:20px;
|
|
font-family:'FontAwesome';
|
|
font-weight:100;
|
|
}
|
|
.search-wrapper .search{
|
|
border:none;
|
|
border-left:1px solid #ddd;
|
|
color:#555;
|
|
background:#eee;
|
|
position:absolute;
|
|
top:0;
|
|
right:0;
|
|
height:36px;
|
|
width:65px;
|
|
border-radius:0 8px 8px 0;
|
|
}
|
|
|
|
.health{font-size:120%; vertical-align:bottom;}
|
|
.health.very-bad{ color:#f99; }
|
|
.health.bad{ color:#f1ba7a; }
|
|
.health.neutral{ color:#e6e782; }
|
|
.health.ok{ color:#bef273; }
|
|
.health.good{ color:#7cf273; }
|
|
.health.perfect{ color:#33ff80; }
|
|
|
|
.btn{
|
|
border:1px solid #ddd;
|
|
color:#555;
|
|
background:#eee;
|
|
border-radius:8px 8px;
|
|
height:36px;
|
|
line-height:34px;
|
|
min-width:80px;
|
|
padding:0 10px;
|
|
text-decoration:none;
|
|
display:inline-block;
|
|
}
|
|
|
|
/* smaller than tablet in portrait */
|
|
@media screen and (max-width: 880px){
|
|
|
|
body{
|
|
overflow-x:hidden;
|
|
}
|
|
|
|
.mobile{
|
|
display:inherit !important;
|
|
}
|
|
|
|
#top-bar .header{
|
|
overflow:hidden;
|
|
width:0px;
|
|
padding-left:28px;
|
|
height:28px;
|
|
background-size:28px;
|
|
}
|
|
|
|
#top-bar .search-form{
|
|
display:block;
|
|
width:100%;
|
|
padding:0 35px;
|
|
margin:0;
|
|
}
|
|
|
|
.homepage-wrapper,
|
|
.search-wrapper{
|
|
width:95%;
|
|
max-width:500px;
|
|
}
|
|
.homepage-wrapper .search-wrapper{
|
|
width:100%;
|
|
}
|
|
|
|
.homepage-wrapper{
|
|
margin:90px auto;
|
|
}
|
|
|
|
.search-results,
|
|
.sub-menu-outer .sub-menu-inner{
|
|
width:95%;
|
|
max-width:500px;
|
|
}
|
|
|
|
.hamburger{
|
|
position:absolute;
|
|
top:0px;
|
|
right:0px;
|
|
padding:14px;
|
|
font-size:22px;
|
|
line-height:22px;
|
|
cursor:pointer;
|
|
}
|
|
|
|
nav#links{
|
|
position:absolute;
|
|
width:100%;
|
|
top:54px;
|
|
right:0;
|
|
padding-bottom:5px;
|
|
}
|
|
nav#links .viewport{
|
|
position:absolute;
|
|
z-index:1;
|
|
left:100%;
|
|
width:100%;
|
|
transition:left ease 200ms;
|
|
background:#fff;
|
|
padding:20px 0;
|
|
box-shadow:1px 3px 3px rgba(0,0,0,0.2);
|
|
font-size:150%;
|
|
text-align:center;
|
|
}
|
|
nav#links.open .viewport{
|
|
left:0%;
|
|
}
|
|
#top-bar nav#links .viewport{
|
|
background:#f5f5f5;
|
|
}
|
|
nav#links h3{
|
|
margin:0;
|
|
display:block;
|
|
line-height:2em;
|
|
}
|
|
nav#links a{
|
|
display:block;
|
|
line-height:2.5em;
|
|
margin:4px 0;
|
|
}
|
|
|
|
.profile,
|
|
.profile .profile-info{
|
|
overflow-wrap:break-word;
|
|
word-wrap:break-word;
|
|
overflow:hidden;
|
|
}
|
|
|
|
}
|
|
|
|
/* The moment the header starts getting squashed */
|
|
@media screen and (max-width: 520px){
|
|
.homepage-wrapper{
|
|
margin:30px auto;
|
|
}
|
|
.homepage-wrapper .header{
|
|
font-size:40px;
|
|
background-size:36px;
|
|
display:inline-block;
|
|
margin-left:18px;
|
|
width:275px;
|
|
}
|
|
}
|
|
|
|
/* close to mobile in portrait */
|
|
@media screen and (max-width: 400px){
|
|
|
|
.profile .profile-photo{
|
|
width:60px;
|
|
border-radius:11.25px;
|
|
margin:8px 4px;
|
|
}
|
|
.profile .profile-info .url{
|
|
display:none;
|
|
}
|
|
|
|
} |