starter layout structure

css/styles.css.tpl

@@ -0,0 +1,279 @@
+/*------------------------------------
+[Stylesheet - Template]
+Instructions: To go to stylesheet section, you can do a find for section title in square brackets. This will take you to the initial mention.
+
+1. [Basic Layout] Styling (all pages)
+    - 1.2 [Blog]
+    - 1.3 [Menu]
+    - 1.4 [Minicontact]
+    - 1.5 [Footer]
+2. [@CSS Variables] that need to be in @CSS for Stylus
+3. [Stylus Mixins + Variables]
+4. [Typography]
+5. [Reusable Styles]
+6. [Header] styling
+7. [Custom Section Styling]
+------------------------------------*/
+
+/*-- 1 - [Basic Layout] --*/
+* {
+  box-sizing: border-box;
+}
+#root {
+  max-width: 960px;
+  width: 100%;
+}
+.primary-column.has-content {
+  padding: 1rem 0;
+}
+.primary-column {
+  width: 69%;
+}
+.wide .primary-column {
+  width: 100%;
+  float: none;
+}
+.secondary-column  {
+  width: 31%;
+}
+.wide .secondary-column{
+  display:none;
+}
+
+/*-- 1.3 - [Menu] --*/
+/* = Horizontal Menu */
+
+/*-- 1.4 - [Minicontact] --*/
+#mini{}
+#minicontact {
+  margin:0;
+  padding:0 12px;
+}
+#minicontact label {
+  display:block;
+  margin:8px 10px 2px 0;
+  text-align:left;
+}
+.mini-header {
+  font-size: 1.5rem;
+  text-align:center;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding-left: 12px;
+  padding-right: 12px;
+}
+#minicontact input.form-btn {
+  width: calc(100% - 12px);
+  max-width: 250px;
+  margin: 0 auto;
+  margin-top: 0.5rem;
+  height: auto;
+  padding: 0.5rem 1rem;
+  font-family: {$body_font_family};
+  border: none;
+  text-transform: uppercase;
+}
+#minicontact input, #minicontact textarea{
+  font-size: 1rem;
+}
+#minicontact input{
+  height: 3rem;
+  padding: 6px;
+}
+#minicontact textarea{
+  height: 3.75rem;
+  padding: 6px;
+}
+.mini-submit{
+  text-align: center;
+}
+.mini-bottom .mini-field input  {
+  height: 2.5rem;
+  padding: 6px;
+  font-size: 1rem;
+}
+.mini-bottom .mini-field {
+  width: 33.33333%;
+  float: left;
+}
+.mini-bottom .mini-field, .mini-bottom .mini-textarea{
+  box-sizing: border-box;
+  padding: 1rem 6px;
+}
+.mini-bottom #minicontact textarea{
+  height: 5.625rem;
+  clear: both;
+}
+.secondary-column .content-pad {
+  padding: 0;
+}
+.secondary-column #mini {
+  border-top: 1px solid #bfbfbf;
+  padding: 2rem 1rem;
+}
+
+/*-- 1.5 - [Footer] --*/
+.footer-main {
+  position:relative;
+  width: 100%;
+  margin: 0 auto;
+}
+.footer-main a {
+  text-decoration: none;
+}
+.footer-main a:hover{
+}
+.footer-menu {
+  list-style:none;
+  display:block;
+  clear:left;
+  margin:0 auto;
+  padding: 0;
+}
+.footer-menu li {
+  display: inline;
+}
+.footer-menu a {
+  margin:0 4px;
+  white-space: nowrap;
+}
+.footer-logos img{
+  vertical-align: middle;
+  margin: 0 10px;
+}
+/* = Dakno Copyright */
+.dakno {
+  width: 100%;
+  padding: 0;
+}
+
+@media only screen and (max-width: 850px) {
+  .primary-column, .secondary-column{
+    width: 100%;
+    float:none;
+  }
+}
+
+@media only screen and (max-width: 650px) {
+  .mini-bottom .mini-field {
+    width: 100%;
+    float: none;
+  }
+  .mini-bottom .mini-field, .mini-bottom .mini-textarea{
+    padding: 0.25rem 0.5rem;
+  }
+}
+/* magnific reset (otherwise the close button is covered) */
+body.db_body_margin .mfp-wrap {
+  margin-top: 50px;
+  height: calc(100% - 50px);
+}
+/*-- 2 - [@CSS Variables] --*/
+/*-- 3 - [Stylus Mixins + Variables] --*/
+/*
+#header {
+  background-image: url(path + 'logo.png');
+}
+*/
+/*-- 4 - [Typography] --*/
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body * {
+  box-sizing: border-box;
+}
+body a:hover {
+  text-decoration: none;
+}
+[tabindex="-1"]:focus {
+  outline: 0;
+}
+/*-- 5 - [Reusable Styles] --*/
+/*-- 6 - [Header] --*/
+.top {
+  position: relative;
+}
+.header-main {
+  position: relative;
+  z-index: 30;
+  box-sizing: border-box;
+}
+.logo {
+  display: block;
+}
+.logo img {
+  max-width: 100%;
+  display: block;
+}
+.broker-logo img {
+  max-width: 100%;
+  display: block;
+}
+/*-- 7 - [Custom Section Styling] --*/
+.box-mid {
+  position: relative;
+  z-index: 20;
+}
+.secondary-column #mini {
+  margin-top: 2rem;
+}
+.footer-menu li {
+  display: block;
+  box-sizing: border-box;
+  padding: 0 1rem 0.5rem 1rem;
+}
+/* hero header */
+.box-custom-hero {
+  height: 240px;
+}
+.box-custom-hero .dak-table-align__cell {
+  background: rgba(0,0,0,0.45);
+}
+.box-custom-hero .page {
+  padding: 0;
+}
+.box-custom-hero .section {
+  padding: 0;
+}
+.box-custom-hero-form .dak-overlay-light-heavy {
+  color: #000;
+  text-shadow: none;
+}
+.box-custom-hero-form .standard-form label {
+  text-align: left;
+}
+.set-hero .d5m-module-header,
+.set-hero_form .d5m-module-header {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .box-custom-hero {
+    height: 480px;
+  }
+  .primary-column.has-content {
+    padding: 3rem 0;
+  }
+}
+@media screen and (min-width: 851px) {
+  .secondary-column .content-pad {
+    padding: 12px;
+  }
+  .secondary-column #minicontact .form-btn {
+    width: 100%;
+  }
+  .secondary-column #mini {
+    margin-top: 3rem;
+    padding: 0.5rem 1rem;
+    border-top: none;
+    border-left: 1px solid #bfbfbf;
+  }
+  .mini-bottom-wide #mini {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+  .mini-bottom-wide #minicontact {
+    max-width: 760px;
+    margin: 0 auto;
+  }
+}

images/index.html

@@ -0,0 +1,10 @@
+<html>
+<head>
+	<title>403 Forbidden</title>
+</head>
+<body>
+
+<p>Directory access is forbidden.</p>
+
+</body>
+</html>

main.tpl

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {$css}
+  <title>{$title}</title>
+
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {$meta}
+  {if $body_id eq 'index'}
+  <meta property="og:image" content="{$alt_file1}">
+  {/if}
+
+  {$scripts_head}
+</head>
+<body id="{$body_id}" class="{$body_classes}">
+  <div id="divback" class="section-{$section}">
+    <div class="top {if $body_id eq 'index'}top-index {/if}">
+      <header class="header-main dak-pad-12">
+        <a href="#main" class="dak-skip-to-main">Skip to main content</a>
+        <div class="dak-contain-xxl">
+          <div class="dak-flex-container dak-flex-v-center">
+            <div class="dak-cell dak-shrink">
+              <a href="{$site_url}" class="logo">
+                <img src="{$layout_url}/images/logo.svg" alt="">
+              </a>
+            </div>
+            <div class="dak-cell dak-auto">
+              {$collapsed_menu}
+              {$expanded_menu}
+            </div>
+            <div class="dak-cell dak-shrink">
+              {if isset($agent_phone) && $agent_phone neq ''}
+              <ul class="dak-buttons dak-buttons-left">
+                <li>
+                  <a
+                    href="tel:{$agent_phone|regex_replace:'/[-_() ]/':''}"
+                    aria-label="Call {$agent_phone}"
+                  >
+                    <img src="{$site_url}/icons/base/cellphone/main" alt="">
+                    {$agent_phone}
+                  </a>
+                </li>
+              </ul>
+              {/if}
+              [social icon_color="white" size="24"]
+            </div>
+          </div>
+        </div>
+      </header>
+    </div> <!--end top-->
+
+    <main role="main" id="main" tabindex="-1">
+    {if $body_id eq 'index'}
+      <section class="dak-py-3 dak-px-1">
+        <div class="dak-contain-xl">
+          <h1 class="dak-display-a"></h1>
+        </div>
+      </section>
+      {/if}
+      {* interior hero pages *}
+      {if isset($options.set) and ($options.set eq 'hero' || $options.set eq 'hero_form')}
+      <section 
+        class="box-custom-hero {if $options.set eq 'hero_form'}box-custom-hero-form {/if}dak-table-align dak-text-light dak-text-center dak-text-shadow dak-bg-image lazyload" 
+        data-bg="{$site_data_url}/editor_assets/hero/bg-{$options.setpage}.jpg"
+      >
+        <div class="dak-table-align__cell dak-py-5 ">
+        {if $options.set eq 'hero_form'}
+          {assign var="hero_form_bg" value="dak-overlay-light-heavy"}
+          {if $options.hero_form_bg eq "dark"}
+            {assign var="hero_form_bg" value="dak-overlay-dark-heavy"}
+          {elseif $options.hero_form_bg eq "none"}
+            {assign var="hero_form_bg" value=""}
+          {/if}
+          {assign var="hero_form_position" value=""}
+          {if $options.hero_form_position eq "left"}
+            {assign var="hero_form_position" value="dak-flex-reverse-row-md"}
+          {elseif $options.hero_form_position eq "full"}
+            {assign var="hero_form_position" value="dak-flex-center"}
+          {/if}
+          {assign var="hero_form_width" value="dak-grid-lg-6"}
+          {if $options.hero_form_position eq "full"}
+            {assign var="hero_form_width" value=""}
+          {/if}
+          <div class="dak-contain-xl {if isset($options.hero_form_position) && $options.hero_form_position eq 'full'}dak-text-center {else}dak-text-left {/if}">
+            <div class="dak-flex-container dak-flex-v-center {$hero_form_position}">
+              <div class="dak-grid-12 dak-py-2 dak-px-1 {$hero_form_width}">
+                <div class="dak-contain-sm" style="width: 100%;">
+                  {if $section_header && $section_header neq ''}
+                  <p class="h2 section">{$section_header}</p>
+                  {/if}
+                  {if $page_header && $page_header neq ''}
+                  <h1 class="page">{$page_header}</h1>
+                  {/if}
+                </div>
+              </div>
+              <div class="dak-grid-12 {$hero_form_width} {if $options.hero_form_bg neq 'none'}dak-py-2 dak-px-1 {/if}">
+                <div class="dak-contain-sm" style="width: 100%;">
+                  <div class="dak-py-2 dak-px-1 {$hero_form_bg}">
+                    {$system}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        {else}
+          <div class="dak-contain dak-px-3">
+            {if $section_header && $section_header neq ''}
+            <p class="h2 section">{$section_header}</p>
+            {/if}
+            {if $page_header && $page_header neq ''}
+            <h1 class="page">{$page_header}</h1>
+            {/if}
+          </div>
+        {/if}
+        </div>
+      </section>
+      {/if}
+      {* end interior hero pages *}
+      <div id="root">
+        <div class="inner-content">
+          {if $body_id neq 'blog_template'}
+          <div id="primary-column" class="primary-column {if $content || $system || $page_options}has-content {/if}" data-role="page">
+            <div class="content-pad" data-role="content">
+          {/if}
+            {if !(isset($options.set) and ($options.set eq 'hero' || $options.set eq 'hero_form'))}
+            {if $section_header neq ''}
+              <p class="section">{$section_header}</p>
+            {/if}
+            {if ($body_id neq 'neighborhood' and $body_id neq 'condo') and ($page_header neq '')}
+              <h1 class="page">{$page_header}</h1>
+            {/if}
+            {/if}
+
+            <div id="content_body" class="content_body">
+              {if $content}
+                {$content}
+              {/if}
+              {if $body_id eq 'mlst-global'}
+                <div id="idxStart" style="display: none;"></div>
+                <div id="idxStop" style="display: none;"></div>
+              {/if}
+            </div>
+            <div id="system_body">
+              {if !(isset($options.set) and $options.set eq 'hero_form')}
+                {$system}
+              {/if}
+            </div>
+            <div id="options_body">
+              {$page_options}
+            </div>
+          {if $body_id neq 'blog_template'}
+            </div>{* /content pad *}
+          </div>{* /primary column *}
+          {if !isset($options.mls_link) and !isset($options.wide)}
+          <div id="secondary-column" class="secondary-column" >
+            <div class="content-pad">
+              {$mini_contact|replace:"Questions? Just Ask!":"Questions? Ask Away."}
+              {if $widget neq ""}
+              <div class="sidebar-widget">
+                {$widget}
+              </div>
+              {/if}
+              {$office_sidebar}
+            </div>
+          </div>{* /secondary column *}
+          {/if}
+          {/if}
+          <div class="clear"></div>
+        </div>{* /inner-content *}
+      </div>{* /root *}
+      {if isset($options.wide) && $options.wide eq 'yes' && isset($options.mini) && $options.mini eq 'yes'}
+        <div class="mini-bottom mini-bottom-wide">
+          {$mini_contact|replace:"Questions? Just Ask!":"Questions? Ask away."}
+        </div>
+      {/if}
+      <div class="clear"></div>
+    </main>
+    <footer class="footer-main dak-footer-main">
+      <div class="dak-contain-xxl">
+        <div class="dak-flex-container dak-flex-v-center">
+          <div class="dak-cell dak-shrink dak-pad-12">
+            <a href="{$site_url}" class="logo">
+              <img src="{$layout_url}/images/logo.svg" alt="">
+            </a>
+          </div>
+          <div class="dak-cell dak-auto dak-pad-12">
+            {$footer_menu|replace:"|":""}
+          </div>
+        </div>
+        [social size="24"]
+        <div class="footer-contact">
+          {if isset($alt_textarea1) && $alt_textarea1 neq ''}
+            {$alt_textarea1}
+          {/if}
+        </div>
+        <div class="footer-logos">
+          <img 
+            src="{$site_url}/icons/logos/realtor/000000"
+            width="45"
+            height="45"
+            alt="REALTOR&reg;"
+          />
+          <img 
+            src="{$site_url}/icons/logos/eho/000000"
+            width="45"
+            height="45"
+            alt="Equal Housing Opportunity"
+          />
+        </div>
+        <div class="dakno">
+          <p>Copyright &copy; {$smarty.now|date_format:"%Y"} |
+            Information deemed reliable, but not guaranteed. |
+            <a href="{$site_url}/privacy.php">Privacy Policy</a> | 
+            <a href="{$site_url}/accessibility">Accessibility</a>
+          </p>
+          {$dakno_footer}
+        </div>{* /dakno *}
+      </div>
+    </footer>{* /footer *}
+  </div>{* /divback *}
+
+  <script type="text/javascript">
+    function menuwidthcheck() {
+      var mini = document.querySelector('#mini');
+      if (mini && window.matchMedia('(min-width: 851px)').matches && mini.classList.contains('mini-bottom')) {
+        mini.classList.remove('mini-bottom');
+      } else if (mini && !(window.matchMedia('(min-width: 851px)').matches)) {
+        mini.classList.add('mini-bottom');
+      }
+    }
+    menuwidthcheck();
+    window.addEventListener('resize', menuwidthcheck);
+    window.addEventListener('orientationchange', menuwidthcheck);
+  </script>
+
+  {$scripts_body}
+</body>
+</html>