diff options
| author | Jason McCormick <jdm@mfamily.org> | 2025-10-09 12:49:05 -0400 |
|---|---|---|
| committer | Jason McCormick <jdm@mfamily.org> | 2025-10-09 12:49:05 -0400 |
| commit | 3c02dc1c0cd480fc11647ec0f7900d4034a00cc4 (patch) | |
| tree | 468f503c5b64dec012ca3f09350a85aa500d20d5 /assets/sass/layout/_header.scss | |
initial add
Diffstat (limited to 'assets/sass/layout/_header.scss')
| -rw-r--r-- | assets/sass/layout/_header.scss | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 0000000..52b3ce5 --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,261 @@ +///
+/// Dimension by HTML5 UP
+/// html5up.net | @ajlkn
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+///
+
+/* Header */
+
+ #header {
+ @include vendor('display', 'flex');
+ @include vendor('flex-direction', 'column');
+ @include vendor('align-items', 'center');
+ @include vendor('transition', (
+ 'transform #{_duration(article)} ease-in-out',
+ 'filter #{_duration(article)} ease-in-out',
+ 'opacity #{_duration(article)} ease-in-out',
+ ));
+ background-image: -moz-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: -webkit-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: -ms-radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ background-image: radial-gradient(rgba(0,0,0,0.25) 25%, rgba(0,0,0,0) 55%);
+ max-width: 100%;
+ text-align: center;
+
+ > * {
+ @include vendor('transition', 'opacity #{_duration(article)} ease-in-out');
+ position: relative;
+ margin-top: 3.5rem;
+
+ &:before {
+ content: '';
+ display: block;
+ position: absolute;
+ top: calc(-3.5rem - 1px);
+ left: calc(50% - #{_size(border-width) * 1});
+ width: _size(border-width);
+ height: calc(3.5rem + 1px);
+ background: _palette(border);
+ }
+ }
+
+ > :first-child {
+ margin-top: 0;
+
+ &:before {
+ display: none;
+ }
+ }
+
+ .logo {
+ width: 5.5rem;
+ height: 5.5rem;
+ line-height: 5.5rem;
+ border: solid _size(border-width) _palette(border);
+ border-radius: 100%;
+
+ .icon {
+ &:before {
+ font-size: 2rem;
+ }
+ }
+ }
+
+ .content {
+ border-style: solid;
+ border-color: _palette(border);
+ border-top-width: _size(border-width);
+ border-bottom-width: _size(border-width);
+ max-width: 100%;
+
+ .inner {
+ @include vendor('transition', (
+ 'max-height #{_duration(intro)} ease',
+ 'padding #{_duration(intro)} ease',
+ 'opacity #{_duration(article)} ease-in-out'
+ ));
+ @include vendor('transition-delay', '0.25s');
+ padding: 3rem 2rem;
+ max-height: 40rem;
+ overflow: hidden;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ p {
+ text-transform: uppercase;
+ letter-spacing: _font(letter-spacing);
+ font-size: 0.8rem;
+ line-height: 2;
+ }
+ }
+
+ nav {
+ ul {
+ @include vendor('display', 'flex');
+ margin-bottom: 0;
+ list-style: none;
+ padding-left: 0;
+ border: solid _size(border-width) _palette(border);
+ border-radius: _size(border-radius);
+
+ li {
+ padding-left: 0;
+ border-left: solid _size(border-width) _palette(border);
+
+ &:first-child {
+ border-left: 0;
+ }
+
+ a {
+ display: block;
+ min-width: 7.5rem;
+ height: 2.75rem;
+ line-height: 2.75rem;
+ padding: 0 1.25rem 0 (1.25rem + _font(letter-spacing));
+ text-transform: uppercase;
+ letter-spacing: _font(letter-spacing);
+ font-size: 0.8rem;
+ border-bottom: 0;
+
+ &:hover {
+ background-color: _palette(border-bg);
+ }
+
+ &:active {
+ background-color: _palette(border-bg-alt);
+ }
+ }
+ }
+ }
+
+ &.use-middle {
+ &:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: calc(50% - #{_size(border-width) * 1});
+ width: _size(border-width);
+ height: 100%;
+ background: _palette(border);
+ }
+
+ ul {
+ li {
+ &.is-middle {
+ border-left: 0;
+ }
+ }
+ }
+ }
+ }
+
+ body.is-article-visible & {
+ @include vendor('transform', 'scale(0.95)');
+ @include vendor('filter', 'blur(0.1rem)');
+ opacity: 0;
+ }
+
+ body.is-preload & {
+ > * {
+ opacity: 0;
+ }
+
+ @include vendor('filter', 'blur(0.125rem)');
+
+ .content {
+ .inner {
+ max-height: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ opacity: 0;
+ }
+ }
+ }
+
+ @include breakpoint('<=medium') {
+ .content {
+ p {
+ br {
+ display: none;
+ }
+ }
+ }
+ }
+
+ @include breakpoint('<=small') {
+ > * {
+ margin-top: 2rem;
+
+ &:before {
+ top: calc(-2rem - 1px);
+ height: calc(2rem + 1px);
+ }
+ }
+
+ .logo {
+ width: 4.75rem;
+ height: 4.75rem;
+ line-height: 4.75rem;
+
+ .icon {
+ &:before {
+ font-size: 1.75rem;
+ }
+ }
+ }
+
+ .content {
+ .inner {
+ padding: 2.5rem 1rem;
+ }
+
+ p {
+ line-height: 1.875;
+ }
+ }
+ }
+
+ @include breakpoint('<=xsmall') {
+ padding: 1.5rem 0;
+
+ .content {
+ .inner {
+ padding: 2.5rem 0;
+ }
+ }
+
+ nav {
+ ul {
+ @include vendor('flex-direction', 'column');
+ min-width: 10rem;
+ max-width: 100%;
+
+ li {
+ border-left: 0;
+ border-top: solid _size(border-width) _palette(border);
+
+ &:first-child {
+ border-top: 0;
+ }
+
+ a {
+ height: 3rem;
+ line-height: 3rem;
+ min-width: 0;
+ width: 100%;
+ }
+ }
+ }
+
+ &.use-middle {
+ &:after {
+ display: none;
+ }
+ }
+ }
+ }
+ }
\ No newline at end of file |