Skip to content

Commit

Permalink
Fix horizontal scrollbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@JDSeiler
JDSeiler committed Nov 22, 2024
1 parent 18b3798 commit e6b9d98
Showing 1 changed file with 112 additions and 107 deletions.
219 changes: 112 additions & 107 deletions src/css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,17 @@
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
*,
*::before,
*::after {
box-sizing: border-box;
}

/*
2. Remove default margin
*/
* {
margin: 0;
margin: 0;
}

/*
Expand All @@ -21,97 +23,102 @@
*/

body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
background: var(--bg);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
background: var(--bg);
}

/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%;
}

/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
input,
button,
textarea,
select {
font: inherit;
}


:root {
/* Default font settings */
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings:
"slnt" 0;
/* Default font settings */
font-family: "Inter", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "slnt" 0;

/* Theme colors */
--bg: hsl(0, 25%, 95%);
--fg: hsl(0, 3%, 7%);
--primary: hsl(41, 100%, 53%);
--secondary: hsl(199, 60%, 45%);
/* Theme colors */
--bg: hsl(0, 25%, 95%);
--fg: hsl(0, 3%, 7%);
--primary: hsl(41, 100%, 53%);
--secondary: hsl(199, 60%, 45%);
}

#nav-bar {
display: flex;
gap: 2rem;
display: flex;
gap: 2rem;

@media screen and (max-width: 800px) {
gap: 1rem;
}

@media screen and (max-width: 800px) {
gap: 1rem;
}

width: 100vw;
padding: 1rem;
border-bottom: 4px solid black;
padding: 1rem;
border-bottom: 4px solid black;

> .spacer {
border: 1px solid black
}
> .spacer {
border: 1px solid black;
}
}

.nav-link {
text-decoration: none;
color: var(--fg);
font-weight: bold;
background: var(--primary);
padding: 0.5rem;
border: 2px solid black;
min-width: fit-content;
text-decoration: none;
color: var(--fg);
font-weight: bold;
background: var(--primary);
padding: 0.5rem;
border: 2px solid black;
min-width: fit-content;

transition: transform ease-in 100ms, box-shadow ease-in 100ms;
box-shadow: -4px 4px;
transition:
transform ease-in 100ms,
box-shadow ease-in 100ms;
box-shadow: -4px 4px;
}

.nav-link:hover {
transform: translate(4px, -4px);
box-shadow: -10px 10px;
transform: translate(4px, -4px);
box-shadow: -10px 10px;
}

.nav-link:active {
transform: translate(0px, 0px);
box-shadow: 0px 0px;
transform: translate(0px, 0px);
box-shadow: 0px 0px;
}

.content-area {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}

.content-area > * {
@media screen and (max-width: 800px) {
width: 90vw;
}

width: 65vw;
}
@media screen and (max-width: 800px) {
width: 90vw;
}

width: 65vw;
}

/*
=================
Expand All @@ -120,51 +127,49 @@ MAIN LANDING PAGE
*/

.banner {
margin: 1rem;
border: 2px solid black;
padding: 1rem;
text-align: center;
margin: 1rem;
border: 2px solid black;
padding: 1rem;
text-align: center;
}

.blurb {
margin: 1rem;
font-size: 1.25rem
margin: 1rem;
font-size: 1.25rem;
}


/*
============
SOCIALS PAGE
============
*/


#socials-list {
display: flex;
margin: 1rem;
flex-direction: column;
border: 2px solid black;
display: flex;
margin: 1rem;
flex-direction: column;
border: 2px solid black;
}

.social-link {
text-decoration: none;
color: var(--fg);
padding: 1rem;
font-weight: bold;
font-size: 1.5rem;
transition: background-color 200ms linear;
text-decoration: none;
color: var(--fg);
padding: 1rem;
font-weight: bold;
font-size: 1.5rem;
transition: background-color 200ms linear;
}

.social-link:not(:last-child) {
border-bottom: 2px solid black;
border-bottom: 2px solid black;
}

.social-link#github:hover {
background-color: #6E5494;
background-color: #6e5494;
}

.social-link#linkedin:hover {
background-color: #0A66C2;
background-color: #0a66c2;
}

/*
Expand All @@ -174,71 +179,71 @@ POST STYLING
*/

.post-container {
margin-top: 2rem;
margin-top: 2rem;
}

.post-container > blockquote {
padding: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 2rem;
border-left: 4px solid var(--primary);
font-style: italic;
backdrop-filter: brightness(98%);
padding: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
margin-left: 2rem;
border-left: 4px solid var(--primary);
font-style: italic;
backdrop-filter: brightness(98%);
}

.post-container > pre {
border: 1px solid black;
box-shadow: -8px 8px black;
/* This padding applies to code-blocks without a language tagged */
padding: 1rem;
border: 1px solid black;
box-shadow: -8px 8px black;
/* This padding applies to code-blocks without a language tagged */
padding: 1rem;
}

.post-container > ol {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

.post-container > ul {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

.post-container > p {
font-size: 1.125rem;
line-height: 1.5;
margin-top: 1rem;
margin-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.5;
margin-top: 1rem;
margin-bottom: 1rem;
}

.post-container > h1 {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

.post-container > h2 {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

.post-container > h3 {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

.post-container > h4 {
margin-bottom: 0.5rem;
margin-bottom: 0.5rem;
}

.post-container:last-child {
margin-bottom: 5rem;
margin-bottom: 5rem;
}

/* IDK why the katex plugin was rendering a MathML and an HTML version
of the same thing. This style rule just hides the HTML version since I
like the rendering of the MathML one better. */
.katex-html {
display: none;
display: none;
}

.katex-block {
margin-top: 1rem;
margin-bottom: 1rem;
margin-top: 1rem;
margin-bottom: 1rem;
}

0 comments on commit e6b9d98

Please sign in to comment.