Diane Portfolio
  • About Me
  • Contact

<style>

Home

Work

Case Studies

Gallery

About Me

Contact Me

ruochen0421@yahoo.com

Designed by Diane Liu 2024

XDribbble
:root {
    --column-spacing: 2em !important;
    --lift-radius: 30px !important;
    --body-font: 18px !important;
    
    --color-bg-default: #0E1012 !important;
    
    --lrc-color-white: #F2F2F7;
    --lrc-color-white2: #EBEBF0;
    --lrc-color-white3: #E5E5EA;
    --lrc-color-white4: #D8D8DC;
    --lrc-color-white5: #D1D1D6;
    --lrc-color-white6: #BCBCC0;
    --lrc-color-white7: #AEAEB2;
    --lrc-color-white8: #636366;
    --lrc-color-white9: #363638;
    
    --lrc-color-green: #BBF6D0;
    --lrc-color-blue: #89B8FF;
    
    
    --color-border-default: var(--lrc-color-white9) !important;
    
    --color-bg-gray: var(--dark-grey) !important;
    
    
    
    --collection-card-cover-size-small: calc(20%) !important;
    --collection-card-cover-size-medium: calc(30%) !important;
    --collection-card-cover-size-large: calc(45%) !important;
    --lift-width: 1080px;
    --layout-max-width: var(--lift-width)!important;
  }
  


html { 
  font-size: var(--body-font) !important;
}

body { 
  font-size: var(--body-font) !important;
  font-family: "Poppins", sans-serif!important;
  font-weight: 400;
  font-style: normal;
}


.color-gray{
  color: var(--lrc-color-white6);
}
.color-green{
  color: var(--lrc-color-green);
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font  font-style: normal;
}


.mulish-regular {
  font-family: "Mulish", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}




/*------------------------*/

.super-content.max-width {
  max-width: var(--lift-width) !important;
  margin: auto !important;
}

.super-content {
  padding-bottom: 4em !important;
}




/*------------------------*/
.notion-page {
  border-radius: var(--lift-radius) !important;
  align-content: stretch!important;
  
}

.notion-page > div {
  border-radius: var(--lift-radius) !important;
  display: flex;
  transition: 300ms ease-in !important;
  padding: 0.5em !important;
  border: 1px solid var(--color-border-default) !important;
}

.notion-page__title.notion-semantic-string {
  border-bottom: none !important;
}


/*------------------------*/
h1 {
  font-style: normal !important;
  font-family: Poppins!important;
  font-size: 3.25rem !important;
  line-height: 120% !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.5em !important;
  max-width: 900px !important;
  color: var(--lrc-color-white3);
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  
  -webkit-animation: fadeIn 0.5s !important;
  -moz-animation: fadeIn 0.5s !important;
  -ms-animation: fadeIn 0.5s !important;
  -o-animation: fadeIn 0.5s !important;
  animation: fadeIn 0.5s !important;
}
  
h2 {
  font-size: 1.8rem !important;
  font-family: poppins !important;
  line-height: 105% !important;
  letter-spacing: -0.01em !important;
  margin-top: 2.5em !important;
  margin-bottom: 1em !important;
  max-width: 900px !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--lrc-color-white3);
  
  -webkit-animation: fadeIn 0.75s !important;
  -moz-animation: fadeIn 0.75s !important;
  -ms-animation: fadeIn 0.75s !important;
  -o-animation: fadeIn 0.75s !important;
  animation: fadeIn 0.75s !important;
}
  
h3 {
  font-size: 1.375rem !important;
  font-family: poppins !important;
  line-height: 135% !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 0.5em !important;
  max-width: 900px !important;
  margin-bottom: 1.8em!important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: var(--lrc-color-green);
  
  -webkit-animation: fadeIn 1s !important;
  -moz-animation: fadeIn 1s !important;
  -ms-animation: fadeIn 1s !important;
  -o-animation: fadeIn 1s !important;
  animation: fadeIn 1s !important;
  font-weight: 600 !important;
}

p.notion-text {
  line-height: 160% !important;
  margin-bottom: 1rem !important;
  padding-left:0.2em!important;
  font-family: mulish !important;
  font-size:1rem!important;
  letter-spacing: 0.01rem!important;
  color:var(--lrc-color-white6);
  max-width: 900px !important;
  
  -webkit-animation: fadeIn 1.25s !important;
  -moz-animation: fadeIn 1.25s !important;
  -ms-animation: fadeIn 1.25s !important;
  -o-animation: fadeIn 1.25s !important;
  animation: fadeIn 1.25s !important;
}

img {
  border-radius: var(--lift-radius) !important;
  -webkit-animation: fadeIn 1.5s !important;
  -moz-animation: fadeIn 1.5s !important;
  -ms-animation: fadeIn 1.5s !important;
  -o-animation: fadeIn 1.5s !important;
  animation: fadeIn 1.5s !important;
}

.notion-image {
  margin-bottom: 2rem !important;
  margin-top:0.5rem!important;
}

video {
  border-radius: var(--lift-radius) !important;
  -webkit-animation: fadeIn 1.5s !important;
  -moz-animation: fadeIn 1.5s !important;
  -ms-animation: fadeIn 1.5s !important;
  -o-animation: fadeIn 1.5s !important;
  animation: fadeIn 1.5s !important;
}

.notion-image img {
  width:100%!important;
  object-fit: cover!important;
}

.notion-image:hover img{
  transform:scale(1.01) !important;
  opacity: 0.96 ;


}
.notion-image:hover img{
  transition: all 0.2s ease-in-out !important;
}

.notion-embed__content {
  border-radius: var(--lift-radius) !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}
/*------------------------*/

.notion-page {
  border-radius: var(--lift-radius) !important;
}

.notion-page > div {
  border-radius: var(--lift-radius) !important;
  display: flex;
  transition: 300ms ease-in !important;
  padding: 0.5em !important;
  border: 1px solid var(--color-border-default) !important;
}

.notion-heading {
  padding: 0 !important;
}

.notion-embed__content {
  border-radius: var(--lift-radius) !important;
  overflow: hidden !important;
  margin-bottom: 2rem !important;
}



/*------------------------*/

.highlighted-background {
  transition: 0.3s ease-in-out !important;
  border-radius: 2px !important;
}

.highlighted-background.bg-green:hover {
  opacity: 0.8 !important;
}

.highlighted-background a {
  display: block !important;
  text-align: center !important;
  margin-top: 1em;
  padding: 0.7em !important;
  border: none !important;
  opacity: 1 !important;
  border-radius: var(--lift-radius) !important;
  border: 2px solid var(--lrc-color-green) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.highlighted-background.bg-green a {
  color: var(--lrc-color-green) !important;
  background-color: transparent !important;
  text-decoration:none!important;
}


/*------------------------*/
.notion-bulleted-list,
.notion-numbered-list {
  padding-bottom: 2em !important;
  line-height: 160% !important;
  margin-bottom: 1rem !important;
  font-family: "mulish",Sans-Serif !important;
  font-size:1rem!important;
  letter-spacing: 0.01rem!important;
  color:var(--lrc-color-white7);;
}


.notion-callout {
  border-radius: var(--lift-radius) !important;
  border: 1px solid var(--color-border-default) !important;
  padding-left: 1.5em;
  padding-right: 1.5em;
  overflow: visible !important;
  margin-bottom: 2em !important;
  margin-top:0.5em;
}

.notion-callout__icon {
  display: none !important;
}

.notion-callout__content{
  margin-inline-start:0px!important;

}

h3.notion-heading.notion-semantic-string{
  color:var(--lrc-color-green)!important;
  margin-bottom:1.5em!important;
}

/*-
.notion-heading.color-green.notion-semantic-string{
  margin-bottom: 0.5em !important;
}
  
.notion-text__content.notion-semantic-string{
  padding-bottom:0em !important;
}
*/

/*--------------------------*/
.notion-quote {
  font-size: 0.8em !important;
  font-family: var(--body-font);
  width: 100% !important;
  margin: 1rem auto !important;
  padding: 1em 1em 1em 1em !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  border-radius: var(--lift-radius) !important;
  border: 1px solid var(--color-border-default) !important;
}

.notion-quote.bg-green{
  letter-spacing:0.09em;
}

.notion-quote.bg-gray{
  padding-bottom: 2.9em !important;
}


.notion-quote.bg-gray p {
  margin-bottom: 0px !important;
  font-size: 1.1em!important;
  color:var(--lrc-color-white7);

}

.notion-caption{
  margin-bottom: 0.1rem !important;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em!important;
  align-self: center!important;
  color:var(--lrc-color-white8);
}


.notion-root {
  margin-bottom:0!important;
  padding-bottom:0!important;
}


html.theme-light {
  --footer-background-color: #24282B !important;
  --footer-text-color: var(--main-light)!important;
  


/*-------------------*/

@media screen and (max-width: 880px) {
  :root {
    --body-font: 16px !important;
    --collection-card-cover-size-small: 100% !important;
    --collection-card-cover-size-medium: 100% !important;
    --collection-card-cover-size-large: 100% !important;
  }

h1 {
  font-size: 2rem !important;
}

h2 {
  font-size: 1.5rem !important;
}

h3 {
  font-size: 1.25rem !important;
}

.notion-column {
  margin-bottom: 0 !important;
  padding: 0 !important;
}

.notion-quote {
  padding: 1em !important;
}




@media screen and (min-width: 880px) {
.super-footer.floating {
  width: calc(100% - 2em) !important;
  max-width: calc(var(--lift-width) - 2em) !important;
  align-self: center !important;
}