/**
* api: css
* type: stylesheet
* title: freshcode.club layout+style
* description: Simulates the late freecode.com layout and looks; well mostly.
* version: 0.8.2-2
*
* Centered two-pane layout. The #main section is usually 33% of the screen width,
* while the #sidebar floats at the right. They're repositioned only using padding:
* to the outer html,body{}.
*
*/
/**
* General HTML rendering presets.
*
*/
html, body {
padding: 0;
margin: 0;
background: #fff;
font-family: Verdana, Arial;
font-size: 11pt;
}
a {
text-decoration: none;
}
em {
color: #723;
}
img {
vertical-align: middle;
border: 0;
}
h2 { font-size: 13pt; }
h3 { font-size: 12pt; }
h4 { font-size: 11.5pt; }
h5 { font-size: 11pt; }
a[href=""] {
opacity: 0.20;
}
input, textarea, select {
font-size: 107%;
}
code, var, kbd {
background: linear-gradient(90deg,#fafafa,#fafaff);
box-shadow: 0 0 3px 2px #ccf;
border-radius: 3px;
margin: 1px;
}
var { box-shadow: 0 0 3px 2px #fdd; }
kbd { box-shadow: 0 0 3px 2px #dfd; }
table {}
tr, th, td {
align: left;
vertical-align: top;
}
.semi-visible {
opacity: 0.4;
}
.semi-visible:hover {
opacity: 1.0;
}
/* presentational shortcuts */
.grey { color: grey; }
.black { color: black; }
.green { color: green; }
.blue { color: blue; }
.red { color: red; }
/* HTML5 audio element */
audio {
display: inline;
width: 8pt;
height: 10pt;
content: "♫";
animation: blink 3s linear infinite;
color: #77f;
font-weight: 900;
background: #dcdcfc;
box-shadow: 0 0 5px 3px #dcdcfc;
padding: 1px 4px;
margin-left: 5pt;
}
@keyframes blink {
to { color: #119; }
}
/**
* Layout (main table, container size)
*
*/
.container-width {
max-width: 1100px;
width: 80%;
margin-left: auto;
margin-right: auto;
}
section#main.container-width {
padding-left: 30pt;
}
#mainsplit, #mainsplit tr, #mainsplit td {
border: 0;
}
#mainsplit {
margin-top: 20pt;
}
/**
* Page header, info bar and logo box
*
*/
#topbar {
background: #555599;
padding: 3pt;
color: #fff;
/*white-space: nowrap;*/
}
#topbar a { color: #fec; }
#topbar a:hover { color: #fc7; }
#logo {
padding: 7pt;
height: 95pt;
border-bottom: 2.5pt solid #bbb;
background: #dddedf;
background: linear-gradient(to bottom, #e5e6e9 0%, #dddedf 100%);
/*white-space: nowrap;*/
}
#logo img {
padding: 0px 10px;
}
#logo #stats {
display: inline-block;
font-size: 70%;
float: right;
width: 150px;
color: #999;
margin: 0; padding-top: 5pt;
}
#logo #stats li {
list-style: none;
text-align: right;
}
#logo #stats li var {
box-shadow: 0 0 3px 2px #f3f3f3;
background: #e7e7e7;
}
/**
* Main action link box, hovering halfway over header box.
*
*/
#tools {
padding: 3pt 5pt 2pt 5pt;
border: 1.75pt solid #bbb;
border-top: 1pt solid #ccc;
border-radius: 5pt;
background: #e5e7e9;
background: linear-gradient(to bottom, #ffffff, #fdfefe, #f5f7f9, #eaecee, #e5e7e9, #e1e3e5, #d0d1d2);
position: relative;
top: -14pt;
font-size: 95%;
white-space: nowrap;
}
.absolute {
position: absolute;
}
#tools a {
color: #777;
margin: 0 1pt;
padding: 2pt 8pt;
border-radius: 4pt;
}
#tools a.submit {
background: #79d;
background: linear-gradient(145deg,#e5e5ef,#d1d3df);
color: #111;
}
#tools a:hover {
color: #fff;
background: #346;
}
#tools .submenu:hover {
background: #D3D7DE;
border-radius: 5pt;
}
#tools .submenu a:first-child {
padding-right: 3pt;
margin-right: 0;
}
#tools .submenu a:nth-child(2) {
padding-left: 3pt;
margin-left: 0;
}
#tools #search_q {
display: inline;
border-radius: 4pt;
padding: 1pt;
}
#tools #search_q input {
border: 1px solid #999;
background: #eee;
height: 11pt;
border-radius: 3pt;
margin: 1pt;
}
#tools #search_q:hover {
background: #D3D7DE;
}
#tools #search_q:hover a {
color: #eee;
}
#tools .rightmenu {
float: right;
}
#tools .meta {
background: linear-gradient(90deg, #bbb 0%, #ccc 17%, #fff 22%, #fff 80%, #ddd 100%);
padding: 1.5pt 8pt 1.5pt 10pt;
opacity: 0.9;
}
#tools .meta:hover {
background: linear-gradient(90deg, #125 0%, #234 17%, #347 22%, #458 80%, #9af 100%);
padding: 2pt 8pt 2pt 10pt;
opacity: 1.0;
}
/**
* Sidebar floats right to #main, usually just a fifth of its width.
*
*/
#sidebar {
width: 15%;
min-width: 175pt;
min-height: 400pt;
background: #fefdfd;
max-width: 190pt;
}
#sidebar.absolute-float {
position: absolute;
margin: 25pt 150pt 25pt 68%;
}
#sidebar section {
border: 1.5pt solid #ccc;
border-radius: 5.75pt;
background: #eee linear-gradient(#fcfcfc, #fafafa, #f7f7f7, #f2f2f2, #eeeeee, #dddddd);
padding: 3pt;
margin-bottom: 10pt;
}
#sidebar section h5 {
margin: 1pt;
border-bottom: 1px solid #ddd;
}
#sidebar section a h5 {
color: black;
}
#sidebar section.article-links a {
margin: 2pt;
padding: 1pt;
font-size: 72%;
color: #448;
display: block;
background: linear-gradient(#f7f7f7 40%, #eee 70%, #ddd 100%);
}
#sidebar section.article-links.feed-fossies a {
font-size: 85%;
}
#sidebar section.article-links a small {
font-size: 65%;
color: grey;
}
#sidebar section.article-links.trimmed a {
height: 1.3em;
overflow: hidden;
}
#sidebar.community-web {
font-size: 90%;
}
#sidebar.community-web li {
margin-left: 5pt;
list-style: none;
}
#sidebar.community-web li:before {
content: "→";
color: #aaa;
}
#sidebar .submitter .gravatar {
margin: 2pt 5pt 1pt 2pt;
}
/**
* Main content area (project listings, frontpage, articles, etc.)
*
*/
#main {
min-height: 700pt;
min-width: 620px;
padding-right: 30pt;
}
#main h2, #main h3, #main h4 {
background: #ddd;
background: linear-gradient(#f3f3f3,#f0f0f0,#eee,#e7e7e7,#d3d3d3);
border-radius: 2pt;
padding: 3.5pt 5pt 1.5pt 5pt;
margin-top: 25pt;
}
#main h2.no-margin, #main h3.no-margin, #main h4.no-margin {
margin-top: 0;
}
#main label, #sidebar label {
display: block;
margin: 10pt 0;
font-weight: 700;
}
#main table label {
margin: 3pt 0;
}
#main label input, #sidebar label input, #main label textarea {
display: block;
font-weight: 400;
}
#main label input[type=radio] {
display: inline;
}
#main label small, #sidebar label small {
display: block;
font-weight: 200;
font-size: 85%;
color: #777;
}
#main label.inline { font-weight: 200; margin: 4pt; }
#main label.inline input { display: inline; }
.action {
color: #697;
border-bottom: 1px dashed #5d7;
}
/* Moderator/Admin notes atop the submit form */
.editor-note {
display: block;
width: 70%;
margin: 9pt;
background: #f3e7d0;
padding: 5pt;
}
/**
* Login box etc.
*
*/
#main .box {
margin: 20pt;
padding: 50pt;
border-radius: 5pt;
border: 3pt solid #357;
background: #7ae;
background: linear-gradient(145deg,#7ae,#39d);
}
#main .box input {
border-radius: 5pt;
border: 1.75pt solid #579;
padding: 3pt;
margin: 3pt;
background: #f7faff;
}
#main .login.box .service-logins {
padding-top: 10pt;
float: right;
color: #ccc;
font-size: 85%;
}
#main .login.box .service-logins a {
color: #dde;
}
#main .login.box #login_url {
background: #f7faff;
background: linear-gradient(99deg, #888 0%, #a0a0a0 1%, #fc7 3%, #bbb 5%, #fff 8%);
padding-left: 33px;
}
#main .box input.indieauth {
padding: 5pt 20pt 5pt 35pt;
background: #f7faff url("img/indieauth.png") no-repeat 10px 3px;
font-weight: bold;
text-shadow: 1px 1px #999;
}
#main .box input.indieauth:hover {
background-color: #7b7 !important;
}
/**
* Project listing on frontpage and /projects/xyz
*
*/
#main .project {
margin: 5pt 0 20pt 0;
min-width: 620px;
}
#main .project h3 {
margin: 1pt 2pt 3pt 1pt;
}
#main .project h3 a {
color: #000;
display: inline-block;
max-width: 70%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#main .project h3 a:hover, #main .project h3 a:hover .version {
color: #237;
}
#main .project .version {
font-style: normal;
font-weight: 200;
}
#main .project .links {
float: right;
}
#main .project .links a[href=""] {
opacity: 0.15;
}
#main .project .published_date {
font-weight: 200;
font-size: 65%;
color: #777;
position: relative; top: -3.5pt;
}
#main .project img.preview {
padding: 3px;
border: 1px solid #eee;
box-shadow: 2px 2px 7px 0px #ccc;
margin: 3pt;
}
#main .project .description {
margin-top: 5pt;
padding-bottom: 5pt;
border-bottom: 1px solid #ccc;
margin-bottom: 4pt;
font-size: 95%;
color: #222;
}
#main .release-notes {
margin: 4.5pt 0 1pt 0;
font-size: 90%;
color: #444;
padding-left: 30pt;
background: url("img/changes.png") no-repeat 15px 3px;
max-width: 660px;
}
#main .release-notes b {
font-size: 90%;
color: #555;
}
#main .project .tags {
margin: 4.5pt 0 2pt 0;
}
#main .project .tags a {
font-size: 75%;
color: #222;
background: #eee linear-gradient(to bottom,#ddd,#eee);
border: 1px solid #fff;
border-left: 1px dotted #eee;
padding: 2px;
}
#main .project .tags a.license {
background: #e9e3d0 linear-gradient(to bottom,#e3e0c7,#e9e3d0);
}
#main .project .trimmed {
max-height: 5.55em;
overflow: hidden;
}
#main .project .trimmed div {
box-shadow: inset 0 5pt 5pt 0px #ffeecc;
height: 5.55em;
overflow: hidden;
}
#main .project.sponsored {
/*
No, it's not really sponsored. No such thing ;)
Experimental style for subtle project / language categorization.
*/
box-shadow: -30px 0 30px 5px #e7e9f7;
background: linear-gradient(90deg,#e7e9f7,#fff);
}
#main .project.sponsored img.preview {
width: 120px;
height: 90px;
}
#main .project.sponsored h3 {
background: linear-gradient(#ececf3,#f0f0f3,#eeeef3,#e7e7f0,#d3d3e0);
}
/**
* Shortened view on search/
*
*/
#main .project.search {
clear: both;
margin-bottom: 15pt;
}
#main .project.search h3 {
display: inline;
margin: 2pt;
padding: 2pt;
font-size: 95%;
}
#main .project.search img {
border: 0;
box-shadow: none;
margin: 0 2pt 3pt 0;
}
#main .project.search small.description {
line-height: 80%;
}
/**
* Variation for /projects/xyz detail view.
*/
#main .project .long-tags th {
border: 1px solid #ddd;
background: #eee;
padding: 1pt 12pt;
border-radius: 4pt;
font-size: 80%;
text-align: right;
}
#main .project .long-tags {
border-spacing: 5pt;
}
#main .project .long-tags a {
padding: 2pt 5pt;
}
#main .project .long-links a, #sidebar section .long-links {
border: 1px solid #79f;
background: #47d;
padding: 2pt 8pt;
border-radius: 4pt;
margin-right: 15pt;
font-size: 115%;
color: #fff;
}
#main .project .long-links a:hover {
text-shadow: 0px 0px 5px #fff;
color: #eef;
}
/**
* List of releases below /projects/xyz
*/
#main .release-list div.release-entry {
margin-bottom: 15pt;
}
#main .release-list .version, #main .release-list .published_date {
background: #57b;
padding: 1pt 8pt;
border-radius: 5pt 0 0 5pt;
color: #fff;
font-size: 80%;
}
#main .release-list .published_date {
background: #666;
border-radius: 0 5pt 5pt 0;
}
#main .release-list .release-notes {
display: block;
}
/**
* Image gallery in /links to other FLOSS directories.
*
*/
#main .links-entry {
display: inline-block;
width: 200px;
min-height: 250px;
margin: 10pt;
float: left;
}
#main .links-entry:nth-child(3n) {
clear: both;
}
#main .links-entry img {
margin-bottom: 7pt;
border: 1px solid #f3f3f3;
box-shadow: 3px 3px 7px #888;
}
#main .links-entry a:hover img {
border-color: 1px solid #f9f7f3;
box-shadow: 2px 2px 5px #777;
}
#main .links-entry a:focus img {
border-color: 1px solid #ecb;
position: relative; top: 1px; left: 1px;
box-shadow: 2px 2px 4px #743;
}
/**
* Colors and block looks for social media share buttons
* (per project-homepage and also in freshcode-footer)
*
*/
.social-share-links a { display: inline-block; opacity: 0.3; border-radius: 4px; padding: 3px; border: 1px solid #ddd; color: #fff !important; box-shadow: 2px 2px 5px 0px #888;}
.social-share-links a:hover { opacity: 1.0; }
.social-share-links a[title="google+"] { background: #DD4B39; font-weight: 100; }
.social-share-links a[title="facebook"] { background: #3B5998; font-weight: 700; }
.social-share-links a[title="reddit"] { background: #C0D7DF; color: #444 !important; }
.social-share-links a[title="twitter"] { background: #55ACEE; }
.social-share-links a[title="linkedin"] { background: #0e76a8; font-weight: 700; }
.social-share-links a[title="stumbleupon"] { background: #f74425; }
.social-share-links a[title="delicious"] { background: #557CDE; }
.social-share-count {
font-style: normal;
font-weight: 300;
font-size: 85%;
border: 1px solid #eee;
box-shadow: #999 0px 0px 4px;
background: linear-gradient(45deg, #fff, #f7f7f7);
border-radius: 2pt;
padding: 1pt;
}
.social-share-count:before {
content: "★";
color: #779;
font-size: 150%;
position: relative;
top: 1pt;
}
/* */
.pagination-links {
margin-top: 35pt;
border: 1px solid #e7e7e7;
background: #f0f0f0;
text-align: center;
padding: 1pt;
}
.pagination-links a {
background: #d9d9d9;
border-radius: 4pt;
padding: 5pt 10pt;
margin: 0pt 7pt;
color: #333;
font-size: 80%;
}
.pagination-links a.current {
background: #999;
}
/**
* Submit form: trove select list (<ul> instead of <select>
*
*/
#trove_tags {
margin: 0; padding: 0;
display: inline-block;
position: relative;
top: -70px;
width: 175px;
height: 170px;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #ccc;
font-size: 85%;
}
#trove_tags.pick-tags {
width: 220px;
height: 1550px;
top: 0px;
border: none;
font-size: 92%;
}
#trove_tags span {
display: block;
margin: 0; padding: 0;
padding-left: 10px;
font-weight: 200;
}
#trove_tags > span {
padding: 0;
}
#trove_tags span > span {
background: url("img/dotleader.png") no-repeat;
}
#trove_tags span.optgroup b {
font-weight: 900;
display: block;
}
#trove_tags span > span.option:hover, #trove_tags span.optgroup > b:hover {
background: #ccf;
}
#trove_tags .option.selected, #tag_cloud a.selected {
background: #fba !important;
}
#trove_tags .optgroup[data-tag='topic'] { background: #f3f4f7; }
#trove_tags .optgroup[data-tag='topic'] * { background: #f7f7f9; }
#trove_tags .optgroup[data-tag='programming-language'] { background: #d7dcf0; }
#trove_tags .optgroup[data-tag='programming-language'] * { background: #ecf0fa; }
#trove_tags .optgroup[data-tag='environment'] { background: #f3f0e0; }
#trove_tags .optgroup[data-tag='environment'] * { background: #f7f5eb; }
#trove_tags .optgroup[data-tag='framework'] { background: #f0e0f0; }
#trove_tags .optgroup[data-tag='framework'] * { background: #f7e7f7; }
#trove_tags .optgroup[data-tag='operating-system'] { background: #ffe5e0; }
#trove_tags .optgroup[data-tag='operating-system'] * { background: #fce9e7; }
#trove_tags .optgroup[data-tag='audience'] { background: #e7f7ec; }
#trove_tags .optgroup[data-tag='audience'] * { background: #f0fff3; }
/**
* Specific pages
*
*/
/* /names */
.project-name-columns {
column-count: 6;
column-gap: 20pt;
column-break-inside: avoid;
}
.project-name-columns a {
display: inline-block;
margin: 11pt;
white-space: nowrap;
color: #337;
font-weight: 700;
text-align: center;
}
.project-name-columns a img {
display: block;
box-shadow: 1px 1px 2px 1px #eee;
}
/* RecentChanges */
table.rc {
width: 100%;
margin-top: 5pt;
}
.rc th {
background: #ddd;
font-weight: 500;
padding: 3pt;
text-align: left;
border-radius: 5pt 5pt 0 0;
box-shadow: 0px -2px 3px 1px #eee;
}
.rc td {
background: #f7f9fc;
}
.rc th a {
color: #22c;
}
.rc th:first-child {
font-weight: 600;
}
.rc th:first-child,
.rc td:first-child {
width: 15%;
}
.rc ins {
color: #151;
text-decoration: none;
border-bottom: 1px dashed green;
background: #efe;
}
.rc del {
color: #521;
background: #fee;
}
.rc.admin ins {
border: none;
background: #f1fff3;
}
.rc.admin del {
color: #210;
background: #fff5f3;
text-decoration: none;
}
.rc .funcs {
float: right;
}
.rc .funcs a {
font-size: 60%;
color: #99b;
background: #e3e3e3;
border: 1px solid #eee;
border-radius: 3pt;
padding: 1pt 3pt;
}
/**
* Page footer
*
*/
#spotlight {
margin-top: 50pt;
border-top: 3pt solid #B7C0BB;
background: #E7E7D0;
color: #111;
height: 120pt;
}
#spotlight a {
display: inline-block;
float: left;
margin: 10pt;
padding: 7pt;
width: 200pt;
height: 85pt;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 10pt;
background: linear-gradient(to bottom, #F3F3DF, #E7E7D0 70%);
}
#spotlight a b {
color: #111;
font-weight: 700;
display: inline-block;
max-width: 120px;
max-height: 15pt;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#spotlight a img {
float: left;
margin-right: 5pt;
border-radius: 5pt;
}
#spotlight a small {
color: #444;
}
#bottom {
border-top: 3pt solid #5F677F;
background: #444477;
padding-top: 15pt;
padding-bottom: 15pt;
color: #fff;
height: 50pt;
}
#bottom a { color: #fc9; }
}