User Tools

Site Tools


twine_css

# Style Codes From Harlow Examples

## Haunted Hypertext

Haunted Twine

  h1 {
     color: white;
     line-height: 1.0;
  }
  tw-link {
  	color: red;
  }
  tw-passage {
    	font-size: 1.1em;
      text-shadow: 2px 2px black;}
  tw-story[tags~="sutton"] {
   background-image:url("http://www.iupdhc.org/haunted/sutton.jpg");
   background-size:cover;
  }
  tw-story[tags~="graveyard"] {
   background-image:url("http://www.iupdhc.org/haunted/graveyard.jpg");
   background-size:cover;
  }
  tw-story[tags~="map"] {
    filter: invert(90%);
    background-image:url("http://www.iupdhc.org/haunted/map.jpg");
   background-size:cover;
  }
  tw-story[tags~="mansion"] {
   background-image:url("http://www.iupdhc.org/haunted/mansion.jpg");
   background-size:cover;
  }
  tw-story[tags~="garden"] {
   background-image:url("http://www.iupdhc.org/haunted/garden.jpg");
   background-size:cover;
  }
  tw-story[tags~="warehouse"] {
   background-image:url("http://www.iupdhc.org/haunted/warehouse.jpg");
   background-size:cover;
  }
  tw-story[tags~="theater"] {
   background-image:url("http://www.iupdhc.org/haunted/theater2.jpg");
   background-size:cover;
  }
  tw-story[tags~="schoolhouse"] {
   background-image:url("http://www.iupdhc.org/haunted/schoolhouse.jpg");
   background-size:cover;
  }

# Style Code from

Sailing ROW

  body, tw-story
  {
    font-family: Palatino;
    font-size: 28px;
    color:white
    text-shadow: 3px 2px black;
  }
  body
  {
    background-image:url(waves.jpg);
  }
  tw-passage {
  	width: 100%; padding: 2em; 
      margin-top: 10px;
      margin-bottom: 10px;
      margin-right: 10px;
      margin-left: 10px; 
    border: solid #000 0.05em; border-radius: 0.2em; font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif; font-size:1.5rem; color:#000; text-align:left; background-color:#fff; box-shadow: #000 0.5em 0.5em 0;
  }
  
  img {
    //object-fit: contain;
    //  position: relative;
      left: -50px;
     // right: 100px;
    //  top: 0px;
    //  z-index: 1;
  }
  
  mark {
  font-family: Papyrus; transform: rotate(90deg);	
  }
  

# Style Sheets for Sugar Cube

## From the Office

https://iuptwine.github.io/Fest-2018-Public/TaiThomasson-EscapetheOffice.html

  body {
    margin: 10% 0 10% 0;
  }
  #passages{
    margin: 0;
    padding: 0;
    border: 0;
  }
  .passage, #sidebar * {
    font-family: Geneva, "Helvetica Neue", Helvetica, sans-serif;
    color:#000;
    text-align:left;
  }
  .passage {
    border-radius: 0.2em;
    width: 80%;
    margin: auto;
    padding: 2em;
    font-size:1.5rem;
    background-color:#fff;
    border: solid #000 0.05em;
    box-shadow: #000 0.5em 0.5em 0;
  }
  a.internalLink, a.externalLink {
    border: solid #000 0.05em;
    white-space: nowrap;
    padding: 0.1em 0.2em 0.1em 0.2em;
    border-radius: 0.5em;
    color:#000;
  }
  a.internalLink:hover, a.externalLink:hover {
    text-decoration: none;
    box-shadow: #000 0 0 0 0.1em;
    color:#000;
  }
  a.internalLink:active, a.externalLink:active {
    color: #fff;
    background-color:#000;
  }
  body {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAAAZQTFRFAAAA////pdmf3QAAAA5JREFUeF5jOACEBgwGAAnIAeGomjuiAAAAAElFTkSuQmCC);
  }
  #sidebar {
    position:absolute;
    top:0px;
    left:0px;
    width:99.2%;
    overflow-x:hidden;
    background-color:#fff;
    border-bottom: solid #000 1px;
  }
  #sidebar * {
    color: #000 !important;
    font-size:1.5rem;
    background-color:clear !important;
    display:inline !important;
  }
  #sidebar a:hover, #sidebar #snapback:hover,  #sidebar #restart:hover {
    text-decoration:underline !important;
  }
  #sidebar a:active, #sidebar #snapback:active,  #sidebar #restart:active  {
    color:#fff !important;
    font-size:1.5rem;
    background-color:#000 !important;
    display:inline !important;
  }
  #sidebar li, #sidebar li > span {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  #sidebar a, #sidebar a:hover {
    border: 0 !important;
    box-shadow: none;
  }
  .menu {
    background-color:#fff;
    color:#000;
    opacity:1;
    font-size: 1.5rem;
    border: solid #000 1px;
    box-shadow: #000 0.1em 0.1em 0;
  }
  .menu div:hover {
    background-color:#000;
    color:#fff;
  }
  #credits, #share, #titleSeparator, #sidebar li br {
    display:none !important;
  }

## From Monksworth

https://iuptwine.github.io/Fest-2018-Public/BrandoSell-Monksworth.html

  body {
    background-color: BurlyWood;
    color: Black;
    font-family: Georgia, serif;
    font-size: 100%;
    
  }
  .cave {
    background-color: Black;
    color: White;
    font-family: Georgia, serif;
    font-size: 100%;
    
  }
twine_css.txt · Last modified: 2020/05/21 16:53 by admin