jonny/jonnybarnes.uk
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases 5 Packages Wiki Activity Actions

Initial work on adding passkeys

Browse source 
Mostly starting to get some javascript set up
This commit is contained in:
Jonny Barnes 2023-08-18 17:03:38 +01:00
parent c7f5190885
commit cadd58187a
Signed by: jonny
SSH key fingerprint: SHA256:CTuSlns5U7qlD9jqHvtnVmfYV3Zwl2Z7WnJ4/dqOaL8
18 changed files with 256 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

12
resources/css/app.css
View file

@ -1,6 +1,6 @@
@import "variables.css";
@import "fonts.css";
@import "layout.css";
@import "colours.css";
@import "code.css";
@import "content.css";
@import url('variables.css');
@import url('fonts.css');
@import url('layout.css');
@import url('colours.css');
@import url('code.css');
@import url('content.css');

2
resources/css/code.css
View file

@ -1,3 +1,3 @@
.hljs {
border-radius: .5rem;
border-radius: .5rem;
}

18
resources/css/colours.css
View file

@ -1,18 +1,18 @@
body {
background-color: var(--color-secondary);
color: var(--color-primary);
background-color: var(--color-secondary);
color: var(--color-primary);
}
a {
color: var(--color-link);
color: var(--color-link);
&:visited {
color: var(--color-link-visited);
}
&:visited {
color: var(--color-link-visited);
}
}
#site-header {
& a:visited {
color: var(--color-link);
}
& a:visited {
color: var(--color-link);
}
}

55
resources/css/content.css
View file

@ -1,36 +1,35 @@
@import "posse.css";
@import "h-card.css";
@import url('h-card.css');
.h-entry {
border-inline-start: 1px solid var(--color-primary);
padding-inline-start: .5rem;
border-inline-start: 1px solid var(--color-primary);
padding-inline-start: .5rem;
& .reply-to {
font-style: italic;
& .reply-to {
font-style: italic;
}
& .post-info {
& a {
text-decoration: none;
}
}
& .post-info {
& a {
text-decoration: none;
}
}
& .note-metadata {
display: flex;
flex-direction: row;
gap: 1rem;
& .syndication-links {
flex-flow: row wrap;
& a {
text-decoration: none;
& svg {
width: 1rem;
height: 1rem;
}
}
& .note-metadata {
display: flex;
flex-direction: row;
gap: 1rem;
& .syndication-links {
flex-flow: row wrap;
& a {
text-decoration: none;
& svg {
width: 1rem;
height: 1rem;
}
}
}
}
}

8
resources/css/fonts.css
View file

@ -1,10 +1,10 @@
body {
font-family: var(--font-family-body);
font-size: var(--font-size-md);
font-family: var(--font-family-body);
font-size: var(--font-size-md);
}
code {
font-family: var(--font-family-monospace);
font-family: var(--font-family-monospace);
}
h1,
@ -13,5 +13,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-family-headings);
font-family: var(--font-family-headings);
}

56
resources/css/h-card.css
View file

@ -1,32 +1,32 @@
.h-card {
& .hovercard {
display: none;
position: absolute;
z-index: 100;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
background-color: var(--color-secondary);
width: fit-content;
transition: opacity 0.5s ease-in-out;
opacity: 0;
flex-direction: column;
gap: .5rem;
& .u-photo {
max-width: 6rem;
}
& .social-icon {
width: 1rem;
height: 1rem;
}
}
&:hover {
& .hovercard {
display: none;
position: absolute;
z-index: 100;
padding: 1rem;
border-radius: 1rem;
box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
background-color: var(--color-secondary);
width: fit-content;
transition: opacity 0.5s ease-in-out;
opacity: 0;
flex-direction: column;
gap: .5rem;
& .u-photo {
max-width: 6rem;
}
& .social-icon {
width: 1rem;
height: 1rem;
}
}
&:hover {
& .hovercard {
display: flex;
opacity: 1;
}
display: flex;
opacity: 1;
}
}
}

26
resources/css/layout.css
View file

@ -1,25 +1,25 @@
.grid {
display: grid;
grid-template-columns: 5vw 1fr 5vw;
grid-template-rows: min-content 1fr min-content;
row-gap: 1rem;
display: grid;
grid-template-columns: 5vw 1fr 5vw;
grid-template-rows: min-content 1fr min-content;
row-gap: 1rem;
}
#site-header {
grid-column: 2 / 3;
grid-row: 1 / 2;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
main {
grid-column: 2 / 3;
grid-row: 2 / 3;
grid-column: 2 / 3;
grid-row: 2 / 3;
}
footer {
grid-column: 2 / 3;
grid-row: 3 / 4;
grid-column: 2 / 3;
grid-row: 3 / 4;
& .iwc-logo {
max-width: 85vw;
}
& .iwc-logo {
max-width: 85vw;
}
}

3
resources/css/posse.css
View file

@ -1,3 +0,0 @@
.p-bridgy-twitter-content {
display: none;
}

36
resources/css/variables.css
View file

@ -1,22 +1,22 @@
:root {
/* Font Family */
--font-family-headings: "Archer SSm A", "Archer SSm B", serif;
--font-family-body: "Verlag A", "Verlag B", sans-serif;
--font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
/* Font Family */
--font-family-headings: "Archer SSm A", "Archer SSm B", serif;
--font-family-body: "Verlag A", "Verlag B", sans-serif;
--font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
/* Font Size */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 1rem; /* 16px, base */
--font-size-md: 1.25rem; /* 20px */
--font-size-lg: 1.5rem; /* 24px */
--font-size-xl: 1.75rem; /* 28px */
--font-size-xxl: 2rem; /* 32px */
--font-size-xxxl: 2.25rem; /* 36px */
/* Font Size */
--font-size-sm: 0.75rem; /* 12px */
--font-size-base: 1rem; /* 16px, base */
--font-size-md: 1.25rem; /* 20px */
--font-size-lg: 1.5rem; /* 24px */
--font-size-xl: 1.75rem; /* 28px */
--font-size-xxl: 2rem; /* 32px */
--font-size-xxxl: 2.25rem; /* 36px */
/* Colours */
--color-primary: oklch(36.8% 0.1 125.505);
--color-secondary: oklch(96.3% 0.1 125.505);
--color-link: oklch(48.09% 0.146 241.41);
--color-link-visited: oklch(70.44% 0.21 304.41);
--color-primary-shadow: oklch(19.56% 0.054 125.505 / 40%);
/* Colours */
--color-primary: oklch(36.8% 0.1 125.505deg);
--color-secondary: oklch(96.3% 0.1 125.505deg);
--color-link: oklch(48.09% 0.146 241.41deg);
--color-link-visited: oklch(70.44% 0.21 304.41deg);
--color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
}