From: Will Budic <redacted>
Date: Thu, 15 May 2025 08:26:03 +0000 (+1000)
Subject: init
X-Git-Url: https://lifelog.hopto.org/gitweb/?a=commitdiff_plain;h=fb4c09fd01fa5cec4565ad540365036f79e28b13;p=PerlCNFWEBServer.git

init
---

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3e4abb5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.vscode
+system
+wsrc
\ No newline at end of file
diff --git a/server.pl b/server.pl
index 6aa6d5b..98d1cd5 100755
--- a/server.pl
+++ b/server.pl
@@ -1,15 +1,14 @@
 #!/usr/bin/perl
 package PerlCNFWebServer;
 use lib::relative 'system/modules';
-use lib::relative 'apps';no warnings qw(experimental::signatures);
+use lib::relative 'apps';
 use PerlCNFWebServerBase;
 
-use lib '/home/will/PerlCNFWEBServer/system/modules';
 use IO::Socket::SSL;
 use HTTP::Server::Simple::CGI;
 use base qw(HTTP::Server::Simple::CGI);
 
-use Gzip::Faster;
+use Gzip::Faster; no warnings qw(experimental::signatures);
 
 our   ($START_UP_ERRORS, $START_UP_PROPS, $SERVER_DIR);
 our    $GLOB_HTML_SERVE = "'{}/*.cgi' '{}/*.htm' '{}/*.html' '{}/*.md' '{}/*.txt'";
@@ -18,6 +17,7 @@ use lib $SERVER_DIR.'/apps'; use lib $SERVER_DIR.'/apps';
 
 our $cnf_index;
 our %locals;
+our %includes;
 our $INDEX_FILE = CNFGlobalFile -> new('index.cnf');
 our $LOCAL_PATH = $0;
 our %TYPE_HANDLER = (
@@ -48,19 +48,17 @@ if(@globs){
    my $err ="\@GLOB_HTML_SERVE property not found in config, using default.";
    warn($err); $START_UP_ERRORS .= "$err\n \@GLOB_HTML_SERVE => $GLOB_HTML_SERVE";
 }
-
-no warnings qw(experimental::signatures);
+no warnings qw(experimental::signatures);#Placed here as earlier versions of Perl shoot warnings.
 sub asTxtFile  ($cgi, $request_header, $type, $full_path) {
     my $file = CNFGlobalFile->new($full_path);
     my $last_modified = CNFDateTime->now({epoch=>$file->{last_modified}, TZ => $cnf_server->{TZ}});
     my $now  = CNFDateTime->now({TZ => $cnf_server->{TZ}});
-    my $content = ${$file->content()};    
+    my $content = ${$file->content()};
     my $gzip = CNFParser::_isTrue($cnf_server -> const('compress_particulars'));
     if($gzip){ #Check if browser supports gzip?
         my $accept_encoding = %$request_header{HTTP_ACCEPT_ENCODING};
         $gzip = 0  if $accept_encoding !~ m/gzip/;
     }
-
     print "HTTP/1.0 200 OK\n",
           "content-type: text/$type; charset=utf-8\n";
     print "content-encoding: gzip\n" if $gzip;
@@ -72,7 +70,7 @@ sub asTxtFile  ($cgi, $request_header, $type, $full_path) {
     print  $gzip?gzip($content):$content;
 }
 
-sub asBinFile ($cgi, $request_headers, $type, $full_path){    
+sub asBinFile ($cgi, $request_headers, $type, $full_path){
     my $file = CNFGlobalFile->new($full_path);
     my $last_modified = CNFDateTime->now({epoch=>$file->{last_modified}, TZ => $cnf_server->{TZ}});
     my $now = CNFDateTime->now({TZ => $cnf_server->{TZ}});
@@ -86,13 +84,13 @@ sub asBinFile ($cgi, $request_headers, $type, $full_path){
     $file -> binary();
 }
 
-sub error_to_browser ($cgi, $err){    
+sub error_to_browser ($cgi, $err){
     my $now = CNFDateTime->now({TZ => $cnf_server->{TZ}});
     my $page_link = $cgi->protocol().'//'.$cgi->remote_host().':'.$cgi->server_port().$cgi->request_uri();
     print "HTTP/1.0 500 Internal Server Error\n",
             "content-type: text/html; charset=utf-8\n",
             "date: ",$now->toSchlong(),"\n",
-            "server: ".__PACKAGE__."/".CNFParser::VERSION(),"\n\n", 
+            "server: ".__PACKAGE__."/".CNFParser::VERSION(),"\n\n",
           $cgi->start_html(">>Server Error!<"),
                $cgi ->h2("<font color='maroon'>ServerError@ &#x21d2; </font> $page_link"),
                $cgi->pre($err),
@@ -101,7 +99,7 @@ sub error_to_browser ($cgi, $err){
 
 sub deliverByParticulars ($cgi, $request_header, $dir, $full_path) {
        $full_path =~ m/\.(\w+)$/; my $type = $1;
-    my $handler  = $TYPE_HANDLER{$type};    
+    my $handler  = $TYPE_HANDLER{$type};
     if($handler && -e $full_path){
        $handler -> ($cgi, $request_header, $type, $full_path);
     }else{
@@ -113,7 +111,6 @@ sub deliverByParticulars ($cgi, $request_header, $dir, $full_path) {
     }
 }
 
-
 sub obtainDirListingHTML ($dir) {
     my $ret;
     my $html = listFiles($dir);
@@ -168,7 +165,6 @@ print $cgi->header,
 sub index($cgi,$hdrs) {
     if (check_if_has_changed($INDEX_FILE)){
         try{
-               
         $cnf_index  = CNFParser -> new (
                             $INDEX_FILE,{
                                 DO_ENABLED => 1, HAS_EXTENSIONS=>1,
@@ -181,9 +177,9 @@ sub index($cgi,$hdrs) {
                             }
                         );
         $locals{$INDEX_FILE} = \$cnf_index;
-           
+
         }catch($e){
-                  $cnf_server -> error($e); 
+                  $cnf_server -> error($e);
                   error_to_browser($cgi, $e);
                   return
         }
@@ -194,15 +190,25 @@ sub index($cgi,$hdrs) {
 }
 
 sub check_if_has_changed ($config_file){
-    my $entry = $locals{$config_file};
-    if($entry){
+    my $entry = $locals{$config_file->{path}};
+    if($entry){$entry = $$entry;
        if($config_file -> changed()){
-          $cnf_server  -> log("Config has changed for: ". $$entry->{CNF_CONTENT});
+          $cnf_server  -> log("Config has changed for: ". $entry->{CNF_CONTENT});
           return 1
+       }else{
+          my $ptr =  $includes{$config_file->{path}};
+          if($ptr){
+             foreach my $cnf_glob_file(@$ptr){
+                if($cnf_glob_file->changed()){
+                   $cnf_server -> log("Config include changed: ". $cnf_glob_file->{path});
+                   return 1
+                }
+             }
+          }
        }
        return 0
     }else{
-           $cnf_server -> log("Config load initiated for: ".$config_file->{path});
+          $cnf_server -> log("Config load initiated for: ". $config_file->{path});
        return 1
     }
 }
@@ -221,32 +227,40 @@ sub page($cgi, $request_header, $prp_name, $cnf_app) {
        $property -> {plugin} -> setParameters($cnf_app, $prp_name, $cgi->{param}) if (keys %{$cgi->{param}} > 0);
        $html_head = $property -> {html_head};
        $html_body = $property -> {html_body};
-       $html_foot = $property -> {html_foot};       
+       $html_foot = $property -> {html_foot};
     }else{
        $html_body =  $cnf_app -> data() -> {$property->{property}}
     }
     my $now = CNFDateTime->now({TZ => $cnf_server->{TZ}});
     my $last_modified = CNFDateTime->now({TZ => $cnf_server->{TZ}, epoch=> @{$cnf_app->{CNF_STAT}}[9]});
+    my $gzip = CNFParser::_isTrue($cnf_server -> const('compress_particulars'));
+    if($gzip){ #Check if browser supports gzip?
+        my $accept_encoding = %$request_header{HTTP_ACCEPT_ENCODING};
+        $gzip = 0  if $accept_encoding !~ m/gzip/;
+    }
+
     # Modern browser html specs have changed, support but do not like/need
     # header doc type xml/html declarations, that perl's cgi lib builds and delivers for old browser compatibility.
     # This suits us well, as can configure head parameters start up directly or via CNF from here.
-    print "content-type: text/html; charset=utf-8\n",
-           "last-modified: ",$last_modified->toSchlong(),"\n",
+    print "content-type: text/html; charset=utf-8\n";
+    print "content-encoding: gzip\n" if $gzip;
+    print "last-modified: ",$last_modified->toSchlong(),"\n",
            "date: ",$now->toSchlong(),"\n",
            "cache-control: public","\n",
            "server: ".__PACKAGE__."/".CNFParser::VERSION(),"\n\n";
-    
+    my $content;
     if(not $html_head){
-       print qq(<!DOCTYPE html>\n<html lang="en"><body>\n<pre>\n)
+       $content = qq(<!DOCTYPE html>\n<html lang="en"><body>\n<pre>\n)
     }else{
-       print $$html_head
+       $content = $$html_head
     }
-       print $$html_body;
+    $content .= $$html_body;
     if(not $html_foot ){
-       print  qq(\n</pre></body></html>);
+       $content .=  qq(\n</pre></body></html>);
     }else{
-       print  $$html_foot; 
+       $content .=  $$html_foot;
     }
+    print $gzip ? gzip($content):$content;
 }
 
 
@@ -284,10 +298,10 @@ sub handle_request ($self, $cgi){
 
 sub accept_hook {
     if(isTrue($SSL{enabled})){
-        my $self = shift; $self->SUPER::accept_hook(@_);    
+        my $self = shift; $self->SUPER::accept_hook(@_);
         my $fh   = $self->stdio_handle;
         my $newfh =
-        IO::Socket::SSL->start_SSL( $fh, 
+        IO::Socket::SSL->start_SSL( $fh,
             SSL_server    => $SSL{server},
             SSL_use_cert  => $SSL{use_cert},
             SSL_cert_file => $SSL{cert_file},
@@ -298,6 +312,20 @@ sub accept_hook {
     }
 }
 
+sub include_hook {
+    my ($config_file, $include_file) = @_;
+    if ($config_file && $include_file) {
+        my @arr;  my $ptr = $includes{$config_file};
+           @arr = @$ptr if $ptr;
+        foreach(@arr){
+           return 0 if $_->{path} eq $include_file;
+        }
+        $arr[@arr] = CNFGlobalFile->new($include_file);
+        $includes{$config_file} = \@arr;
+    }
+    return 0;
+}
+
  sub MAIN
 {
     our %SSL = $cnf_server -> property('%SSL');
@@ -307,17 +335,25 @@ sub accept_hook {
         foreach  my $path (keys(%registry)){
           my ($prp_name, $config, $cnf_app)  = $registry{$path};
           my @pair= ($prp_name =~ m/([\w\.\_\-\/]+)\s*,\s*(\w*)/g);
-             $config   = $pair[0]; $config = CNFGlobalFile->new($config);
-             $prp_name = $pair[1];
+                     $config   = $pair[0];
+                     $prp_name = $pair[1];
+          my $cnf_file  = CNFGlobalFile->new($config);
           # Anonymous handler passing our $cgi.
           $dispatch {"/$path"} = sub ($cgi, $request_header) {
-              if(!$cnf_app or check_if_has_changed($config)){
+
+              if(!$cnf_app or check_if_has_changed($cnf_file)){
                try{
-                  $cnf_app = CNFParser->new($config, {DO_ENABLED => 1, '%LOG' => \%log, TZ => $cnf_server->{TZ}});
+                  $cnf_app = CNFParser -> new($cnf_file, {
+                                                          DO_ENABLED => 1,
+                                                          '%LOG'     => \%log,
+                                                          TZ         => $cnf_server->{TZ},
+                                                          INCLUDES_LISTENER => *include_hook
+                                                         }
+                                          );
                   $locals{$config} = \$cnf_app;
                }catch($e){
-                  $cnf_server -> error($e); 
-                  error_to_browser($cgi, $e);                  
+                  $cnf_server -> error($e);
+                  error_to_browser($cgi, $e);
                   return
                }
               }
@@ -348,8 +384,22 @@ sub accept_hook {
     my $pid = isTrue($cnf_server->const('run_as_background_process')) ?
               PerlCNFWebServer->new($cnf_server->{port})->background() :
               PerlCNFWebServer->new($cnf_server->{port})->run();
-    print "Use 'kill $pid' to stop server.\n";
+    print `lsof -i tcp:$cnf_server->{port}`;
+    my $run = `lsof -i tcp:$cnf_server->{port} | sed -n '2p' | awk '{print \$2}'`; $run =~s/\s*$//;
+    if($run eq $pid){
+        print "Use kill $pid to stop this server.\n";
+    }else{
+        print "Use kill $run to stop that server.\n";
+    }
 }
+
+sub print_banner {
+    my $self = shift;
+    my $proto = isTrue($SSL{enabled})?"https":"http";
+    my $host  =  `hostname`; $host =~s/\s*$//;
+    print( ref($self) . ": You can connect to your server at " . "$proto://$host:".$self->{port}."/\n" );
+}
+
 &MAIN;
 1;
 
diff --git a/web_sources/app.css b/web_sources/app.css
new file mode 100644
index 0000000..dd80d15
--- /dev/null
+++ b/web_sources/app.css
@@ -0,0 +1,119 @@
+
+/** Layers are in root.css **/
+@layer reset, base;
+
+html{
+    height: 100%;
+    display: flex;
+}
+
+body {
+
+    padding: 0.5em;
+    display: grid;
+    overflow: scroll;
+
+    .content {
+        display: inline-flex;
+        /* border: 5px dotted rgb(168, 120, 96);  */
+        max-width: 100%;
+        height: 98%;
+        align-items: stretch;
+        flex-direction: row;
+    }
+    p{
+        padding-left: 1ch;
+        padding-bottom: 1ch;
+    }
+    .indent{
+        padding-left: 3ch;
+        p{
+            padding-left: 2ch;
+        }
+    }
+}
+
+.page_title {
+    font-style: italic;
+    font-weight: bold;
+    box-shadow: 2px 2px 2px black;
+    margin-bottom: 1em;
+}
+
+.col {
+    /* border: 1px solid  rgb(133, 133, 233); */
+    text-wrap: wrap;
+    text-align: center;
+    position: sticky;
+}
+
+
+.col_main {
+    border: 1px solid rgb(133, 133, 233);
+    min-width: 70%;
+    padding: 1em;
+    margin-top: 1ch;
+
+    h1 {
+        margin-top:1ch;
+        color:blueviolet;
+    }
+    div{
+        padding-left: 3ch;
+        p{
+            padding-left: 2ch;
+        }
+    }
+}
+
+.toc {
+    position: fixed;
+    background-color: #00a087;
+    padding: 1ch;
+    border: 2px solid rgb(133, 133, 233);
+    border-radius: 10px 100px / 120px;
+    box-shadow: 10px 5px 5px lightslategrey;
+    cursor: se-resize;
+}
+.toc:hover .scrolling{
+    display: block;
+    cursor: pointer;
+}
+
+ul .scrolling{
+    margin-block-start: 0;
+    margin-block-end: 1em;
+    padding-inline-start: 20px;
+}
+
+.scrolling{
+    position: fixed;
+
+    text-wrap: wrap;     text-align: left;
+
+
+    padding: 1ch;
+    background-color: #00a087;
+    border: 2px solid #42a9b8;
+
+    display: none;
+    box-shadow: 5px 5px 5px lightslategrey;
+    opacity: 80%;
+
+    ul {
+        margin-block-start: 0;
+        margin-block-end: 1em;
+        padding-left: 20px;
+    }
+    a:active{
+        font-size: larger;
+        color: cadetblue;
+    }
+    a:visited{
+        font-size: larger;
+        color: black;
+    }
+
+}
+
+
diff --git a/web_sources/fonts/DMSams/DMSans-Italic-VariableFont_opsz,wght.ttf b/web_sources/fonts/DMSams/DMSans-Italic-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..a7ee5c9
Binary files /dev/null and b/web_sources/fonts/DMSams/DMSans-Italic-VariableFont_opsz,wght.ttf differ
diff --git a/web_sources/fonts/DMSams/DMSans-VariableFont_opsz,wght.ttf b/web_sources/fonts/DMSams/DMSans-VariableFont_opsz,wght.ttf
new file mode 100644
index 0000000..3d81b31
Binary files /dev/null and b/web_sources/fonts/DMSams/DMSans-VariableFont_opsz,wght.ttf differ
diff --git a/web_sources/fonts/DMSams/OFL.txt b/web_sources/fonts/DMSams/OFL.txt
new file mode 100644
index 0000000..bd7058f
--- /dev/null
+++ b/web_sources/fonts/DMSams/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2014 The DM Sans Project Authors (https://github.com/googlefonts/dm-fonts)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/web_sources/fonts/DMSams/README.txt b/web_sources/fonts/DMSams/README.txt
new file mode 100644
index 0000000..4725723
--- /dev/null
+++ b/web_sources/fonts/DMSams/README.txt
@@ -0,0 +1,67 @@
+DM Sans Variable Font
+=====================
+
+This download contains DM Sans as both variable fonts and static fonts.
+
+DM Sans is a variable font with these axes:
+  opsz
+  wght
+
+This means all the styles are contained in these files:
+  DMSans-VariableFont_opsz,wght.ttf
+  DMSans-Italic-VariableFont_opsz,wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for DM Sans:
+  static/DMSans-Regular.ttf
+  static/DMSans-Medium.ttf
+  static/DMSans-MediumItalic.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.
diff --git a/web_sources/fonts/DMSams/static/DMSans-Medium.ttf b/web_sources/fonts/DMSams/static/DMSans-Medium.ttf
new file mode 100644
index 0000000..841d31d
Binary files /dev/null and b/web_sources/fonts/DMSams/static/DMSans-Medium.ttf differ
diff --git a/web_sources/fonts/DMSams/static/DMSans-MediumItalic.ttf b/web_sources/fonts/DMSams/static/DMSans-MediumItalic.ttf
new file mode 100644
index 0000000..343122f
Binary files /dev/null and b/web_sources/fonts/DMSams/static/DMSans-MediumItalic.ttf differ
diff --git a/web_sources/fonts/DMSams/static/DMSans-Regular.ttf b/web_sources/fonts/DMSams/static/DMSans-Regular.ttf
new file mode 100644
index 0000000..07266ae
Binary files /dev/null and b/web_sources/fonts/DMSams/static/DMSans-Regular.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Black.ttf b/web_sources/fonts/Lato/Lato-Black.ttf
new file mode 100644
index 0000000..6848db0
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Black.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-BlackItalic.ttf b/web_sources/fonts/Lato/Lato-BlackItalic.ttf
new file mode 100644
index 0000000..5decf12
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-BlackItalic.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Bold.ttf b/web_sources/fonts/Lato/Lato-Bold.ttf
new file mode 100644
index 0000000..7434369
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Bold.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-BoldItalic.ttf b/web_sources/fonts/Lato/Lato-BoldItalic.ttf
new file mode 100644
index 0000000..684aacf
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-BoldItalic.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Hairline.ttf b/web_sources/fonts/Lato/Lato-Hairline.ttf
new file mode 100644
index 0000000..288be29
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Hairline.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-HairlineItalic.ttf b/web_sources/fonts/Lato/Lato-HairlineItalic.ttf
new file mode 100644
index 0000000..c2bfd33
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-HairlineItalic.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Italic.ttf b/web_sources/fonts/Lato/Lato-Italic.ttf
new file mode 100644
index 0000000..3d3b7a2
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Italic.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Light.ttf b/web_sources/fonts/Lato/Lato-Light.ttf
new file mode 100644
index 0000000..a958067
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Light.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-LightItalic.ttf b/web_sources/fonts/Lato/Lato-LightItalic.ttf
new file mode 100644
index 0000000..5e45ad9
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-LightItalic.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Regular.ttf b/web_sources/fonts/Lato/Lato-Regular.ttf
new file mode 100644
index 0000000..04ea8ef
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Regular.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-Thin.ttf b/web_sources/fonts/Lato/Lato-Thin.ttf
new file mode 100644
index 0000000..ba58da1
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-Thin.ttf differ
diff --git a/web_sources/fonts/Lato/Lato-ThinItalic.ttf b/web_sources/fonts/Lato/Lato-ThinItalic.ttf
new file mode 100644
index 0000000..4d82766
Binary files /dev/null and b/web_sources/fonts/Lato/Lato-ThinItalic.ttf differ
diff --git a/web_sources/fonts/Lato/OFL.txt b/web_sources/fonts/Lato/OFL.txt
new file mode 100644
index 0000000..1d7bf3b
--- /dev/null
+++ b/web_sources/fonts/Lato/OFL.txt
@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/web_sources/fonts/Lato/STYLES.css b/web_sources/fonts/Lato/STYLES.css
new file mode 100644
index 0000000..21d8c8d
--- /dev/null
+++ b/web_sources/fonts/Lato/STYLES.css
@@ -0,0 +1,60 @@
+ .lato-thin {
+    font-family: "Lato", sans-serif;
+    font-weight: 100;
+    font-style: normal;
+  }
+  
+  .lato-light {
+    font-family: "Lato", sans-serif;
+    font-weight: 300;
+    font-style: normal;
+  }
+  
+  .lato-regular {
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+  
+  .lato-bold {
+    font-family: "Lato", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+  
+  .lato-black {
+    font-family: "Lato", sans-serif;
+    font-weight: 900;
+    font-style: normal;
+  }
+  
+  .lato-thin-italic {
+    font-family: "Lato", sans-serif;
+    font-weight: 100;
+    font-style: italic;
+  }
+  
+  .lato-light-italic {
+    font-family: "Lato", sans-serif;
+    font-weight: 300;
+    font-style: italic;
+  }
+  
+  .lato-regular-italic {
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-style: italic;
+  }
+  
+  .lato-bold-italic {
+    font-family: "Lato", sans-serif;
+    font-weight: 700;
+    font-style: italic;
+  }
+  
+  .lato-black-italic {
+    font-family: "Lato", sans-serif;
+    font-weight: 900;
+    font-style: italic;
+  }
+  
\ No newline at end of file
diff --git a/web_sources/fonts/LeagueMono-VF.woff2 b/web_sources/fonts/LeagueMono-VF.woff2
new file mode 100644
index 0000000..c6504ce
Binary files /dev/null and b/web_sources/fonts/LeagueMono-VF.woff2 differ
diff --git a/web_sources/fonts/fontawesome-webfont.woff2 b/web_sources/fonts/fontawesome-webfont.woff2
new file mode 100644
index 0000000..4d13fc6
Binary files /dev/null and b/web_sources/fonts/fontawesome-webfont.woff2 differ
diff --git a/web_sources/root.css b/web_sources/root.css
new file mode 100644
index 0000000..f237c9a
--- /dev/null
+++ b/web_sources/root.css
@@ -0,0 +1,68 @@
+@font-face {
+    font-family: "Lato";
+    src: url(fonts/Lato/Lato-Regular.ttf);
+}
+
+:root {
+    --primary-subdued: hsl(254, 88%, 90%);
+    --primary-base: hsl(256, 67%, 59%);
+    --accent-subdued: hsl(31, 66%, 93%);
+    --accent-base: hsl(39, 100%, 71%);
+    --white: hsl(0, 0%, 100%);
+    --off-white: hsl(0, 0%, 96%);
+    --black: hsl(0, 0%, 7%);
+    --bck-col: #8dd8e7;
+    
+    --f-def: "Lato";
+    --fs-reg: 1.25rem;
+    --fs-md: 2.25rem;
+    --fs-lg: 3rem;
+    --fs-xl: 4rem;
+  }
+
+  @layer reset {
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    ul,
+    ol,
+    figure {
+      margin: 0;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-weight: 500;
+    }
+
+    img {
+      max-width: 100%;
+      display: block;
+    }
+  }
+
+  @layer base {
+    body, html {   
+        font-family: "Lato", sans-serif;
+        line-height: 1.3;    
+        padding: 0.5em;
+        color: var(--black,black);
+        background-color: var(--bck-col, #8dd8e7);    
+        margin: 0;
+    }
+  }
\ No newline at end of file
diff --git a/web_sources/style-kevin-powell.css b/web_sources/style-kevin-powell.css
new file mode 100644
index 0000000..a2da04a
--- /dev/null
+++ b/web_sources/style-kevin-powell.css
@@ -0,0 +1,285 @@
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 400 500;
+  src: url("fonts/DMSans/DMSans-VariableFont_opsz,wght.ttf");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-style: italic;
+  font-weight: 400 500;
+  src: url("fonts/DMSans/DMSans-Italic-VariableFont_opsz,wght.ttf");
+}
+
+:root {
+  --primary-subdued: hsl(254, 88%, 90%);
+  --primary-base: hsl(256, 67%, 59%);
+  --accent-subdued: hsl(31, 66%, 93%);
+  --accent-base: hsl(39, 100%, 71%);
+  --white: hsl(0, 0%, 100%);
+  --off-white: hsl(0, 0%, 96%);
+  --black: hsl(0, 0%, 7%);
+
+  --fs-reg: 1.25rem;
+
+  --fs-md: 2.25rem;
+  --fs-lg: 3rem;
+  --fs-xl: 4rem;
+}
+
+@layer reset {
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  figure {
+    margin: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: 500;
+  }
+
+  img {
+    max-width: 100%;
+    display: block;
+  }
+}
+
+@layer base {
+  html {
+    font-family: "DM Sans", sans-serif;
+    line-height: 1.3;
+  }
+
+  body {
+    margin: 32px;
+    color: var(--black);
+    font-size: var(--fs-reg);
+    background: var(--off-white);
+  }
+
+  h1,
+  h2 {
+    color: var(--heading-foreground, inherit);
+    font-size: var(--heading-font-size, var(--fs-md));
+    line-height: 1.1;
+    text-wrap: balance;
+
+    span {
+      display: var(--heading-span-display, inline);
+      color: var(--heading-span-foreground, var(--black));
+      font-size: var(--heading-span-font-size, inherit);
+      font-style: var(--heading-span-style, normal);
+    }
+  }
+}
+
+@layer layout {
+  .bento-grid {
+    display: grid;
+    gap: 24px;
+    max-inline-size: 1200px;
+    margin-inline: auto;
+    grid-template-areas:
+      'one'
+      'two'
+      'three'
+      'four'
+      'five'
+      'six'
+      'seven'
+      'eight';
+
+    @media (width > 660px) {
+      grid-template-areas:
+        "one one"
+        "two three"
+        "four six"
+        "four seven"
+        "five eight"
+      ;
+    }
+
+    @media (width > 960px) {
+      grid-template-areas:
+        "seven one one four"
+        "seven two three four"
+        "eight two three four"
+        "eight six five five"
+      ;
+    }
+  }
+
+  .bento-grid>* {
+    color: var(--bento-card-foreground, var(--black));
+    background-color: var(--bento-card-surface, var(--white));
+    padding: var(--bento-card-padding, 32px);
+    border-radius: var(--bento-card-border-radius, 21px);
+
+    overflow: clip;
+
+    display: grid;
+    gap: var(--bento-card-gap, 32px);
+    align-content: var(--bento-card-vertical-alignment, start);
+    align-items: var(--bento-card-vertical-alignment, start);
+    justify-items: var(--bento-card-horizontal-alignment, start);
+    text-align: var(--bento-card-horizontal-alignment, start);
+  }
+
+  .bento-grid img {
+    max-width: var(--bento-card-image-width, 100%);
+    width: var(--bento-card-image-width, 100%);
+    order: var(--bento-card-image-order);
+  }
+
+  .bento-grid> :nth-child(1) {
+    --heading-font-size: var(--fs-xl);
+    --heading-span-foreground: var(--accent-base);
+    --bento-card-foreground: var(--white);
+    --bento-card-surface: var(--primary-base);
+    --bento-card-padding: 48px;
+    --bento-card-horizontal-alignment: center;
+    --bento-card-image-width: 70%;
+    --bento-card-gap: 16px;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 45%;
+    }
+
+    grid-area: one;
+  }
+
+  .bento-grid> :nth-child(2) {
+    --bento-card-image-order: -1;
+
+    grid-area: two;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 150%;
+    }
+
+    /* fixing shadow issue in asset */
+    >img {
+      filter: drop-shadow(0 0 1rem hsl(0 0% 0% / .25));
+      border-radius: 100vw;
+      /* box-shadow: 0 0 1rem hsl(0 0% 0%); */
+    }
+  }
+
+  .bento-grid> :nth-child(3) {
+    --bento-card-surface: var(--accent-base);
+
+    grid-area: three;
+
+
+    >img {
+      --bento-card-image-width: 75%;
+
+      margin-bottom: -55px;
+
+      @media (width > 960px) {
+        --bento-card-image-width: 100%;
+        margin-bottom: -125px;
+      }
+    }
+  }
+
+  .bento-grid> :nth-child(4) {
+    --bento-card-horizontal-alignment: center;
+    --bento-card-surface: var(--primary-subdued);
+
+    grid-area: four;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 180%;
+      --bento-card-horizontal-alignment: start;
+      --bento-card-vertical-alignment: center;
+    }
+
+  }
+
+  .bento-grid> :nth-child(5) {
+    --bento-card-horizontal-alignment: center;
+    --bento-card-foreground: var(--white);
+    --bento-card-surface: var(--primary-base);
+    --bento-card-image-width: 75%;
+    --bento-card-image-order: -1;
+
+    grid-area: five;
+
+    @media (width > 960px) {
+      --bento-card-gap: 16px;
+      --bento-card-image-width: 100%;
+      --bento-card-vertical-alignment: center;
+      --bento-card-horizontal-alignment: start;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  .bento-grid> :nth-child(6) {
+    --heading-font-size: var(--fs-xl);
+    --heading-span-display: block;
+    --heading-span-font-size: var(--fs-reg);
+
+    --bento-card-image-width: 60%;
+
+    grid-area: six;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 80%;
+    }
+
+  }
+
+  .bento-grid> :nth-child(7) {
+    --heading-span-foreground: var(--primary-base);
+    --heading-span-style: italic;
+
+    --bento-card-surface: var(--accent-subdued);
+    --bento-card-image-width: 60%;
+
+
+    grid-area: seven;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 100%;
+      --bento-card-vertical-alignment: center;
+    }
+  }
+
+  .bento-grid> :nth-child(8) {
+    --bento-card-surface: var(--accent-base);
+    --bento-card-image-width: 60%;
+
+    grid-area: eight;
+
+    @media (width > 960px) {
+      --bento-card-image-width: 105%;
+      --bento-card-vertical-alignment: center;
+    }
+  }
+}
+
+@layer utilities {
+  .visually-first {
+    order: -1;
+  }
+}
\ No newline at end of file