Skip to content

Refactor all Vue components to use BEM convention #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
qnp wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Refactor all Vue components to use BEM convention #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
115 changes: 57 additions & 58 deletions src/components/AboutContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,159 +1,158 @@
<template lang="pug">
main.about-content(:class="classes")
.summary
h1
main.AboutContent(:class="classes")
.AboutContent__summary
h1.AboutContent__summary__title
| Hi, my name is&nbsp;
a(href="mailto:me") François
a.AboutContent__summary__title__link(href="mailto:me") François
| .
br
| I’m a full-stack developer living in Paris, currently working at&nbsp;
a.fifteen(
a.AboutContent__summary__title__link--fifteen(
href="https://fifteen.eu"
target="_blank"
) Fifteen.
h2
h2.AboutContent__summary__subtitle
| I like doing nice and sharp things with digital and web technologies. From a quantum physics background, I’m also passionate about science, pedagogy, music and digital art.
h3
RouterLink.scroll-invite(to="/projects") Get to know me.
h3.AboutContent__summary__tagline
RouterLink.AboutContent__summary__tagline__scrollInvite(to="/projects") Get to know me.
</template>

<style lang="stylus">
main.about-content
.AboutContent
transition margin 0.3s ease
margin ($content-margin-top + 1.6 * $theme-margin-top) $theme-margin-left-right 0
display block

.summary
h1
&__summary
&__title
max-width 440px

h2,
h3
&__subtitle,
&__tagline
max-width 400px
padding-top 1.3em

h1
&__summary__title
font-size $golden-num em
line-height 1.3
font-family 'Raleway', sans-serif
font-weight 700
// 600
color $theme-color-white

h2
&__summary__subtitle
font-family $the-serif, serif
font-weight 400
color $theme-color-white

h3
&__summary__tagline
font-family $the-serif, serif
font-weight 300
color alpha($theme-color-white, 0.9)

h2,
h3
&__summary__subtitle,
&__summary__tagline
padding 0
font-size 1em
line-height 1.4
margin-left 0
transition padding-top 0.3s ease, margin-left 0.3s ease

h1,
h2,
h3
&__summary__title,
&__summary__subtitle,
&__summary__tagline
transform translateY(20px)
opacity 0

&.show
&--show
pointer-events all

h1,
h2,
h3
&__summary__title,
&__summary__subtitle,
&__summary__tagline
animation show-content-translate 0.7s cubic-bezier(0, 0.58, 0, 1) forwards, show-content-opacity 0.7s ease-out forwards

h1
&__summary__title
animation-delay 0.85s

h2
&__summary__subtitle
animation-delay 1s

h3
&__summary__tagline
animation-delay 1.15s

&.hide
&--hide
pointer-events none

h1,
h2,
h3
&__summary__title,
&__summary__subtitle,
&__summary__tagline
transform translateY(0)
animation hide-content-opacity 0.3s ease-out forwards
animation-delay 0s

&.hidden
&--hidden
display none

$media-content-max-width = 'only screen and (min-width: ' + $content-max-width + ')'

@media $media-content-max-width
main.about-content
.summary
h2
.AboutContent
&__summary
&__subtitle
padding-top 2.5em
margin-left 308px

h3
&__tagline
padding-top 2.5em
margin-left 616px

@media only screen and (min-width 1801px)
main.about-content
.AboutContent
margin 2 * $content-margin-top + $theme-margin-top $theme-margin-left-right 0

@media only screen and (min-height 601px) and (max-height 640px)
main.about-content
.AboutContent
margin: $content-margin-top + $theme-margin-top $theme-margin-left-right 0

@media only screen and (max-height 600px)
main.about-content
.AboutContent
margin: $content-margin-top + $theme-margin-top $theme-margin-left-right 0

h1
&__summary__title
font-size 1.2em

h2,
h3
&__summary__subtitle,
&__summary__tagline
font-size: (1.2 / $golden-num)em

@media only screen and (max-width 600px)
main.about-content
h1
.AboutContent
&__summary__title
font-size 1.2em

h2,
h3
&__summary__subtitle,
&__summary__tagline
font-size: (1.2 / $golden-num)em

@media only screen and (max-width 400px)
main.about-content
.AboutContent
margin ($content-margin-top-mobile + $theme-margin-top-mobile - 15px) $theme-margin-left-right-mobile 0

@media only screen and (min-width 401px) and (max-width 450px) and (max-height 580px)
main.about-content
.AboutContent
margin ($content-margin-top-mobile + $theme-margin-top-mobile - 15px) $theme-margin-left-right 0

@media only screen and (max-width 340px) and (max-height 540px)
main.about-content
.AboutContent
margin ($content-margin-top-mobile + $theme-margin-top-mobile - 25px) ($theme-margin-left-right-mobile - 10px) 0

@media only screen and (max-width 380px) and (max-height 570px)
main.about-content
h1
.AboutContent
&__summary__title
font-size 1em

h2,
h3
&__summary__subtitle,
&__summary__tagline
font-size: (1 / $golden-num)em

@keyframes show-content-translate
Expand Down Expand Up @@ -193,8 +192,8 @@ export interface AboutContentProps {
const props = defineProps<AboutContentProps>();

const classes = computed(() => ({
show: props.show,
hide: !props.show,
hidden: props.hidden,
'AboutContent--show': props.show,
'AboutContent--hide': !props.show,
'AboutContent--hidden': props.hidden,
}));
</script>
24 changes: 12 additions & 12 deletions src/components/AppContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template lang="pug">
#content.app-content
#content.AppContent
PhysicalBubble(
:open="bubbleIntro.open"
:appear="introAppear"
Expand All @@ -22,7 +22,7 @@
:remove-particles="bubbleLanding.removeParticles"
)

.content-wrapper(:class="contentClass")
.AppContent__contentWrapper(:class="contentClass")
CurriculumContent(
:show="curriculum.show"
:skills-array="curriculum.skillsArray"
Expand Down Expand Up @@ -106,25 +106,25 @@ svg
*
-webkit-tap-highlight-color rgba(0, 0, 0, 0)

.app-content
.AppContent
opacity 0
transition opacity 0.2s linear

.content-wrapper
&__contentWrapper
pointer-events none
width 100%
max-width $content-max-width
margin-left auto
margin-right auto

&.show
&--show
display block

&.hide
&--hide
display none

body.mounted
.app-content
.AppContent
opacity 1
</style>

Expand Down Expand Up @@ -256,7 +256,7 @@ const bubbleLanding = reactive<PhysicalBubbleProps>({
},
});

const contentClass = ref('hide');
const contentClass = ref('AppContent__contentWrapper--hide');

const showIntroText = ref(false);
const isNotFoundText = ref(false);
Expand Down Expand Up @@ -482,7 +482,7 @@ function setAboutState(): void {
}
about.value.show = true;
about.value.trueHide = false;
contentClass.value = 'show';
contentClass.value = 'AppContent__contentWrapper--show';
showIntroLogo.value = false;
showIntroText.value = false;
bubbleLanding.settings.bgColor = primaryDark;
Expand All @@ -501,7 +501,7 @@ function setProjectsState(): void {
bubbleLanding.start = true;
}
about.value.show = false;
contentClass.value = 'show';
contentClass.value = 'AppContent__contentWrapper--show';
showIntroLogo.value = false;
showIntroText.value = false;
bubbleLanding.settings.bgColor = secondaryDark;
Expand All @@ -519,7 +519,7 @@ function setCurriculumState(): void {
bubbleLanding.hide = false;
}
about.value.show = false;
contentClass.value = 'show';
contentClass.value = 'AppContent__contentWrapper--show';
showIntroLogo.value = false;
showIntroText.value = false;
curriculum.value.show = true;
Expand All @@ -529,7 +529,7 @@ function endClosingHandler(): void {
isBubbleIntroOpen.value = false;
showIntroLogo.value = true;
showIntroText.value = true;
contentClass.value = 'hide';
contentClass.value = 'AppContent__contentWrapper--hide';
}

function endOpeningHandler(): void {
Expand Down
Loading