Make page break only where wanted

README.md

@@ -6,6 +6,15 @@ Theme to build a customizeable printable HTML/CSS CV.
 # Features
  - Online CV with minor responsiveness
  - Printable as A4 PDF
+ - HTML5 + CSS3
+ - Customizeable colors
+
+## Print your PDF CV
+When printing the page in the browser, you'll get a formatted A4 page that can be used as your PDF resume. 
+If your page holds more than 1 A4 page, the content will be divided into the given amount of pages.
+
+For better formatting, you can set the number of pages in the `config.toml` file.
+
 
 # Download 
 Clone the repo: `git clone https://github.com/ineesalmeida/almeida-cv`
@@ -19,18 +28,18 @@ To use almeida-cv theme you need to install Hugo by following https://gohugo.io/
 hugo new site <your website's name>
 cd <your website's name>/themes/
 ```
-Clone the theme (`git clone https://github.com/ineesalmeida/almeida-cv`).
-Replace the "config.toml" file that in the project's root directory with `themes/almeida-cv/exampleSite/config.toml`.
-Replace the "content.yaml" file that in the project's root directory with `themes/almeida-cv/exampleSite/data/content.yaml`.
+Clone the theme (`git clone https://github.com/ineesalmeida/almeida-cv`) into your themes folder.
+Replace the files in your root's directory with the ones on `themes/almeida-cv/exampleSite`.
 ```
 hugo server -D
 ```
-The theme is alive on http://localhost:1313/ 
+The theme is alive on http://localhost:1313/.
 
 ## Customization
-You can change the theme colors in the `config.toml` file.
+You can change the theme colors and number of pages in the `config.toml` file.
 Your professional data should be added in the `data/content.yaml`.
 
+
 # Building 
 To generate your site in the public folder, execute the following:
 ```
@@ -42,5 +51,6 @@ within the root of your project.
 # Contributing 
 Post bugs and contributions to the issue tracker. Or make a pull request.
 
+
 # License 
-This template is 100% FREE as long as you keep the footer attribution link. You do not have the rights to resell, sublicense or redistribute (even for free) the template on its own or as a separate attachment from any of your work. If you’d like to use this template without the footer attribution link, you can buy the commercial license. Send an email to contact@ines-almeida.com.
+This template is 100% FREE as long as you keep the footer attribution link (which is NOT visible when you print you PDF CV). You do not have the rights to resell, sublicense or redistribute (even for free) the template on its own or as a separate attachment from any of your work. If you’d like to use this template without the footer attribution link, you can buy the commercial license. Send an email to contact@ines-almeida.com.

assets/sass/_layout.scss

@@ -8,7 +8,7 @@
         height: 100%;
         padding: 3rem 4rem;
 
-        @media print {
+        @media screen {
             &::after{
                 content: "2020 © by Inês Almeida   |   ines-almeida.com";
                 height: 4rem;

assets/sass/_mixins.scss

@@ -21,4 +21,10 @@
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
+}
+
+@mixin avoid-break {
+    @media print {
+        page-break-inside: avoid;
+    }
 }

assets/sass/components/_education.scss

@@ -0,0 +1,5 @@
+.education {
+    &__item {
+        @include avoid-break;
+    }
+}

assets/sass/components/_experience.scss

@@ -1,7 +1,10 @@
 .experience {
     &__item {
         display: block;
-        margin-bottom: 1.5rem;
+        @include avoid-break;
+        &:not(:first-child) {
+            padding-top: 1.5rem;
+        }
     }
 
     &__header,

assets/sass/components/_interests.scss

@@ -4,6 +4,7 @@
     column-count: 2;
     width: 100%;
     text-align: right;
+    @include avoid-break;
 
     &__item:nth-child(n+4) {
         text-align: left;

assets/sass/components/_side_section.scss

@@ -1,6 +1,7 @@
 .sideSection {
     display: block;
     margin-bottom: 3rem;
+    @include avoid-break;
 
     &__heading {
         width:100%;

assets/sass/main.scss

@@ -15,6 +15,7 @@ $color-right-col: {{ .Site.Params.colorRightColumnBackground | default "#f5f5f5"
 @import "components/section";
 @import "components/side_section";
 @import "components/experience";
+@import "components/education";
 @import "components/contact";
 @import "components/avatar";
 @import "components/skills";