Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
Commit f3b851ac authored by peter_rabbit's avatar peter_rabbit
Browse files

fix:whoami padding

parent 3bcbeb2c
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/main.js
+ 1
− 1
View file @ f3b851ac
......@@ -351,7 +351,7 @@ class WhoAmI {
render() {
return {
tag: "section",
class: "whoami",
id: "whoami",
contents: [
{
tag: "div",
......
public/style/home-page-components/whoami.css 0 → 100644
+ 17
− 0
View file @ f3b851ac
/* 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";
}
public/style/style.css
+ 25
− 25
View file @ f3b851ac
......@@ -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;
}
......
src/home-page-components/whoami.js
+ 1
− 1
View file @ f3b851ac
......@@ -4,7 +4,7 @@ class WhoAmI {
render() {
return {
tag: "section",
class: "whoami",
id: "whoami",
contents: [
{
tag: "div",
......
src/home-page-components/whoami.scss 0 → 100644
+ 71
− 0
View file @ f3b851ac
#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;
}
}
}
}
}
}
src/homepage.scss
+ 2
− 73
View file @ f3b851ac
......@@ -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;
}
}
}
}
}
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Froggit est fièrement fabriqué avec amour par Lydra avec des Logiciels Libres et hébergé en France chez Scaleway | Status du service