diff options
author | Ryan Schanzenbacher <ryan@rschanz.org> | 2021-12-26 00:30:09 -0500 |
---|---|---|
committer | Ryan Schanzenbacher <ryan@rschanz.org> | 2021-12-26 00:30:09 -0500 |
commit | 98a21b966410c127e74b16e7a2817882ee16560f (patch) | |
tree | ee646c86e3d3f0fa1cd952294d49feeeb700d60f /themes/hugo-coder/assets/scss/_navigation.scss | |
parent | e6eec31b71ab728f6610f4e764b2e206fb95f940 (diff) |
convert theme from submodule to regular files
Diffstat (limited to 'themes/hugo-coder/assets/scss/_navigation.scss')
m--------- | themes/hugo-coder | 0 | ||||
-rw-r--r-- | themes/hugo-coder/assets/scss/_navigation.scss | 143 |
2 files changed, 143 insertions, 0 deletions
diff --git a/themes/hugo-coder b/themes/hugo-coder deleted file mode 160000 | |||
Subproject 55b2a150f990bc56364dba347bc9acc6aab07be | |||
diff --git a/themes/hugo-coder/assets/scss/_navigation.scss b/themes/hugo-coder/assets/scss/_navigation.scss new file mode 100644 index 0000000..cd55a60 --- /dev/null +++ b/themes/hugo-coder/assets/scss/_navigation.scss | |||
@@ -0,0 +1,143 @@ | |||
1 | .navigation { | ||
2 | height: 6rem; | ||
3 | width: 100%; | ||
4 | |||
5 | a, | ||
6 | span { | ||
7 | display: inline; | ||
8 | font-size: 1.7rem; | ||
9 | font-family: $font-family; | ||
10 | font-weight: 600; | ||
11 | color: $fg-color; | ||
12 | } | ||
13 | |||
14 | a { | ||
15 | |||
16 | &:hover, | ||
17 | &:focus { | ||
18 | color: $link-color; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .navigation-title { | ||
23 | letter-spacing: 0.1rem; | ||
24 | text-transform: uppercase; | ||
25 | } | ||
26 | |||
27 | .navigation-list { | ||
28 | float: right; | ||
29 | list-style: none; | ||
30 | margin-bottom: 0; | ||
31 | margin-top: 0; | ||
32 | |||
33 | @media only screen and (max-width: 768px) { | ||
34 | position: relative; | ||
35 | top: 2rem; | ||
36 | right: 0; | ||
37 | z-index: 5; | ||
38 | visibility: hidden; | ||
39 | opacity: 0; | ||
40 | padding: 0; | ||
41 | max-height: 0; | ||
42 | width: 100%; | ||
43 | background-color: $bg-color; | ||
44 | border-top: solid 2px $alt-bg-color; | ||
45 | border-bottom: solid 2px $alt-bg-color; | ||
46 | transition: opacity 0.25s, max-height 0.15s linear; | ||
47 | } | ||
48 | |||
49 | .navigation-item { | ||
50 | float: left; | ||
51 | margin: 0; | ||
52 | position: relative; | ||
53 | |||
54 | @media only screen and (max-width: 768px) { | ||
55 | float: none !important; | ||
56 | text-align: center; | ||
57 | |||
58 | a, | ||
59 | span { | ||
60 | line-height: 5rem; | ||
61 | } | ||
62 | } | ||
63 | |||
64 | a, | ||
65 | span { | ||
66 | margin-left: 1rem; | ||
67 | margin-right: 1rem; | ||
68 | } | ||
69 | } | ||
70 | |||
71 | .separator { | ||
72 | @media only screen and (max-width: 768px) { | ||
73 | display: none; | ||
74 | } | ||
75 | } | ||
76 | |||
77 | .menu-separator { | ||
78 | @media only screen and (max-width: 768px) { | ||
79 | border-top: 2px solid $fg-color; | ||
80 | margin: 0 8rem; | ||
81 | |||
82 | span { | ||
83 | display: none; | ||
84 | } | ||
85 | } | ||
86 | } | ||
87 | } | ||
88 | |||
89 | #dark-mode-toggle { | ||
90 | margin: 1.7rem 0; | ||
91 | font-size: 2.4rem; | ||
92 | line-height: inherit; | ||
93 | bottom: 2rem; | ||
94 | left: 2rem; | ||
95 | z-index: 100; | ||
96 | position: fixed; | ||
97 | } | ||
98 | |||
99 | #menu-toggle { | ||
100 | display: none; | ||
101 | |||
102 | @media only screen and (max-width: 768px) { | ||
103 | &:checked+label>i { | ||
104 | color: $alt-bg-color; | ||
105 | } | ||
106 | |||
107 | &:checked+label+ul { | ||
108 | visibility: visible; | ||
109 | opacity: 1; | ||
110 | max-height: 100rem; | ||
111 | } | ||
112 | } | ||
113 | } | ||
114 | |||
115 | .menu-button { | ||
116 | display: none; | ||
117 | |||
118 | @media only screen and (max-width: 768px) { | ||
119 | position: relative; | ||
120 | display: block; | ||
121 | font-size: 2.4rem; | ||
122 | font-weight: 400; | ||
123 | } | ||
124 | |||
125 | i { | ||
126 | |||
127 | &:hover, | ||
128 | &:focus { | ||
129 | color: $alt-fg-color; | ||
130 | } | ||
131 | } | ||
132 | } | ||
133 | |||
134 | i { | ||
135 | color: $fg-color; | ||
136 | cursor: pointer; | ||
137 | |||
138 | &:hover, | ||
139 | &:focus { | ||
140 | color: $link-color; | ||
141 | } | ||
142 | } | ||
143 | } | ||