css tweaks

This commit is contained in:
Lynne Megido 2021-10-16 15:38:41 +10:00
parent d924cb47a7
commit 8c6a2bdb07
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
2 changed files with 19 additions and 9 deletions

View File

@ -1,6 +1,7 @@
<component name="InspectionProjectProfileManager"> <component name="InspectionProjectProfileManager">
<profile version="1.0"> <profile version="1.0">
<option name="myName" value="Project Default" /> <option name="myName" value="Project Default" />
<inspection_tool class="GrazieInspection" enabled="false" level="TYPO" enabled_by_default="false" />
<inspection_tool class="PyAugmentAssignmentInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" /> <inspection_tool class="PyAugmentAssignmentInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
<inspection_tool class="PyComparisonWithNoneInspection" enabled="true" level="WARNING" enabled_by_default="true" /> <inspection_tool class="PyComparisonWithNoneInspection" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="PyCompatibilityInspection" enabled="true" level="WARNING" enabled_by_default="true"> <inspection_tool class="PyCompatibilityInspection" enabled="true" level="WARNING" enabled_by_default="true">

View File

@ -2,7 +2,7 @@
box-sizing: border-box; box-sizing: border-box;
} }
body { body {
font-family: sans-serif; font-family: "Noto Sans", sans-serif;
margin: 0; margin: 0;
display: grid; display: grid;
grid-template-columns: max(325px, 15%) auto; grid-template-columns: max(325px, 15%) auto;
@ -82,7 +82,7 @@ header {
height: 100vh; height: 100vh;
transition: 0.2s all; transition: 0.2s all;
} }
header::after { header::after { /* the background image behind the sidebar */
/* will use webp with jpeg fallback when /* will use webp with jpeg fallback when
https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
only for now :c */ only for now :c */
@ -98,10 +98,10 @@ header::after {
/* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */ /* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */
url("/assets/img/background.jpeg") no-repeat bottom center/cover, url("/assets/img/background.jpeg") no-repeat bottom center/cover,
#333; #333;
filter: blur(5px) saturate(75%); filter: blur(3px) saturate(75%);
content: ""; content: "";
} }
#hamburger { #hamburger { /* hamburger menu button, should only display on mobile devices. see @media section at bottom of file */
display: none; display: none;
position: fixed; position: fixed;
top: 10px; top: 10px;
@ -118,14 +118,14 @@ header::after {
#hb-icon { #hb-icon {
height: 100%; height: 100%;
width: 100%; width: 100%;
background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100% ); background: linear-gradient(to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100%);
} }
nav a { nav a {
color: white; color: white;
} }
nav a { nav a {
padding: 10px 0; padding: 10px 40px;
display: block; display: block;
width: 100%; width: 100%;
text-align: center; text-align: center;
@ -145,10 +145,12 @@ nav a::before {
position: absolute; position: absolute;
transition: 0.2s all; transition: 0.2s all;
} }
nav a:hover, nav a:hover {
nav a.current {
background: #00000044; background: #00000044;
} }
nav a.current:not(:hover) {
background: #9370db44;
}
nav a:hover::before, nav a:hover::before,
nav a.current::before { nav a.current::before {
left: 0; left: 0;
@ -185,8 +187,15 @@ nav a.current::before {
font-style: italic; font-style: italic;
} }
/* smaller screen tweaks */
@media only screen and (max-device-width : 840px) {
body {
grid-template-columns: max(225px, 15%) auto;
}
}
/* mobile tweaks */ /* mobile tweaks */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (max-device-width : 480px) {
main { main {
width: 100vw; width: 100vw;
box-shadow: none; box-shadow: none;