Skip to content

Commit

Permalink
chore: improves page look
Browse files Browse the repository at this point in the history
  • Loading branch information
@shivan-s
shivan-s committed Oct 21, 2024
1 parent 2bb2610 commit c1aeeab
Show file tree
Hide file tree
Showing 11 changed files with 270 additions and 128 deletions.
283 changes: 185 additions & 98 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
@@ -1,140 +1,225 @@
/* Reset Styling */
p,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
}

/* Global Styling */

:root {
/* Colors */
--primary-color: #196680;
--secondary-color: #80dfff;
--alternative-color: #ff9b33;
--support-color: #222222;
--text-color: #222222;
--background-color: #fefefe
/* Spacing */
--small-gap: 0.5rem;
--background-color: #fefefe;

@media (prefers-color-scheme: dark) {
--primary-color: #80dfff;
--alternative-color: #ff9b33;
--support-color: #fefefe;
--text-color: #fefefe;
--background-color: #222222;
}

/* Spacing */
--small-gap: 0.5rem;
--normal-gap: 1rem;
--large-gap: 1.5rem;
--letter-gap: 1ch;
--variable-gap: calc(8px + 1.5625vw);

/* Font Size */
--small-size: 0.875rem;
--normal-size: 1rem;
--large-size: 1.25rem;
--larger-size: 1.5rem;
--large-size: 1.5rem;
--very-large-size: 2.5rem;
}

html {
scroll-padding: 1rem;
scroll-behavior: smooth;
}

p,
small,
em,
strong,
ul,
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
line-height: normal;
}

p {
font-size: var(--normal-size);
}

small {
color: var(--support-color);
font-size: var(--small-size);
line-height: normal;
}

* {
transition: all 0.3s ease-in-out;
}

a {
color: var(--primary-color);
text-decoration: underline dotted;
}

a:hover {
color: var(--alternative-color);
text-decoration: underline solid;
}

h1 {
font-family:
Optician Sans,
sans-serif;
font-size: var(--very-large-size);
}

h2 {
font-size: var(--large-size);
}

h1,
h2 {
font-family:
Optician Sans,
sans-serif;
}

header,
footer {
h1,
h2,
h3 {
color: var(--primary-color);
}

body>header {
font-family:
Optician Sans,
sans-serif;
}

header nav {
padding: 1rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
& nav {
padding: 1rem 0;
display: flex;
flex-direction: column;
align-items: center;

header nav ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
a {
display: flex;
align-items: center;
gap: var(--letter-gap);
}

header nav ul:hover a:not(:hover) {
opacity: 0.8;
filter: blur(1px);
}
& ul {
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;

header nav ul a:hover {
outline: 2px ridge var(--text-color);
filter: none;
border-radius: 4rem;
box-shadow: 0 0 0 2pt var(--text-color);
}
& a:hover {
outline: 2px ridge var(--text-color);
filter: none;
border-radius: 4rem;
box-shadow: 0 0 0 2pt var(--text-color);
}

header nav ul li a {
padding: 0.5rem 1rem;
}
& li {
padding: 0.5rem 1rem;
list-style: none;

& a {
padding: 0.5rem 1rem;
}

& a.active {
outline: 2px ridge var(--text-color);
filter: none;
border-radius: 4rem;
}
}
}
}

header nav ul li {
padding: 0.5rem 1rem;
list-style: none;
& ul:hover a:not(:hover) {
opacity: 0.8;
filter: blur(1px);
}
}

[aria-current="page"] {
outline: 2px ridge var(--text-color);
filter: none;
border-radius: 4rem;
nav.breadcrumbs {
font-family:
Optician Sans,
sans-serif;
font-size: var(--small-size);

ul {
list-style: none;
display: flex;

& li:not(:last-child)::after {
padding: 0 var(--letter-gap);
content: "/";
}
}
}

section {
border-radius: 0.25rem;
padding: 0rem calc(var(--normal-gap) / 2);
display: flex;
flex-direction: column;
gap: var(--small-gap);
padding: calc(var(--small-gap) / 2) var(--small-gap);

& header {
display: flex;
flex-direction: column;
gap: 0;
}

& footer {
display: flex;
justify-content: end;
}
}

section.info {
display: flex;
section.about {
position: relative;
transform: rotate(-1deg);
flex-direction: column;
border: 1px solid var(--text-color);
border: 2px solid var(--text-color);
border-radius: 0.25rem;
/* TODO: shadow */
box-shadow: 1px 1px 1px 1px var(--text-color);
}

section.info a.more {
align-self: end;
padding: 1rem;
}
article {
display: flex;
flex-direction: column;
gap: var(--small-gap);

a {
color: var(--primary-color);
text-decoration: underline dotted;
& footer {
display: flex;
justify-content: start;
}
}

a:hover {
color: var(--alternative-color);
text-decoration: underline solid;
.post-metadata {
display: flex;
flex-wrap: nowrap;

& span:not(:last-child)::after {
padding: 0 var(--letter-gap);
content: "·";
}
}

h1,
h2,
h3 {
color: var(--primary-color);
hr {
border: none;
border: 1px groove var(--text-color);
width: 4ch;
}

body {
Expand All @@ -146,14 +231,19 @@ body {
color: var(--text-color);
background-color: var(--background-color);
font-family:
Monaspace Argon,
sans-serif;
Monaspace Xenon,
Cambria,
Cochin,
Georgia,
Times,
"Times New Roman",
serif;
}

main {
display: flex;
flex-direction: column;
gap: var(--small-gap);
gap: var(--large-gap);
margin-left: auto;
margin-right: auto;
padding: 0 var(--variable-gap);
Expand All @@ -163,27 +253,24 @@ main {
}

/* footer */
footer {
body>footer {
padding: 1rem 0rem;
border-top: 1px solid var(--text-color);
font-family:
Optician Sans,
sans-serif;
display: flex;
align-items: center;
justify-content: center;
}

footer p:not(:last-child)::after {
padding: 0 var(--letter-gap);
content: "·";
}

/* breadcrumbs */
ul.breadcrumbs {
font-size: var(--small-size);
list-style: none;
display: flex;
}
& p {
text-align: center;
}

ul.breadcrumbs>li:not(:last-child)::after {
padding: 0 var(--letter-gap);
content: "/";
& p:not(:last-child)::after {
padding: 0 var(--letter-gap);
content: "·";
}
}

@font-face {
Expand All @@ -200,7 +287,7 @@ ul.breadcrumbs>li:not(:last-child)::after {
}

@font-face {
font-family: "Monaspace Argon";
font-family: "Monaspace Xenon";
font-style: normal;
src: url("/fonts/MonaspaceArgon-Regular.woff") format("woff");
src: url("/fonts/MonaspaceXenon-Regular.woff") format("woff");
}
Loading

0 comments on commit c1aeeab

Please sign in to comment.