angelovcom.net

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs

_site-header.scss (2093B)

      1 // Site header
      2 
      3 .site-header {
      4 	padding: 1em;
      5 
      6 	&.featured-image {
      7 		display: flex;
      8 		flex-direction: column;
      9 		justify-content: space-between;
     10 		min-height: 90vh;
     11 
     12 		.site-branding-container {
     13 			margin-bottom: auto;
     14 		}
     15 	}
     16 
     17 	@include media(tablet) {
     18 		margin: 0;
     19 		padding: 3rem 0;
     20 
     21 		&.featured-image {
     22 			min-height: 100vh;
     23 			margin-bottom: 3rem;
     24 		}
     25 	}
     26 }
     27 
     28 // Site branding
     29 
     30 .site-branding {
     31 
     32 	color: $color__text-light;
     33 	-webkit-hyphens: auto;
     34 	-moz-hyphens: auto;
     35 	-ms-hyphens: auto;
     36 	hyphens: auto;
     37 	position: relative;
     38 	word-wrap: break-word;
     39 
     40 	@include media(tablet) {
     41 		margin: 0 $size__site-margins;
     42 	}
     43 }
     44 
     45 // Site logo
     46 
     47 .site-logo {
     48 
     49 	position: relative;
     50 	z-index: 999;
     51 	margin-bottom: calc(.66 * #{$size__spacing-unit});
     52 
     53 	@include media(tablet) {
     54 		margin-bottom: 0;
     55 		position: absolute;
     56 		right: calc(100% + (1.25 * #{$size__spacing-unit}));
     57 		top: 4px; // Accounts for box-shadow widths
     58 		z-index: 999;
     59 	}
     60 
     61 	.custom-logo-link {
     62 		border-radius: 100%;
     63 		box-sizing: content-box;
     64 		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
     65 		display: block;
     66 		width: 50px;
     67 		height: 50px;
     68 		overflow: hidden;
     69 		transition: box-shadow $background_transition ease-in-out;
     70 
     71 		.custom-logo {
     72 			min-height: inherit;
     73 		}
     74 
     75 		&:hover,
     76 		&:active,
     77 		&:focus {
     78 			box-shadow: 0 0 0 2px rgba(0, 0, 0, 1);
     79 		}
     80 
     81 		@include media(tablet) {
     82 			width: 64px;
     83 			height: 64px;
     84 		}
     85 	}
     86 }
     87 
     88 // Site title
     89 
     90 .site-title {
     91 	margin: auto;
     92 	display: inline;
     93 	color: $color__text-main;
     94 
     95 	a {
     96 		color: $color__text-main;
     97 
     98 		&:link,
     99 		&:visited {
    100 			color: $color__text-main;
    101 		}
    102 
    103 		&:hover {
    104 			color: $color__text-hover;
    105 		}
    106 	}
    107 
    108 	.featured-image & {
    109 		margin: 0;
    110 
    111 		@include media(tablet) {
    112 			display: inline-block;
    113 		}
    114 	}
    115 
    116 	/* When there is no description set, make sure navigation appears below title. */
    117 	+ .main-navigation {
    118 		display: block;
    119 	}
    120 
    121 	@include media(tablet) {
    122 		display: inline;
    123 	}
    124 
    125 	&:not(:empty) + .site-description:not(:empty):before {
    126 		content: "\2014";
    127 		margin: 0 .2em;
    128 	}
    129 }
    130 
    131 // Site description
    132 
    133 .site-description {
    134 
    135 	display: inline;
    136 	color: $color__text-light;
    137 	font-weight: normal;
    138 	margin: 0;
    139 }