blob: efad0eca0f1db1e575232bfb6ad39814950b235f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
/**
* Horizontal Nav
* https://github.com/raj457036/attriCSS
*/
@use "../variables" as variables;
main nav a,
main nav a:visited {//pagination link styling
font-weight: var(--fh);
border: .1rem solid var(--c4);
border-radius: var(--br);
padding: .1rem var(--s1);
}
main nav a:hover {//makes border of pagination links hover color
border-color: var(--a3);
.svgh {
background: var(--a3);
opacity: 1;
}
}
header > nav > div:first-of-type {//Keep the logo from wrapping
display: inline;
min-width: fit-content;
padding-right: var(--s1);//add some spacing between nav divs
}
header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
margin-left: auto;
padding-right: var(--s1);//add some spacing between nav divs
}
nav > div {
ul, h2 {
line-height: 1.9;
margin: 0;
padding: 0;
}
margin: var(--s1) 0;
}
nav {
align-items: center;
justify-content: center;//center pagination horizontally
display: flex;
div h2 {
font-size: 1rem;
&:hover {
color: var(--a3);
}
}
h1 {
margin-bottom: 0;
margin-top: 0.2rem;
}
li {
display: inline-block;
margin: 0 .3rem;
}
}
main nav {
ul {
display: flex;
padding-left: 0;
}
margin-top: var(--s2);//pagination margin
li {
margin: .2rem;
}
li.inp {
padding-top: .1rem;
}
}
.outp {
padding: 0 .26rem .2rem;
}
.off {
color: var(--c4);
font-weight: var(--fh);
border: .1rem solid var(--c3);
border-radius: var(--br);
.svgh {
background: var(--c3);
opacity: 1;
}
}
.on {
font-weight: var(--fh);
border: .1rem solid var(--c4);
border-radius: var(--br);
}
.mode:hover, .cnav {
color: var(--a1);//pagination color current page
}
footer nav {
ul {
margin: 0;
padding: 0;
}
li {
margin: 0 .2rem .4rem;
}
}
//dropdown menu used for lang, etc.
.dropdown {
display: inline-block;
position: relative;
vertical-align: -3px;
font-weight: var(--fh);
font-size: 1.3rem;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 9;
font-weight: var(--fh);
font-size: 1.3rem;
}
.dropdown:hover .dropdown-content {
display: block;
a {
text-decoration: none;
}
}
// breakpoint makes header responsive for mobile layouts
@if map-get(variables.$breakpoints, "md") {
@media (max-width: map-get(variables.$breakpoints, "md")) {
header nav {
display: flex;
flex-direction: column;
h1 {
margin: var(--s2) 0 var(--s1);
}
div {
margin: auto // keeps top menu/search centered in mobile view
}
}
}
}
|
