fix: Feed icon size, corner roundness on mobile
This commit is contained in:
parent
ca50e1234f
commit
f2687f6620
GPG key ID:
93ECF15D3053D81C
|
|
@ -8,7 +8,7 @@
|
|||
<li><a href="{{ '/tags' | prepend: site.baseurl }}">Tags</a></li>
|
||||
<li><a href="{{ '/' | prepend: relative_url }}">Home</a></li>
|
||||
<li><a href="{{ '/feed.xml' | prepend: site.baseurl }}">
|
||||
<svg class="feed-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16">
|
||||
<path
|
||||
d="M1.988 1.988V3c.008.547.453.984 1 .988.004-.004.008-.004.012-.004v.028A8.977 8.977 0 0 1 11.988 13a.991.991 0 0 0 1 .984h1V13h-.004c0-.004 0-.004.004-.008C13.984 7.02 9.184 2.148 3.242 2.02A1.004 1.004 0 0 0 3 1.988v-.004zm0 4V7c.008.547.453.984 1 .988.004-.004.008-.004.012-.004V8a4.985 4.985 0 0 1 4.996 4.844 1.002 1.002 0 0 0 .988 1.145c.008-.005.012-.005.016-.005v.004h.984V13H10c0-3.793-3.047-6.898-6.82-6.992 0-.004-.004-.004-.004-.004A.892.892 0 0 0 3 5.988v-.004zm2 4a1.999 1.999 0 1 0-.002 3.998 1.999 1.999 0 0 0 .002-3.998zm0 0" />
|
||||
</svg>
|
||||
|
|
|
|||
85
style.css
85
style.css
|
|
@ -58,8 +58,8 @@
|
|||
--dark5: rgb(0, 0, 0);
|
||||
|
||||
/* General Setup */
|
||||
--rounded-corner: 12px; /* Set how rounded the corners will be */
|
||||
--rounded-corner-small: 8px; /* Set how rounded the small corners will be */
|
||||
--rounded-corner: 0.75rem; /* Set how rounded the corners will be */
|
||||
--rounded-corner-small: 0.5rem; /* Set how rounded the small corners will be */
|
||||
--primary-color: var(--purple2); /* Set your project primary color */
|
||||
--secondary-color: var(--blue2); /* Set your project secondary color */
|
||||
--background-color: var(--light-bg1); /* Set site background color */
|
||||
|
|
@ -67,46 +67,46 @@
|
|||
--container-width: 720px; /* Set content width */
|
||||
|
||||
/* Custom Color Palette */
|
||||
--borders: var(--light3);
|
||||
--borders: var(--light3);
|
||||
|
||||
--light-op01: rgba(255, 255, 255, 0.01);
|
||||
--light-op03: rgba(255, 255, 255, 0.03);
|
||||
--light-op05: rgba(255, 255, 255, 0.05);
|
||||
--light-op07: rgba(255, 255, 255, 0.07);
|
||||
--light-op09: rgba(255, 255, 255, 0.09);
|
||||
--light-op40: rgba(255, 255, 255, 0.4);
|
||||
--light-op50: rgba(255, 255, 255, 0.5);
|
||||
--light-op01: rgba(255, 255, 255, 0.01);
|
||||
--light-op03: rgba(255, 255, 255, 0.03);
|
||||
--light-op05: rgba(255, 255, 255, 0.05);
|
||||
--light-op07: rgba(255, 255, 255, 0.07);
|
||||
--light-op09: rgba(255, 255, 255, 0.09);
|
||||
--light-op40: rgba(255, 255, 255, 0.4);
|
||||
--light-op50: rgba(255, 255, 255, 0.5);
|
||||
|
||||
--dark-op01: rgba(0, 0, 0, 0.01);
|
||||
--dark-op03: rgba(0, 0, 0, 0.03);
|
||||
--dark-op05: rgba(0, 0, 0, 0.05);
|
||||
--dark-op07: rgba(0, 0, 0, 0.07);
|
||||
--dark-op09: rgba(0, 0, 0, 0.09);
|
||||
--dark-op40: rgba(0, 0, 0, 0.4);
|
||||
--dark-op50: rgba(0, 0, 0, 0.5);
|
||||
--dark-op01: rgba(0, 0, 0, 0.01);
|
||||
--dark-op03: rgba(0, 0, 0, 0.03);
|
||||
--dark-op05: rgba(0, 0, 0, 0.05);
|
||||
--dark-op07: rgba(0, 0, 0, 0.07);
|
||||
--dark-op09: rgba(0, 0, 0, 0.09);
|
||||
--dark-op40: rgba(0, 0, 0, 0.4);
|
||||
--dark-op50: rgba(0, 0, 0, 0.5);
|
||||
|
||||
--light-bg1: rgb(250, 250, 250);
|
||||
--light-bg2: rgb(255, 255, 255);
|
||||
--light-bg3: rgb(75, 75, 75);
|
||||
--light-bg1: rgb(250, 250, 250);
|
||||
--light-bg2: rgb(255, 255, 255);
|
||||
--light-bg3: rgb(75, 75, 75);
|
||||
|
||||
--dark-bg1: rgb(36, 36, 36);
|
||||
--dark-bg2: rgb(30, 30, 30);
|
||||
--dark-bg3: rgb(11, 11, 11);
|
||||
--dark-bg1: rgb(36, 36, 36);
|
||||
--dark-bg2: rgb(30, 30, 30);
|
||||
--dark-bg3: rgb(11, 11, 11);
|
||||
|
||||
--archive-bg-color: rgba(145, 65, 172, 0.1);
|
||||
--archive-bg-color-dark: rgba(220, 138, 221, 0.1);
|
||||
--archive-color: rgb(145, 65, 172);
|
||||
--archive-color-dark: rgb(220, 138, 221);
|
||||
--archive-bg-color: rgba(145, 65, 172, 0.1);
|
||||
--archive-bg-color-dark: rgba(220, 138, 221, 0.1);
|
||||
--archive-color: rgb(145, 65, 172);
|
||||
--archive-color-dark: rgb(220, 138, 221);
|
||||
|
||||
--disclaimer-bg-color: rgba(224, 27, 36, 0.1);
|
||||
--disclaimer-bg-color: rgba(224, 27, 36, 0.1);
|
||||
--disclaimer-bg-color-dark: rgba(226, 97, 81, 0.1);
|
||||
--disclaimer-color: rgb(224, 27, 36);
|
||||
--disclaimer-color-dark: rgb(246, 97, 81);
|
||||
--disclaimer-color: rgb(224, 27, 36);
|
||||
--disclaimer-color-dark: rgb(246, 97, 81);
|
||||
|
||||
--trigger-bg-color: rgba(156, 110, 3, 0.1);
|
||||
--trigger-bg-color-dark: rgba(248, 228, 92, 0.1);
|
||||
--trigger-color: rgb(156, 110, 3);
|
||||
--trigger-color-dark: rgb(248, 228, 92);
|
||||
--trigger-bg-color: rgba(156, 110, 3, 0.1);
|
||||
--trigger-bg-color-dark: rgba(248, 228, 92, 0.1);
|
||||
--trigger-color: rgb(156, 110, 3);
|
||||
--trigger-color-dark: rgb(248, 228, 92);
|
||||
|
||||
/* Custom Variables */
|
||||
--shadow: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 1px 3px 1px rgba(0, 0, 0, 0.07), 0 2px 6px 2px rgba(0, 0, 0, 0.03);
|
||||
|
|
@ -376,12 +376,6 @@ kbd:active {
|
|||
}
|
||||
|
||||
/* Navbar */
|
||||
nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: block;
|
||||
width: 80%;
|
||||
|
|
@ -391,6 +385,9 @@ nav {
|
|||
}
|
||||
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
background-color: var(--light-op50);
|
||||
backdrop-filter: blur(32px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(32px) saturate(180%);
|
||||
|
|
@ -476,6 +473,10 @@ nav {
|
|||
|
||||
.nav svg {
|
||||
fill: var(--dark-op50);
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
vertical-align: middle;
|
||||
transform: translateY(-0.125rem);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -484,10 +485,6 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
.nav .feed-icon {
|
||||
transform: translateY(0.125rem);
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.nav-container {
|
||||
text-align: left;
|
||||
|
|
|
|||
Loading…
Reference in a new issue