Skip to content

Instantly share code, notes, and snippets.

@FichteFoll

FichteFoll/description.html

Last active August 29, 2015 14:20
Show Gist options
  • Save FichteFoll/536244cd1bfa3396bacc to your computer and use it in GitHub Desktop.
Save FichteFoll/536244cd1bfa3396bacc to your computer and use it in GitHub Desktop.
Download ZIP
fichtefoll.soup.io resources
Raw
description.html
<ul id="linkbox" class="size32">
<li><a class="rss" href="http://fichtefoll.soup.io/rss"></a></li>
<li><a class="lastfm" href="http://last.fm/user/fichtefoll"></a></li>
<li><a class="twitter" href="http://twitter.com/fichtefoll"></a></li>
<!-- <li><a class="wordpress" href="http://fichtefoll.akatsuki-subs.net"></a></li> -->
<li><a class="youtube" href="http://youtube.com/yisery"></a></li>
</ul>
<p>
Just a random collection of awesomeness or what I appreciate as awesome ;)
<br />
(Art, Facts, Memes, ...)
</p>
<p>
<a href="https://dl.dropbox.com/u/23263478/notes/soup_tags.fmd" target="_blank">Here</a>
is a list of tags I am using.
I mostly use them for my own posts only though.
</p>
<script type="text/javascript" src="http://fichtefoll.taiga-san.net/etc/soup.js"></script>
<script type="text/javascript" src="http://widgets.tcimg.com/v1/sidebar.js"></script>
<script type="text/javascript">tc_sidebar("72bebq98", "de", "right-bottom");</script>
Raw
soup.css
/* INFO **********************************************************************
*
* ~ Soup.io CSS Style ~
*
* Uses CSS3: text-shadow, box-shadow, border-radius and transitions
*
* Copyright (c) by FichteFoll, 2015-05-09 http://fichtefoll.soup.io/
*
*****************************************************************************/
/* LICENCE *******************************************************************
*
* Namensnennung-Nicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Unported (CC BY-NC-SA 3.0)
* Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)
*
* In case you want to use this style, embed my name visibly in your
* soup's description and inform me ([email protected], 411678239)
* as you might get special rights.
*
* English: https://creativecommons.org/licenses/by-nc-sa/3.0/
* German: https://creativecommons.org/licenses/by-nc-sa/3.0/deed.de
* Legal Code: https://creativecommons.org/licenses/by-nc-sa/3.0/legalcode
*
*****************************************************************************/
/* CHANGELOG *****************************************************************
*
* 2015-05-09
* + Added: .post_link styling (it was just dumb)
* + Fixed: #linkbox spacing
*
* 2012-03-14
* + Added: #reload_notice styling (forgot with .endlessnotice)
* ~ Changed: Small code adjustments, more documentation
* * Fixed: A few issues with .endlessnotice overrides
*
* 2011-08-25
* + Added: Styling for .post_quote
* * Fixed: .content cite {color: #fff; text-shadow: white;} sucks, srsly
* Btw, text-shadow in Chrome in general sucks at least as hard
*
* 2011-08-23
* + Added: Restyling of #lightbox, depends on my javascript code
* ~ Changed: Less absolute width declarations to have it more dynamically
* ~ Changed: Adjusted #linkbox margin-left to new header
* * Fixed: Some background fixes for #barcontainer (why the fuck would you
* use multiple backgrounds while you still (really) only see one?)
*
* 2011-08-01
* + Added: #linkbox (description used to add html to the page)
* + Added: Formatting for .endlessnotice
* ~ Changed: Positioning of .content-container and .meta (the icon on the left)
* * Fixed: top-margin in .content (#posts .post .content > div)
* * Fixed: Images in #bar weren't vertically centered (soup bug)
*
* before
* ~ Some stuff I don't remember (aka "first working state")
*
*****************************************************************************/
/* TODO **********************************************************************
*
* - potentially make this into scss
*
*****************************************************************************/
/* === Top bar ============================================================= */
#barcontainer #barbg {
background-color: #262626;
}
#barcontainer #barbg, #barfade {
background: none transparent;
}
#bar {
padding-bottom: 5px;
/* box shadow */
-webkit-box-shadow: 0px 0px 10px #333, 0px 0px 6px #333, 0px 0px 2px #333;
-moz-box-shadow: 0px 0px 10px #333, 0px 0px 6px #333, 0px 0px 2px #333;
box-shadow: 0px 0px 10px #333, 0px 0px 6px #333, 0px 0px 2px #333;
}
#bar ul#menu li a img {
vertical-align: middle;
}
body.loggedin #soup {
top: 32px;
}
body.loggedin {
margin-top: 37px;
}
/* === body ================================================================ */
body {
background: url("http://i.imgur.com/ByI2P.jpg") no-repeat fixed center 0px #262626;
}
/* === Header stuff ======================================================== */
/* avatar */
#header #avatarcontainer.vcard {
background: rgba(0,0,0,0.5);
padding: 2px;
margin-right: 11px;
/* border radius */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
/* box shadow */
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.6);
box-shadow: 0px 0px 8px rgba(0,0,0,0.5), 0px 0px 4px rgba(0,0,0,0.6);
}
#header #avatarcontainer.vcard #avatar img {
/* border radius */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
/* headline & title in posts */
#header h1, #header h1 input, #posts .post .content > h3 {
text-shadow: 0 0 14px black, 0 0 8px black, 0 0 4px black;
}
/* header sub text */
#header h4, #header .description a, #footercontainer, #footer a, #content h2.date {
color: #EEEEEE;
text-shadow: 0 0 12px black, 0 0 8px black, 0 0 4px black;
}
/* === Linkbox ============================================================= */
#linkbox {
list-style: none;
display: block;
margin: -86px 0 0 365px;
padding: 0;
position: absolute;
}
#linkbox li {
float: left;
}
#linkbox a {
display: block;
opacity: 0.8;
}
#linkbox a:hover {
opacity: 1;
}
#linkbox.size32 a {
width: 32px;
height: 32px;
background-image: url("http://i.imgur.com/EccDt.png");
}
#linkbox.size32 .rss {background-position: 0 0;}
#linkbox.size32 .lastfm {background-position: -32px 0;}
#linkbox.size32 .twitter {background-position: -64px 0;}
#linkbox.size32 .wordpress {background-position: -96px 0;}
#linkbox.size32 .youtube {background-position: -128px 0;}
/* === Content ============================================================= */
/* #main width */
#main {
width: 750px; /* 60+15+600+15+60 */
/*
* p+b+w+b+p = w+2(p+b)
*
* #posts .post .content {
* width: w;
* padding: p;
* border-radius: b;
* }
*/
}
/* width of content container */
#posts .post .content-container {
width: auto;
/*width: 630px; 15+600+15 not necessary since #main needs a specified width*/
}
/* dates */
#content h2.date {
font-family: Georgia;
font-size: 14pt;
margin: 15px auto; /* <- this is the posts' padding */
padding: 0;
text-align: center;
text-transform: none;
}
/* box layout */
#posts .post .content {
padding: 15px;
width: 600px;
background: rgba(0,0,0,0.4);
/* border radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* box shadow */
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
/* margin-bottom: 20px; */
}
/* padding top for box shadow + alignment + spacing */
#posts .post, #posts .multipost {
padding: 8px 60px;
margin: 2em 0 0;
}
/* image & video position */
#posts .post_image .content > div, #posts .post_video .content > div {
margin: 0 auto;
}
/* quote post */
#posts .post_quote blockquote {
margin: 0 0 .5em 0;
}
#posts .post_quote blockquote .start {
font-size: 3.8em;
font-weight: bold;
color: hsla(0, 0%, 100%, 0.5);
float: left;
margin: .34em .1em 0 0;
width: 6%;
display: block;
}
#posts .post_quote blockquote .body {
font-size: 110%;
width: 87%;
float: left;
margin: 0 0 0.1em !important;
}
#posts .post_quote .content cite {
margin: 0.5em 10em 0 0;
text-align: right;
}
/* top margin of description & max textwidth */
#posts .post .content .description, #posts .post .content .body {
margin: 0.7em 0 0.1em;
max-width: 600px;
}
/* top-margin of .content elements */
#posts .post .content > div/*:not(:first-child)*/ {
/* use an override instead as CSS3 selectors are still unsafe */
margin-top: 0.5em;
}
#posts .post .content > div:first-child {
margin-top: 0;
}
/* cite */
#posts .post .content cite, .post .content cite a {
color: #eee;
text-shadow: 0 0 2px #aaa;
}
/* fix link posts */
.post_link .content h3 {
display: block;
}
.post_link .content {
margin-top: 0em;
}
/* content icon */
#posts .post .meta {
margin: 0 0 0 -60px;
}
/* .meta layout */
#posts .post .meta .icons {
/* border radius */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* box shadow */
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
box-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}
/* === Edit Boxes ========================================================== */
/* This will be only visible to the admin since normal users can't edit content */
#posts .post .actionbar {
margin-top: 10px;
}
#posts .post .admin-edit {
margin-top: 15px;
}
/* === Lightbox ============================================================ */
#lightbox, #lightbox-bg/*, #lightbox-img*/ {
opacity: 0;
}
#lightbox {
border: 5px solid #ddd;
background: url("http://i.imgur.com/oh2hi.gif") no-repeat center center scroll #ddd;
/* border radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* box shadow */
-webkit-box-shadow: 0px 0px 14px #ddd, 0px 0px 8px #ddd, 0px 0px 4px #ddd;
-moz-box-shadow: 0px 0px 14px #ddd, 0px 0px 8px #ddd, 0px 0px 4px #ddd;
box-shadow: 0px 0px 14px #ddd, 0px 0px 8px #ddd, 0px 0px 4px #ddd;
z-index: 30001;
overflow: hidden;
width: 0;
}
#lightbox-bg {
z-index: 30000;
background: #000;
}
/*#lightbox-img {
background: none center 0 scroll transparent;
width: 100%;
height: 100%;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}*/
/* === Endlessnotices ====================================================== */
.endlessnotice {
background-color: rgba(0,0,0,0.4);
}
#more_loading.endlessnotice, #reload_notice.endlessnotice {
/* .endlessnotice required, would be overridden and !important should be avoided */
background: rgba(0,0,0,0.4); /* Override the whole backrgound (i.e. the image) to manipulate the spinner */
}
#more_loading strong:before, #reload_notice strong:before {
content: "----"; /* Don't ask me, but it works (this is to add spacing) */
color: rgba(0,0,0,0);
vertical-align: middle;
background: url("/images/spinner.gif") no-repeat 0 0 transparent;
}
#posts .endlessnotice {
margin: 0 60px 3em !important; /* !important needed because #reload_notice has an override */
padding: 15px;
/* border radius */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* box shadow */
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
box-shadow: 0px 0px 8px rgba(0,0,0,0.4), 0px 0px 4px rgba(0,0,0,0.4);
}
/* ========================================================================= */
Raw
soup.js
/* INFO **********************************************************************
*
* ~ Soup.io lightbox modification ~
*
* Uses CSS3 transitions, depends on Prototype (pre-loaded from Soup.io)
* and my CSS Style for Soup.io
*
* Copyright (c) by FichteFoll, 2011-08-23 http://fichtefoll.soup.io/
*
*****************************************************************************/
/* LICENCE *******************************************************************
*
* Namensnennung-Nicht-kommerziell-Weitergabe unter gleichen Bedingungen 3.0 Unported (CC BY-NC-SA 3.0)
* Attribution-NonCommercial-ShareAlike 3.0 Unported (CC BY-NC-SA 3.0)
*
* In case you want to use this script, embed my name visibly in your
* soup's description and inform me ([email protected], 411678239)
* as you might get special rights.
*
* English: https://creativecommons.org/licenses/by-nc-sa/3.0/
* German: https://creativecommons.org/licenses/by-nc-sa/3.0/deed.de
* Legal Code: https://creativecommons.org/licenses/by-nc-sa/3.0/legalcode
*
*****************************************************************************/
/* CHANGELOG *****************************************************************
*
* 2011-08-23
* ~ Initial working state
*
*****************************************************************************/
(function () {
// SOUP and SOUP.Public object loaded?
if (SOUP && SOUP.Public && Prototype) {
// addEventListener for unsopporting browsers *** https://developer.mozilla.org/en/DOM/element.removeEventListener
if (!Element.prototype.addEventListener) {
var oListeners = {};
var runListeners = function (oEvent) {
if (!oEvent) { oEvent = window.event; }
for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {
if (oEvtListeners.aEls[iElId] === this) {
for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }
break;
}
}
}
Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
if (oListeners.hasOwnProperty(sEventType)) {
var oEvtListeners = oListeners[sEventType];
for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
}
if (nElIdx === -1) {
oEvtListeners.aEls.push(this);
oEvtListeners.aEvts.push([fListener]);
this["on" + sEventType] = runListeners;
} else {
var aElListeners = oEvtListeners.aEvts[nElIdx];
if (this["on" + sEventType] !== runListeners) {
aElListeners.splice(0);
this["on" + sEventType] = runListeners;
}
for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {
if (aElListeners[iLstId] === fListener) { return; }
}
aElListeners.push(fListener);
}
} else {
oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };
this["on" + sEventType] = runListeners;
}
};
Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {
if (!oListeners.hasOwnProperty(sEventType)) { return; }
var oEvtListeners = oListeners[sEventType];
for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {
if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }
}
if (nElIdx === -1) { return; }
for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {
if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }
}
};
}
// used for all transition's duration
var duration = 500, waitDelay = 20;
// function(s) to create CSS3 with multiple prefixes
var prefixes = ['-moz-', '-webkit-', '-o-', '-ms-'];
var insertCSSPrefixes = function (prefixes, property, value) {
return prefixes.map(function(pre) {
return pre + property + ": " + value;
}).join("; ") + ";";
};
var insertCSSTransition = function (value) {
return insertCSSPrefixes(prefixes, "transition", value);
};
// create some nodes
$('lightbox')/*.insert(
new Element('div', {
id: 'lightbox-img',
style: "display: none; " + insertCSSTransition("opacity " + duration/2 + "ms linear")
})
)*/.insert(
new Element('img', {
id: 'lightbox-preload',
style: "display: none; "
})
);
if (Prototype.Browser.IE && 9 >= parseFloat(navigator.appVersion.split("MSIE")[1])) {
$('more_history').insert({
top: new Element('h2', {
id: "use-latest-browser",
'class': "date",
style: "color: rgb(204, 17, 17);"
}).update("Please use a Browser that supports CSS3 transitions")
});
}
// override SOUP.Public.lightbox()
SOUP.Public.lightbox = function (element, width, height) {
if (!element.href || !width || !height)
{return false;}
var holderposition = document.viewport.getScrollOffsets();
var viewportsize = document.viewport.getDimensions();
var l = $('lightbox');
var lbg = $('lightbox-bg');
//~ var limg = $('lightbox-img');
var lpimg = $('lightbox-preload');
// reset
l.style.cssText = lbg.style.cssText = /*limg.style.cssText = */"";
// set height, top and left
l.style.height = height + "px";
l.style.top = (viewportsize.height < height) ? holderposition[1] + "px" : holderposition[1] + ((viewportsize.height / 2) - (height / 2)) + "px";
l.style.left = (viewportsize.width > (width + l.style.borderWidth*2)) ? viewportsize.width / 2 - l.style.borderWidth + "px" : '';
// set transition
lbg.style.cssText = "display: block; " + insertCSSTransition("opacity " + duration + "ms linear");
l.style.cssText = l.style.cssText + " display: block; " +
insertCSSTransition("opacity " + duration + "ms linear, left " + duration + "ms ease-out, width " + duration + "ms ease-out");
// animate opacity
lbg.style.opacity = 0.8;
l.style.opacity = 1;
// animate width and left, delay to trigger
if (viewportsize.width > (width + l.style.borderWidth*2)) {
setTimeout(function() {
l.style.width = width + "px";
l.style.left = (viewportsize.width - width) / 2 - l.style.borderWidth + "px";
}, waitDelay);
}
// event handler // register at the end to not screw the code while it's executing
var onLpimgLoad = function() {
//debug
console.log("image loaded");
// animate opacity
l.style.backgroundImage = 'url("'+element.href+'")';
lpimg.src = '';
lpimg.removeEventListener('load', onLpimgLoad, false);
// delay opacity to trigger animation
//~ setTimeout(function() {
//~ limg.style.opacity = 1;
//~ }, waitDelay);
};
lpimg.addEventListener('load', onLpimgLoad, false);
l.onclick = lbg.onclick = function () {
// animate opacity
l.style.opacity = lbg.style.opacity = 0;
// delay until animation is done
setTimeout(function () {
lbg.hide(); l.hide();
//~ limg.style.backgroundImage = '';
}, duration + 100);
};
// preload image
lpimg.src = element.href;
return false;
};
/* original SOUP.Public.lightbox()
SOUP.Public.lightbox = function (element, width, height) {
var holderposition = document.viewport.getScrollOffsets();
var viewportsize = document.viewport.getDimensions();
var l = $('lightbox');
var lbg = $('lightbox-bg');
lbg.style.display = 'block';
l.style.display = 'block';
if (height) {
l.style.height = height + "px";
}
if (viewportsize.height < height) {
l.style.top = holderposition[1] + "px";
} else {
l.style.top = holderposition[1] + ((viewportsize.height / 2) - (height / 2)) + "px";
}
if (width) {
l.style.width = width + "px";
if (viewportsize.width < width) {
l.style.left = "0px";
} else {
l.style.left = ((viewportsize.width / 2) - (width / 2)) + "px";
}
}
if (element.href) l.style.backgroundImage = 'url(' + element.href + ')';
l.onclick = function () {
lbg.hide();
l.style.backgroundImage = '';
l.hide();
};
lbg.onclick = function () {
lbg.hide();
l.style.backgroundImage = '';
l.hide();
};
return false;
}*/
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment