Make page break only where wanted

8 files changed, 35 insertions, 8 deletions

diff --git a/README.md b/README.md
index 3066c42..a754be6 100644
--- a/README.md
+++ b/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.
\ No newline at end of file
+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.
\ No newline at end of file
diff --git a/assets/sass/_layout.scss b/assets/sass/_layout.scss
index 1ea4b2b..a10b18d 100644
--- a/assets/sass/_layout.scss
+++ b/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;
diff --git a/assets/sass/_mixins.scss b/assets/sass/_mixins.scss
index 52a07ef..1756e90 100644
--- a/assets/sass/_mixins.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/assets/sass/components/_education.scss b/assets/sass/components/_education.scss
new file mode 100644
index 0000000..be1863f
--- /dev/null
+++ b/assets/sass/components/_education.scss
@@ -0,0 +1,5 @@
+.education {
+    &__item {
+        @include avoid-break;
+    }
+}
\ No newline at end of file
diff --git a/assets/sass/components/_experience.scss b/assets/sass/components/_experience.scss
index c8c8831..36a07e0 100644
--- a/assets/sass/components/_experience.scss
+++ b/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,
diff --git a/assets/sass/components/_interests.scss b/assets/sass/components/_interests.scss
index 9bc5f8a..9759e20 100644
--- a/assets/sass/components/_interests.scss
+++ b/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;
diff --git a/assets/sass/components/_side_section.scss b/assets/sass/components/_side_section.scss
index fdf31b1..33e6108 100644
--- a/assets/sass/components/_side_section.scss
+++ b/assets/sass/components/_side_section.scss
@@ -1,6 +1,7 @@
 .sideSection {
     display: block;
     margin-bottom: 3rem;
+    @include avoid-break;
 
     &__heading {
         width:100%;
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
index fa87da4..2fe438c 100644
--- a/assets/sass/main.scss
+++ b/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";