diff --git a/src/pages/index.js b/src/pages/index.js
index 06b743a..b87af0b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -527,3 +527,10 @@ const IndexPage = () => {
}
export default IndexPage
+
+export const Head = () => (
+ <>
+
+
Kamil Żuk - CV
+ >
+)
diff --git a/src/styles/general.scss b/src/styles/general.scss
index bbb4f3d..3f93e0d 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -33,7 +33,10 @@ body {
.global_segment {
margin-left: auto;
margin-right: auto;
- width: 21cm;
+ max-width: 21cm;
+ width: 100%;
+ padding: 0 15px;
+ box-sizing: border-box;
a:link {
color: $background_color;
@@ -185,7 +188,7 @@ body {
font-weight: bold;
display: inline-block;
width: 2em;
- margin-left: -2.875em;
+ margin-left: -3.4em;
}
@@ -204,7 +207,6 @@ body {
.segment_title_image {
float: none;
- width: 250px;
margin-left: -40px;
}
@@ -251,6 +253,8 @@ body {
align-items: center;
width: 210px;
height: 250px;
+ padding: 0 10px;
+ box-sizing: border-box;
p {
text-align: center;
@@ -276,21 +280,23 @@ body {
}
.captcha-input {
- width: 170px;
+ width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid $color;
background-color: $background_color;
color: $color;
font-size: 9pt;
+ box-sizing: border-box;
}
.captcha-button {
- width: 188px;
+ width: 100%;
padding: 8px;
background-color: $background_color;
color: $color;
border: 1px solid $color;
+ box-sizing: border-box;
cursor: pointer;
font-size: 9pt;
@@ -299,6 +305,11 @@ body {
}
}
+ canvas {
+ max-width: 100%;
+ height: auto !important;
+ }
+
.error-message {
color: #ff4444;
margin-top: 10px;
@@ -307,3 +318,182 @@ body {
}
}
}
+
+@media (max-width: 768px) {
+ .global_segment {
+ padding: 0 10px;
+
+ .title_bar {
+ font-size: 18pt;
+ width: 75%;
+ }
+
+ .language_bar {
+ width: 25%;
+ font-size: 18pt;
+ }
+
+ .segment_general {
+ .segment_image {
+ width: 140px;
+ height: 170px;
+ }
+
+ .segment_content_image {
+ width: 120px;
+ height: 150px;
+ padding: 10px;
+ font-size: 8pt;
+ }
+
+ .segment_header_middle {
+ left: 140px;
+ right: 150px;
+ }
+
+ .segment_title_image {
+ margin-left: -20px;
+ padding-top: 12.5px;
+ padding-bottom: 7.5px;
+ height: 30px;
+ }
+
+ .segment_description_general {
+ font-size: 8pt;
+ }
+ }
+
+ .segment_title {
+ width: 200px;
+ font-size: 16pt;
+ padding-top: 12.5px;
+ padding-bottom: 7.5px;
+ height: 30px;
+ }
+
+ .segment_content_work {
+ font-size: 9pt;
+
+ .segment_content_title {
+ margin-top: 12px;
+ margin-bottom: 12px;
+ }
+
+ ul li::before {
+ margin-left: -3.75em;
+ }
+ }
+
+ .segment_description {
+ font-size: 8.5pt;
+ margin: 6px 0 6px 14px;
+ }
+ }
+
+ .captcha-container .captcha-form {
+ width: 140px;
+ height: 170px;
+ font-size: 8pt;
+ padding: 0 8px;
+
+ p {
+ margin-top: 8px;
+ margin-bottom: 8px;
+ font-size: 8pt;
+ }
+
+ .captcha-input, .captcha-button {
+ padding: 5px;
+ font-size: 7pt;
+ }
+ }
+}
+
+@media (max-width: 500px) {
+ .global_segment {
+ .title_bar {
+ font-size: 15pt;
+ }
+
+ .language_bar {
+ font-size: 15pt;
+ }
+
+ .segment_general {
+ .segment_image {
+ width: 100px;
+ height: 125px;
+ }
+
+ .segment_content_image {
+ width: 90px;
+ height: 110px;
+ padding: 8px;
+ font-size: 7pt;
+ }
+
+ .segment_header_middle {
+ left: 95px;
+ right: 108px;
+ }
+
+ .segment_title_image {
+ margin-left: -10px;
+ padding-top: 10px;
+ padding-bottom: 0px;
+ height: 33px;
+ }
+
+ .segment_description_general {
+ font-size: 6.5pt;
+ }
+ }
+
+ .segment_title {
+ width: 160px;
+ font-size: 13pt;
+ padding-top: 10px;
+ padding-bottom: 0px;
+ height: 33px;
+ }
+
+ .segment_content_work {
+ font-size: 8pt;
+
+ ul {
+ margin-left: 18px;
+ }
+
+ ul li {
+ padding-top: 5px;
+ }
+
+ ul li::before {
+ margin-left: -4.25em;
+ }
+ }
+
+ .segment_description {
+ font-size: 7.5pt;
+ margin: 6px 0 6px 14px;
+ }
+
+ .captcha-container .captcha-form {
+ width: 100px;
+ height: 125px;
+ font-size: 7pt;
+ padding: 0 6px;
+
+ p {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ font-size: 7pt;
+ }
+
+ .captcha-input, .captcha-button {
+ padding: 4px;
+ font-size: 6pt;
+ }
+ }
+ }
+}