<link rel="stylesheet" href="./styles/main.css" />
</head>
<body>
+ <header>
+ <h1>Ben Larson</h1>
+ </header>
<main>
- <h1 data-fill="Ben Larson">Ben Larson</h1>
- <p data-fill="I">
+ <p>
I am a software developer in Nashville, Tennissee. For the past two
years I've been working on the Marketing Technology team at
<a href="https://www.ramseysolutions.com">Ramsey.</a> Before that I was
where I got a bachelor's degree in Computer Science, and minored in
Philosophy and German.
</p>
- <p data-fill="F">
+ <p>
For fun I enjoy hiking, reading, and listening to music. The tallest
- mountain I have climbed is <b>Mount</b> <b>Washington</b> in New
- Hampshire. Some of my favorite books are Howard Pyle's
- <i
- >The <b>Merry</b> <b>Adventures</b> of
- <b>Robin</b>
- <b>Hood,</b></i
- >
- G. K. Chesterton's
- <i
- >The <b>Ballad</b> of the
- <b>White</b>
- <b>Horse,</b></i
- >
- and C. S. Lewis's <i><b>Perelandra.</b></i> My favorite musicians are
- <a href="https://www.thomasbergersen.com">Thomas <b>Bergersen,</b></a>
- <a href="https://triodhoore.com">Trio <b>Dhoore,</b></a> and
- <a href="https://www.weirdal.com">"Weird Al" <b>Yankovic.</b></a>
+ mountain I have climbed is Mount Washington (6k ft) in New Hampshire. A
+ few of my favorite authors are Howard Pyle, G. K. Chesterton, C. S.
+ Lewis, and Roland Huntford. Some musicians I like are
+ <a href="https://www.thomasbergersen.com">Thomas Bergersen,</a>
+ <a href="https://triodhoore.com">Trio Dhoore,</a> and
+ <a href="https://www.weirdal.com">"Weird Al" Yankovic.</a>
</p>
- <p data-fill="L">
+ <p>
Like so many other devs, I often spend my free time coding. Many of my
side projects are hosted on
<a href="http://git.benlarson.xyz">my git server.</a> One of these is
- <a href="https://www.isidore.ai"><b>Isidore,</b></a> a Catholic digital
+ <a href="https://www.isidore.ai">Isidore,</a> a Catholic digital
assistant chatbot that gets its information from APIs other people
built. Sometimes I answer people's questions on
<a href="https://stackoverflow.com/users/10377586/ben-larson"
:root {
- --red: #900;
- --orange: #d86;
- --gold: #aa0;
- --blue: #55f;
- --green: #171;
- --black: #333;
- --white: #ccc;
+ --background-color-primary: #fff;
+ --background-color-header: #eee;
- --parchment: linear-gradient(65deg, #edc, #fed, #edc);
-
- --text-color-primary: var(--black);
- --text-color-secondary: var(--red);
- --text-color-links: var(--blue);
- --text-color-fill: var(--gold);
- --text-color-underline: #3335;
+ --text-color-primary: #333;
+ --text-color-links: #55f;
--text-shadow: 0 0 1px rgba(100, 100, 100, 0.7),
0px 1px rgba(255, 255, 255, 0.3);
+
+ --separator-color: #ddd;
}
@media (prefers-color-scheme: dark) {
:root {
- --parchment: linear-gradient(65deg, #050505, #1a1a1a, #050505);
+ --background-color-primary: #111;
+ --background-color-header: #000;
- --text-color-primary: var(--white);
- --text-color-secondary: var(--gold);
- --text-color-links: var(--blue);
- --text-color-fill: transparent;
- --text-color-underline: #aaa5;
+ --text-color-primary: #eee;
+ --text-color-links: #55f;
--text-shadow: 0 0 1px rgba(200, 200, 200, 0.6);
+
+ --separator-color: #222;
}
}
@import url('./colors.css');
-
-@font-face {
- font-family: eadui;
- font-style: normal;
- font-weight: 500;
- font-display: fallback;
- src: url('../fonts/Eadui.ttf');
-}
-
-@font-face {
- font-family: eadui-fill;
- font-style: normal;
- font-weight: 500;
- font-display: fallback;
- src: url('../fonts/EaduiFill.ttf');
-}
+@import url('https://fonts.larson.zone/lingua-franca/index.css');
* {
font-family: inherit;
body {
font-family: eadui;
- font-size: 2rem;
- background-image: var(--parchment);
- background-size: 8px 6px;
- background-repeat: repeat;
+ font-size: 1.7rem;
+ background-color: var(--background-color-primary);
color: var(--text-color-primary);
text-shadow: var(--text-shadow);
}
-main {
- box-sizing: border-box;
- margin: 0 auto;
- max-width: 60rem;
- padding: 5rem;
+header {
+ background-color: var(--background-color-header);
+ padding: 6rem 3rem 3rem 3rem;
}
-[data-fill] {
- position: relative;
-}
-
-[data-fill]::before {
- font-family: eadui-fill;
- content: attr(data-fill);
- z-index: -1;
- position: absolute;
- left: 0;
- width: 100%;
- text-shadow: none;
- color: var(--text-color-fill);
+h1 {
+ font-size: 4rem;
+ line-height: 1em;
+ margin: 0 auto;
+ max-width: 50rem;
}
-h1 {
- font-size: 6rem;
- font-variant: small-caps;
- margin-bottom: 2rem;
- color: var(--text-color-secondary);
+main {
+ padding: 3rem 3rem 5rem 3rem;
+ box-shadow: 0 -1px var(--separator-color);
}
a {
position: relative;
text-decoration: none;
- color: var(--text-color-links);
- box-shadow: 0 1px 0 transparent;
+ color: inherit;
+ box-shadow: 0 1px 0 var(--text-color-links);
}
a:hover {
- box-shadow: 0 1px 0 var(--text-color-underline);
+ color: var(--text-color-links);
}
p {
position: relative;
- margin-bottom: 2rem;
- line-height: 1.25em;
+ margin: 0 auto;
+ max-width: 50rem;
+ line-height: 1.5em;
+ padding-bottom: 2rem;
}
p::first-letter,
margin-right: 0.1em;
width: 1.25em;
height: 1.25em;
- line-height: 1.25em;
+ line-height: 1.5em;
text-align: center;
font-variant: small-caps;
/* background-image: url('/images/border.svg'); */
background-size: contain;
}
-p:nth-of-type(3n - 2)::first-letter {
- color: var(--green);
-}
-
-p:nth-of-type(3n - 1)::first-letter {
- color: var(--red);
-}
-
-p:nth-of-type(3n)::first-letter {
- color: var(--blue);
-}
-
-i {
- color: var(--text-color-secondary);
-}
-
-b {
- font-weight: normal;
- display: inline-block;
-}
-
-b::first-letter {
- font-size: 1.3em;
- vertical-align: text-top;
-}
-
@media (max-width: 45em) {
body {
font-size: 1.75em;
}
- main {
- padding: 2rem 1rem;
+ header {
+ padding: 3rem 2rem 2rem 1rem;
}
h1 {
- font-size: 4.5rem;
+ font-size: 4rem;
margin-bottom: 1rem;
- text-align: center;
+ }
+
+ main {
+ padding: 2rem 1rem 5rem 1rem;
}
}
projects / xyz.git / commitdiff