Separated stylesheets. Added more examples.

ds2600 · Dec 20, 2023 · fe84773 · fe84773
1 parent 8c88821
commit fe84773
Show file tree

Hide file tree

Showing 11 changed files with 246 additions and 133 deletions.
diff --git a/common/version.php b/common/version.php
@@ -1,2 +1,2 @@
 <?php
-define('VERSION', '0.1.2');
+define('VERSION', '0.1.3');
diff --git a/config/menu.php b/config/menu.php
@@ -3,5 +3,5 @@
 return [
         ['text' => 'HTML Page Template', 'url' => 'html-page-template.php'],
         ['text' => 'MD Page Template', 'url' => 'md-page-template.php'],
-        ['text' => 'Contact', 'url' => '#'],
+        ['text' => 'Custom Colors', 'url' => 'custom-colors.php'],
 ];
diff --git a/public/css/arwt.css b/public/css/arwt.css
@@ -0,0 +1,137 @@
+html, body {
+    height: 100%;
+    margin: 0;
+  }
+
+  body {
+    display: flex;
+    margin: 0;
+    padding: 0;
+  }
+
+  .sidebar {
+    min-width: 200px;
+    width: 200px;
+    padding: 20px;
+    height: 100vh; /* Full height */
+  }
+
+  .sidebar a {
+    display: block;
+    padding: 10px;
+  }
+
+  .sidebar a:hover {
+     border-radius: 8px; 
+  }
+
+  .content {
+    flex-grow: 1;
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 28px;
+  }
+
+  p {
+    font-size: 16px;
+  }
+
+  .image-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .image-container img {
+    display: block; 
+    height: auto; /* Maintain aspect ratio */
+  }
+
+  .caption {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    text-align: center; 
+    padding: 5px; 
+  }
+
+  .result-box {
+    border: 1px solid rgba(0, 0, 0, 0.1); /* faint border */
+    border-radius: 8px; /* rounded edges */
+    padding: 10px;
+    margin-top: 10px;
+    margin-bottom: 10px; /* space between boxes */
+    background-color: #f9f9f9; /* light background */
+    font-size: 0.9em; /* smaller font size */
+    text-transform: uppercase; /* all text capitalized */
+  }
+
+  .result-box .callsign {
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #333; /* darker text for the call sign */
+  }
+
+  .result-box strong {
+    color: #666; /* slightly lighter text for labels */
+  }
+
+  .hidden {
+    display: none;
+  }
+
+  #loading-indicator {
+    font-size: 20px; /* size of the dots */
+    opacity: 0.7;
+    animation: loadingDots 1.5s infinite;
+    margin-top: 10px;
+  }
+
+  @keyframes loadingDots {
+    0% { opacity: 0.2; }
+    50% { opacity: 1; }
+    100% { opacity: 0.2; }
+  }
+
+  .search-notice {
+    color: #666;
+    font-size: 0.9em;
+    margin-bottom: 10px;
+  }
+
+  footer {
+    margin-top: auto;
+    padding: 10px 0;
+    text-align: center;
+  }
+
+  .footer-text {
+    font-size: 0.7em;
+  }
+
+  .footer-text a {
+    display: inline;
+    padding: 0;
+  }
+
+  code {
+    background-color: #f6f8fa; 
+    border-radius: 4px;
+    border: 1px solid #e1e4e8; 
+    font-family: 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
+    font-size: 0.95em;
+    padding: 0.2em 0.4em;
+    margin: 0;
+    overflow-x: auto; 
+    display: inline-block; 
+    line-height: 1.4;
+    color: #24292e; 
+  }
+
+  pre code {
+    display: block; 
+    padding: 1em; 
+    overflow-y: auto; 
+  }
diff --git a/public/css/custom.css b/public/css/custom.css
@@ -0,0 +1,28 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #F8F8F8;
+    color: #1A1A1A;
+}
+
+.sidebar {
+    background-color: #EFEFEF;
+}
+
+.sidebar a {
+    text-decoration: none;
+    color: #1A1A1A;
+}
+
+.sidebar a:hover {
+    background-color: #DDD;
+}
+
+.footer-text {
+    color: #666;
+}
+
+.caption {
+    font-size: 0.6em; 
+    color: #333; 
+    background-color: rgba(255, 255, 255, 0.6);
+}
diff --git a/public/custom-colors.php b/public/custom-colors.php
@@ -0,0 +1,61 @@
+<?php
+require __DIR__ . '/../autoloader.php';
+
+$config = require __DIR__ . '/../config/config.php';
+
+?>
+<!DOCTYPE html>
+<html>
+<head>
+    <title><?php echo $config['callsign']; ?></title>
+    <link rel="stylesheet" type="text/css" href="/css/arwt.css">
+    <link rel="stylesheet" type="text/css" href="/css/custom.css">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
+</head>
+<body>
+    <!-- Sidebar -->
+    <?php include __DIR__ . '/../common/sidebar.php'; ?>
+
+<!-- 
+Put your content in the markdownContent div. The Showdown library will convert the markdown to HTML.
+If you need assistance with markdown, see https://stackedit.io/ 
+-->
+<div id="markdownContent" style="display: none;">
+# Custom Colors  
+
+You can customize the colors and the overall font of ARWT by editing the /css/custom.css file. This file is loaded after the primary structure CSS, so feel free to add your own customizations here.
+
+```
+body {
+    font-family: Arial, sans-serif;
+    background-color: #F8F8F8;
+    color: #1A1A1A;
+}
+
+.sidebar {
+    background-color: #EFEFEF;
+}
+
+.sidebar a {
+    text-decoration: none;
+    color: #1A1A1A;
+}
+
+.sidebar a:hover {
+    background-color: #DDD;
+}
+
+.footer-text {
+    color: #666;
+}
+```
+
+
+
+</div>
+    <!-- Rendered Content. Do not edit or remove. -->
+    <div id="renderedContent" class="content">
+    </div>
+    <script src="/js/showdown.js"></script>
+</body>
+</html>
diff --git a/public/fcc-uls-search.php b/public/fcc-uls-search.php
@@ -19,7 +19,8 @@
 <html>
 <head>
     <title>FCC ULS Search</title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="/css/arwt.css">
+    <link rel="stylesheet" type="text/css" href="/css/custom.css">
 </head>
 <body>
     <!-- Sidebar -->

diff --git a/public/html-page-template.php b/public/html-page-template.php
@@ -8,7 +8,8 @@
 <html>
 <head>
     <title><?php echo $config['callsign']; ?></title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="/css/arwt.css">
+    <link rel="stylesheet" type="text/css" href="/css/custom.css">
 </head>
 <body>
     <!-- Sidebar -->

diff --git a/public/images/arwt-transparent.png b/public/images/arwt-transparent.png
diff --git a/public/index.php b/public/index.php
@@ -8,7 +8,8 @@
 <html>
 <head>
     <title><?php echo $config['callsign']; ?></title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="/css/arwt.css">
+    <link rel="stylesheet" type="text/css" href="/css/custom.css">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
 </head>
 <body>
@@ -20,10 +21,20 @@
 If you need assistance with markdown, see https://stackedit.io/ 
 -->
 <div id="markdownContent" style="display: none;">
+
+<div class="image-container" style="margin:auto; width:100%;">
+    <p align="center">
+        <img src="/images/arwt-transparent.png" alt="ARWT Logo" width="200" height="200">
+        <div class="caption">You can also use HTML/CSS on markdown pages.</div>
+    </p>
+</div>
+
 # Hello ARWT!
 ### What is ARWT?
 ARWT (Amateur Radio Website Template) is a basic web site template to help amateur radio operators make their sites a little prettier.  
 
+Check out the ARWT [repo](https://www.github.com/ds2600/arwt) for more information.
+
 ### Why ARWT?
 While we all enjoy the simplicity of plain HTML, it's nice to have a little style.  ARWT is a simple template that you can use to spruce up your amateur radio web presence.
 

diff --git a/public/md-page-template.php b/public/md-page-template.php
@@ -8,7 +8,8 @@
 <html>
 <head>
     <title><?php echo $config['callsign']; ?></title>
-    <link rel="stylesheet" type="text/css" href="style.css">
+    <link rel="stylesheet" type="text/css" href="/css/arwt.css">
+    <link rel="stylesheet" type="text/css" href="/css/custom.css">
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/showdown.min.js"></script>
 </head>
 <body>