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">
<profile version="1.0">
<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="PyComparisonWithNoneInspection" 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;
}
body {
font-family: sans-serif;
font-family: "Noto Sans", sans-serif;
margin: 0;
display: grid;
grid-template-columns: max(325px, 15%) auto;
@ -82,7 +82,7 @@ header {
height: 100vh;
transition: 0.2s all;
}
header::after {
header::after { /* the background image behind the sidebar */
/* 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
only for now :c */
@ -98,10 +98,10 @@ header::after {
/* image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */
url("/assets/img/background.jpeg") no-repeat bottom center/cover,
#333;
filter: blur(5px) saturate(75%);
filter: blur(3px) saturate(75%);
content: "";
}
#hamburger {
#hamburger { /* hamburger menu button, should only display on mobile devices. see @media section at bottom of file */
display: none;
position: fixed;
top: 10px;
@ -125,7 +125,7 @@ nav a {
color: white;
}
nav a {
padding: 10px 0;
padding: 10px 40px;
display: block;
width: 100%;
text-align: center;
@ -145,10 +145,12 @@ nav a::before {
position: absolute;
transition: 0.2s all;
}
nav a:hover,
nav a.current {
nav a:hover {
background: #00000044;
}
nav a.current:not(:hover) {
background: #9370db44;
}
nav a:hover::before,
nav a.current::before {
left: 0;
@ -185,8 +187,15 @@ nav a.current::before {
font-style: italic;
}
/* smaller screen tweaks */
@media only screen and (max-device-width : 840px) {
body {
grid-template-columns: max(225px, 15%) auto;
}
}
/* mobile tweaks */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
@media only screen and (max-device-width : 480px) {
main {
width: 100vw;
box-shadow: none;