88 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
			
		
		
	
	
			88 lines
		
	
	
		
			1.6 KiB
		
	
	
	
		
			SCSS
		
	
	
	
| .whoami {
 | |
|   padding: 0 1rem;
 | |
|   margin: 1rem 0;
 | |
|   border-radius: 0.25rem;
 | |
|   width: 100%;
 | |
| 
 | |
|   @include flexbox();
 | |
|   @media only screen and (max-width: 769px) {
 | |
|     @include align-items(center);
 | |
|     @include flex-direction(column);
 | |
|   }
 | |
| 
 | |
|   &__contents {    
 | |
|     margin-top: 0.5rem;
 | |
| 
 | |
|     @media only screen and (max-width: 769px) {
 | |
|       @include flexbox();
 | |
|       @include flex-direction(column);
 | |
|       @include justify-content(center);
 | |
|       @include align-items(center);
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &__image {    
 | |
|     width: 100%;
 | |
|     height: 100%;
 | |
|     object-fit: cover;
 | |
|     border-radius: 0.25rem;
 | |
|     @include box-shadow(0, 2px, 3px, 0, rgba(0, 0, 0, 0.25));
 | |
| 
 | |
|     &-wrapper {
 | |
|       min-width: 100px;
 | |
|       max-width: 150px;
 | |
|       height: auto;     
 | |
|       margin-right: 1rem;
 | |
|       
 | |
|       @include flexbox();
 | |
|       @include flex-direction(column);      
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &__title {
 | |
|     font-size: 1.5rem;
 | |
|     font-weight: 700;
 | |
|     margin-bottom: 0.5rem;
 | |
|     padding-bottom: 0.5rem;
 | |
| 
 | |
|     @include themify($codeblock) {
 | |
|       text-decoration: underline double themed('content-pre-main-color');
 | |
|     }
 | |
|   }
 | |
|   
 | |
|   &__desc {
 | |
|     font-size: 1rem;
 | |
|     padding-left: 0.25rem;
 | |
| 
 | |
|     @media only screen and (max-width: 769px) {
 | |
|       width: 75%;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &__gutter {
 | |
|     height: 2rem;
 | |
|   }
 | |
| 
 | |
|   &__social {
 | |
|     margin-top: 0.5rem;
 | |
|     a {
 | |
|       @include themify($themes) {
 | |
|         text-decoration: none;
 | |
|         color: themed('social-icon-color');
 | |
|         &:hover {
 | |
|           color: themed('social-icon-hover-color');
 | |
|           @include transition(color, 0.2s, ease);
 | |
|         }        
 | |
|       }   
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &__written-by {
 | |
|     font-size: 0.9rem;
 | |
|     opacity: 0.65;
 | |
|   }
 | |
| 
 | |
|   &-hr {
 | |
|     border-radius: 0.5rem;
 | |
|   }
 | |
| } |