resume_builder/lib/views/layout.ex

defmodule CvGenView.Layout do
  def resets(),
    do: """
    @charset "utf-8";

    @-webkit-viewport {
      width: device-width;
    }

    @-moz-viewport {
      width: device-width;
    }

    @-ms-viewport {
      width: device-width;
    }

    @-o-viewport {
      width: device-width;
    }

    @viewport {
      width: device-width;
    }

    * {
      box-sizing: border-box;
    }

    h1, h2, h3, h4, h5, h6 {
      font-size: 1em;
    }

    ol,
    ul {
      list-style: none;
      padding-inline: 0;
    }

    dd {
      margin: 0;
    }
    """

  def page_css(),
    do: """
    html {
      background-color: rgb(51, 73, 96);
    }

    body {
      width: 90%;
      max-width: 120ch;
      margin-top: 2em;
      margin-bottom: 2em;
      margin-right: auto;
      margin-left: auto;
      padding: 1em;
      background-color: white;
      font-family: 'Open Sans', Arial, Tahoma;
      font-weight: 400;

      display: grid;
      grid-template-areas:
      "basics basics"
      "about contact"
      "work skills"
      "work education"
      "work languages"
      "work _";
      grid-template-columns: 2fr 1fr;
      column-gap: 1em;
      row-gap: 0.5em;
    }

    #basics {
      grid-area: basics;
      border-bottom: lightgray solid 0.1em;
    }
    #about {
      grid-area: about;
    }
    #work {
      grid-area: work;
    }
    #education {
      grid-area: education;
    }
    #skills {
      grid-area: skills;
    }
    #languages {
      grid-area: languages;
    }

    .section > h1 {
      color: #227c74;
      text-transform: uppercase;
      font-size: larger;
    }

    a {
      color: #337ab7;
    }

    a:focus, a:hover {
      color: #23527c;
    }
    """

  def page_print_css(),
    do: """
      @media print {
        html {
          background-color: initial;
        }

        body {
          width: 100%;
          grid-template-areas:
          "basics basics"
          "about contact"
          "education skills"
          "education languages"
          "work work";
          grid-template-columns: 2fr 1fr;
          margin-top: 0;
          margin-bottom: 0;
          padding: 0;
          font-size: 14.7px;
        }

        #education {
          align-self: center;
        }

        .work {
          break-inside: avoid;
        }
      }
    """
end