akkoma stricter csp compat
This commit is contained in:
Henry Jameson
parent
0a8d7ea659
commit
40a17862a5
5 changed files with 130 additions and 133 deletions
132
index.html
132
index.html
|
|
@ -10,135 +10,13 @@
|
||||||
<link rel="preload" href="/api/v1/instance" as="fetch" crossorigin />
|
<link rel="preload" href="/api/v1/instance" as="fetch" crossorigin />
|
||||||
<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
|
<link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
|
||||||
<!-- putting styles here to avoid having to wait for styles to load up -->
|
<!-- putting styles here to avoid having to wait for styles to load up -->
|
||||||
<style id="splashscreen">
|
<link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
|
||||||
#splash {
|
<link rel="stylesheet" id="pleroma-eager-styles" type="text/css" href="/static/empty.css" />
|
||||||
--scale: 1;
|
<link rel="stylesheet" id="pleroma-lazy-styles" type="text/css" href="/static/empty.css" />
|
||||||
width: 100vw;
|
<link rel="stylesheet" id="theme-holder" type="text/css" href="/static/empty.css" />
|
||||||
height: 100vh;
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto;
|
|
||||||
grid-template-columns: auto;
|
|
||||||
align-content: center;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
justify-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background: #0f161e;
|
|
||||||
font-family: sans-serif;
|
|
||||||
color: #b9b9ba;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
font-size: calc(1vw + 1vh + 1vmin);
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash-credit {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 14px;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#splash-container {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mascot-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: center;
|
|
||||||
perspective: 60em;
|
|
||||||
perspective-origin: 0 -15em;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#mascot {
|
|
||||||
width: calc(10em * var(--scale));
|
|
||||||
height: calc(10em * var(--scale));
|
|
||||||
object-fit: contain;
|
|
||||||
object-position: bottom;
|
|
||||||
transform: translateZ(-2em);
|
|
||||||
}
|
|
||||||
|
|
||||||
#throbber {
|
|
||||||
display: grid;
|
|
||||||
width: calc(5em * 0.5 * var(--scale));
|
|
||||||
height: calc(8em * 0.5 * var(--scale));
|
|
||||||
margin-left: 4.1em;
|
|
||||||
z-index: 2;
|
|
||||||
grid-template-rows: repeat(8, 1fr);
|
|
||||||
grid-template-columns: repeat(5, 1fr);
|
|
||||||
grid-template-areas: "P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . L L"
|
|
||||||
"P P . . ."
|
|
||||||
"P P . . ."
|
|
||||||
"P P . E E"
|
|
||||||
"P P . E E";
|
|
||||||
|
|
||||||
--logoChunkSize: calc(2em * 0.5 * var(--scale))
|
|
||||||
}
|
|
||||||
|
|
||||||
.chunk {
|
|
||||||
background-color: #e2b188;
|
|
||||||
box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
|
|
||||||
}
|
|
||||||
|
|
||||||
#chunk-P {
|
|
||||||
grid-area: P;
|
|
||||||
border-top-left-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#chunk-L {
|
|
||||||
grid-area: L;
|
|
||||||
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#chunk-E {
|
|
||||||
grid-area: E;
|
|
||||||
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#status {
|
|
||||||
margin-top: 1em;
|
|
||||||
line-height: 2;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statusError {
|
|
||||||
display: none;
|
|
||||||
margin-top: 1em;
|
|
||||||
font-size: calc(1vw + 1vh + 1vmin);
|
|
||||||
line-height: 2;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#statusStack {
|
|
||||||
display: none;
|
|
||||||
margin-top: 1em;
|
|
||||||
font-size: calc((1vw + 1vh + 1vmin) / 2.5);
|
|
||||||
width: calc(100vw - 5em);
|
|
||||||
padding: 1em;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow-x: hidden;
|
|
||||||
text-align: left;
|
|
||||||
line-height: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion) {
|
|
||||||
#throbber {
|
|
||||||
animation: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style id="pleroma-eager-styles" type="text/css"></style>
|
|
||||||
<style id="pleroma-lazy-styles" type="text/css"></style>
|
|
||||||
<style id="theme-holder" type="text/css"></style>
|
|
||||||
<!--server-generated-meta-->
|
<!--server-generated-meta-->
|
||||||
</head>
|
</head>
|
||||||
<body style="margin: 0; padding: 0">
|
<body >
|
||||||
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
<noscript>To use Pleroma, please enable JavaScript.</noscript>
|
||||||
<div id="splash">
|
<div id="splash">
|
||||||
<!-- we are hiding entire graphic so no point showing credit -->
|
<!-- we are hiding entire graphic so no point showing credit -->
|
||||||
|
|
|
||||||
1
public/static/empty.css
Normal file
1
public/static/empty.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
// nothing here //
|
||||||
121
public/static/splash.css
Normal file
121
public/static/splash.css
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
#splash {
|
||||||
|
--scale: 1;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
display: grid;
|
||||||
|
grid-template-rows: auto;
|
||||||
|
grid-template-columns: auto;
|
||||||
|
align-content: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
justify-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
background: #0f161e;
|
||||||
|
font-family: sans-serif;
|
||||||
|
color: #b9b9ba;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 9999;
|
||||||
|
font-size: calc(1vw + 1vh + 1vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash-credit {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 14px;
|
||||||
|
bottom: 16px;
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#splash-container {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: center;
|
||||||
|
perspective: 60em;
|
||||||
|
perspective-origin: 0 -15em;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
}
|
||||||
|
|
||||||
|
#mascot {
|
||||||
|
width: calc(10em * var(--scale));
|
||||||
|
height: calc(10em * var(--scale));
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: bottom;
|
||||||
|
transform: translateZ(-2em);
|
||||||
|
}
|
||||||
|
|
||||||
|
#throbber {
|
||||||
|
display: grid;
|
||||||
|
width: calc(5em * 0.5 * var(--scale));
|
||||||
|
height: calc(8em * 0.5 * var(--scale));
|
||||||
|
margin-left: 4.1em;
|
||||||
|
z-index: 2;
|
||||||
|
grid-template-rows: repeat(8, 1fr);
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
grid-template-areas: "P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . L L"
|
||||||
|
"P P . . ."
|
||||||
|
"P P . . ."
|
||||||
|
"P P . E E"
|
||||||
|
"P P . E E";
|
||||||
|
|
||||||
|
--logoChunkSize: calc(2em * 0.5 * var(--scale))
|
||||||
|
}
|
||||||
|
|
||||||
|
.chunk {
|
||||||
|
background-color: #e2b188;
|
||||||
|
box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-P {
|
||||||
|
grid-area: P;
|
||||||
|
border-top-left-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-L {
|
||||||
|
grid-area: L;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#chunk-E {
|
||||||
|
grid-area: E;
|
||||||
|
border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#status {
|
||||||
|
margin-top: 1em;
|
||||||
|
line-height: 2;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statusError {
|
||||||
|
display: none;
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: calc(1vw + 1vh + 1vmin);
|
||||||
|
line-height: 2;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#statusStack {
|
||||||
|
display: none;
|
||||||
|
margin-top: 1em;
|
||||||
|
font-size: calc((1vw + 1vh + 1vmin) / 2.5);
|
||||||
|
width: calc(100vw - 5em);
|
||||||
|
padding: 1em;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion) {
|
||||||
|
#throbber {
|
||||||
|
animation: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
/* stylelint-disable no-descending-specificity */
|
/* stylelint-disable no-descending-specificity */
|
||||||
@use "panel";
|
@use "panel";
|
||||||
|
|
||||||
|
@import '@fortawesome/fontawesome-svg-core/styles.css';
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--status-margin: 0.75em;
|
--status-margin: 0.75em;
|
||||||
--post-line-height: 1.4;
|
--post-line-height: 1.4;
|
||||||
|
|
@ -30,6 +32,7 @@ body {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-family: var(--font);
|
font-family: var(--font);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
color: var(--text);
|
color: var(--text);
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
|
||||||
|
|
@ -234,20 +234,14 @@ export const applyConfig = (input) => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const head = document.head
|
|
||||||
|
|
||||||
const rules = Object
|
const rules = Object
|
||||||
.entries(config)
|
.entries(config)
|
||||||
.filter(([, v]) => v)
|
.filter(([, v]) => v)
|
||||||
.map(([k, v]) => `--${k}: ${v}`).join(';')
|
.map(([k, v]) => `--${k}: ${v}`).join(';')
|
||||||
|
|
||||||
document.getElementById('style-config')?.remove()
|
|
||||||
const styleEl = document.getElementById('theme-holder')
|
const styleEl = document.getElementById('theme-holder')
|
||||||
styleEl.id = 'style-config'
|
|
||||||
head.appendChild(styleEl)
|
|
||||||
const styleSheet = styleEl.sheet
|
const styleSheet = styleEl.sheet
|
||||||
|
|
||||||
styleSheet.toString()
|
|
||||||
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
|
styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
|
||||||
|
|
||||||
// TODO find a way to make this not apply to theme previews
|
// TODO find a way to make this not apply to theme previews
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue