summaryrefslogtreecommitdiff
path: root/static/css
diff options
context:
space:
mode:
Diffstat (limited to 'static/css')
-rw-r--r--static/css/style.css62
1 files changed, 31 insertions, 31 deletions
diff --git a/static/css/style.css b/static/css/style.css
index 9125736..6b95e9c 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1,6 +1,23 @@
/* Font Faces */
@font-face {
font-family: 'Libre Caslon';
+ src: url('/font/LibreCaslonText[wght].woff2') format('woff2-variations');
+ font-weight: 400 700;
+ font-style: normal;
+ font-display: swap;
+ size-adjust: 100%;
+}
+
+@font-face {
+ font-family: 'Libre Caslon';
+ src: url('/font/LibreCaslonText-Italic[wght].woff2') format('woff2-variations');
+ font-weight: 400 700;
+ font-style: italic;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'Libre Caslon Condensed';
src: url('/font/LibreCaslonCondensed[wdth,wght].woff2') format('woff2-variations');
font-weight: 400 700;
font-stretch: 75% 100%;
@@ -10,7 +27,7 @@
}
@font-face {
- font-family: 'Libre Caslon';
+ font-family: 'Libre Caslon Condensed';
src: url('/font/LibreCaslonCondensed-Italic[wght].woff2') format('woff2-variations');
font-weight: 400 700;
font-style: italic;
@@ -24,8 +41,11 @@
--foreground: #000019;
--foreground-emphasis: #191919;
--selection-color: #ccc;
- --font-display: 'Libre Caslon', 'Times New Roman', 'Georgia', serif;
- --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ --font-display: 'Libre Caslon Condensed', 'Times New Roman', Georgia, serif;
+ --font-body: 'Libre Caslon', 'Times New Roman', Georgia, serif;
+ --font-windows: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ /* There's an issue with Helvetica Neue Bold's glyph sizing that wrecks the grid. */
+ --font-windows-bold: Helvetica, Arial, sans-serif;
--root-font-size: 1rem;
--base-grid: 1.5625rem;
--radius: 4px;
@@ -51,7 +71,7 @@ li,p {
transform: translateY(7px);
}
strong {
- font-family: Helvetica, Arial, sans-serif;
+ font-family: var(--font-body);
color: var(--foreground-emphasis);
font-weight: 700;
line-height: 1;
@@ -87,7 +107,6 @@ button {
.textured {
h2, p, ul {
- -webkit-text-stroke: calc(8 * var(--border-width)) var(--background);
paint-order: stroke fill;
}
}
@@ -253,7 +272,7 @@ main {
}
}
-#services {
+.columns {
column-gap: calc(2 * var(--base-grid));
row-gap: calc(3 * var(--base-grid));
padding: calc(2 * var(--base-grid));
@@ -264,7 +283,7 @@ main {
justify-content: center;
flex-wrap: wrap;
- section {
+ article {
flex: 1;
min-width: calc(13 * var(--base-grid));
max-width: calc(25 * var(--base-grid));
@@ -280,33 +299,11 @@ main {
}
-#skills, #testimonials {
- column-gap: calc(4 * var(--base-grid));
- display: flex;
- flex-wrap: wrap;
- padding: calc(2 * var(--base-grid));
- row-gap: calc(3 * var(--base-grid));
- width: 100%;
-
- @media (max-width: 425px) {
- padding: calc(2 * var(--base-grid)) var(--base-grid);
- }
-
- section {
- flex: 1;
- min-width: calc(13 * var(--base-grid));
-
- @media (max-width: 360px) {
- min-width: calc(100vw - 3 * var(--base-grid));
- }
- }
-}
-
-#skills {
+.darktexture {
background-image: url('/img/darkgrid.svg');
}
-#testimonials {
+.lighttexture {
background-image: url('/img/lightgrid.svg');
}
@@ -357,8 +354,11 @@ footer {
.window {
+ font-family: var(--font-windows);
+
.titlebar {
border-bottom: var(--border-width) solid #000;
+ font-family: var(--font-windows-bold);
padding: calc(6 * var(--border-width)) calc(8 * var(--border-width)) calc(6 * var(--border-width)) ;
line-height: calc(9 * var(--border-width));
text-align: center;