Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-CX7sDOp7UTAq+i1FYIlf9Uo27x4os+kGeoT7rgwvY+4dmjqV0IuE/Bl5hVsjnQPQiTOhAX1O2r2j5bjsFBvv/A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.0/tailwind.min.css"/>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.0.0-alpha.1/axios.min.js" integrity="sha512-xIPqqrfvUAc/Cspuj7Bq0UtHNo/5qkdyngx6Vwt+tmbvTLDszzXM0G6c91LXmGrRx8KEPulT+AfOOez+TeVylg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js" integrity="sha512-lwXEDfOnFrWBspy5NB8DM2rDb5S6lDv+zu9QrRmp9YbNY9/aYiwmHAurZAEw0n1y3ZkmDiFcJ81fH69lAU8Prg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  
    <title>The Chromatic Chronicle</title>

  </head>

<header class="header">
    <h1><span class="fa-layers fa-fw" style="background:transparent"><i class="fad fa-scroll-old"></i><span class="fa-layers-text fa-inverse" data-fa-transform="shrink-12 down-0" style="font-weight:500; font-family:'Raleway', sans-serif; color:#404040;">THE</span></span>Chromatic <img style="display:inline-block; max-height:1.5em;" src="http://anaxasdiaries.com/storage/Prismatic_Guild.png"> Chronicle</h1>
  <div class="header-box">
     <div class="issue"><select id="menu-naviagtion" autofocus>
    <option value="#">Choose issue</option>
    <option value="index.html">Issue 1</option>
    <option value="issue2.html">Issue 2</option>
       <option value="issue3.html">Issue 3</option>
    <!--option value="page3.html">Page 3</-option-->
   </select></div>
      
    <div class="date">
      29 Eyre 1006 YK
    </div>
    <div class="price">2 <i class="fad fa-crown"></i></div></div>
  
     <div id="myBtnContainer" style="padding:1em 0; border-bottom:1px solid #535353;">
  <button class="btn active" onclick="filterSelection('all')">All</button>
   <button class="btn" onclick="filterSelection('arena')"> Arena</button>
  <button class="btn" onclick="filterSelection('adventure')"> Adventure</button>
  <button class="btn" onclick="filterSelection('report')"> Field Report</button>
  <button class="btn" onclick="filterSelection('global')"> Global Event</button>
  <button class="btn" onclick="filterSelection('opinion')"> Opinion</button>
         <button class="btn" onclick="filterSelection('ship')"> Shipping Lanes</button>
</div>
</header>

<div id="app1"><!-- //// BEGIN GSHEET -->
  
<div class="masonry-wrapper">
  <div class="masonry">
    
<div v-for="item in issueI" class="masonry-item" v-bind:class="[ item.tag ]">
    <div class="masonry-content">
      <!--img src="https://picsum.photos/450/325?image=100" alt="Dummy Image"-->
<div class="tag">{{ item.tag }}</div>
      <h3 class="masonry-title"> {{ item.title }}</h3>
      <div class="masonry-date"><span style="font-weight:700; font-size:0.85rem; text-transform:uppercase;">Written By:</span> {{ item.author}}, <span style="font-style:italic; text-transform:uppercase; font-size:.9em;">{{ item.authorTitle }}</span></div>
      <div class="masonry-description"><span v-html="item.text"></span></div>
      <p class="masonry-byline"><strong>Featuring: </strong><span class="players">{{ item.players }}</span></p>
      <p class="masonry-location"><strong>Represented by:</strong><span class="factions"> {{ item.factions }}</span></p>
    </div>
  </div> 
    
  </div>
</div>
 
</div><!-- //// END GSHEET-->
  
<footer class="masonry-footer">
  <p>Created with &#10084; with <a href="//w3bits.com/tools/masonry-generator/" target="_blank" rel="external noopener nofollow">CSS Masonry Generator</a> | Created by <a href="http://hellonifty.com" target="_blank">Tif Smith</a> | Coded for Broken Prophecy</p>
</footer>

<!--LOAD THE SCRIPTS-->
<script src="//unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>

<script defer src="https://pro.fontawesome.com/releases/v5.15.1/js/all.js" integrity="sha384-Vipr9QSlUeD/qnhkau6GBnZnUmVkbaRZ0PgB1KjvWa1UoNBKnuzg1TgbJJn2a12T" crossorigin="anonymous"></script>

<!--FILTER THE TOPICS -->
<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("masonry-item");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    w3RemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
  }
}

function w3AddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function w3RemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>
  
<script><!--NEWSPAPER APP through VUE + SHEETY -->
  var app = new Vue({
  el: '#app1',
  data: {
    issueI: [] // issueI data from Google Sheet
  },
  mounted () {
    // Fetch the issueI data from Sheety API
    axios
      .get('https://api.sheety.co/9502747936ccb236cad8b269b6264ee6/theChromaticChronicle [bp20]/issue3')
      .then(response => (this.issueI = response.data.issue3))
  },
  methods: {
    // Convert comma seperated tags to an array
    getTags: function (tags) {
      return tags.split(',')
    }
  }
})

  </script>
     
  
</html>
              
            
!

CSS

              
                @import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css?family=Spectral:300,400,500,600,700,800");
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css);
html {
  /*background: #e9e9e9;*/
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background-image: url(data:image/png;base64,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);
  font-size: 14px;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  text-rendering: optimizeLegibility;
}

body {
  color: #404040;
  font-family: "Raleway", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}

a {
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

div, h2, p, figure {
  margin: 0;
  padding: 0;
}

header {
  max-width: 1200px;
  margin: 0px auto;
  color: #404040;
  padding: 15px 0 30px;
  text-align: center;
  font-family: "Spectral", serif;
  border-top: 12px solid #404040;
}

header h1 {
  font-size: 4.5em;
  font-weight: bold;
  font-family: "Spectral", serif;
}

header ul {
  border-top: 2px solid #aaa;
  border-bottom: 4px double #aaa;
  padding: 10px 0px;
  margin: 0px auto;
  max-width: 100%;
}

header ul li {
  display: inline-block;
  list-style: none;
  width: 33%;
}

header ul li:first-child {
  font-size: 1em;
  text-align: left;
}

header ul li:nth-child(2) {
  text-align: center;
  text-transform: uppercase;
  font-size: 1.35em;
  font-style: italic;
}

header ul li:last-child {
  text-align: right;
}

/**
 * BASIC TYPE
 */
p:not(:last-child) {
  margin: 0 0 1em;
}

/**
 * BOX HACKING
 */
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.wrapper {
  max-width: 90vw;
  margin: 0px auto;
  padding: 1.5em;
}

.masonry-wrapper {
  padding: 1.5em;
  max-width: 90vw;
  margin: 0px auto;
}

.masonry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1em 2em;
  grid-auto-rows: auto;
  justify-content: space-evenly;
  grid-auto-flow: row dense;
  align-content: start;
  flex-wrap: wrap;
}

.masonry-item {
  color: #404040;
  display: none;
  margin-bottom: 10px;
}

.masonry-item.global {
  grid-column: span 2;
}

.masonry-item.adventure {
  grid-column: span 1;
}

.masonry-item.adventure:first-child {
  grid-column: span 2;
}

.masonry-item.adventure:nth-child(odd) {
  grid-column: span 2;
}

.masonry-column.arena {
  grid-column:span 1;
}

.show {
  display: block;
}

.masonry-content img {
  filter: grayscale(100%);
  mix-blend-mode: multiply;
  background-size: cover;
  max-width: 100%;
}

.masonry-title, .masonry-description {
  margin: 0;
}

.masonry-title {
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.75rem;
  padding: 1rem 1.5rem;
  font-family: "Spectral", serif;
}

.masonry-description {
  padding: 1.5rem;
  font-size: 1rem;
  line-height: 1.35rem;
  text-align: justify;
  text-justify: inter-word;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 4px double rgba(0, 0, 0, 0.05);
  display: block;
  max-height: 300px;
  overflow: auto;
}

.masonry-date {
  padding: 0.5rem 1.5rem;
}

.masonry-byline {
  padding: 0.5rem 1.5rem;
  display: inline-block;
  width: 48%;
}

.masonry-location {
  padding: 0.5rem 1.5rem;
  display: inline-block;
  width: 48%;
}

blockquote {
  padding-left: 1rem;
  margin: 5px 10px 15px 20px;
  font-family: "Spectral", serif;
  font-size: 1.35rem;
  line-height: 1.5rem;
  color: #aaa;
  border-left: 1px solid #404040;
  text-align: left;
}

.masonry-footer {
  font-size: 0.75em;
  opacity: 0.25;
  text-align: center;
  padding-top: 3em;
  padding-bottom: 3em;
  margin-bottom: -1.5em;
  transition: opacity 1s ease-in-out;
}

.masonry-footer a {
  color: currentColor;
}

.masonry-footer:hover, .masonry-footer:active, .masonry-footer:focus {
  opacity: 0.75;
}

/* Interest tag styles */
.tag {
  padding: 5px 8px;
  margin: 0px auto;
  background-color: #282828;
  /*border-radius: 20px;*/
  font-weight: 800;
  color: #fff;
  font-family: "Raleway", sans-serif;
  text-transform: uppercase;
  font-size: 0.8em;
  letter-spacing: 0.085em;
  display: block;
  background: #535353;
}

.btn {
  border: none;
  outline: none;
  padding: 0.3rem 0.5rem;
  background: rgba(0, 0, 0, 0.15);
  cursor: pointer;
  font-size: 0.85rem;
  color: #040404;
  text-transform: uppercase;
  font-family: "Spectral", serif;
  margin: 0px;
}

.btn:hover {
  background: rgba(0, 0, 0, 0.35);
  color: #FFF;
}

.btn.active {
  background: rgba(0, 0, 0, 0.45);
  color: #FFF;
}

.header-box {
  display: grid;
  padding: 2.5em 2em;
  margin: 0px auto;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 1rem;
  border-top: 1px solid #404040;
  border-bottom: 4px double #404040;
}

.issue {
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.85em;
}

.date {
  font-style: normal;
  font-size: 1.35em;
  text-transform: uppercase;
  line-height: 1.15em;
}

select.issue-select {
  border-left: 4px solid rgba(0, 0, 0, 0.15);
  background-color: transparent !important;
}

span.players, span.factions {
  font-size:1rem; 
}

p.masonry-byline strong, p.masonry-location strong {
   text-transform:uppercase;
   font-weight:700;
   font-size: 0.85rem;
}

.is-empty {
  display: none;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 768px) {
  header ul li {
    width: 100% !important;
    display: block;
  }

  .masonry {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }

  .header-box {
    align-items: center;
  }

  .date {
    text-align: center;
  }

  .issue {
    text-align: center;
  }

  .price {
    text-align: center;
  }

  .masonry-item {
    grid-column: auto;
  }
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {


  .header-box {
    align-items: center;
  }

  .issue {
    text-align: center;
  }

  .date {
    text-align: center;
  }

  .price {
    text-align: center;
  }

}
@media only screen and (min-width: 1024px) {

  .issue {
    text-align: left;
  }

  .date {
    text-align: center;
  }

  .price {
    text-align: right;
  }
}


              
            
!

JS

              
                const select = document.getElementById('menu-naviagtion');

select.addEventListener('change', openOptionItems);

function openOptionItems() {
	console.log(this);
	console.log(this.value);
	window.open(this.value,'_self');
}

$("span.factions").each(function() {
  if ($(this).text().trim() == '') {
    $(this).closest('p.masonry-location').hide()
  }
})

$("span.players").each(function() {
  if ($(this).text().trim() == '') {
    $(this).closest('p.masonry-byline').hide()
  }
})



              
            
!
999px

Console