fichtefoll.soup.io resources

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>

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 (fichtefoll2@googlemail.com, 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);
}

/* ========================================================================= */

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 (fichtefoll2@googlemail.com, 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;
        }*/
    }
})();