Fix Buttons
This commit is contained in:
parent
88598e61d9
commit
5e361660f0
@ -3,125 +3,115 @@
|
|||||||
/**
|
/**
|
||||||
Thème
|
Thème
|
||||||
**/
|
**/
|
||||||
$deep-koamaru:#2b4162;
|
$deep-koamaru: #2b4162;
|
||||||
$myrtle-green:#326273;
|
$myrtle-green: #326273;
|
||||||
$cadet-blue:#5c9ead;
|
$cadet-blue: #5c9ead;
|
||||||
$neon-carrot:#fa9f42;
|
$neon-carrot: #fa9f42;
|
||||||
$white:#ffffff;
|
$white: #ffffff;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
Variables Bulma
|
Variables Bulma
|
||||||
**/
|
**/
|
||||||
$primary:$cadet-blue;
|
$primary: $cadet-blue;
|
||||||
$primary-invert:#fff;
|
$primary-invert: #fff;
|
||||||
$info:$myrtle-green;
|
$info: $myrtle-green;
|
||||||
$info-invert:#fff;
|
$info-invert: #fff;
|
||||||
$footer-color:$deep-koamaru;
|
$footer-color: $deep-koamaru;
|
||||||
$link:$neon-carrot;
|
$link: $neon-carrot;
|
||||||
$link-hover:"";
|
$link-hover: "";
|
||||||
|
|
||||||
html {
|
html {
|
||||||
background-color: $primary;
|
background-color: $primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark-theme-only {
|
.dark-theme-only {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "../../node_modules/bulma/bulma";
|
@import "../../node_modules/bulma/bulma";
|
||||||
@import "icon";
|
@import "icon";
|
||||||
|
|
||||||
#idCard {
|
#idCard {
|
||||||
|
.hero-body {
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
.hero-body {
|
// permet de re-aligner les tags avec les subtitles
|
||||||
padding-bottom: 2rem;
|
.tags {
|
||||||
padding-top: 2rem;
|
margin-top: -1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
// permet de re-aligner les tags avec les subtitles
|
.card {
|
||||||
.tags {
|
background-color: unset;
|
||||||
margin-top: -1.25rem;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background-color: unset;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// retire les barres de scroll des panneaux experience/education
|
// retire les barres de scroll des panneaux experience/education
|
||||||
#experiences .media-content {
|
#experiences .media-content {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
background-color: $footer-color !important;
|
background-color: $footer-color !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer strong {
|
footer strong {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-content {
|
.media-content {
|
||||||
margin-top: -6px;
|
margin-top: -6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem)
|
// Pour devices iOS qui ont un notch (si c'est pas un device avec un notch, it's no-tch your problem)
|
||||||
div.hero-body {
|
div.hero-body {
|
||||||
margin-left: env(safe-area-inset-left);
|
margin-left: env(safe-area-inset-left);
|
||||||
margin-right: env(safe-area-inset-right);
|
margin-right: env(safe-area-inset-right);
|
||||||
}
|
}
|
||||||
|
|
||||||
section#contact .button {
|
section#contact .button {
|
||||||
min-width: 155px;
|
min-width: 155px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.button.is-fullw-mobile {
|
.button.is-fullw-mobile {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.displayOnlyOnPrint {
|
.displayOnlyOnPrint {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
|
||||||
|
|
||||||
#buttonsUnderPhoto a {
|
|
||||||
padding-left: 16px;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#photosAndButtons .media-content p+p {
|
|
||||||
margin-top: -16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile p.title {
|
.tile p.title {
|
||||||
font-size: 25px;
|
font-size: 25px;
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
//
|
||||||
footer small {
|
footer small {
|
||||||
color: $white;
|
color: $white;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Photo de Profil
|
// Photo de Profil
|
||||||
#photoProfil {
|
#photoProfil {
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
}
|
}
|
||||||
|
|
||||||
// fix d'un affichage désagréable sur la carte Bulma
|
// fix d'un affichage désagréable sur la carte Bulma
|
||||||
#photosAndButtons .card {
|
#photosAndButtons .card {
|
||||||
border-radius:unset;
|
border-radius: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mailWhenNoJavascript{
|
#mailWhenNoJavascript {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@import "dark-theme";
|
@import "dark-theme";
|
||||||
|
@ -1,17 +1,22 @@
|
|||||||
import React, {Component} from '../../../node_modules/react';
|
import './ButtonIcon.scss';
|
||||||
import './ButtonIcon.scss'
|
|
||||||
|
import React, { Component } from '../../../node_modules/react';
|
||||||
|
|
||||||
|
|
||||||
export default class ButtonIcon extends Component {
|
export default class ButtonIcon extends Component {
|
||||||
// constructor(props) {
|
// constructor(props) {
|
||||||
// super(props);
|
// super(props);
|
||||||
// this.state = {};
|
// this.state = {};
|
||||||
// }
|
// }
|
||||||
render() {
|
render() {
|
||||||
return <a class="button" rel="noopener noreferrer" href={this.props.lien} target="_blank"
|
return <a rel="noopener noreferrer" href={this.props.lien} target="_blank"
|
||||||
aria-label="Profil {this.props.icon}">
|
aria-label="Profil {this.props.icon}">
|
||||||
<span class="icon is-large">
|
<button class="button">
|
||||||
<ion-icon name={this.props.icon}></ion-icon>
|
<span class="icon">
|
||||||
</span>
|
<ion-icon name={this.props.icon}></ion-icon>
|
||||||
</a>;
|
</span>
|
||||||
}
|
</button>
|
||||||
}
|
</a>;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
@ -1,4 +0,0 @@
|
|||||||
|
|
||||||
.component-button-icon{
|
|
||||||
|
|
||||||
}
|
|
@ -1,85 +1,91 @@
|
|||||||
import React, {Component} from '../../../node_modules/react';
|
import './MainCard.scss';
|
||||||
import {FormattedMessage} from 'react-intl';
|
|
||||||
import { injectIntl } from 'react-intl'
|
|
||||||
|
|
||||||
import ExperienceCard from '../ExperienceCard/index';
|
import { FormattedMessage, injectIntl } from 'react-intl';
|
||||||
import ButtonIcon from '../ButtonIcon/index';
|
|
||||||
|
|
||||||
import './MainCard.scss'
|
import React, { Component } from '../../../node_modules/react';
|
||||||
import headshotMain from '../../images/headshot_main.png';
|
|
||||||
import headshotFond from '../../images/headshot_fond.png';
|
import headshotFond from '../../images/headshot_fond.png';
|
||||||
|
import headshotMain from '../../images/headshot_main.png';
|
||||||
|
import ButtonIcon from '../ButtonIcon/index';
|
||||||
|
import ExperienceCard from '../ExperienceCard/index';
|
||||||
|
|
||||||
|
|
||||||
class MainCard extends Component {
|
class MainCard extends Component {
|
||||||
render() {
|
render() {
|
||||||
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
var metaThemeColor = document.querySelector("meta[name=theme-color]");
|
||||||
metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ?"#25444b" : "#5c9ead");
|
metaThemeColor.setAttribute("content", window.matchMedia('(prefers-color-scheme: dark)').matches ? "#25444b" : "#5c9ead");
|
||||||
const experienceCardMessage = this.props.intl.messages.experienceCard;
|
const experienceCardMessage = this.props.intl.messages.experienceCard;
|
||||||
return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
|
return <section id="idCard" class="hero is-medium is-primary-inverted is-bold">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
|
<div class="column is-2 is-hidden-touch is-hidden-desktop-only dontPrint"></div>
|
||||||
<div id="photosAndButtons" class="column is-3-widescreen is-4-tablet">
|
<div id="photosAndButtons" class="column is-3-widescreen is-4-tablet">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-image">
|
<div class="card-image">
|
||||||
<figure id="photoProfil" class="image">
|
<figure id="photoProfil" class="image">
|
||||||
<img class="background" src={headshotFond} alt="Anthony Dumas"/>
|
<img class="background" src={headshotFond} alt="Anthony Dumas" />
|
||||||
<img class="actor" src={headshotMain} alt="Anthony Dumas"/>
|
<img class="actor" src={headshotMain} alt="Anthony Dumas" />
|
||||||
</figure>
|
</figure>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-content">
|
<div class="card-content">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
<div class="media-content">
|
<div class="media-content">
|
||||||
<p id="buttonsUnderPhoto" class="buttons are-large ">
|
<p id="buttonsUnderPhoto" class="field is-grouped">
|
||||||
<ButtonIcon
|
<p class="control">
|
||||||
icon="logo-github"
|
<ButtonIcon
|
||||||
lien="https://github.com/AdamasFR"/>
|
icon="logo-github"
|
||||||
|
lien="https://github.com/AdamasFR" />
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<ButtonIcon
|
||||||
|
icon="logo-linkedin"
|
||||||
|
lien="https://www.linkedin.com/in/anthonyyvondumas/" />
|
||||||
|
</p>
|
||||||
|
<p class="control">
|
||||||
|
<ButtonIcon
|
||||||
|
icon="logo-twitter"
|
||||||
|
lien="https://www.twitter.com/adamas_fr" />
|
||||||
|
</p>
|
||||||
|
</p>
|
||||||
|
<p id="boutonCV" class="field">
|
||||||
|
<a rel="noreferrer noopener" target="_blank"
|
||||||
|
href="https://files.adm.ink/anthony-dumas-cv.pdf" >
|
||||||
|
<button class="button is-fullwidth">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fab icon-file-pdf-o"></i>
|
||||||
|
</span>
|
||||||
|
<span><FormattedMessage id="curriculumVitaeLink" /></span>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ButtonIcon
|
<div class="content">
|
||||||
icon="logo-linkedin"
|
|
||||||
lien="https://www.linkedin.com/in/anthonyyvondumas/"/>
|
|
||||||
|
|
||||||
<ButtonIcon
|
</div>
|
||||||
icon="logo-twitter"
|
</div>
|
||||||
lien="https://www.twitter.com/adamas_fr"/>
|
</div>
|
||||||
</p>
|
</div>
|
||||||
<p id="boutonCV" class="buttons are-large">
|
|
||||||
<a class="button is-fullwidth" rel="noreferrer noopener" target="_blank"
|
|
||||||
href="https://files.adm.ink/anthony-dumas-cv.pdf" >
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fab icon-file-pdf-o"></i>
|
|
||||||
</span>
|
|
||||||
<span><FormattedMessage id="curriculumVitaeLink"/></span>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="column is-9-tablet is-7-widescreen" id="experiences">
|
||||||
|
<span class="title">{experienceCardMessage.title.experience}</span>
|
||||||
</div>
|
{experienceCardMessage.experiences.map(function (experience, index) {
|
||||||
</div>
|
return <ExperienceCard
|
||||||
</div>
|
data={experience} />;
|
||||||
</div>
|
})}
|
||||||
|
<span class="title">{experienceCardMessage.title.education}</span>
|
||||||
<div class="column is-9-tablet is-7-widescreen" id="experiences">
|
{experienceCardMessage.education.map(function (education, index) {
|
||||||
<span class="title">{experienceCardMessage.title.experience}</span>
|
return <ExperienceCard
|
||||||
{experienceCardMessage.experiences.map(function(experience, index){
|
data={education} />;
|
||||||
return <ExperienceCard
|
})}
|
||||||
data={experience}/>;
|
</div>
|
||||||
})}
|
</div>
|
||||||
<span class="title">{experienceCardMessage.title.education}</span>
|
</div>
|
||||||
{experienceCardMessage.education.map(function(education, index){
|
</div>
|
||||||
return <ExperienceCard
|
</section>;
|
||||||
data={education}/>;
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default injectIntl(MainCard)
|
export default injectIntl(MainCard)
|
@ -1,4 +1,4 @@
|
|||||||
@import '../../_sass/main.scss';
|
@import "../../_sass/main.scss";
|
||||||
|
|
||||||
#photoProfil {
|
#photoProfil {
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
@ -7,15 +7,23 @@
|
|||||||
.background {
|
.background {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
opacity:0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#boutonCV a {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
@keyframes actorZoom {
|
@keyframes actorZoom {
|
||||||
from { transform: scale(100%); }
|
from {
|
||||||
to { transform: scale(110%); }
|
transform: scale(100%);
|
||||||
}
|
}
|
||||||
|
to {
|
||||||
|
transform: scale(110%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#photoProfil:hover .actor {
|
#photoProfil:hover .actor {
|
||||||
animation:4s linear 0s infinite alternate actorZoom;
|
animation: 4s linear 0s infinite alternate actorZoom;
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user