diff --git a/assets/style.css b/assets/style.css index 53225393..724ddff9 100644 --- a/assets/style.css +++ b/assets/style.css @@ -1,443 +1,443 @@ -*{ - box-sizing:border-box; +* { + box-sizing: border-box; } -html,body{ - margin:0; - padding:0; +html,body { + margin: 0; + padding: 0; } -html{ - font-family:'Open Sans', sans-serif; - font-weight:300; - font-size:100%; +html { + font-family: 'Open Sans', sans-serif; + font-weight: 300; + font-size: 100%; } -a{color:inherit;} +a {color: inherit;} -p{ - margin:0 0 1em 0; +p { + margin: 0 0 1em 0; } -.mobile{ - display:none !important; +.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 { + 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-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 .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-form { + margin: 0 20px; + display: inline-block; } -#top-bar .search-wrapper{ - background:#fff; +#top-bar .search-wrapper { + background: #fff; } -nav#links{ - position:absolute; - top:0; - right:14px; - line-height:55px; +nav#links { + position: absolute; + top: 0; + right: 14px; + line-height: 55px; } -nav#links a{ - display:inline-block; - margin:0 4px; - padding:0 5px; +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 { + background: #eee; + line-height: 45px; + height: 45px; + border-bottom: 1px solid #ddd; } -.sub-menu-outer .sub-menu-inner{ - width:500px; - margin:auto; +.sub-menu-outer .sub-menu-inner { + width: 500px; + margin: auto; } -.sub-menu-inner .option{ - padding:9px 6px; - margin:0 5px; +.sub-menu-inner .option { + padding: 9px 6px; + margin: 0 5px; } -.sub-menu-inner .option.active{ - border-bottom:2px solid #f00; +.sub-menu-inner .option.active { + border-bottom: 2px solid #f00; } -.homepage-wrapper{ - width:500px; - margin:auto; - text-align:center; +.homepage-wrapper { + width: 500px; + margin: auto; + text-align: center; } .search-results, -.directory-results{ - margin-bottom:25px; +.directory-results { + margin-bottom: 25px; } -.directory-results{ - display:flex; - flex-flow:row; +.directory-results { + display: flex; + flex-flow: row; } -.directory-results > aside{ - flex:1 6 20%; - order:1; - padding:0 1em; +.directory-results > aside { + flex: 1 6 20%; + order: 1; + padding: 0 1em; } -.directory-results > section{ - flex:3 1 80%; - order:2; +.directory-results > section { + flex: 3 1 80%; + order: 2; } -.homepage-wrapper{ - margin:120px auto; +.homepage-wrapper { + margin: 120px auto; } -.homepage-wrapper .header{ - font-size:68px; - font-weight:100; - line-height:0.9em; - background:url('/images/friendica.svg') top left no-repeat; - background-size:61px; - margin-left:40px; +.homepage-wrapper .header { + font-size: 68px; + 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 .about { + text-align: justify; + line-height: 1.5em; + color: #555; } -.homepage-wrapper .profiles{ - margin-top:3em; +.homepage-wrapper .profiles { + margin-top: 3em; } -.profiles{ - padding:0 10px; - column-width:400px; +.profiles { + padding: 0 10px; + column-width: 400px; } -.profiles > figure{ - display:inline-block; - cursor:pointer; +.profiles > figure { + display: inline-block; + cursor: pointer; } nav#links a, -.sub-menu-outer a{ - text-decoration:none; +.sub-menu-outer a { + text-decoration: none; } -.search-results .intro{ - text-align:justify; +.search-results .intro { + text-align: justify; } .site, -.profile{ - width:100%; - text-decoration:none; - color:#000; - padding:2px; - outline:none; - margin:5px 0; - display:inline; - background-color:rgba(0, 0, 0, .01); - border-radius:23px .5em 23px .5em; +.profile { + width: 100%; + text-decoration: none; + color: #000; + padding: 2px; + outline: none; + margin: 5px 0; + display: inline; + background-color: rgba(0, 0, 0, .01); + border-radius: 23px .5em 23px .5em; } -.site{ - padding:14px 2px; - margin:20px 0; - border-bottom:1px dashed #ccc; +.site { + padding: 14px 2px; + margin: 20px 0; + border-bottom: 1px dashed #ccc; } .profile.selected, -.profile:focus, -.profile:hover{ - padding:1px; - border:1px solid #ccc; +.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; +.profile .profile-info { + display: table-cell; + vertical-align: top; + text-align: left; } -.site .site-supports{ - text-align:right; - padding:8px; +.site .site-supports { + text-align: right; + padding: 8px; } -.profile .profile-photo{ - float:left; - margin:8px; - border-radius:15px; - border:1px solid #ddd; +.profile .profile-photo { + float: left; + margin: 8px; + border-radius: 15px; + border: 1px solid #ddd; } .site .site-info, -.profile .profile-info{ - padding:8px; - width:100%; +.profile .profile-info { + padding: 8px; + width: 100%; } .site .site-info strong, -.profile .profile-info strong{ - font-weight:600; +.profile .profile-info strong { + font-weight: 600; } .site .site-info .fa, -.profile .profile-info .fa{ - line-height:1.1em; - color:#999; +.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; +.profile .profile-info .url { + font-size: 80%; + margin-bottom: 3px; + color: #555; - /** @see https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */ - overflow-wrap:break-word; - word-wrap:break-word; - -ms-word-break:break-all; - word-break:break-all; - word-break:break-word; - -ms-hyphens:auto; - -moz-hyphens:auto; - -webkit-hyphens:auto; - hyphens:auto; + /** @see https: //css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */ + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } -.profile .profile-info .description{ - margin-bottom:.5em; +.profile .profile-info .description { + margin-bottom: .5em; } -.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 { + 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 .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; - line-height:25px; - text-decoration:none; +.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; + line-height: 25px; + text-decoration: none; } -.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; +.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; } +.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; +.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){ +@media screen and (max-width: 880px) { - body{ - overflow-x:hidden; + body { + overflow-x: hidden; } - .mobile{ - display:inherit !important; + .mobile { + display: inherit !important; } - #top-bar .header{ - overflow:hidden; - width:0px; - padding-left:28px; - height:28px; - background-size:28px; + #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; + #top-bar .search-form { + display: block; + width: 100%; + padding: 0 35px; + margin: 0; } .homepage-wrapper, - .search-wrapper{ - width:95%; - max-width:500px; + .search-wrapper { + width: 95%; + max-width: 500px; } - .homepage-wrapper .search-wrapper{ - width:100%; + .homepage-wrapper .search-wrapper { + width: 100%; } - .homepage-wrapper{ - margin:90px auto; + .homepage-wrapper { + margin: 90px auto; } .search-results, - .sub-menu-outer .sub-menu-inner{ - width:95%; - max-width:500px; + .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; + .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 { + 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 .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%; + nav#links.open .viewport { + left: 0%; } - #top-bar nav#links .viewport{ - background:#f5f5f5; + #top-bar nav#links .viewport { + background: #f5f5f5; } - nav#links h3{ - margin:0; - display:block; - line-height:2em; + nav#links h3 { + margin: 0; + display: block; + line-height: 2em; } - nav#links a{ - display:block; - line-height:2.5em; - margin:4px 0; + 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; + .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; +@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; + .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){ +@media screen and (max-width: 400px) { - .profile .profile-photo{ - width:60px; - border-radius:11.25px; - margin:8px 4px; + .profile .profile-photo { + width: 60px; + border-radius: 11.25px; + margin: 8px 4px; } - .profile .profile-info .url{ - display:none; + .profile .profile-info .url { + display: none; } }