Diane Portfolio
  • About Me
  • Contact

<style>

Home

Work

Case Studies

Gallery

About Me

Contact Me

ruochen0421@yahoo.com

Designed by Diane Liu 2024

XDribbble

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}


/*root*/
:root {
    --column-spacing: 1rem !important;
    --lift-radius: 30px !important;
    --body-font: 16px !important;
    --lift-width:1480px !important;
    --layout-max-width:1480px !important;
    
    --border-radii-layout: var(--lift-radius) !important;
    
}

/*base size*/

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

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


/*composition*/

.super-content.max-width {
  max-width: 1450px !important;
  margin: auto !important;
}

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



/*typeface and animation*/
/*h1 is the title on the very top*/
h1 {
  font-family: Poppins !important;
  font-size: 2.986rem !important;
  
  line-height: 115% !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  
  max-width: var(--lift-width) !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 is the section title*/  
h2 {
  font-size: 2.488rem !important;
  font-family: Mulish !important;
	line-height: 115% !important;
  font-weight: 700 !important;
  letter-spacing: -0.022em !important;

  margin-top: 2.25rem !important;
  margin-bottom: 1rem !important;
  
  max-width: 900px !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 is the block content title, or flexible titles, big copies*/
h3 {
  font-style: normal !important;
  font-size: 1.44rem !important;
  font-family: mulish !important;
  line-height: 115% !important;
  letter-spacing: -0.022em  !important;
  margin-bottom: 2.25rem;
  margin-bottom: 1rem!important;
  text-align: left !important;
  font-weight: 700!important;
  max-width: 900px !important;
  color: var(--lrc-color-blue) !important;
  
  -webkit-animation: fadeIn 1s !important;
  -moz-animation: fadeIn 1s !important;
  -ms-animation: fadeIn 1s !important;
  -o-animation: fadeIn 1s !important;
  animation: fadeIn 1s !important;

}




p {
  line-height: 160% !important;
  margin-bottom: 1rem !important;
  margin-top:1rem !important;
  font-family: mulish;
  font-weight:500;
  font-size:1rem!important;
  color:var(--lrc-color-white7);
  
  display:block;
  max-width: 900px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-block-start:1em;
  margin-block-end:1em;
  margin-inline-start:0px;
  margin-inline-start:0px;
  
  
  -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;
}


/*the cover video*/
#block-10dce5f90a3e80db87b1c70f9f1b5bb1 .notion-video__content video {
  width: 200%;
  margin-left:auto;
  margin-right:auto;
}

img, 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;
}

/* Styles Specific to Images within .notion-image */
.notion-image img {
  width: 100% !important;
  max-width: 1080px!important;
  object-fit: cover !important;
}

.notion-image.page-width > figcaption {
  max-width:900px;
  padding:1.3rem;
  padding-left:2rem;
  padding-right:2rem;
}



.notion-image:hover img {
  transform: scale(1.01) !important;
  opacity: 0.96;
  transition: all 0.2s ease-in-out !important;
}

/* Styles Specific to Videos within .notion-video */
.notion-video video {
  width: 100% !important;
  object-fit: cover !important;
  transition: all 0.2s ease-in-out !important;
}

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

/*callout icons*/

.notion-callout__icon {
	display: none;
}


.notion-callout__content {
	margin-inline-start: 1rem;
}

/*toggle switch headings (in article  use H3*/
.notion-toggle__trigger_icon {
	display:none;
}

.notion-toggle-heading-3 h3 {
  font-size: 1.44rem !important;
  font-family:Poppins !important;
  font-weight: 600 !important;
  margin-left:auto!important;
	margin-right:auto!important;
}

.notion-callout {
	padding:3rem;
	max-width: 1080px!important;
	margin-left:auto;
	margin-right:auto;
}

.notion-toggle.open.notion-toggle-heading-3 .notion-callout__content h3 {
	font-size:1.44rem !important;
	font-family:Mulish !important;
	font-weight:700 !important;
}

html.theme-light {
	  --color-text-default: var(--main-blue) !important;
  --color-bg-default: var(--beige) !important;
    --color-bg-gray-light: var(--icy) !important;
    
    --color-text-orange: var(--orange) !important;
	  --color-bg-orange: var(--orange) !important;
	  --color-text-blue: var(--main-blue) !important;
}


html.theme-dark {
  --color-text-default: var(--main-light) !important;
  --color-bg-default: var(--dark-blue) !important;

  --color-bg-gray-dark: var(--dark-grey) !important;

  --color-text-orange: var(--yellow) !important;
  --color-bg-orange: var(--yellow);
  --color-bg-orange-light: var(--yellow) !important;
  --color-text-blue: var(--main-light) !important;

}

.notion-callout__content p {
	font-size: 1em!important;
	opacity: 0.8;
}

/*code buttons and link*/
.notion-quote {
	border-inline-start: none;
}

.notion-quote p {
	margin-left: 0rem!important;
}

/*code buttons and link*/
.notion-quote {
	border-inline-start: none;
	font-size:0.9rem;
	font-weight:700;
	padding-left:6px!important;
	padding:0;
}

.notion-quote p {
	margin-top: 0rem!important;
}


.notion-semantic-string .link {
    font-weight: 700; 
    text-decoration: none!important; 
    opacity:0.6;
	  transition: opacity;
	  color: var(--color-text-orange);
	  background-color: transparent;
	  font-size: 0.9rem;
	  padding: 0;
	  text-decoration: none;
}
	  
.notion-semantic-string .link:hover {
	  color: var(--color-text-orange)!important;
	  opacity:1;
}

.notion-semantic-string .code {
  color: var(--color-text-orange)!important;
  background-color: transparent;
  font-size: 1.125rem; 
  padding: 0;
  text-decoration: none;
}


/*styling of the table*/
.notion-table__cell .notion-semantic-string {
	font-size: 0.9rem;
}

.notion-table__wrapper {
  margin:2rem;
  margin-top:0;
}

.notion-embed__container iframe {
  border-radius: 0!important;
}

.notion-callout.color-default.border {
  border:none!important;
  padding-top:0;
  padding-bottom:0;
}




/* mobile*/
@media (max-width:880px) {
  h1 {
    font-size:2rem!important;
  }
  h2 {
    font-size:1.5rem !important;

  }
  h3 {
    font-size:1.25rem !important;
    margin-bottom:0.5rem!important;
  }
  
  p {
    margin-bottom:2rem!important;
  }
  
  .notion-divider {
    margin: 1em 0 !important;
  }
  
  .notion-column {
    margin-bottom:0!important;
    padding: 0!important;
  }
  
  
  .notion-table__wrapper {
    max-height:100%;
    max-width:300px;
  }

.notion-callout {
  padding: 0!important;
  padding-top:2rem;
  padding-bottom:2rem;
  margin:0!important;
  margin-top:1rem;
  margin-bottom:1rem;
  margin-inline-start:0px;
  margin-inline-end:0px;
  
}

.notion-callout__content {
  margin:0;
}

.notion-callout.bg-gray-light.border {
  padding:1.25rem!important;
  padding-top:2rem!important;
  padding-bottom:1rem!important;
  margin-top:1rem!important;
}

  :root {
      --lift-radius: 24px !important;
      --body-font: 16px !important;
      
}








}