css tweaks
This commit is contained in:
parent
d924cb47a7
commit
8c6a2bdb07
2 changed files with 19 additions and 9 deletions
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
@ -118,14 +118,14 @@ header::after {
|
|||
#hb-icon {
|
||||
height: 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 {
|
||||
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;
|
||||
|
|
Loading…
Reference in a new issue