<file_sep>$('#ham, #menu-back').click(function(e) {
  e.preventDefault();
  if($('#menu').hasClass('in')) {
    resetMenu();
  } else {
    var overlayHeight = $('body').height() + 'px';
    $('#menu').addClass('in');
    $('#menu').css({'height': overlayHeight });
    $('#nav-overlay').css({'height': overlayHeight, 'display': 'block' });
  }
});

$('#nav-overlay').click(function() {
  resetMenu();
});

$(window).resize(function() {
  var width = $(this).width();
  if(width > 768) {
    resetMenu();
    $('#menu').css({'height':'auto'});
  }
});

function resetMenu() {
  $('#menu').removeClass('in');
  $('#nav-overlay').css({'display':'none'});
  setTimeout(function() {
    $('#menu').css({'height':'auto'});
  }, 300);
}<file_sep>theme = "digitalservices"
languageCode = "en-us"
title = "San Francisco Digital Services"
MetaDataFormat = "toml"
baseURL = "/"
<file_sep>+++
type = "default"
+++
<!-- Header -->
<div id="background-image" style="background-image:url(/assets/sf_city_hall-bg.jpg);"></div>
<div id="home" class="main">
  <h1 class= "title">San Francisco Digital Services</h1>
  <h3>Making services for everyone</h3>
  <!-- <br/><br/><br/>
    <a class="btn-custom" href="/#contact">Read the Full Report (PDF)</a> -->
</div>
<!-- Header End -->
<!-- About -->
<div id="about">
  <div class="container">
    <!-- <h2 class="sub-heading">About</h2><div class="separator center"></div> -->
    <div class="about-box">
      <div class="about-body col-xs-12 col-sm-10 col-sm-offset-1 col-md-6 col-md-offset-3">
        <p>San Francisco Digital Services works with other City departments to improve public services. We use technology to make it easier for people to get things done.</p>
        <p>We're working on critical issues like <a href="https://housing.sfgov.org/" target="_blank"> affordable housing</a>, <a href="https://businessportal.sfgov.org/" target="_blank">small businesses</a>, <a href="https://immigrants.sfgov.org/" target="_blank">legal aid for immigrants</a>, and more. Our team is also rebuilding the city’s website from the ground up.  This means taking a service-led approach so that anyone using the site can get what they need.</p>
        <p>Our work goes beyond websites. We’re re-thinking how public services are designed, by understanding what our users need and building with an agile approach.</p>
        <!--<p><a href="ourwork.html">Read more about our work&nbsp;&#187;</a></p>-->  
        <br/><br/><br/>
        <a id="btn-cdso" class="btn-custom2 center" href="/joinus.html">Join us</a>
        <br/><br/><br/><br/>
      </div>
    </div>
  </div>
</div>
<!-- About End -->
<!--   <div id="separator-image" style="background-image:url('assets/bg-icons.png');"></div>
  -->
<!-- Values -->
<div id="separator-image">
  <div class="container">
    <div class="col-xs-12 col-md-4 quote-photo">
      <img src="/assets/Carmen.jpg" alt="<NAME>, City Administrator">
    </div>
    <div class="col-xs-12 col-md-8 carmen-quote">
      <p class="separator-quote-2">San Francisco Digital Services is part of the San Francisco City Administrator's office, led by City Administrator <NAME>.
      </p>
      <p class="separator-quote-2"><NAME> was the elected Assessor for the City and County of San Francisco. Prior to becoming Assessor, <NAME> was an elected representative on the San Francisco Board of Supervisors from 2007 to 2013. She served as Deputy Director of the Mayor’s Office of Public Policy and Finance from 2004 to 2007. Ms. Chu has over 16 years of governmental management and finance experience with the City and County of San Francisco.</p>
      <p class="separator-quote-2"> 
      She believes good government works for all people. A financial steward and proven leader, she stands for transparency, accountability and fairness.</p>
      
    </div>
  </div>
</div>
<!-- Values End -->
<!-- Services -->
<div id="top3" class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 blog">
      
      <a href="https://medium.com/san-francisco-digital-service" target="_blank"><img src="/assets/icons/blog.svg" /></a>
      <h3>Our Blog</h3>
      <p>Read our latest updates.<br/>
        <a href="https://medium.com/san-francisco-digital-service" target="_blank">Visit our blog&nbsp;&#187;</a>
      </p>
    </div>
    <!--blog-->
    <div class="col-xs-12 col-md-4 team">
      <a href="/joinus.html"><img src="/assets/icons/team.svg" /></a>
      <h3>Join us</h3>
      <p>We're technologists brought together by our love of San Francisco.<br/>
        <a href="/joinus.html">Join our team&nbsp;&#187;</a>
      </p>
    </div>
    <!--team-->
    <div class="col-xs-12 col-md-4 participate">
      <a href="https://www.surveymonkey.com/r/ResidentsImprovingSanFranciscoCityServices?source=sfds_website8" target="_blank"><img src="/assets/icons/participate.svg" /></a>
      <h3>Participate</h3>
      <p>If you're an SF resident, sign up to hear about user testing opportunities.<br/>
        <a href="https://www.surveymonkey.com/r/ResidentsImprovingSanFranciscoCityServices?source=sfds_website" target="_blank">Sign up for research&nbsp;&#187;</a>
      </p>
    </div>
    <!--team-->
  </div>
  <!--row-->    
</div>
<!--container-->
<!-- Services End -->
{{% subscribeform %}}
<file_sep>#!/bin/bash

set -eo pipefail

static_branch=$CIRCLE_BRANCH-static-ci

cd ~/hugo

echo "Run hugo to build static site"
HUGO_ENV=production hugo -v

git config --global user.email $GH_EMAIL
git config --global user.name $GH_NAME

git fetch && git checkout -b origin/$static_branch $static_branch || git checkout -b $static_branch
mkdir -p ../tmp/.circleci && cp -a .circleci/. ../tmp/.circleci/. # copy circleci config to tmp dir
git rm -rf . # remove everything
mv public/* . # move hugo generated files into root of branch dir
cp -a ../tmp/.circleci . # copy circleci config back to prevent triggering build on ignored branches
git add -A

# this is necessary because a separate manual deploy (which serves the gh-pages branch) happens on a city server
# because the domain digitalservices.sfgov.org is in use internally
if [ $CIRCLE_BRANCH == $SOURCE_BRANCH ]; then
  # main branch, force push gh-pages
  git commit -m "build $CIRCLE_SHA1 to gh-pages"
  git push -f origin $static_branch:gh-pages
fi
<file_sep>$('#ham, #menu-back').click(function(e) {
  e.preventDefault();
  if($('#menu').hasClass('in')) {
    resetMenu();
  } else {
    var overlayHeight = $('body').height() + 'px';
    $('#menu').addClass('in');
    $('#menu').css({'height': overlayHeight });
    $('#nav-overlay').css({'height': overlayHeight, 'display': 'block' });
  }
});

$('#nav-overlay').click(function() {
  resetMenu();
});

$(window).resize(function() {
  var width = $(this).width();
  if(width > 768) {
    resetMenu();
    $('#menu').css({'height':'auto'});
  }
});

function resetMenu() {
  $('#menu').removeClass('in');
  $('#nav-overlay').css({'display':'none'});
  setTimeout(function() {
    $('#menu').css({'height':'auto'});
  }, 300);
}

(function() {
  $('#skip-link').click(function() {
    $(window).scrollTop($('.main').position().top - $('.navbar-brand.logo img').height());
    $('.main').attr('tabindex', '-1');
    $('.main').focus();
  });
  $('#skip-link').on('focus', function() {
    $(this).addClass('skip-link-active');
    var minLeftPos = $('#skip-link').position().left + $('#skip-link').width();
    var logoLeftPos = $('.navbar-brand.logo').position().left;
    if(logoLeftPos < minLeftPos) $('.navbar-brand.logo').css({'margin-left': (parseFloat($('.navbar-brand.logo').css('margin-left').replace('px','')) + $(this).width()) + 'px'});
  });
  $('#skip-link').on('blur', function() {
    $(this).removeClass('skip-link-active');
    $('.navbar-brand.logo').attr('style', '');
  });
})();<file_sep>[![CircleCI](https://circleci.com/gh/SFDigitalServices/sfdigitalservices.svg?style=svg)](https://circleci.com/gh/SFDigitalServices/sfdigitalservices)

# Build locally
## Get Hugo
### via homebrew:
```
$ brew install hugo
```
### or binary install:
Pick the appropriate binary from here:
[https://github.com/gohugoio/hugo/releases](https://github.com/gohugoio/hugo/releases)

## Generate site

```
$ hugo
```

## Serve it up
```
$ hugo server -w
```
Hit [http://localhost:1313](http://localhost:1313) to verify that the site was generated correctly

## Create a new page
Creating a new page can be as simple as creating a file (xyz.html) in the `/content` folder.  Or via the command line (at the root directory of this repo):

```
$ hugo new xyz.html
```
These new pages will follow the layout template in `/themes/digitalservices/_default/single.html`

# How to add team members to website

* When a new person joins the team, get their profile photo in .jpg or .png formats
* Add their profile photo to the `themes/static/assets/staff-imgs` folder, name it like this: `firstname.jpg` or `firstname.png`
* Follow the instructions above to build the site locally and preview changes.
* Edit the `content/ourteam.html` file, add team members in `<div id="staff">` by adding a new `<li class="col-xs-12 col-md-6 col-lg-4">` block
* Make sure that their name, job title and photo are correct
* Submit a PR 
* Once your PR has been approved by a reviewer, who will also send you a preview of your changes (in the form of a Pantheon link), check your preview then merge your PR. If you are not happy with the changes, commit to the same branch, which will generate another Pantheon preview.
* Merge your PR
* Reach out to someone with server access (currently, that would be @skinnylatte, @aekong and @henryjiang-sfgov) to deploy with the following commands

As of August 2021, you no longer have sudo access to this server. This readme file is being updated to remove all mention of using sudo for git fetch.

```
$ cd /opt/rh/httpd24/root/var/www/html/digitalservices/public
$ git fetch --all
$ git reset --hard origin/gh-pages
```

## Notes
* Never ever edit files in /public directly (this is hugo generated)
* This repo is a very basic site, with very few (what hugo calls) content types
* Refer to Hugo documentation at [https://gohugo.io/documentation/](https://gohugo.io/documentation/)
<file_sep>---
aliases:
  - /joinus.html
type: jobs
roles:
  - title: Program Manager, Strategic Initiatives
    url: https://careers.sf.gov/role/?id=3743990000627536
  - title: Senior QA Engineer
    url: https://jobs.smartrecruiters.com/ni/CityAndCountyOfSanFrancisco1/070dc0d7-d018-4f52-85fc-34756d7ca78c-senior-quality-assurance-engineer-digital-services-1043-
  - title: Digital Translation Project Manager
    url: https://jobs.smartrecruiters.com/ni/CityAndCountyOfSanFrancisco1/213d1773-015a-4f46-a3f7-611df281cc9d-digital-translations-project-manager-digital-services-9976-1053-
  - title: Analytics Engineer, DataSF
    url: https://jobs.smartrecruiters.com/CityAndCountyOfSanFrancisco1/3743990000587056-analytics-engineer-datasf-1042-
  - title: Product Manager for Platforms and Infrastructure
    url: https://jobs.smartrecruiters.com/CityAndCountyOfSanFrancisco1/743999801085935-product-manager-for-platforms-infrastructure-digital-services-9976-1053-
  - title: Senior Service Designer
    url: https://jobs.smartrecruiters.com/CityAndCountyOfSanFrancisco1/743999807919460-senior-service-designer-digital-services-9976-1054-
  - title: Bloomberg Data Program Manager, DataSF
    url: https://jobs.smartrecruiters.com/CityAndCountyOfSanFrancisco1/743999811945241-bloomberg-data-program-manager-datasf-1054-
  - title: Bloomberg Data Engineer, DataSF
    url: https://jobs.smartrecruiters.com/CityAndCountyOfSanFrancisco1/743999812423990-bloomberg-data-engineer-datasf-1043-
---

{{% subscribeform %}}
<file_sep><!doctype html>

<html>

<head>

  <meta name="viewport" content="width=device-width" />

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Thank you for submitting your application</title>

  <style>

    /* -------------------------------------

        GLOBAL RESETS

    ------------------------------------- */



    /*All the styling goes here*/



    img {

      border: none;

      -ms-interpolation-mode: bicubic;

      max-width: 100%;

    }

    body {

      background-color: #f6f6f6;

      font-family: sans-serif;

      -webkit-font-smoothing: antialiased;

      font-size: 14px;

      line-height: 1.4;

      margin: 0;

      padding: 0;

      -ms-text-size-adjust: 100%;

      -webkit-text-size-adjust: 100%;

    }

    table {

      border-collapse: separate;

      mso-table-lspace: 0pt;

      mso-table-rspace: 0pt;

      width: 100%; }

    table td {

      font-family: sans-serif;

      font-size: 14px;

      vertical-align: top;

    }

    /* -------------------------------------

        BODY & CONTAINER

    ------------------------------------- */

    .body {

      background-color: #f6f6f6;

      width: 100%;

    }

    /* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */

    .container {

      display: block;

      Margin: 0 auto !important;

      /* makes it centered */

      max-width: 580px;

      padding: 10px;

      width: 580px;

    }

    /* This should also be a block element, so that it will fill 100% of the .container */

    .content {

      box-sizing: border-box;

      display: block;

      Margin: 0 auto;

      max-width: 580px;

      padding: 10px;

    }

    /* -------------------------------------

        HEADER, FOOTER, MAIN

    ------------------------------------- */

    .main {

      background: #ffffff;

      border-radius: 3px;

      width: 100%;

    }

    .wrapper {

      box-sizing: border-box;

      padding: 20px;

    }

    .content-block {

      padding-bottom: 10px;

      padding-top: 10px;

    }

    .footer {

      clear: both;

      Margin-top: 10px;

      text-align: center;

      width: 100%;

    }

    .footer td,

    .footer p,

    .footer span,

    .footer a {

      color: #999999;

      font-size: 12px;

      text-align: center;

    }

    /* -------------------------------------

        TYPOGRAPHY

    ------------------------------------- */

    h1,

    h2,

    h3,

    h4 {

      color: #000000;

      font-family: sans-serif;

      font-weight: 400;

      line-height: 1.4;

      margin: 0;

      margin-bottom: 30px;

    }

    h1 {

      font-size: 35px;

      font-weight: 300;

      text-align: center;

      text-transform: capitalize;

    }

    p,

    ul,

    ol {

      font-family: sans-serif;

      font-size: 14px;

      font-weight: normal;

      margin: 0;

      margin-bottom: 15px;

    }

    p li,

    ul li,

    ol li {

      list-style-position: inside;

      margin-left: 5px;

    }

    a {

      color: #3498db;

      text-decoration: underline;

    }

    /* -------------------------------------

        BUTTONS

    ------------------------------------- */

    .btn {

      box-sizing: border-box;

      background-color: #3498db;

      border: solid 1px #3498db;

      border-radius: 5px;

      box-sizing: border-box;

      color: #ffffff;

      cursor: pointer;

      display: inline-block;

      font-size: 14px;

      font-weight: bold;

      margin: 0;

      padding: 12px 25px;

      text-decoration: none;

      text-transform: capitalize;

    }

    /* -------------------------------------

        OTHER STYLES THAT MIGHT BE USEFUL

    ------------------------------------- */

    .last {

      margin-bottom: 0;

    }

    .first {

      margin-top: 0;

    }

    .align-center {

      text-align: center;

    }

    .align-right {

      text-align: right;

    }

    .align-left {

      text-align: left;

    }

    .clear {

      clear: both;

    }

    .mt0 {

      margin-top: 0;

    }

    .mb0 {

      margin-bottom: 0;

    }

    .preheader {

      color: transparent;

      display: none;

      height: 0;

      max-height: 0;

      max-width: 0;

      opacity: 0;

      overflow: hidden;

      mso-hide: all;

      visibility: hidden;

      width: 0;

    }

    .powered-by a {

      text-decoration: none;

    }

    hr {

      border: 0;

      border-bottom: 1px solid #f6f6f6;

      Margin: 20px 0;

    }

    /* -------------------------------------

        RESPONSIVE AND MOBILE FRIENDLY STYLES

    ------------------------------------- */

    @media only screen and (max-width: 620px) {

      table[class=body] h1 {

        font-size: 28px !important;

        margin-bottom: 10px !important;

      }

      table[class=body] p,

      table[class=body] ul,

      table[class=body] ol,

      table[class=body] td,

      table[class=body] span,

      table[class=body] a {

        font-size: 16px !important;

      }

      table[class=body] .wrapper,

      table[class=body] .article {

        padding: 10px !important;

      }

      table[class=body] .content {

        padding: 0 !important;

      }

      table[class=body] .container {

        padding: 0 !important;

        width: 100% !important;

      }

      table[class=body] .main {

        border-left-width: 0 !important;

        border-radius: 0 !important;

        border-right-width: 0 !important;

      }

      table[class=body] .btn table {

        width: 100% !important;

      }

      table[class=body] .btn a {

        width: 100% !important;

      }

      table[class=body] .img-responsive {

        height: auto !important;

        max-width: 100% !important;

        width: auto !important;

      }

    }

    /* -------------------------------------

        PRESERVE THESE STYLES IN THE HEAD

    ------------------------------------- */

    @media all {

      .ExternalClass {

        width: 100%;

      }

      .ExternalClass,

      .ExternalClass p,

      .ExternalClass span,

      .ExternalClass font,

      .ExternalClass td,

      .ExternalClass div {

        line-height: 100%;

      }

      .apple-link a {

        color: inherit !important;

        font-family: inherit !important;

        font-size: inherit !important;

        font-weight: inherit !important;

        line-height: inherit !important;

        text-decoration: none !important;

      }

      .btn-primary table td:hover {

        background-color: #34495e !important;

      }

      .btn-primary a:hover {

        background-color: #34495e !important;

        border-color: #34495e !important;

      }

    }

  </style>

</head>

<body class="">

<table role="presentation" border="0" cellpadding="0" cellspacing="0" class="body">

  <tr>

    <td>&nbsp;</td>

    <td class="container">

      <div class="content">

        <table role="presentation" class="main">

          <tr>

            <td class="wrapper">

              <table role="presentation" border="0" cellpadding="0" cellspacing="0">

                <tr>

                  <td>

                    <h2>Thank you for submitting your application</h2>

                    <p>Dear {{ data.name }},</p>

					{% if data.outdoorspace.sidewalk %}
					<p>You are registered to use sidewalk space at your location address.</p>                                        
					<p>You may start using this space in 2 business days. We will contact you if we find issues with your application, proposed location, or insurance documents.</p>
					<p>Print <a href="https://sfdsoewd.blob.core.usgovcloudapi.net/permits/ProvisionalPermit-SidewalkSeatingOrRetail.pdf" target="_blank">this PDF of your permit</a> to display.  This provisional permit covers sidewalk seating or retail use only. We will also email you a legally binding permit later this week. This temporary permit is valid until December 31, 2020.</p>                                        
					<p>You must provide and install diverters around your outdoor space before you operate.</p>
					{% endif %}
					
					{% if data.outdoorspace.parkingLane %}
					<p>We will review your application for the parking lane. You may not use the parking lane now. We will contact you with next steps within 3 business days.</p>
					{% endif %}
															
					{% if data.outdoorspace.sidewalk or data.curbspace == "socialDistancingSpaceForYourCustomersToStandInLine" or data.curbspace == "seatingOrDining" or data.curbspace == "retailUse" %}					
                    <p>You must follow these rules:</p>
					
					<ul>
						<li>Follow physical distancing protocols</li>
						<li>Display a copy of the permit during business hours</li>
						<li>Comply with the Americans with Disabilities Act (ADA) and the SF Better Streets Plan</li>
						<li>Keep curb ramps, doors, driveways, fire escapes, or Fire Department connections free of obstructions</li>
						<li>Keep furniture in the approved area</li>
						<li>Don’t place or store food trays or carts on the sidewalk or parking lane</li>
						<li>Keep the parking lane and sidewalk clean of trash, debris, and food waste at all times</li>
						<li>Don’t obstruct the sidewalk next to a bus stop or blue curb zone</li>

                    </ul>
					{% endif %}
					
					{% if data.outdoorspace.sidewalk %}
                    <p>Additional sidewalk rules</p>
					
					<ul>
						<li>Make and maintain a straight, clear travel path at least 6 feet (2 yards) wide across your entire sidewalk</li>
						<li>Provide and use approved diverters</li>
						<li>Keep furniture and diverters clear and free of advertising</li>
						<li>Bring in furniture and diverters when you close every day</li>
					</ul>
					{% endif %}

					{% if data.curbspace == "seatingOrDining" %}
                    <p>Additional parking lane seating rules</p>
					
					<ul>
						<li>Add approved traffic barriers</li>
						<li>Provide an ADA accessible table and route if another is not available</li>
					</ul>
					{% endif %}
					
					<p>We will visit your business location to inspect your approved area. We may revoke your permit.</p>

					<p><a href="https://sf.gov/information/what-expect-after-you-apply-use-sidewalk-or-parking-lane" target="_blank">What to expect after you apply</a></p> 

					<p>Email us at <a href="mailto:<EMAIL>"><EMAIL><a/></p>
                       
					<p>To track the progress of your application, please use the Shared Spaces tracker: <a href="https://sf.gov/shared-spaces-tracker" target="_blank">https://sf.gov/shared-spaces-tracker</a></p>
                  </td>

                </tr>

              </table>

            </td>

          </tr>

        </table>

        <div class="footer">

          

        </div>

      </div>

    </td>

    <td>&nbsp;</td>

  </tr>

</table>

</body>

</html>