view release on metacpan or  search on metacpan

lib/App/Followme/Initialize.pm  view on Meta::CPAN

<p>This file is used as a template for the site. Any markup outside the section 
comments will be shared between all pages. Modify it to get the desired look for 
your site. The subdirectories show some of the capabilities of this application.
Keep or modify them as you wish.</p>

<p>See <a href="help/index.html">help</a> for more information about this 
script.</p>

<!-- endsection primary-->
<section id="secondary">
<!-- section secondary -->
<!-- endsection secondary-->
</section>
</article>
<footer>
    <nav class="footer-content">
        <a href="essays/index.html">Essays</a>
        <a href="photos/index.html">Photos</a>
    </nav>
</footer>
</body>
</html>
#>>> copy text theme.css
/*
    Global styles
*****************/
body {
    font-family: helvetica, arial, sans-serif;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 50em;
    padding: 0 1em;
}
h1, h2, h3, h4, h5, h6 {
    margin: 1em 0 0.5em 0;
    line-height: 1.2em;
}
img {
    max-width: 100%;
}
figure {
    margin: 1em 0;
    text-align: center;
}
figcaption {
    font-size: small;
}
pre, code, samp, kbd {
    color: #009;
    font-family: monospace, monospace;
    font-size: 0.9em;
}
pre code, pre samp, pre kbd {
    font-size: 1em;
}
pre kbd {
    color: #060;
}
pre {
    background: #eee;
    padding: 0.5em;
    overflow: auto;
}
blockquote {
    background: #eee;
    border-left: medium solid #ccc;
    margin: 1em 0;
    padding: 0.5em;
}
blockquote :first-child {
    margin-top: 0;
}
blockquote :last-child {
    margin-bottom: 0;
}  
/*
    Header
*****************/
header {
    padding: 0; 
    background: #222;
    border-radius: 6px;
}
.title {
    padding: 16px;
    font-size: 1.75em;
}
.title a {
    text-decoration: none;
    color: #aaa; 
}
.title a:hover {
      color: #fff;
}
/*
    Footer
*****************/
footer {
    padding: 8px; 
    background: #222;
    border-radius: 6px;
}
.footer-content a {
    padding: 16px;
    text-decoration: none;
    color: #aaa; 
}
.footer-content a:hover {
    color: #fff;
}
/*
    Menu
*****************/
.dropbtn {
    font-size: 1.75em;
    background-color: #222;
    color: #aaa;
    border: none;   
    cursor: pointer;
}  
.dropdown {
    position: relative;
    display: inline-block;
} 
.dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    background-color: #222;
    min-width: 160px;
    border-radius: 6px;
    z-index: 1;
} 
.dropdown-content a {
    color: #aaa;
    padding: 12px 16px;
    border-radius: 6px;
    text-decoration: none;
    display: block;
} 
.dropdown-content a:hover {
    color: #fff;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown:hover .dropbtn {
    color:#fff;
    background-color: #222;
    border-color: #222;
}
/*
    Photo Gallery
*****************/
#gallery { 
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 10px;
    align-items: start;
    }
  
  .thumb {
      border: 1px solid #ccc;
      box-shadow: 2px 2px 6px 0px  rgba(0,0,0,0.3);
      max-width: 100%;
  }
  
  .lightbox {
      position: fixed;
      z-index: 999;
      height: 0;
      width: 0;
      text-align: center;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      opacity: 0;
  }
  
  .lightbox img {
      max-width: 90%;
      max-height: 80%;
      margin-top: 2%;
      opacity: 0;
  }
  
  .lightbox:target {
      /** Remove default browser outline */
      outline: none;
      width: 100%;
      height: 100%;
      opacity: 1 !important;
      
  }
  
  .lightbox:target img {
      border: solid 17px rgba(77, 77, 77, 0.8);
      opacity: 1;
      webkit-transition: opacity 0.6s;
      transition: opacity 0.6s;
  }
  
  .light-btn {
      color: #fafafa;
      background-color: #333;
      border: solid 3px #777;
      padding: 5px 15px;
      border-radius: 1px;
      text-decoration: none;
      cursor: pointer;
      vertical-align: middle;
      position: absolute;
      top: 45%;
      z-index: 99;
  }
  
  .light-btn:hover {
      background-color: #111;
  }
  
  .btn-prev {
      left: 7%;
  }
  
  .btn-next {
      right: 7%;
  }
  
  .btn-close {
      position: absolute;
      right: 2%;
      top: 2%;
      color: #fafafa;
      background-color: #92001d;
      border: solid 5px #ef4036;
      padding: 10px 15px;
      border-radius: 1px;
      text-decoration: none;
  }
  
  .btn-close:hover {
      background-color: #740404;
  }
#>>> copy text _templates/convert_page.htm
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- section meta -->
<base href="$site_url/" />
<title>$title</title>
<meta name="date" content="$mdate" />
<meta name="description" content="$description" />
<meta name="keywords" content="$keywords" />
<meta name="author" content="$author" />
<!-- endsection meta -->
</head>
<body>
<header>
<h1>Site Title</h1>
</header>
<article>
<section id="primary">
<!-- section primary -->
<h2>$title</h2>
$body
<!-- endsection primary-->
</section>
<section id="secondary">
<!-- section secondary -->
<!-- endsection secondary-->
</section>
</article>
</body>
</html>
#>>> copy text _templates/create_gallery.htm
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- section meta -->
<base href="$site_url/" />
<title>$title</title>
<meta name="date" content="$mdate" />
<meta name="description" content="$description" />
<meta name="keywords" content="$keywords" />
<meta name="author" content="$author" />
<!-- endsection meta -->
<link rel="stylesheet" id="css_style" href="theme.css">
</head>
<body>
<header>
<h1>Site Title</h1>
</header>
<article>
<section id="primary">
<!-- section primary -->
<!-- endsection primary-->
</section>
<section id="secondary">
<!-- section secondary -->
<section id="gallery">
<!-- for @files -->
<a href="$index_url#$target">