Skip to content
This repository was archived by the owner on Apr 15, 2023. It is now read-only.

Commit 5185776

Browse files
MattIPv4MattIPv4
committed
Update print media layout
1 parent 1e0bd07 commit 5185776

File tree

12 files changed

+194
-122
lines changed

12 files changed

+194
-122
lines changed

‎assets/css/styles.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/css/styles.css.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/collapse.js

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
*
66
* This program is free software: you can redistribute it and/or modify
77
* it under the terms of the GNU General Public License as published
@@ -34,4 +34,20 @@ document.addEventListener("DOMContentLoaded", function () {
3434
collapses[i].setAttribute("data-collapsed", "0");
3535
collapses[i].addEventListener("click", toggleCollapse.bind(null, collapses[i]));
3636
}
37+
38+
document.querySelector("a.collapse-all").addEventListener("click", function() {
39+
for (var i = 0; i < collapses.length; ++i) {
40+
collapses[i].innerText = "(Expand)";
41+
collapses[i].parentElement.parentElement.classList.add("collapsed");
42+
collapses[i].setAttribute("data-collapsed", "1");
43+
}
44+
});
45+
46+
document.querySelector("a.expand-all").addEventListener("click", function() {
47+
for (var i = 0; i < collapses.length; ++i) {
48+
collapses[i].innerText = "(Collapse)";
49+
collapses[i].parentElement.parentElement.classList.remove("collapsed");
50+
collapses[i].setAttribute("data-collapsed", "0");
51+
}
52+
});
3753
});

‎assets/js/collapse.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/scss/components/_left.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
* Please see <https://github.com/MattIPv4/CV/blob/master/LICENSE.md> for the full license.
66
*/
77
.left {
@@ -13,7 +13,7 @@
1313
@import 'left/references';
1414

1515
h2 {
16-
font-size: 24px;
16+
font-size: 2.4rem;
1717
margin: 15px 0 5px;
1818
}
1919
}

‎assets/scss/components/_print.scss

Lines changed: 114 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,151 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
* Please see <https://github.com/MattIPv4/CV/blob/master/LICENSE.md> for the full license.
66
*/
77
@media print {
8-
98
*, h1, h2, h3, h4, h5, h6, blockquote, p, a, li {
109
font-family: Helvetica, sans-serif !important;
1110
letter-spacing: normal !important;
1211
}
1312

14-
body {
15-
background: #fff;
16-
color: #000;
13+
html {
14+
font-size: 8px;
1715

18-
a {
16+
body {
17+
background: #fff;
1918
color: #000;
20-
}
2119

22-
[data-noprint], [data-atob] {
23-
display: none;
24-
}
20+
.container {
21+
width: 100%;
22+
max-width: none;
2523

26-
[data-unloaded] {
27-
* {
28-
display: none;
29-
}
24+
.column {
25+
&.one-third {
26+
width: 30.6666666667%;
27+
}
3028

31-
&::after {
32-
content: 'Content not loaded';
33-
}
34-
}
29+
&.two-thirds {
30+
width: 65.3333333333%;
31+
}
32+
}
3533

36-
.left,
37-
.main {
38-
margin-left: 0 !important;
39-
margin-right: 0 !important;
40-
width: 100% !important;
41-
}
34+
a {
35+
color: #000;
36+
}
4237

43-
.main {
44-
border: 0;
38+
[data-noprint], [data-atob] {
39+
display: none;
40+
}
4541

46-
.block,
47-
.footer .name {
48-
margin-left: 0;
49-
margin-right: 0;
50-
}
42+
[data-unloaded] {
43+
* {
44+
display: none;
45+
}
5146

52-
.line, .menu, .collapse {
53-
display: none;
54-
}
47+
&::after {
48+
content: 'Content not loaded';
49+
}
50+
}
51+
52+
.main {
53+
border-left-color: #aaa;
54+
margin-left: 2%;
55+
padding-left: 2%;
5556

56-
.item {
57-
ul {
58-
li {
59-
a {
60-
color: darken($primary, 25%) !important;
57+
.block,
58+
.footer .name {
59+
margin-left: 0;
60+
margin-right: 0;
61+
}
62+
63+
.line,
64+
.menu,
65+
.collapse,
66+
.collapse-all,
67+
.expand-all {
68+
display: none !important;
69+
}
6170

62-
&::after {
63-
content: ' (' attr(href) ')';
64-
font-style: italic;
71+
.block {
72+
&:first-child {
73+
&,
74+
h2 {
75+
margin-top: 0;
6576
}
6677
}
78+
79+
&:not(:first-child) {
80+
h2 {
81+
font-size: 2.2rem;
82+
}
83+
}
84+
85+
h2 {
86+
margin: 16px 0 8px;
87+
}
6788
}
68-
}
6989

70-
table {
71-
tr {
72-
background: transparent;
90+
.item {
91+
ul {
92+
li {
93+
a {
94+
color: darken($primary, 25%) !important;
95+
96+
&::after {
97+
content: ' (' attr(href) ')';
98+
font-style: italic;
99+
}
100+
}
101+
}
102+
}
103+
104+
table {
105+
tr {
106+
background: transparent;
107+
}
108+
}
73109
}
74110
}
75-
}
76-
}
77111

78-
.left {
79-
.links {
80-
.icons {
81-
flex-direction: column;
82-
83-
li {
84-
margin: 0 0 0 10px;
85-
86-
a {
87-
border-bottom-width: 0 !important;
88-
border-left-width: 2px !important;
89-
border-radius: 0;
90-
border-right-width: 0 !important;
91-
border-top-width: 0 !important;
92-
font-size: 16px;
93-
padding: 0 0 0 5px;
94-
95-
&::after {
96-
content: ' - ' attr(href);
112+
.left {
113+
.details {
114+
.name {
115+
margin: 0;
116+
}
117+
}
118+
119+
.links {
120+
.icons {
121+
flex-direction: column;
122+
123+
li {
124+
margin: 0 0 0 10px;
125+
126+
a {
127+
border-bottom-width: 0 !important;
128+
border-left-width: 2px !important;
129+
border-radius: 0;
130+
border-right-width: 0 !important;
131+
border-top-width: 0 !important;
132+
font-size: 1.6rem;
133+
padding: 0 0 0 5px;
134+
135+
&::after {
136+
content: ' - ' attr(href);
137+
}
138+
}
97139
}
98140
}
99141
}
100142
}
101-
}
102-
}
103143

104-
.contact {
105-
.cta {
106-
display: none;
144+
.contact {
145+
.cta {
146+
display: none;
147+
}
148+
}
107149
}
108150
}
109151
}

‎assets/scss/components/core/_body.scss

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
* Please see <https://github.com/MattIPv4/CV/blob/master/LICENSE.md> for the full license.
66
*/
77
body {
@@ -10,29 +10,33 @@ body {
1010
margin: 0;
1111
}
1212

13+
.container {
14+
max-width: 1280px;
15+
}
16+
1317
h1, h2, h3, h4 {
1418
color: $primary;
1519
font-family: 'Lato', Helvetica, sans-serif;
1620
font-weight: 300;
1721
}
1822

1923
h1 {
20-
font-size: 48px;
24+
font-size: 4.8rem;
2125
font-weight: 300;
2226
margin: 20px 0;
2327
}
2428

2529
h2 {
26-
font-size: 28px;
30+
font-size: 2.8rem;
2731
margin: 32px 0 24px;
2832
}
2933

3034
h3 {
31-
font-size: 24px;
35+
font-size: 2.4rem;
3236
}
3337

3438
h4 {
35-
font-size: 18px;
39+
font-size: 1.8rem;
3640
font-weight: 400;
3741
}
3842

@@ -87,7 +91,7 @@ section {
8791

8892
blockquote, p, a, li, td {
8993
font-family: 'Lato', Helvetica, sans-serif;
90-
font-size: 15px;
94+
font-size: 1.5rem;
9195
font-weight: 300;
9296
}
9397

@@ -111,7 +115,7 @@ ul {
111115
&::before {
112116
color: $primary;
113117
content: '• ';
114-
font-size: 20px;
118+
font-size: 2rem;
115119
padding-right: 8px;
116120
}
117121
}

‎assets/scss/components/left/_details.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
* Please see <https://github.com/MattIPv4/CV/blob/master/LICENSE.md> for the full license.
66
*/
77
.details {
88

99
.name {
1010
text-transform: uppercase;
11-
font-size: 32px;
11+
font-size: 3.2rem;
1212
margin: 43px 0 0;
1313
}
1414

1515
.occupation {
1616
text-transform: uppercase;
1717
margin-top: 5px;
1818
color: mix($white, $primary, 15%);
19-
font-size: 12px;
19+
font-size: 1.2rem;
2020
letter-spacing: 2px;
2121
padding-left: 7px;
2222

‎assets/scss/components/left/_links.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* Matt Cowley - CV: An elegant and expandable CV design made with SASS, HTML and love.
33
* <https://github.com/MattIPv4/CV/>
4-
* Copyright (C) 2019 Matt Cowley (MattIPv4) ([email protected])
4+
* Copyright (C) 2020 Matt Cowley (MattIPv4) ([email protected])
55
* Please see <https://github.com/MattIPv4/CV/blob/master/LICENSE.md> for the full license.
66
*/
77
.links {
@@ -13,7 +13,7 @@
1313
a {
1414
border-bottom-right-radius: 50px;
1515
border-top-left-radius: 50px;
16-
font-size: 18px;
16+
font-size: 1.8rem;
1717
padding: 5px 20px;
1818
text-decoration: none;
1919

0 commit comments

Comments
 (0)