Improve qsgen3 theme system: complete theme override and new minimal theme

- Remove legacy themes (black-orange, minimal) with old .tpl structure
- Create new minimal theme with proper qsgen3 structure:
  - Complete layouts/ directory with all required templates
  - Modern CSS with responsive design and clean styling
  - Proper theme documentation in README.md
- Update THEMES-HOWTO.md to accurately reflect theme behavior:
  - Clarify complete layout override (no fallback to defaults)
  - Document included minimal theme example
  - Correct layout processing documentation
- Update site.conf to use new minimal theme CSS path
- Ensure themes are complete packages when specified
This commit is contained in:
Stig-Ørjan Smelror 2025-05-31 03:14:36 +02:00
parent 81ffa53d70
commit 7521c744bd
24 changed files with 542 additions and 1712 deletions

View File

@ -30,10 +30,34 @@ A qsgen3 theme is a collection of layout templates and static assets (CSS, JavaS
When you specify a theme in your `site.conf`, qsgen3 follows this processing order: When you specify a theme in your `site.conf`, qsgen3 follows this processing order:
1. **Theme Detection**: Looks for the theme directory at `themes/{theme_name}/` 1. **Theme Detection**: Looks for the theme directory at `themes/{theme_name}/`
2. **Layout Override**: If the theme has a `layouts/` directory, it replaces the default layouts 2. **Layout Override**: If the theme has a `layouts/` directory, it **completely replaces** the default layouts
3. **Static File Copying**: Copies static files from both root `static/` and theme `static/` directories 3. **Static File Copying**: Copies static files from both root `static/` and theme `static/` directories
4. **CSS Linking**: Automatically links the theme's main CSS file in generated HTML 4. **CSS Linking**: Automatically links the theme's main CSS file in generated HTML
**Important**: When a theme provides layouts, qsgen3 uses **only** the theme's layouts. There is no fallback to default layouts for individual templates. If you want to use a theme, ensure it provides all necessary layout files (`index.html`, `post.html`, `page.html`, `rss.xml`).
### Included Example Theme
qsgen3 includes a `minimal` theme that demonstrates the proper theme structure:
```
themes/minimal/
├── layouts/ # Complete set of templates
│ ├── index.html # Homepage layout
│ ├── post.html # Blog post layout
│ ├── page.html # Static page layout
│ └── rss.xml # RSS feed template
├── static/ # Theme assets
│ └── css/
│ └── style.css # Clean, minimal styling
└── README.md # Theme documentation
```
To use the minimal theme:
1. Set `site_theme="minimal"` in your `site.conf`
2. Set `site_theme_css_file="css/style.css"`
3. Run `./bin/qsgen3`
## Theme Directory Structure ## Theme Directory Structure
### Standard Theme Structure ### Standard Theme Structure
@ -42,10 +66,10 @@ When you specify a theme in your `site.conf`, qsgen3 follows this processing ord
themes/ themes/
└── your-theme-name/ └── your-theme-name/
├── layouts/ # Optional: Custom layout templates ├── layouts/ # Optional: Custom layout templates
│ ├── index.html # Homepage layout │ ├── index.html # Homepage layout (overrides default)
│ ├── post.html # Blog post layout │ ├── post.html # Blog post layout (overrides default)
│ ├── page.html # Static page layout │ ├── page.html # Static page layout (overrides default)
│ └── rss.xml # RSS feed template │ └── rss.xml # RSS feed template (overrides default)
└── static/ # Theme's static assets └── static/ # Theme's static assets
├── css/ ├── css/
│ └── style.css # Main theme CSS │ └── style.css # Main theme CSS
@ -55,6 +79,8 @@ themes/
└── logo.png # Theme images └── logo.png # Theme images
``` ```
**Important**: By default, qsgen3 uses the `layouts/` directory in your project root (as specified by `paths_layouts_dir` in `site.conf`). When a theme provides its own `layouts/` directory, it completely overrides the default layouts directory.
### Alternative Structure (Legacy Support) ### Alternative Structure (Legacy Support)
For themes that don't use the `static/` subdirectory: For themes that don't use the `static/` subdirectory:
@ -62,13 +88,21 @@ For themes that don't use the `static/` subdirectory:
``` ```
themes/ themes/
└── your-theme-name/ └── your-theme-name/
├── layouts/ # Optional: Custom layout templates ├── layouts/ # Optional: Custom layout templates
├── css/ # CSS files directly in theme root ├── css/ # CSS files directly in theme root
│ └── style.css │ └── style.css
├── js/ # JavaScript files ├── js/ # JavaScript files
└── images/ # Image files └── images/ # Image files
``` ```
### How Layout Override Works
1. **Default**: qsgen3 uses templates from your project's `layouts/` directory (configurable via `paths_layouts_dir`)
2. **Theme Override**: If `themes/your-theme/layouts/` exists, qsgen3 uses **only** those templates
3. **No Fallback**: If a theme provides layouts, there is no fallback to default layouts. The theme must provide all required templates.
**Note**: The project root `layouts/` directory serves as default templates for projects not using themes, or as a fallback when no theme is specified.
## Creating Your First Theme ## Creating Your First Theme
### Step 1: Create the Theme Directory ### Step 1: Create the Theme Directory
@ -819,4 +853,13 @@ Your modern, responsive blog theme is now ready!
--- ---
This guide covers everything you need to know about creating themes for qsgen3. Remember that themes are processed in a specific order, and understanding this processing flow is key to creating effective themes that work reliably across different configurations. ## Summary
This guide covers everything you need to know about creating themes for qsgen3. Key points to remember:
1. **Complete Override**: When a theme provides layouts, it completely replaces default layouts
2. **No Partial Fallback**: Themes must provide all necessary templates (`index.html`, `post.html`, `page.html`, `rss.xml`)
3. **Static File Merging**: Theme static files are copied after root static files, allowing themes to override default assets
4. **CSS Automation**: The main theme CSS file is automatically linked in generated HTML
Understanding this processing flow is key to creating effective themes that work reliably across different configurations.

View File

@ -5,7 +5,7 @@ site_name="My Awesome Site"
site_tagline="A brief description of my site" site_tagline="A brief description of my site"
site_url="http://localhost:8000" site_url="http://localhost:8000"
site_theme="minimal" site_theme="minimal"
site_theme_css_file="css/minimaltemplate-v1.css" site_theme_css_file="css/style.css"
# --- Paths --- # --- Paths ---
paths_content_dir="content" paths_content_dir="content"

View File

@ -1,70 +0,0 @@
<!-- This is the beginning of the HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#sitename - Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/dark.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/cal-icon.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/blog.css" media="screen" />
<link rel="shortcut icon" href="/images/favicon-kekepower-transparent.png" type="image/png" />
</head>
<body>
<div id="wrap">
<div id="header">
<table border=0>
<tr>
<td id="logo">
<a href="/"><img src="/images/favicon-kekepower-transparent.png" height="75"></a>
</td>
<td id="sitetitle">
<h1><a href="/">#sitename</a></h1>
<h2>#tagline</h2>
</td>
</tr>
</table>
</div>
<div id="topmenu">
<a href="https://mageia.org/">Mageia</a> |
<a href="https://kernel.org/">Linux Kernel</a> |
<a href="https://kodi.tv/">Kodi Mediacenter</a> |
<a href="https://slashdot.org/">Slashdot</a> |
<a href="https://distrowatch.com/">Distrowatch</a> |
<a href="https://github.com/">Github</a>
</div>
<div id="right">
<!-- This is the end of the HEADER -->
<!-- Body Start -->
BODY
<!-- Body End -->
<!-- This is the beginning of the FOOTER -->
</div> <!-- End of div right -->
<div id="bottomleft">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/kekePower.html">About Me</a></li>
<li><a href="/hardware.html">My Hardware</a></li>
<li><a href="/mageia.html">Mageia Info</a></li>
<li><a href="/linux.html">Linux</a></li>
<!-- <li><a href="/blog/index.html">My Blog</a></li> -->
</ul>
<div id="generated">
#updated
</div>
</div>
</body>
</html>
<!-- This is the end of the FOOTER -->

View File

@ -1,26 +0,0 @@
<!-- Blog List Start -->
<br />
<div class="blog">
<div class="blogtitle"><a class="blogtitle" href="BLOGURL">BLOGTITLE</a></div>
<div class="blogcontent">
<div class="cal-icon">
<div class="datetime">
<div class="caltop"><p>CALADAY</p></div>
<p class="day">CALNDAY</p>
<p class="mon">CALMONTH</p>
<p class="yr">CALYEAR</p>
</div>
</div>
</div>
<div class="blogingress" id="ingress">
<br />
INGRESS
</div>
</div>
<!-- Blog List End -->

View File

@ -1,88 +0,0 @@
<!-- This is the beginning of the HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#sitename - BLOGTITLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/dark.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/cal-icon.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/blog.css" media="screen" />
<link rel="shortcut icon" href="/images/favicon-kekepower-transparent.png" type="image/png" />
</head>
<body>
<div id="wrap">
<div id="header">
<table border=0>
<tr>
<td id="logo">
<a href="/"><img src="/images/favicon-kekepower-transparent.png" height="75"></a>
</td>
<td id="sitetitle">
<h1><a href="/">#sitename</a></h1>
<h2>#tagline</h2>
</td>
</tr>
</table>
</div>
<div id="topmenu">
<a href="https://mageia.org/">Mageia</a> |
<a href="https://kernel.org/">Linux Kernel</a> |
<a href="https://kodi.tv/">Kodi Mediacenter</a> |
<a href="https://slashdot.org/">Slashdot</a> |
<a href="https://distrowatch.com/">Distrowatch</a> |
<a href="https://github.com/">Github</a>
</div>
<div id="right">
<!-- This is the end of the HEADER -->
<!-- Blog Content Start -->
<div class="blog">
<div class="blogtitle">BLOGTITLE</div>
<div class="blogcontent">
<div class="cal-icon">
<div class="datetime">
<div class="caltop"><p>CALADAY</p></div>
<p class="day">CALNDAY</p>
<p class="mon">CALMONTH</p>
<p class="yr">CALYEAR</p>
</div>
</div>
</div>
<div class="blogingress">
<br />
INGRESS
</div>
<div class="blogbody">
BODY
</div>
</div> <!-- End blog content -->
<!-- This is the beginning of the FOOTER -->
</div> <!-- End of div right -->
<div id="bottomleft">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/kekePower.html">About Me</a></li>
<li><a href="/hardware.html">My Hardware</a></li>
<li><a href="/mageia.html">Mageia Info</a></li>
<li><a href="/linux.html">Linux</a></li>
<!-- <li><a href="/blog/index.html">My Blog</a></li> -->
</ul>
<div id="generated">
#updated
</div>
</div>
</body>
</html>
<!-- This is the end of the FOOTER -->

View File

@ -1,93 +0,0 @@
div.blog {
border-left: 1px groove #ccc;
padding-left: 1px;
width: 100%;
float: right;
color: white;
font-size: 14px;
/* margin-left: 50px; */
}
div.blogtitle {
/* background: url(/images/round_corner.png) top right no-repeat;
background-size: 37px; */
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 3px;
margin-left: 2.1em;
background-color: #444;
font-size: 20px;
}
div.blogtitle a {
text-decoration: none !important;
}
div.blogcontent{
padding: 3px;
float: left;
width: 45px;
color: white;
height: 5em;
}
div.cal-icon {
text-align: center;
width: 40px;
float: left;
}
div.blogcontent div.blogingress {
/* font-size: 14px; */
color: white !important;
float: left;
width: 94%;
padding-left: 5px;
padding-top: 5px;
margin-left: 5px;
height: 5em;
}
div.blogbody {
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #222;
font-size: 14px;
float: left;
padding-bottom: 10px;
padding-top: 10px;
margin-left: 3.5em;
padding-left: 5px;
/* color: white !important; */
width: 94%;
}
div.blogbody, img {
float:left;
}
img.exticon {
float: none !important;
}
div.blogingress img {
width: 100px !important;
float: left;
padding-right: 5px;
padding-bottom: 5px;
}
div.right h2 {
font-size: 26px;
}
#logo td {
align: center;
height: 75px;
}
#sitetitle td {
align: left;
height: 75px;
text-align: left;
vertical-align: middle;
padding-left: 15px;
}
#libody td {
padding-left: 35px;
}

View File

@ -1,26 +0,0 @@
div.datetime .caltop p {
font:bold x-small/100% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif;
letter-spacing:0.12em;
text-transform:uppercase;
color:#fefefe !important;
background-color: #222; /* #2f4765; */
}
/* day of the month (NUMBER) */
div.datetime p.day {
font:bold 1.5em/98% Georgia, "New Century Schoolbook", "Book Antiqua", "Times New Roman", serif !important;
letter-spacing:0.13em;
}
/* month */
div.datetime p.mon {
font:x-small/135% Verdana,Geneva,Arial,Helvetica,sans-serif !important;
letter-spacing:normal;
text-transform:uppercase;
}
/* year */
div.datetime p.yr {
font:x-small/110% Verdana,Geneva,Arial,Helvetica,sans-serif;
letter-spacing:0.05em;
}

View File

@ -1,175 +0,0 @@
* {
padding: 0;
margin: 0;
}
body {
font: 1em Arial, Helvetica, sans-serif;
background: #111;
}
h2 {
font-size: 1em;
}
a {
color: #FF9621;
}
#wrap {
margin: 20px auto;
width: 90%;
background: #111;
}
#header {
/* background: url(/images/dark_header_bg.png) top right no-repeat;
background-size: 100px; */
height: 70px;
margin: 0;
padding: 0;
}
#header h1 {
margin: 0;
padding-left: 1px;
padding-top: 12px;
font-size: 1.1em;
color: #FF9621;
}
#header h1 a {
font-size: 1.1em;
color: #FF9621;
text-decoration: none;
}
#header h2 {
margin: 0;
padding-left: 1px;
padding-top: 0px;
font-size: .8em;
color: #fff;
}
#right h2 {
margin: 0;
padding-left: 1px;
padding-top: 0px;
font-size: 26px;
color: #fff;
}
#topmenu a {
color: #FFF;
text-decoration: none;
line-height: 22px;
}
#topmenu a:hover {
color: #aaa;
}
#topmenu a:visited {
color: #ddd;
}
#topmenu {
border-top-right-radius: 10px;
background-color: #222;
font: .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: center;
background: #444;
margin-bottom: 5px;
color: #fff;
height: 22px;
}
#right {
font: .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
float: right;
width: 82%;
margin-top: 5px;
margin-left: 10px;
color: #f4f4f4;
/* border: 1px solid white; */
height: auto;
}
#left {
font: .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 14%;
padding: 1px;
line-height: 1.4em;
}
#bottomleft {
font: .8em "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 16%;
padding: 1px;
line-height: 1.4em;
}
#left li {
list-style-type: none;
border-bottom: 1px dotted #fff;
}
#left li a {
text-decoration: none;
}
#left li a:hover {
color : #FFEB31;
}
#bottomleft li {
list-style-type: none;
border-bottom: 1px dotted #fff;
}
#bottomleft li a {
text-decoration: none;
}
#bottomleft li a:hover {
color : #FFEB31;
}
#generated {
background: #222;
text-align: center;
margin-top: 15px;
color: #eee;
height: auto;
line-height: 20px;
padding: 3px;
font-size: 10px;
font-style: italic;
}
blockquote {
background-color: #222;
color: #EEE;
font-size: 14px;
border-left: 1px solid white;
padding-left: 0.5em;
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 40px;
margin-right: 40px;
}
blockquote img {
float: none !important;
}
blockquote ol {
font-family: "Times New Roman";
font-size: 16px;
line-height: 1.1em;
padding-bottom: 10px;
padding-top: 10px;
padding-left: 35px;
}
blockquote ul {
padding-bottom: 10px;
padding-top: 10px;
padding-left: 25px;
}
img.exturl {
position: absolute !important;
bottom: 0 !important;
}

View File

@ -1,70 +0,0 @@
<!-- This is the beginning of the HEADER -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>#sitename - #pagetitle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/dark.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/cal-icon.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/blog.css" media="screen" />
<link rel="shortcut icon" href="/images/favicon-kekepower-transparent.png" type="image/png" />
</head>
<body>
<div id="wrap">
<div id="header">
<table border=0>
<tr>
<td id="logo">
<a href="/"><img src="/images/favicon-kekepower-transparent.png" height="75"></a>
</td>
<td id="sitetitle">
<h1><a href="/">#sitename</a></h1>
<h2>#tagline</h2>
</td>
</tr>
</table>
</div>
<div id="topmenu">
<a href="https://mageia.org/">Mageia</a> |
<a href="https://kernel.org/">Linux Kernel</a> |
<a href="https://kodi.tv/">Kodi Mediacenter</a> |
<a href="https://slashdot.org/">Slashdot</a> |
<a href="https://distrowatch.com/">Distrowatch</a> |
<a href="https://github.com/">Github</a>
</div>
<div id="right">
<!-- This is the end of the HEADER -->
<!-- Body Start -->
BODY
<!-- Body End -->
<!-- This is the beginning of the FOOTER -->
</div> <!-- End of div right -->
<div id="bottomleft">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/kekePower.html">About Me</a></li>
<li><a href="/hardware.html">My Hardware</a></li>
<li><a href="/mageia.html">Mageia Info</a></li>
<li><a href="/linux.html">Linux</a></li>
<!-- <li><a href="/blog/index.html">My Blog</a></li> -->
</ul>
<div id="generated">
#updated
</div>
</div>
</body>
</html>
<!-- This is the end of the FOOTER -->

49
themes/minimal/README.md Normal file
View File

@ -0,0 +1,49 @@
# Minimal Theme for qsgen3
A clean, minimal theme that demonstrates the proper qsgen3 theme structure.
## Features
- Clean, modern design
- Responsive layout
- Semantic HTML structure
- Accessible typography
- Fast loading
## Structure
```
themes/minimal/
├── layouts/ # Complete set of Pandoc templates
│ ├── index.html # Homepage layout
│ ├── post.html # Blog post layout
│ ├── page.html # Static page layout
│ └── rss.xml # RSS feed template
└── static/ # Theme assets
└── css/
└── style.css # Main theme stylesheet
```
## Usage
1. Set in your `site.conf`:
```
site_theme="minimal"
site_theme_css_file="css/style.css"
```
2. Run qsgen3:
```bash
./bin/qsgen3
```
## Customization
- Edit `static/css/style.css` to modify the visual appearance
- Modify layout templates in `layouts/` to change HTML structure
- Add JavaScript files to `static/js/` and reference them in templates
## Browser Support
- Modern browsers (Chrome 90+, Firefox 88+, Safari 14+)
- Graceful degradation for older browsers

View File

@ -1,131 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>#sitename - Blog</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="Webflow" name="generator"/>
<link href="/css/minimaltemplate-v1.css" rel="stylesheet" type="text/css"/>
<script src="/css/webfont.js" type="text/javascript">
</script>
<script type="text/javascript">WebFont.load({ google: { families: ["Vollkorn:400,400italic,700,700italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Oswald:200,300,400,500,600,700"] }});</script>
<script type="text/javascript">
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
</script>
<link href="/images/el-vikingo-ti.png" rel="shortcut icon" type="image/png"/>
<link href="/images/el-vikingo-ti.png" rel="apple-touch-icon"/>
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="/" class="brand-block w-clearfix w-nav-brand">
<img src="/images/el-vikingo-ti.png" width="65" alt="" class="logo-img"/>
<h1 class="logo-title">#sitename</h1>
</a>
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="/" class="nav-link w-nav-link">Inicio</a>
<a href="/sobre.html" class="nav-link w-nav-link">Sobre El Vikingo TI</a>
<a href="/servicios.html" class="nav-link w-nav-link">Que Hago</a>
<a href="/contacto.html" class="nav-link w-nav-link">Contáctame</a>
<a href="/blog/" class="nav-link w-nav-link">Blog</a>
</nav>
<div class="menu-button w-nav-button">
<div class="w-icon-nav-menu">
</div>
</div>
</div>
</div>
<div class="header">
<div class="w-container">
<h1 class="main-heading">Blog</h1>
<div class="divider">
</div>
<div class="main-subtitle">#tagline</div>
</div>
</div>
<div class="about-section">
<div class="w-container">
<p>&nbsp;</p>
<!-- Header End -->
<!-- Body Start -->
BODY
<!-- Body End -->
<!-- Begin Footer Template -->
</div>
</div>
</div>
<div id="contact" class="section contact">
<div class="w-container">
<h2>Ponte en contacto conmigo</h2>
<div class="divider grey">
</div>
<div class="w-row">
<div class="w-col w-col-4">
<div class="icon-wrapper">
<img src="/images/map-icon.png" width="44" alt=""/>
</div>
<h3>Lo que hago</h3>
<p class="contact-text">
Elegir a El Vikingo TI significa<br/>
optar por la tranquilidad, la profesionalidad<br/>
y una calidad de transmisión inigualable.
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/mail-icon.png" width="70" alt=""/>
</div>
<h3>La manera tradicional</h3>
<p class="contact-text">Correo Electronico<br/>
<a href="/contacto.html" class="link">Envíeme un mensaje</a>
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/heart-icon.png" width="68" alt=""/>
</div>
<h3>Redes Sociales</h3>
<a href="#" class="social-wrapper contact-text w-inline-block w-clearfix">
<img src="/images/facebook-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Facebook</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/twitter-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Twitter</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/linkdin-icon-black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">LinkedIn</div></a>
</div>
</div>
</div>
</div>
<footer id="footer" class="newsection footer">
<img src="/images/el-vikingo-ti.png" width="43" alt="El Vikingo TI Logo" class="footer-logo"/>
<p class="footer-text">
#updated
</p>
</div>
</footer>
<script src="/css/jquery-3.5.1.js" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="/css/webflow.js" type="text/javascript"></script>
</body>
</html>

View File

@ -1,17 +0,0 @@
<!-- Blog Post for Index Start -->
<!-- <div id="process" class="section"> -->
<div class="w-container">
<h3><a class="link" href="BLOGURL">BLOGTITLE</a></h3>
<div class="grow-row w-row">
INGRESS
</div>
<div class="grow-row w-row">
<strong style="font-size: 10px; padding-top: 3px;">BLOGDATE</strong>
</div>
<div class="divider grey"></div>
</div>
<!-- </div> -->
<!-- Blog Post for Index End -->

View File

@ -1,125 +0,0 @@
<html>
<head>
<meta charset="utf-8"/>
<title>#sitename - BLOGTITLE</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="/css/minimaltemplate-v1.css" rel="stylesheet" type="text/css"/>
<script src="/css/webfont.js" type="text/javascript">
</script>
<script type="text/javascript">
WebFont.load({ google: { families: ["Vollkorn:400,400italic,700,700italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Oswald:200,300,400,500,600,700"] }});</script>
<script type="text/javascript">
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
<link href="/images/el-vikingo-ti.png" rel="shortcut icon" type="image/png"/>
<link href="/images/el-vikingo-ti.png" rel="apple-touch-icon"/>
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="/" class="brand-block w-clearfix w-nav-brand">
<img src="/images/el-vikingo-ti.png" width="65" alt="" class="logo-img"/>
<h1 class="logo-title">#sitename</h1>
</a>
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="/blog/" class="nav-link w-nav-link">← Al Blog</a>
</nav>
<div class="menu-button w-nav-button">
<div class="w-icon-nav-menu">
</div>
</div>
</div>
</div>
<div class="header project-page">
<div class="w-container">
<h1 class="main-heading">BLOGTITLE</h1>
<div class="divider">
</div>
<div class="main-subtitle">
CALADAY - CALNDAY - CALMONTH - CALYEAR
</div>
</div>
</div>
<!-- Blog Post Start -->
<div class="about-section">
<div class="w-container">
<div id="process" class="section ingress">
<div class="w-container">
INGRESS
<div class="divider grey"></div>
<div class="grow-row w-row">
BODY
</div>
</div>
</div>
</div>
<!-- Blog Post End -->
</div>
<div id="contact" class="section contact">
<div class="w-container">
<h2>Ponte en contacto conmigo</h2>
<div class="divider grey">
</div>
<div class="w-row">
<div class="w-col w-col-4">
<div class="icon-wrapper">
<img src="/images/map-icon.png" width="44" alt=""/>
</div>
<h3>Lo que hago</h3>
<p class="contact-text">
Elegir a El Vikingo TI significa<br/>
optar por la tranquilidad, la profesionalidad<br/>
y una calidad de transmisión inigualable.
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/mail-icon.png" width="70" alt=""/>
</div>
<h3>La manera tradicional</h3>
<p class="contact-text">Correo Electronico<br/>
<a href="/contacto.html" class="link">Envíeme un mensaje</a>
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/heart-icon.png" width="68" alt=""/>
</div>
<h3>Redes Sociales</h3>
<a href="#" class="social-wrapper contact-text w-inline-block w-clearfix">
<img src="/images/facebook-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Facebook</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/twitter-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Twitter</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/linkdin-icon-black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">LinkedIn</div></a>
</div>
</div>
</div>
</div>
<footer id="footer" class="newsection footer">
<img src="/images/el-vikingo-ti.png" width="43" alt="El Vikingo TI Logo" class="footer-logo"/>
<p class="footer-text">
#updated
</p>
</div>
</footer>
<script src="/css/jquery-3.5.1.js" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="/css/webflow.js" type="text/javascript"></script>
</body>
</html>

View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$site_name$ - $site_tagline$</title>
$for(css)$
<link rel="stylesheet" href="$css$">
$endfor$
$if(site_rss_url)$
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="$site_rss_url$">
$endif$
</head>
<body class="minimal-theme">
<header class="site-header">
<div class="container">
<h1 class="site-title"><a href="$site_url$">$site_name$</a></h1>
<p class="site-tagline">$site_tagline$</p>
</div>
</header>
<main class="main-content">
<div class="container">
<section id="posts-list">
<h2>Latest Posts</h2>
$if(posts)$
<div class="posts-grid">
$for(posts)$
<article class="post-card">
<h3><a href="$posts.url$">$posts.title$</a></h3>
$if(posts.date)$
<p class="post-date">$posts.date$</p>
$endif$
$if(posts.summary)$
<p class="post-summary">$posts.summary$</p>
$endif$
</article>
$endfor$
</div>
$else$
<p class="no-posts">No posts found.</p>
$endif$
</section>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; $current_year$ $site_name$. Generated by qsgen3.</p>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$title$ - $site_name$</title>
<meta name="description" content="$description$">
$for(css)$
<link rel="stylesheet" href="$css$">
$endfor$
$if(math)$ $math$ $endif$
</head>
<body class="minimal-theme">
<header class="site-header">
<div class="container">
<h1 class="site-title"><a href="/">$site_name$</a></h1>
<p class="site-tagline">$site_tagline$</p>
</div>
</header>
<main class="main-content">
<div class="container">
<article class="page">
<header class="page-header">
<h1 class="page-title">$title$</h1>
</header>
<div class="page-content">
$body$
</div>
</article>
<nav class="page-nav">
<a href="/" class="back-link">&larr; Back to Home</a>
</nav>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; $current_year$ $site_name$. Generated by qsgen3.</p>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>$title$ - $site_name$</title>
<meta name="author" content="$author$">
<meta name="description" content="$description$">
$if(date)$<meta name="date" content="$date$">$endif$
$for(css)$
<link rel="stylesheet" href="$css$">
$endfor$
$if(math)$ $math$ $endif$
</head>
<body class="minimal-theme">
<header class="site-header">
<div class="container">
<h1 class="site-title"><a href="/">$site_name$</a></h1>
<p class="site-tagline">$site_tagline$</p>
</div>
</header>
<main class="main-content">
<div class="container">
<article class="post">
<header class="post-header">
<h1 class="post-title">$title$</h1>
<div class="post-meta">
$if(author)$
<span class="post-author">By: $author$</span>
$endif$
$if(date)$
<span class="post-date">Published: $date$</span>
$endif$
</div>
</header>
<div class="post-content">
$body$
</div>
</article>
<nav class="post-nav">
<a href="/" class="back-link">&larr; Back to Home</a>
</nav>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>&copy; $current_year$ $site_name$. Generated by qsgen3.</p>
</div>
</footer>
</body>
</html>

View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>$site_name$</title>
<link>$site_url$</link>
<description>$site_tagline$</description>
<language>en-us</language>
<lastBuildDate>$rfc_2822_date$</lastBuildDate>
<atom:link href="$site_url$/rss.xml" rel="self" type="application/rss+xml" />
$if(posts)$
$for(posts)$
<item>
<title>$it.post_title$</title>
<link>$it.post_url$</link>
<pubDate>$it.post_rfc_2822_date$</pubDate>
<guid isPermaLink="true">$it.post_url$</guid>
<description><![CDATA[$it.post_summary$]]></description>
</item>
$endfor$
$endif$
</channel>
</rss>

View File

@ -1,127 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>#sitename - #pagetitle</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="Webflow" name="generator"/>
<link href="/css/minimaltemplate-v1.css" rel="stylesheet" type="text/css"/>
<script src="/css/webfont.js" type="text/javascript">
</script>
<script type="text/javascript">WebFont.load({ google: { families: ["Vollkorn:400,400italic,700,700italic","Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Oswald:200,300,400,500,600,700"] }});</script>
<script type="text/javascript">
!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);
</script>
<link href="/images/el-vikingo-ti.png" rel="shortcut icon" type="image/png"/>
<link href="/images/el-vikingo-ti.png" rel="apple-touch-icon"/>
</head>
<body>
<div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar w-nav">
<div class="w-container">
<a href="/" class="brand-block w-clearfix w-nav-brand">
<img src="/images/el-vikingo-ti.png" width="65" alt="" class="logo-img"/>
<h1 class="logo-title">#sitename</h1>
</a>
<nav role="navigation" class="nav-menu w-nav-menu">
<a href="/" class="nav-link w-nav-link">Inicio</a>
<a href="/sobre.html" class="nav-link w-nav-link">Sobre #sitename</a>
<a href="/servicios.html" class="nav-link w-nav-link">Que Hago</a>
<a href="/contacto.html" class="nav-link w-nav-link">Contáctame</a>
<a href="/blog/" class="nav-link w-nav-link">Blog</a>
</nav>
<div class="menu-button w-nav-button">
<div class="w-icon-nav-menu">
</div>
</div>
</div>
</div>
<div class="header">
<div class="w-container">
<h1 class="main-heading">#pagetitle</h1>
<div class="divider">
</div>
<div class="main-subtitle">#tagline</div>
</div>
</div>
<div class="about-section">
<div class="w-container">
<!-- Header End -->
<!-- Body Start -->
BODY
<!-- Body End -->
<!-- Begin Footer Template -->
</div>
<div id="contact" class="section contact">
<div class="w-container">
<h2>Ponte en contacto conmigo</h2>
<div class="divider grey">
</div>
<div class="w-row">
<div class="w-col w-col-4">
<div class="icon-wrapper">
<img src="/images/map-icon.png" width="44" alt=""/>
</div>
<h3>Lo que hago</h3>
<p class="contact-text">
Elegir a El Vikingo TI significa<br/>
optar por la tranquilidad, la profesionalidad<br/>
y una calidad de transmisión inigualable.
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/mail-icon.png" width="70" alt=""/>
</div>
<h3>La manera tradicional</h3>
<p class="contact-text">Correo Electronico<br/>
<a href="/contacto.html" class="link">Envíeme un mensaje</a>
</p>
</div>
<div class="w-col w-col-4">
<div class="icon-wrapper _2">
<img src="/images/heart-icon.png" width="68" alt=""/>
</div>
<h3>Redes Sociales</h3>
<a href="#" class="social-wrapper contact-text w-inline-block w-clearfix">
<img src="/images/facebook-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Facebook</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/twitter-icon_black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">Twitter</div></a>
<a href="#" class="social-wrapper contact-text w-inline-block">
<img src="/images/linkdin-icon-black.svg" width="14" alt="" class="social-icon"/>
<div class="social-link-text">LinkedIn</div></a>
</div>
</div>
</div>
</div>
<footer id="footer" class="newsection footer">
<img src="/images/el-vikingo-ti.png" width="43" alt="El Vikingo TI Logo" class="footer-logo"/>
<p class="footer-text">
#updated
</p>
</div>
</footer>
<script src="/css/jquery-3.5.1.js" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="/css/webflow.js" type="text/javascript"></script>
</body>
</html>

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,267 @@
/* Minimal Theme for qsgen3 */
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 0 1rem;
}
/* Header */
.site-header {
background: #f8f9fa;
border-bottom: 1px solid #e9ecef;
padding: 2rem 0;
margin-bottom: 2rem;
}
.site-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.site-title a {
color: #333;
text-decoration: none;
}
.site-title a:hover {
color: #007bff;
}
.site-tagline {
color: #6c757d;
font-size: 1.1rem;
}
/* Main content */
.main-content {
min-height: calc(100vh - 200px);
margin-bottom: 3rem;
}
/* Posts grid */
.posts-grid {
display: grid;
gap: 2rem;
margin-top: 1rem;
}
.post-card {
border: 1px solid #e9ecef;
border-radius: 8px;
padding: 1.5rem;
background: #fff;
transition: box-shadow 0.2s ease;
}
.post-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.post-card h3 {
margin-bottom: 0.5rem;
}
.post-card h3 a {
color: #333;
text-decoration: none;
}
.post-card h3 a:hover {
color: #007bff;
}
.post-date {
color: #6c757d;
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.post-summary {
color: #555;
line-height: 1.5;
}
.no-posts {
text-align: center;
color: #6c757d;
font-style: italic;
padding: 2rem;
}
/* Post page */
.post {
max-width: none;
}
.post-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
.post-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.post-meta {
color: #6c757d;
font-size: 0.9rem;
}
.post-meta span {
margin-right: 1rem;
}
.post-content {
font-size: 1.1rem;
line-height: 1.7;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 600;
}
.post-content p {
margin-bottom: 1rem;
}
.post-content ul,
.post-content ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
.post-content li {
margin-bottom: 0.5rem;
}
.post-content blockquote {
border-left: 4px solid #007bff;
padding-left: 1rem;
margin: 1.5rem 0;
font-style: italic;
color: #555;
}
.post-content code {
background: #f8f9fa;
padding: 0.2rem 0.4rem;
border-radius: 3px;
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 0.9em;
}
.post-content pre {
background: #f8f9fa;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
margin: 1.5rem 0;
}
.post-content pre code {
background: none;
padding: 0;
}
/* Page content */
.page {
max-width: none;
}
.page-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.2;
}
.page-content {
font-size: 1.1rem;
line-height: 1.7;
}
/* Navigation */
.post-nav,
.page-nav {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid #e9ecef;
}
.back-link {
color: #007bff;
text-decoration: none;
font-weight: 500;
}
.back-link:hover {
text-decoration: underline;
}
/* Footer */
.site-footer {
background: #f8f9fa;
border-top: 1px solid #e9ecef;
padding: 2rem 0;
margin-top: auto;
color: #6c757d;
text-align: center;
}
/* Responsive design */
@media (max-width: 768px) {
.container {
padding: 0 0.75rem;
}
.site-header {
padding: 1.5rem 0;
}
.site-title {
font-size: 1.5rem;
}
.post-title,
.page-title {
font-size: 2rem;
}
.post-content,
.page-content {
font-size: 1rem;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,33 +0,0 @@
/*
* Copyright 2016 Small Batch, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy of
* the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations under
* the License.
*/
/* Web Font Loader v1.6.26 - (c) Adobe Systems, Google. License: Apache 2.0 */(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function p(a,b,c){p=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return p.apply(null,arguments)}var q=Date.now||function(){return+new Date};function ca(a,b){this.a=a;this.m=b||a;this.c=this.m.document}var da=!!window.FontFace;function t(a,b,c,d){b=a.c.createElement(b);if(c)for(var e in c)c.hasOwnProperty(e)&&("style"==e?b.style.cssText=c[e]:b.setAttribute(e,c[e]));d&&b.appendChild(a.c.createTextNode(d));return b}function u(a,b,c){a=a.c.getElementsByTagName(b)[0];a||(a=document.documentElement);a.insertBefore(c,a.lastChild)}function v(a){a.parentNode&&a.parentNode.removeChild(a)}
function w(a,b,c){b=b||[];c=c||[];for(var d=a.className.split(/\s+/),e=0;e<b.length;e+=1){for(var f=!1,g=0;g<d.length;g+=1)if(b[e]===d[g]){f=!0;break}f||d.push(b[e])}b=[];for(e=0;e<d.length;e+=1){f=!1;for(g=0;g<c.length;g+=1)if(d[e]===c[g]){f=!0;break}f||b.push(d[e])}a.className=b.join(" ").replace(/\s+/g," ").replace(/^\s+|\s+$/,"")}function y(a,b){for(var c=a.className.split(/\s+/),d=0,e=c.length;d<e;d++)if(c[d]==b)return!0;return!1}
function z(a){if("string"===typeof a.f)return a.f;var b=a.m.location.protocol;"about:"==b&&(b=a.a.location.protocol);return"https:"==b?"https:":"http:"}function ea(a){return a.m.location.hostname||a.a.location.hostname}
function A(a,b,c){function d(){k&&e&&f&&(k(g),k=null)}b=t(a,"link",{rel:"stylesheet",href:b,media:"all"});var e=!1,f=!0,g=null,k=c||null;da?(b.onload=function(){e=!0;d()},b.onerror=function(){e=!0;g=Error("Stylesheet failed to load");d()}):setTimeout(function(){e=!0;d()},0);u(a,"head",b)}
function B(a,b,c,d){var e=a.c.getElementsByTagName("head")[0];if(e){var f=t(a,"script",{src:b}),g=!1;f.onload=f.onreadystatechange=function(){g||this.readyState&&"loaded"!=this.readyState&&"complete"!=this.readyState||(g=!0,c&&c(null),f.onload=f.onreadystatechange=null,"HEAD"==f.parentNode.tagName&&e.removeChild(f))};e.appendChild(f);setTimeout(function(){g||(g=!0,c&&c(Error("Script load timeout")))},d||5E3);return f}return null};function C(){this.a=0;this.c=null}function D(a){a.a++;return function(){a.a--;E(a)}}function F(a,b){a.c=b;E(a)}function E(a){0==a.a&&a.c&&(a.c(),a.c=null)};function G(a){this.a=a||"-"}G.prototype.c=function(a){for(var b=[],c=0;c<arguments.length;c++)b.push(arguments[c].replace(/[\W_]+/g,"").toLowerCase());return b.join(this.a)};function H(a,b){this.c=a;this.f=4;this.a="n";var c=(b||"n4").match(/^([nio])([1-9])$/i);c&&(this.a=c[1],this.f=parseInt(c[2],10))}function fa(a){return I(a)+" "+(a.f+"00")+" 300px "+J(a.c)}function J(a){var b=[];a=a.split(/,\s*/);for(var c=0;c<a.length;c++){var d=a[c].replace(/['"]/g,"");-1!=d.indexOf(" ")||/^\d/.test(d)?b.push("'"+d+"'"):b.push(d)}return b.join(",")}function K(a){return a.a+a.f}function I(a){var b="normal";"o"===a.a?b="oblique":"i"===a.a&&(b="italic");return b}
function ga(a){var b=4,c="n",d=null;a&&((d=a.match(/(normal|oblique|italic)/i))&&d[1]&&(c=d[1].substr(0,1).toLowerCase()),(d=a.match(/([1-9]00|normal|bold)/i))&&d[1]&&(/bold/i.test(d[1])?b=7:/[1-9]00/.test(d[1])&&(b=parseInt(d[1].substr(0,1),10))));return c+b};function ha(a,b){this.c=a;this.f=a.m.document.documentElement;this.h=b;this.a=new G("-");this.j=!1!==b.events;this.g=!1!==b.classes}function ia(a){a.g&&w(a.f,[a.a.c("wf","loading")]);L(a,"loading")}function M(a){if(a.g){var b=y(a.f,a.a.c("wf","active")),c=[],d=[a.a.c("wf","loading")];b||c.push(a.a.c("wf","inactive"));w(a.f,c,d)}L(a,"inactive")}function L(a,b,c){if(a.j&&a.h[b])if(c)a.h[b](c.c,K(c));else a.h[b]()};function ja(){this.c={}}function ka(a,b,c){var d=[],e;for(e in b)if(b.hasOwnProperty(e)){var f=a.c[e];f&&d.push(f(b[e],c))}return d};function N(a,b){this.c=a;this.f=b;this.a=t(this.c,"span",{"aria-hidden":"true"},this.f)}function O(a){u(a.c,"body",a.a)}function P(a){return"display:block;position:absolute;top:-9999px;left:-9999px;font-size:300px;width:auto;height:auto;line-height:normal;margin:0;padding:0;font-variant:normal;white-space:nowrap;font-family:"+J(a.c)+";"+("font-style:"+I(a)+";font-weight:"+(a.f+"00")+";")};function Q(a,b,c,d,e,f){this.g=a;this.j=b;this.a=d;this.c=c;this.f=e||3E3;this.h=f||void 0}Q.prototype.start=function(){var a=this.c.m.document,b=this,c=q(),d=new Promise(function(d,e){function k(){q()-c>=b.f?e():a.fonts.load(fa(b.a),b.h).then(function(a){1<=a.length?d():setTimeout(k,25)},function(){e()})}k()}),e=new Promise(function(a,d){setTimeout(d,b.f)});Promise.race([e,d]).then(function(){b.g(b.a)},function(){b.j(b.a)})};function R(a,b,c,d,e,f,g){this.v=a;this.B=b;this.c=c;this.a=d;this.s=g||"BESbswy";this.f={};this.w=e||3E3;this.u=f||null;this.o=this.j=this.h=this.g=null;this.g=new N(this.c,this.s);this.h=new N(this.c,this.s);this.j=new N(this.c,this.s);this.o=new N(this.c,this.s);a=new H(this.a.c+",serif",K(this.a));a=P(a);this.g.a.style.cssText=a;a=new H(this.a.c+",sans-serif",K(this.a));a=P(a);this.h.a.style.cssText=a;a=new H("serif",K(this.a));a=P(a);this.j.a.style.cssText=a;a=new H("sans-serif",K(this.a));a=
P(a);this.o.a.style.cssText=a;O(this.g);O(this.h);O(this.j);O(this.o)}var S={D:"serif",C:"sans-serif"},T=null;function U(){if(null===T){var a=/AppleWebKit\/([0-9]+)(?:\.([0-9]+))/.exec(window.navigator.userAgent);T=!!a&&(536>parseInt(a[1],10)||536===parseInt(a[1],10)&&11>=parseInt(a[2],10))}return T}R.prototype.start=function(){this.f.serif=this.j.a.offsetWidth;this.f["sans-serif"]=this.o.a.offsetWidth;this.A=q();la(this)};
function ma(a,b,c){for(var d in S)if(S.hasOwnProperty(d)&&b===a.f[S[d]]&&c===a.f[S[d]])return!0;return!1}function la(a){var b=a.g.a.offsetWidth,c=a.h.a.offsetWidth,d;(d=b===a.f.serif&&c===a.f["sans-serif"])||(d=U()&&ma(a,b,c));d?q()-a.A>=a.w?U()&&ma(a,b,c)&&(null===a.u||a.u.hasOwnProperty(a.a.c))?V(a,a.v):V(a,a.B):na(a):V(a,a.v)}function na(a){setTimeout(p(function(){la(this)},a),50)}function V(a,b){setTimeout(p(function(){v(this.g.a);v(this.h.a);v(this.j.a);v(this.o.a);b(this.a)},a),0)};function W(a,b,c){this.c=a;this.a=b;this.f=0;this.o=this.j=!1;this.s=c}var X=null;W.prototype.g=function(a){var b=this.a;b.g&&w(b.f,[b.a.c("wf",a.c,K(a).toString(),"active")],[b.a.c("wf",a.c,K(a).toString(),"loading"),b.a.c("wf",a.c,K(a).toString(),"inactive")]);L(b,"fontactive",a);this.o=!0;oa(this)};
W.prototype.h=function(a){var b=this.a;if(b.g){var c=y(b.f,b.a.c("wf",a.c,K(a).toString(),"active")),d=[],e=[b.a.c("wf",a.c,K(a).toString(),"loading")];c||d.push(b.a.c("wf",a.c,K(a).toString(),"inactive"));w(b.f,d,e)}L(b,"fontinactive",a);oa(this)};function oa(a){0==--a.f&&a.j&&(a.o?(a=a.a,a.g&&w(a.f,[a.a.c("wf","active")],[a.a.c("wf","loading"),a.a.c("wf","inactive")]),L(a,"active")):M(a.a))};function pa(a){this.j=a;this.a=new ja;this.h=0;this.f=this.g=!0}pa.prototype.load=function(a){this.c=new ca(this.j,a.context||this.j);this.g=!1!==a.events;this.f=!1!==a.classes;qa(this,new ha(this.c,a),a)};
function ra(a,b,c,d,e){var f=0==--a.h;(a.f||a.g)&&setTimeout(function(){var a=e||null,k=d||null||{};if(0===c.length&&f)M(b.a);else{b.f+=c.length;f&&(b.j=f);var h,m=[];for(h=0;h<c.length;h++){var l=c[h],n=k[l.c],r=b.a,x=l;r.g&&w(r.f,[r.a.c("wf",x.c,K(x).toString(),"loading")]);L(r,"fontloading",x);r=null;null===X&&(X=window.FontFace?(x=/Gecko.*Firefox\/(\d+)/.exec(window.navigator.userAgent))?42<parseInt(x[1],10):!0:!1);X?r=new Q(p(b.g,b),p(b.h,b),b.c,l,b.s,n):r=new R(p(b.g,b),p(b.h,b),b.c,l,b.s,a,
n);m.push(r)}for(h=0;h<m.length;h++)m[h].start()}},0)}function qa(a,b,c){var d=[],e=c.timeout;ia(b);var d=ka(a.a,c,a.c),f=new W(a.c,b,e);a.h=d.length;b=0;for(c=d.length;b<c;b++)d[b].load(function(b,d,c){ra(a,f,b,d,c)})};function sa(a,b){this.c=a;this.a=b}function ta(a,b,c){var d=z(a.c);a=(a.a.api||"fast.fonts.net/jsapi").replace(/^.*http(s?):(\/\/)?/,"");return d+"//"+a+"/"+b+".js"+(c?"?v="+c:"")}
sa.prototype.load=function(a){function b(){if(f["__mti_fntLst"+d]){var c=f["__mti_fntLst"+d](),e=[],h;if(c)for(var m=0;m<c.length;m++){var l=c[m].fontfamily;void 0!=c[m].fontStyle&&void 0!=c[m].fontWeight?(h=c[m].fontStyle+c[m].fontWeight,e.push(new H(l,h))):e.push(new H(l))}a(e)}else setTimeout(function(){b()},50)}var c=this,d=c.a.projectId,e=c.a.version;if(d){var f=c.c.m;B(this.c,ta(c,d,e),function(e){e?a([]):(f["__MonotypeConfiguration__"+d]=function(){return c.a},b())}).id="__MonotypeAPIScript__"+
d}else a([])};function ua(a,b){this.c=a;this.a=b}ua.prototype.load=function(a){var b,c,d=this.a.urls||[],e=this.a.families||[],f=this.a.testStrings||{},g=new C;b=0;for(c=d.length;b<c;b++)A(this.c,d[b],D(g));var k=[];b=0;for(c=e.length;b<c;b++)if(d=e[b].split(":"),d[1])for(var h=d[1].split(","),m=0;m<h.length;m+=1)k.push(new H(d[0],h[m]));else k.push(new H(d[0]));F(g,function(){a(k,f)})};function va(a,b,c){a?this.c=a:this.c=b+wa;this.a=[];this.f=[];this.g=c||""}var wa="//fonts.googleapis.com/css";function xa(a,b){for(var c=b.length,d=0;d<c;d++){var e=b[d].split(":");3==e.length&&a.f.push(e.pop());var f="";2==e.length&&""!=e[1]&&(f=":");a.a.push(e.join(f))}}
function ya(a){if(0==a.a.length)throw Error("No fonts to load!");if(-1!=a.c.indexOf("kit="))return a.c;for(var b=a.a.length,c=[],d=0;d<b;d++)c.push(a.a[d].replace(/ /g,"+"));b=a.c+"?family="+c.join("%7C");0<a.f.length&&(b+="&subset="+a.f.join(","));0<a.g.length&&(b+="&text="+encodeURIComponent(a.g));return b};function za(a){this.f=a;this.a=[];this.c={}}
var Aa={latin:"BESbswy","latin-ext":"\u00e7\u00f6\u00fc\u011f\u015f",cyrillic:"\u0439\u044f\u0416",greek:"\u03b1\u03b2\u03a3",khmer:"\u1780\u1781\u1782",Hanuman:"\u1780\u1781\u1782"},Ba={thin:"1",extralight:"2","extra-light":"2",ultralight:"2","ultra-light":"2",light:"3",regular:"4",book:"4",medium:"5","semi-bold":"6",semibold:"6","demi-bold":"6",demibold:"6",bold:"7","extra-bold":"8",extrabold:"8","ultra-bold":"8",ultrabold:"8",black:"9",heavy:"9",l:"3",r:"4",b:"7"},Ca={i:"i",italic:"i",n:"n",normal:"n"},
Da=/^(thin|(?:(?:extra|ultra)-?)?light|regular|book|medium|(?:(?:semi|demi|extra|ultra)-?)?bold|black|heavy|l|r|b|[1-9]00)?(n|i|normal|italic)?$/;
function Ea(a){for(var b=a.f.length,c=0;c<b;c++){var d=a.f[c].split(":"),e=d[0].replace(/\+/g," "),f=["n4"];if(2<=d.length){var g;var k=d[1];g=[];if(k)for(var k=k.split(","),h=k.length,m=0;m<h;m++){var l;l=k[m];if(l.match(/^[\w-]+$/)){var n=Da.exec(l.toLowerCase());if(null==n)l="";else{l=n[2];l=null==l||""==l?"n":Ca[l];n=n[1];if(null==n||""==n)n="4";else var r=Ba[n],n=r?r:isNaN(n)?"4":n.substr(0,1);l=[l,n].join("")}}else l="";l&&g.push(l)}0<g.length&&(f=g);3==d.length&&(d=d[2],g=[],d=d?d.split(","):
g,0<d.length&&(d=Aa[d[0]])&&(a.c[e]=d))}a.c[e]||(d=Aa[e])&&(a.c[e]=d);for(d=0;d<f.length;d+=1)a.a.push(new H(e,f[d]))}};function Fa(a,b){this.c=a;this.a=b}var Ga={Arimo:!0,Cousine:!0,Tinos:!0};Fa.prototype.load=function(a){var b=new C,c=this.c,d=new va(this.a.api,z(c),this.a.text),e=this.a.families;xa(d,e);var f=new za(e);Ea(f);A(c,ya(d),D(b));F(b,function(){a(f.a,f.c,Ga)})};function Ha(a,b){this.c=a;this.a=b}Ha.prototype.load=function(a){var b=this.a.id,c=this.c.m;b?B(this.c,(this.a.api||"https://use.typekit.net")+"/"+b+".js",function(b){if(b)a([]);else if(c.Typekit&&c.Typekit.config&&c.Typekit.config.fn){b=c.Typekit.config.fn;for(var e=[],f=0;f<b.length;f+=2)for(var g=b[f],k=b[f+1],h=0;h<k.length;h++)e.push(new H(g,k[h]));try{c.Typekit.load({events:!1,classes:!1,async:!0})}catch(m){}a(e)}},2E3):a([])};function Ia(a,b){this.c=a;this.f=b;this.a=[]}Ia.prototype.load=function(a){var b=this.f.id,c=this.c.m,d=this;b?(c.__webfontfontdeckmodule__||(c.__webfontfontdeckmodule__={}),c.__webfontfontdeckmodule__[b]=function(b,c){for(var g=0,k=c.fonts.length;g<k;++g){var h=c.fonts[g];d.a.push(new H(h.name,ga("font-weight:"+h.weight+";font-style:"+h.style)))}a(d.a)},B(this.c,z(this.c)+(this.f.api||"//f.fontdeck.com/s/css/js/")+ea(this.c)+"/"+b+".js",function(b){b&&a([])})):a([])};var Y=new pa(window);Y.a.c.custom=function(a,b){return new ua(b,a)};Y.a.c.fontdeck=function(a,b){return new Ia(b,a)};Y.a.c.monotype=function(a,b){return new sa(b,a)};Y.a.c.typekit=function(a,b){return new Ha(b,a)};Y.a.c.google=function(a,b){return new Fa(b,a)};var Z={load:p(Y.load,Y)};"function"===typeof define&&define.amd?define(function(){return Z}):"undefined"!==typeof module&&module.exports?module.exports=Z:(window.WebFont=Z,window.WebFontConfig&&Y.load(window.WebFontConfig));}());

View File

@ -1,29 +0,0 @@
<div id="process" class="section">
<div class="w-container">
<h2>How we make brands thrive</h2>
<div class="divider grey"></div>
<div class="w-row">
<div class="w-col w-col-4">
<div class="grey-icon-wrapper">
<img src="https://assets.website-files.com/530ab3ac7b5bc4ca19000b96/530b7763b9b97cdf3e0008b9_icon-target.png" width="127" alt="" class="big-icon"/>
</div>
<h3>SET a target</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.</p>
</div>
<div class="w-col w-col-4">
<div class="grey-icon-wrapper push-top">
<img src="https://assets.website-files.com/530ab3ac7b5bc4ca19000b96/530b7772b9b97cdf3e0008bc_icon-design.png" width="127" alt="" class="big-icon"/>
</div>
<h3>design a solution</h3>
<p>Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.</p>
</div>
<div class="w-col w-col-4">
<div class="grey-icon-wrapper push-top">
<img src="https://assets.website-files.com/530ab3ac7b5bc4ca19000b96/530b7778b9b97cdf3e0008be_icon-chart.png" width="127" alt="" class="big-icon"/>
</div>
<h3>track the progress</h3>
<p>Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p>
</div>
</div>
</div>
</div>