From f3b851acf7643ca12c33fd2f580bf7c91fc0553a Mon Sep 17 00:00:00 2001
From: peter_rabbit <pierrejarriges@gmail.com>
Date: Mon, 22 Feb 2021 09:27:20 +0100
Subject: [PATCH] fix:whoami padding
---
public/main.js | 2 +-
public/style/home-page-components/whoami.css | 17 +++++
public/style/style.css | 50 ++++++-------
src/home-page-components/whoami.js | 2 +-
src/home-page-components/whoami.scss | 71 ++++++++++++++++++
src/homepage.scss | 75 +-------------------
6 files changed, 117 insertions(+), 100 deletions(-)
create mode 100644 public/style/home-page-components/whoami.css
create mode 100644 src/home-page-components/whoami.scss
diff --git a/public/main.js b/public/main.js
index a8820f9..b8bb0d8 100644
--- a/public/main.js
+++ b/public/main.js
@@ -351,7 +351,7 @@ class WhoAmI {
render() {
return {
tag: "section",
- class: "whoami",
+ id: "whoami",
contents: [
{
tag: "div",
diff --git a/public/style/home-page-components/whoami.css b/public/style/home-page-components/whoami.css
new file mode 100644
index 0000000..f5a7027
--- /dev/null
+++ b/public/style/home-page-components/whoami.css
@@ -0,0 +1,17 @@
+/* Error: Undefined mixin.
+ * ,
+ * 5 | @include flex-center-col;
+ * | ^^^^^^^^^^^^^^^^^^^^^^^^
+ * '
+ * src/home-page-components/whoami.scss 5:9 root stylesheet */
+
+body::before {
+ font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
+ "Droid Sans Mono", monospace, monospace;
+ white-space: pre;
+ display: block;
+ padding: 1em;
+ margin-bottom: 1em;
+ border-bottom: 2px solid black;
+ content: "Error: Undefined mixin.\a \2577 \a 5 \2502 @include flex-center-col;\a \2502 ^^^^^^^^^^^^^^^^^^^^^^^^\a \2575 \a src/home-page-components/whoami.scss 5:9 root stylesheet";
+}
diff --git a/public/style/style.css b/public/style/style.css
index 4b7454d..b4c94ee 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -651,10 +651,10 @@ main #page-container #home-page .kuadrado-values ul.values-list li h3 {
main #page-container #home-page .kuadrado-values ul.values-list li p {
text-align: justify;
}
-main #page-container #home-page .whoami {
+main #page-container #home-page #whoami {
padding: 20px 0 50px;
}
-main #page-container #home-page .whoami .page-contents-center {
+main #page-container #home-page #whoami .page-contents-center {
padding: 40px;
display: flex;
justify-content: center;
@@ -662,7 +662,7 @@ main #page-container #home-page .whoami .page-contents-center {
flex-direction: row;
flex-direction: column;
}
-main #page-container #home-page .whoami .page-contents-center h2 {
+main #page-container #home-page #whoami .page-contents-center h2 {
text-align: center;
background-color: #6b7880;
display: flex;
@@ -677,45 +677,57 @@ main #page-container #home-page .whoami .page-contents-center h2 {
margin: 40px 0;
color: #72e3f0;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header {
display: grid;
grid-template-columns: auto 1fr;
gap: 30px;
- padding: 50px 20px;
+ padding: 50px 0;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .pic {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .pic {
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-direction: column;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .pic img {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .pic img {
width: 150px;
height: auto;
border-radius: 100%;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h3 {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h3 {
font-size: 22px;
color: #96a5ae;
margin: 0;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h4 {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h4 {
font-size: 18px;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text strong,
-main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text h4 {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text strong,
+main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text h4 {
color: #96a5ae;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .body p {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .body p {
font-size: 18px;
font-style: italic;
font-family: serif;
color: #555d61;
}
-main #page-container #home-page .whoami .page-contents-center .presentation-card .body p *:not(blue, a) {
+main #page-container #home-page #whoami .page-contents-center .presentation-card .body p *:not(blue, a) {
color: #555d61;
}
+@media screen and (max-width: 560px) {
+ main #page-container #home-page #whoami .page-contents-center .presentation-card .header {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ }
+ main #page-container #home-page #whoami .page-contents-center .presentation-card .header .header-text {
+ text-align: center;
+ }
+}
@media screen and (max-width: 900px) {
main #page-container #home-page .poles {
grid-template-columns: 1fr;
@@ -752,18 +764,6 @@ main #page-container #home-page .whoami .page-contents-center .presentation-card
padding: 0;
}
}
-@media screen and (max-width: 560px) {
- main #page-container #home-page .whoami .page-contents-center .presentation-card .header {
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
- flex-direction: column;
- }
- main #page-container #home-page .whoami .page-contents-center .presentation-card .header .header-text {
- text-align: center;
- }
-}
main #page-container #education-page h3.big {
font-size: 30px;
}
diff --git a/src/home-page-components/whoami.js b/src/home-page-components/whoami.js
index 3cd6e87..8cf9659 100644
--- a/src/home-page-components/whoami.js
+++ b/src/home-page-components/whoami.js
@@ -4,7 +4,7 @@ class WhoAmI {
render() {
return {
tag: "section",
- class: "whoami",
+ id: "whoami",
contents: [
{
tag: "div",
diff --git a/src/home-page-components/whoami.scss b/src/home-page-components/whoami.scss
new file mode 100644
index 0000000..548d3ca
--- /dev/null
+++ b/src/home-page-components/whoami.scss
@@ -0,0 +1,71 @@
+#whoami {
+ padding: 20px 0 50px;
+ .page-contents-center {
+ padding: 40px;
+ @include flex-center-col;
+ h2 {
+ text-align: center;
+ background-color: $medium_grey;
+ @include flex-center-col;
+ width: 220px;
+ height: 220px;
+ border-radius: 100%;
+ padding: 30px;
+ margin: 40px 0;
+ color: $blue_3;
+ }
+ .presentation-card {
+ .header {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ gap: 30px;
+ padding: 50px 0;
+ .pic {
+ @include flex-center-col;
+ img {
+ width: 150px;
+ height: auto;
+ border-radius: 100%;
+ }
+ }
+ .header-text {
+ h3 {
+ font-size: 22px;
+ color: $light_1;
+ margin: 0;
+ }
+ h4 {
+ font-size: 18px;
+ }
+ strong,
+ h4 {
+ color: $light_1;
+ }
+ }
+ }
+ .body {
+ p {
+ font-size: 18px;
+ font-style: italic;
+ font-family: serif;
+ color: $dark_3;
+ *:not(blue, a) {
+ color: $dark_3;
+ }
+ }
+ }
+ }
+ }
+ @media screen and (max-width: $screen_s) {
+ .page-contents-center {
+ .presentation-card {
+ .header {
+ @include flex-center-col;
+ .header-text {
+ text-align: center;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/src/homepage.scss b/src/homepage.scss
index 30484b9..34df2a2 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -129,65 +129,7 @@
}
}
- .whoami {
- padding: 20px 0 50px;
- .page-contents-center {
- padding: 40px;
- @include flex-center-col;
- h2 {
- text-align: center;
- background-color: $medium_grey;
- @include flex-center-col;
- width: 220px;
- height: 220px;
- border-radius: 100%;
- padding: 30px;
- margin: 40px 0;
- color: $blue_3;
- }
- .presentation-card {
- .header {
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 30px;
- padding: 50px 20px;
- .pic {
- @include flex-center-col;
- img {
- width: 150px;
- height: auto;
- border-radius: 100%;
- }
- }
- .header-text {
- h3 {
- font-size: 22px;
- color: $light_1;
- margin: 0;
- }
- h4 {
- font-size: 18px;
- }
- strong,
- h4 {
- color: $light_1;
- }
- }
- }
- .body {
- p {
- font-size: 18px;
- font-style: italic;
- font-family: serif;
- color: $dark_3;
- *:not(blue, a) {
- color: $dark_3;
- }
- }
- }
- }
- }
- }
+ @import "./home-page-components/whoami.scss";
@media screen and (max-width: $screen_l) {
.poles {
@@ -231,18 +173,5 @@
}
}
- @media screen and (max-width: $screen_s) {
- .whoami {
- .page-contents-center {
- .presentation-card {
- .header {
- @include flex-center-col;
- .header-text {
- text-align: center;
- }
- }
- }
- }
- }
- }
+
}
--
GitLab