Scribner's Magazine

From The Waste Land Wiki
Jump to: navigation, search
(→‎Sources)
(→‎Sources)
Line 46: Line 46:
 
<HTML>
 
<HTML>
 
<references />
 
<references />
 +
 +
<style>
 +
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,900);
 +
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro);
 +
@import url(http://fonts.googleapis.com/css?family=Exo:300,800);
 +
 +
* {
 +
  margin:0px;
 +
  padding:0px;
 +
}
 +
.cube {
 +
  position:relative;
 +
  width:500px;
 +
  height:60px;
 +
  margin:5rem auto;
 +
  -webkit-transform-style:preserve-3d;
 +
  -moz-transform-style:  preserve-3d;
 +
  -ms-transform-style:    preserve-3d;
 +
  -o-transform-style:    preserve-3d;
 +
  transform-style:        preserve-3d;
 +
  -webkit-perspective:400px;
 +
  -moz-perspective:  400px;
 +
  -ms-perspective:    400px;
 +
  -o-perspective:    400px;
 +
  perspective:        400px;
 +
}
 +
/* positions */
 +
.a, .b, .c, .d {
 +
  position:absolute;
 +
  width:50%;
 +
  height:100%;
 +
  left:0px;
 +
  z-index:222;
 +
}
 +
.a:before, .b:before, .c:before, .d:before, .a:after, .b:after {
 +
  content:'';
 +
  position:absolute;
 +
  top:0px;
 +
  left:0px;
 +
  width:500px;
 +
  height:60px;
 +
}
 +
.a:before, .b:before, .c:before, .d:before {
 +
  z-index:111;
 +
}
 +
.a:after, .b:after {
 +
  z-index:333;
 +
}
 +
.b {
 +
  top:0px;
 +
  -webkit-transform:rotateX(75deg) translateY(-60px);
 +
  -moz-transform:  rotateX(75deg) translateY(-60px);
 +
  -o-transform:    rotateX(75deg) translateY(-60px);
 +
  -ms-transform:    rotateX(75deg) translateY(-60px);
 +
  transform:        rotateX(75deg) translateY(-60px);
 +
  -webkit-transform-origin:0% 0%;
 +
  -moz-transform-origin:  0% 0%;
 +
  -o-transform-origin:    0% 0%;
 +
  -ms-transform-origin:    0% 0%;
 +
  transform-origin:        0% 0%;
 +
}
 +
.c {
 +
  top:0px;
 +
  -webkit-transform:rotateX(75deg);
 +
  -moz-transform:  rotateX(75deg);
 +
  -o-transform:    rotateX(75deg);
 +
  -ms-transform:    rotateX(75deg);
 +
  transform:        rotateX(75deg);
 +
  -webkit-transform-origin:100% 100%;
 +
  -moz-transform-origin:  100% 100%;
 +
  -o-transform-origin:    100% 100%;
 +
  -ms-transform-origin:    100% 100%;
 +
  transform-origin:        100% 100%;
 +
}
 +
.d {
 +
  -webkit-transform:translateZ(-60px) translateY(-15px);
 +
  -moz-transform:  translateZ(-60px) translateY(-15px);
 +
  -o-transform:    translateZ(-60px) translateY(-15px);
 +
  -ms-transform:    translateZ(-60px) translateY(-15px);
 +
  transform:        translateZ(-60px) translateY(-15px);
 +
}
 +
/* colors */
 +
.a, .b {
 +
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(116,198,43,0.8)), to(rgba(116,198,43,0.8)));
 +
  background-image: -webkit-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
 +
  background-image:    -moz-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
 +
  background-image:      -o-linear-gradient(top, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
 +
  background-image:        linear-gradient(to bottom, rgba(116,198,43,0.8), rgba(116,198,43,0.8));
 +
  background-repeat:no-repeat;
 +
  background-size:100% 100%;
 +
  background-position:0% 0%;
 +
}
 +
.c, .d {
 +
  background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(116,198,43,0.5)), to(rgba(116,198,43,0.5)));
 +
  background-image:-webkit-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
 +
  background-image:  -moz-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
 +
  background-image:    -o-linear-gradient(top, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
 +
  background-image:        linear-gradient(to bottom, rgba(116,198,43,0.5), rgba(116,198,43,0.5));
 +
  background-repeat:no-repeat;
 +
  background-size:100% 100%;
 +
  background-position:0% 0%;
 +
}
 +
.c:before {
 +
  -webkit-box-shadow:0px 30px 20px -20px rgba(0,0,0,0.4),
 +
                    0px 40px 15px -15px rgba(0,0,0,0.25);
 +
  -moz-box-shadow:  0px 30px 20px -20px rgba(0,0,0,0.4),
 +
                    0px 40px 15px -15px rgba(0,0,0,0.25);
 +
  box-shadow:        0px 30px 20px -20px rgba(0,0,0,0.4),
 +
                    0px 40px 15px -15px rgba(0,0,0,0.25);
 +
}
 +
.a:before, .b:before, .c:before, .d:before {
 +
  background-color:rgba(0,0,0,0.05);
 +
}
 +
.a:after {
 +
  background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.07)), to(rgba(0,0,0,0)));
 +
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
 +
  background-image:  -moz-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
 +
  background-image:    -o-linear-gradient(top, rgba(0,0,0,0.07), rgba(0,0,0,0));
 +
  background-image:        linear-gradient(to bottom, rgba(0,0,0,0.07), rgba(0,0,0,0));
 +
}
 +
.b:after {
 +
  background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(255,255,255,0.25)));
 +
  background-image:-webkit-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
 +
  background-image:  -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
 +
  background-image:    -o-linear-gradient(top, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
 +
  background-image:        linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.25));
 +
}
 +
/* jQuery stuff */
 +
#slider-range-min {
 +
  position:absolute;
 +
  width: 94%;
 +
  left:3%;
 +
  top:27px;
 +
  margin: 0px;
 +
  z-index:999;
 +
}
 +
.ui-slider {
 +
  height:5px;
 +
  border:none;
 +
  background:rgba(0,0,0,0.1);
 +
  -webkit-box-shadow:0px 2px 2px rgba(255,255,255,0.25),
 +
                    inset 0px 1px 3px rgba(0,0,0,0.3);
 +
  -moz-box-shadow:  0px 2px 2px rgba(255,255,255,0.25),
 +
                    inset 0px 1px 3px rgba(0,0,0,0.3);
 +
  box-shadow:        0px 2px 2px rgba(255,255,255,0.25),
 +
                    inset 0px 1px 3px rgba(0,0,0,0.3);
 +
}
 +
.ui-slider:before, .ui-slider:after {
 +
  content:'IIIIIIIIIII';
 +
  position:absolute;
 +
  left:2px;
 +
  width:100%;
 +
  font-family: 'Source Sans Pro', sans-serif;
 +
  font-size:1.2rem;
 +
  font-weight:300;
 +
  color:rgba(0,0,0,0.3);
 +
  letter-spacing:41px;
 +
  text-shadow:1px 1px 0px rgba(255,255,255,0.2);
 +
}
 +
.ui-slider:before {
 +
  top:-1.4rem;
 +
}
 +
.ui-slider:after {
 +
  bottom:-1.4rem;
 +
}
 +
.ui-slider-range {background:transparent;}
 +
.ui-slider .ui-slider-handle {
 +
  top:-8px;
 +
  width:26px;
 +
  height:20px;
 +
  margin-left:-15px;
 +
  padding-left:4px;
 +
  border:none;
 +
  background:rgba(255,255,255,0.7);
 +
  border-radius:2px;
 +
  text-align:center;
 +
  font-family: 'Anonymous Pro', sans-serif;
 +
  font-size:1.2rem;
 +
  line-height:20px;
 +
  color:rgba(0,0,0,0.5);
 +
  text-decoration:none;
 +
  letter-spacing:3px;
 +
  cursor:pointer;
 +
  text-shadow:1px 1px 2px rgba(255,255,255,1);
 +
  -webkit-box-shadow:1px 1px 8px rgba(0,0,0,0.3);
 +
  -moz-box-shadow:  1px 1px 8px rgba(0,0,0,0.3);
 +
  box-shadow:        1px 1px 8px rgba(0,0,0,0.3);
 +
}
 +
.ui-slider .ui-slider-handle:focus {
 +
  outline:none;
 +
}
 +
/* typo */
 +
h1 {
 +
  font-size:2.7rem;
 +
  font-weight:200;
 +
  color:rgba(0,0,0,0.6);
 +
  text-shadow:1px 1px 0px rgba(255,255,255,0.3);
 +
}
 +
p {
 +
  font-size:1.2rem;
 +
  font-weight:300;
 +
  line-height:1.8rem;
 +
  color:rgba(0,0,0,0.8);
 +
}
 +
.credits a {
 +
  position:relative;
 +
  display:inline-block;
 +
  color:#529e0e;
 +
  text-decoration:none;
 +
}
 +
.credits a:after {
 +
  content:'';
 +
  position:absolute;
 +
  left:-1.5%;
 +
  bottom:-1px;
 +
  width:0%;
 +
  height:1px;
 +
  background:#529e0e;
 +
  -webkit-transition:width 0.1s;
 +
  -moz-transition:  width 0.1s;
 +
  -o-transition:    width 0.1s;
 +
  transition:        width 0.1s;
 +
}
 +
.credits a:hover::after {
 +
  width:103%;
 +
}
 +
#amount {
 +
  position:relative;
 +
  display:inline-block;
 +
  padding-bottom:5rem;
 +
  text-align:center;
 +
  font-family: 'Exo', sans-serif;
 +
  font-weight:800;
 +
  font-size:4rem;
 +
  color:#529e0e;
 +
  background:transparent;
 +
  border:none;
 +
}
 +
#amount:focus {outline:none;}
 +
/* base */
 +
#content {
 +
  -webkit-box-sizing:border-box;
 +
  -moz-box-sizing:  border-box;
 +
  box-sizing:        border-box;
 +
  width:100%;
 +
  height:100%;
 +
  padding-top:5rem;
 +
  text-align:center;
 +
}
 +
html, body {
 +
  height:100%;
 +
  background-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.08)), to(rgba(0,0,0,0.05)));
 +
  background-image:-webkit-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
 +
  background-image:  -moz-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
 +
  background-image:    -o-linear-gradient(top, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
 +
  background-image:        linear-gradient(to bottom, rgba(0,0,0,0.08), rgba(0,0,0,0.05));
 +
  background-repeat:no-repeat;
 +
  background-size:100% 100%;
 +
  background-position:0% 0%;
 +
  font-family: 'Source Sans Pro', sans-serif;
 +
}
 +
</style>
 +
 +
<div id="slider-range-min"></div>
 +
<script>
 +
$(function() {
 +
    $( "#slider-range-min" ).slider({
 +
      range: "min",
 +
      value: 50,
 +
      min: 0,
 +
      max: 100,
 +
      slide: function( event, ui ) {
 +
        $( "#amount" ).val( "$" + ui.value + ",000");
 +
        $(".a, .b, .c, .d").width(ui.value + "%");
 +
      }
 +
    });
 +
    $(".ui-slider-handle").text("<>");
 +
    $( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value") + ",000");
 +
  });
 +
</script>
 +
 
</HTML>
 
</HTML>

Revision as of 20:23, 6 March 2017

Retrieved from "http://courses.utulsa.edu/modmag/waste-land-wiki/index.php?title=Scribner%27s_Magazine&oldid=2038"
Personal tools
Namespaces

Variants
Actions
Navigation
Toolbox