CSS: Better nav on mobile and update icon
This commit is contained in:
parent
79f4afd3ab
commit
2821e8108e
File diff suppressed because one or more lines are too long
Before Width: | Height: | Size: 33 KiB After Width: | Height: | Size: 33 KiB |
|
@ -53,7 +53,7 @@
|
||||||
--accent-bg-light: #303035;
|
--accent-bg-light: #303035;
|
||||||
--code-bg: #3e3e4b;
|
--code-bg: #3e3e4b;
|
||||||
--text: #eee;
|
--text: #eee;
|
||||||
--text-light: #ababab;
|
--text-light: #cecece;
|
||||||
--border: #aaa;
|
--border: #aaa;
|
||||||
--accent: #8be9fd;
|
--accent: #8be9fd;
|
||||||
--accent-light: #e4e9a8;
|
--accent-light: #e4e9a8;
|
||||||
|
@ -105,10 +105,9 @@ h1 .pfp {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
.pfp {
|
||||||
h1 .pfp {
|
|
||||||
border: 1px solid var(--border);
|
border: 1px solid var(--border);
|
||||||
}
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pfp-name {
|
.pfp-name {
|
||||||
|
@ -143,15 +142,6 @@ nav .pfp-text {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
|
||||||
margin-right: 5%;
|
|
||||||
margin-left: 5%;
|
|
||||||
padding: 1rem 0.3rem;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
padding-top: 1.5rem;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Differentiating between normal content links and meta content links */
|
/* Differentiating between normal content links and meta content links */
|
||||||
.meta a, .post-meta a, footer a, #after-content a {
|
.meta a, .post-meta a, footer a, #after-content a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -178,17 +168,34 @@ nav strong > a {
|
||||||
font-weight: 650;
|
font-weight: 650;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav strong > a, nav ul li {
|
nav strong > a, nav ul li {
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* :facepalm: */
|
nav {
|
||||||
@media screen and (min-width: 368px) {
|
margin-right: 5%;
|
||||||
|
margin-left: 5%;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
padding: 1rem 0.3rem;
|
||||||
|
padding-top: 1.5rem;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
@media (min-width: 601px) {
|
||||||
nav ul {
|
nav ul {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
/* Center-aligned nav on mobile */
|
||||||
|
nav {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
nav a .pfp-name {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
nav .selected {
|
nav .selected {
|
||||||
border-bottom: 2.5px solid;
|
border-bottom: 2.5px solid;
|
||||||
|
@ -327,10 +334,9 @@ a {
|
||||||
a:visited {
|
a:visited {
|
||||||
color: var(--link-visited);
|
color: var(--link-visited);
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
|
||||||
nav a:visited {
|
nav a:visited {
|
||||||
color: var(--nav-link);
|
color: var(--nav-link);
|
||||||
}
|
|
||||||
}
|
}
|
||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
Loading…
Reference in New Issue