color redesign
This commit is contained in:
Mikayla Dobson
@@ -33,19 +33,16 @@ export default function CreativeWorks() {
|
||||
</section>
|
||||
|
||||
<section className="cw-examples">
|
||||
<img className="examples-left" src={guitar} alt="Mikayla playing the guitar" />
|
||||
<div className="examples-right">
|
||||
<h2>If you're interested, you can find some samples of my music at the links below:</h2>
|
||||
<div className="sources">
|
||||
<Card>
|
||||
<img src={soundcloud} alt="SoundCloud logo" />
|
||||
<a href="https://soundcloud.com/mikaylamusic">My SoundCloud</a>
|
||||
</Card>
|
||||
<Card>
|
||||
<img src={bandcamp} alt="Bandcamp logo" />
|
||||
<a href="https://mikaylaclaire.bandcamp.com/releases">My Bandcamp</a>
|
||||
</Card>
|
||||
</div>
|
||||
<h2>If you're interested, you can find some samples of my music at the links below:</h2>
|
||||
<div className="sources">
|
||||
<Card>
|
||||
<img src={soundcloud} alt="SoundCloud logo" />
|
||||
<a href="https://soundcloud.com/mikaylamusic">My SoundCloud</a>
|
||||
</Card>
|
||||
<Card>
|
||||
<img src={bandcamp} alt="Bandcamp logo" />
|
||||
<a href="https://mikaylaclaire.bandcamp.com/releases">My Bandcamp</a>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -3,19 +3,16 @@
|
||||
|
||||
@import "helper/queries";
|
||||
@import "helper/variables";
|
||||
@import "components/Page";
|
||||
|
||||
.App {
|
||||
main {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: 4.5rem;
|
||||
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: $indigoWhite;
|
||||
@extend %page;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
@import "components/Button";
|
||||
|
||||
.app-navbar {
|
||||
background-color: $purple200;
|
||||
background-color: $darkGreen;
|
||||
color: $indigoWhite;
|
||||
height: 4.5rem;
|
||||
display: flex;
|
||||
border-bottom: 1px solid black;
|
||||
@@ -14,11 +15,15 @@
|
||||
|
||||
button {
|
||||
@extend %button-style;
|
||||
color: $indigoWhite;
|
||||
border-color: transparent;
|
||||
border-radius: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
background-color: $mintGreen;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-left {
|
||||
@@ -40,7 +45,6 @@
|
||||
// top right corner, Mikayla Dobson text
|
||||
a {
|
||||
transition: color 150ms ease;
|
||||
color: black;
|
||||
font-weight: 900;
|
||||
font-size: 2rem;
|
||||
padding-left: 1rem;
|
||||
@@ -51,7 +55,7 @@
|
||||
color: inherit;
|
||||
}
|
||||
&:hover {
|
||||
color: purple;
|
||||
color: $mintGreen;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
}
|
||||
|
||||
10
src/sass/components/_Page.scss
Normal file
10
src/sass/components/_Page.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
@import "../helper/variables";
|
||||
|
||||
%page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
background-color: #fff;
|
||||
}
|
||||
@@ -2,13 +2,13 @@ $pink50: #ffffff;
|
||||
$purple100: #ffffff;
|
||||
$purple200: #ffffff;
|
||||
|
||||
$indigoOne: #283593;
|
||||
$indigoOne: #301755;
|
||||
$indigoWhite: #e8eaf6;
|
||||
$lightIndigo: #8191ec;
|
||||
|
||||
$lilac: #e2e0fe;
|
||||
|
||||
$davysGrey: #4C4C47;
|
||||
$darkBlueGreen: #1a6f6d;
|
||||
|
||||
$darkGreen: #264935;
|
||||
$mintGreen: #bef9ca;
|
||||
@@ -3,7 +3,7 @@
|
||||
|
||||
.about-me-page {
|
||||
h1 {
|
||||
color: darkblue;
|
||||
color: $indigoOne;
|
||||
font-weight: 800;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
@@ -52,31 +52,25 @@
|
||||
|
||||
.cw-examples {
|
||||
display: flex;
|
||||
.examples-left {
|
||||
max-width: 35vw;
|
||||
}
|
||||
.examples-right {
|
||||
display: flex;
|
||||
min-width: 65vw;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
.sources {
|
||||
min-width: 100%;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
.sources {
|
||||
display: inline-flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-evenly;
|
||||
width: 100%;
|
||||
> * {
|
||||
display: inline-flex;
|
||||
flex-flow: row nowrap;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
> * {
|
||||
display: inline-flex;
|
||||
flex-flow: column nowrap;
|
||||
width: 40%;
|
||||
height: 15rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
flex-flow: column nowrap;
|
||||
width: 35%;
|
||||
height: 15rem;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
padding: 1rem;
|
||||
button {
|
||||
@extend %button-style;
|
||||
background-color: $indigoWhite;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "../helper/animations";
|
||||
@import "../helper/variables";
|
||||
@import "../components/Divider";
|
||||
|
||||
.welcome-page {
|
||||
@@ -21,7 +22,8 @@
|
||||
|
||||
font-size: 1.2rem;
|
||||
border-radius: 12px;
|
||||
background-color: lightgray;
|
||||
background-color: $indigoOne;
|
||||
color: $lilac;
|
||||
|
||||
animation: sideToSide 10s infinite;
|
||||
}
|
||||
@@ -33,6 +35,9 @@
|
||||
font-weight: 500;
|
||||
padding: 0.6rem;
|
||||
animation: sideToSide 15s infinite;
|
||||
|
||||
background-color: $indigoOne;
|
||||
color: $lilac;
|
||||
}
|
||||
|
||||
.divider {
|
||||
@@ -45,15 +50,3 @@
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
display: 'flex',
|
||||
margin: '2rem',
|
||||
width: '35vw',
|
||||
padding: '1rem',
|
||||
flexDirection: 'column',
|
||||
backgroundColor: pink[50],
|
||||
alignItems: 'center',
|
||||
fontSize: '1.2rem',
|
||||
borderRadius: '12px'
|
||||
*/
|
||||
Reference in New Issue
Block a user