diff options
Diffstat (limited to 'assets/css/main.css')
| -rw-r--r-- | assets/css/main.css | 106 |
1 files changed, 60 insertions, 46 deletions
diff --git a/assets/css/main.css b/assets/css/main.css index cc046d5..ae16fea 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,11 +1,9 @@ /* VARIABLES with default LIGHT MODE */ :root { --bg-main: #fffff0; - --bg-special: #f4e3b2; + --bg-special: #e9d79f; --border-radius-max: 250px; --border-radius-minimal: 5px; - --breakpoint-laptop: 768px; - --breakpoint-tablet: 1024px; --font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --font-size-default: 1rem; --font-size-h1: 2rem; @@ -16,7 +14,7 @@ --line-height-default: 1.5; --line-height-heading: 1.2; --link-color: #996100; - --link-hover: #704100; + --link-hover: #b58900; --margin-padding-Y-default: 20px 0; --margin-padding-Y-big: 40px 0; --margin-padding-Y-small: 10px 0; @@ -48,7 +46,7 @@ html { /* DARK MODE */ &[data-theme="dark"] { --bg-main: #0a234a; - --bg-special: #173d5a; + --bg-special: #1e4a73; --link-color: #4fc3f7; --link-hover: #039be5; --text-color: #e0e0e0; @@ -67,17 +65,29 @@ body { color: var(--text-color); display: grid; grid-template-rows: auto auto 1fr auto; /* Ensure header & navmenu at top, main taking up main space, footer at bottom */ - margin: 20px auto; + margin: 1.5rem auto; max-width: 80ch; min-height: 100vh; - - @media (max-width var(--breakpoint-laptop)) { - margin: var(--margin-padding-Y-default); - } } main { - @media (max-width: var(--breakpoint-laptop)) { + margin: 0.5rem 0; + + p { + margin-bottom: var(--gap-default); + } + + /* Avoid affecting icon imgs in header & footer */ + & img { + border-radius: var(--border-radius-minimal); + max-width: 90%; + + @media (max-width: 768px) { + max-width: 100%; + } + } + + @media (max-width: 1024px) { margin: 20px; } } @@ -97,7 +107,11 @@ blockquote { border-left: 4px solid var(--bg-special); font-style: italic; margin: var(--gap-large); - padding-left: 1rem; + padding-left: 0.8rem; + + @media (max-width: 1024px) { + margin: var(--gap-large) 0; + } } dl { @@ -138,18 +152,6 @@ hr { color: var(--bg-special); } -img { - max-width: 90%; - - @media (max-width: var(--breakpoint-tablet)) { - max-width: 100%; - } -} - -p { - margin-bottom: var(--gap-default); -} - /* Lists generated from markdown text */ ol, ul { padding-left: 1.5rem; @@ -172,20 +174,20 @@ time { } ::selection { - background-color: var(--link-color); + background-color: var(--link-hover); color: var(--bg-main); } /* Code block */ .highlight { - margin: 1rem; - width: fit-content; + margin: 1rem auto; & code { white-space: wrap; } & > pre { + border-radius: var(--border-radius-minimal); padding: 0.5rem; } } @@ -195,7 +197,7 @@ time { display: flex; align-items: center; justify-content: space-around; - padding: var(--margin-padding-Y-default); + margin-bottom: 1.5rem; } .site-selections, @@ -243,8 +245,9 @@ time { align-items: center; justify-content: space-evenly; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { flex-direction: column; + gap: 0.8rem; } } @@ -258,9 +261,9 @@ time { display: flex; align-items: center; justify-content: space-around; - margin-top: 2rem; + margin-top: 1.5rem; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { flex-direction: column; gap: var(--gap-default); } @@ -268,11 +271,11 @@ time { .follow-me-list { display: flex; - align-items: center; + align-items: start; justify-content: center; gap: var(--gap-default); - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { flex-direction: column; } } @@ -284,7 +287,8 @@ time { /* POST CARD */ .post-card { - margin: 0 0 1rem 2rem; + margin: 0 auto; + width: 90%; & .post-card__title { font-size: var(--font-size-default); @@ -312,7 +316,7 @@ time { gap: var(--gap-default); margin: var(--margin-padding-Y-default) !important; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { flex-direction: column; align-items: start; } @@ -327,8 +331,12 @@ time { } /* PAGES Content */ +.page-not-found { + text-align: center; +} + /* Homepage */ -.homepage__header-title { +.homepage__header { text-align: center; } @@ -342,35 +350,35 @@ time { } /* Article */ -.article__header { +.post__header { margin-bottom: var(--gap-large); } -.article__navigation-list { +.post__navigation-list { display: flex; align-items: center; justify-content: space-between; margin: 0 1rem !important; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { margin: 0 !important; } } -.article__tags { +.post__tags { margin: var(--margin-padding-Y-big); } -.article__tags-list { +.post__tags-list { display: flex; gap: var(--gap-default); - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { flex-direction: column; } } -.article__tags-link { +.post__tags-link { font-weight: normal; } @@ -400,7 +408,7 @@ time { padding: 0.2rem; width: 50%; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { width: 90%; } } @@ -412,13 +420,19 @@ time { color: var(--text-color); font-size: var(--font-size-default); font-weight: bold; - padding: 0.2rem 0.5rem; + padding: 0.2rem 0.5rem 0.3rem 0.5rem; + + &:hover { + background-color: var(--link-hover); + color: var(--bg-main); + cursor: pointer; + } } .search-input { width: 30vw; - @media (max-width: var(--breakpoint-tablet)) { + @media (max-width: 768px) { width: 100vw; } } |