doloro/doloro-site-v6
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styling fixed

Browse Source
This commit is contained in:
Doloro1978
2026-04-23 11:55:41 +01:00
parent 039f832724
commit b30478a537
15 changed files with 345 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/Layout.scss
+4
View File
@@ -0,0 +1,4 @@
.content-div {
padding-left: 15px;
padding-right: 15px;
}
src/lib/Layout.svelte
+1 -8
View File
@@ -1,11 +1,11 @@
<script lang="ts" module>
import "./Layout.scss";
</script>
<script lang="ts">
import { postFromProps, PostHeader } from "./PostHelpers.svelte";
let props = $props();
console.log(props);
let post = postFromProps(props);
</script>
@@ -13,10 +13,3 @@
<div class="content-div">
{@render props.children?.()}
</div>
<style>
.content-div {
padding-left: 15px;
padding-right: 15px;
}
</style>
src/lib/PostHelpers.svelte
+1 -190
View File
@@ -1,5 +1,6 @@
<script module lang="ts">
import { tagImg } from "./tag_store/TagImgHelper.svelte";
import "./postHelpers.scss";
let posts = import.meta.glob("/src/routes/posts/**/*.md", {
eager: true,
@@ -22,7 +23,6 @@
return `${day}/${month}/${year}`;
}
export function getPosts(): Post[] {
console.log(posts);
let postsNew: Post[] = new Array();
Object.entries(posts).map(([path, module]) => {
const metadata = module.metadata;
@@ -42,7 +42,6 @@
};
postsNew.push(post);
});
console.log(postsNew);
return postsNew;
}
/// Doesn't provide path
@@ -103,191 +102,3 @@
</div>
</div>
{/snippet}
<style lang="scss">
.container {
width: 100%;
text-decoration: none;
}
.container:hover {
text-decoration: underline;
}
.card-header-top-div {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
}
.card-header-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 1;
width: 100%;
min-width: 250px;
max-width: 750px;
background-color: var(--accent-3);
border: 3px, inset, var(--accent-2);
}
.card-header-container-left {
display: flex;
flex-direction: column;
row-gap: 3px;
span {
padding-left: 4px;
border-left-style: inset;
border-left-width: 3px;
border-left-color: whitesmoke;
}
}
.card-header-container-right {
display: flex;
flex-direction: column;
row-gap: 3px;
span {
padding-right: 4px;
border-right-style: inset;
border-right-width: 3px;
border-right-color: whitesmoke;
}
}
.card {
--text-color: white;
position: relative;
background: #4f0515;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
padding-inline-start: 10px;
padding-inline-end: 10px;
padding-block-start: 10px;
padding-block-end: 10px;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 0;
border-style: outset;
border-color: var(--accent-2);
border-width: 4px;
span {
text-decoration: none !important;
}
}
.icons {
position: relative;
display: grid;
align-items: end;
justify-items: end;
column-gap: 5px;
flex-grow: 1;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.icon_container {
position: relative;
width: 100%;
background: #555555ff;
display: grid;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
align-self: center;
justify-self: center;
grid-row: 1;
width: 35px;
height: 35px;
.img {
width: 35px;
height: 35px;
flex-shrink: 0;
}
border-width: 2px;
border-style: inset;
border-color: var(--accent-3);
}
.left {
position: relative;
width: 100%;
display: flex;
align-items: start;
align-content: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
flex: 1;
flex-grow: 1;
}
.right {
position: relative;
width: 100%;
display: flex;
align-items: end;
align-content: stretch;
justify-content: start;
row-gap: 2.5px;
flex-direction: column;
flex-wrap: nowrap;
flex: 1;
flex-grow: 1;
span {
color: var(--text-color);
margin: 0px;
text-box-trim: trim-both;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
}
}
.seperater {
width: 115px;
height: 2.5px;
margin-top: 2px;
margin-bottom: 2px;
background: #000000ff;
flex-shrink: 0;
}
.post-title {
color: var(--text-color);
text-transform: none;
height: 34px;
margin: 0px;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 28px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
}
.post-descr {
color: var(--text-color);
text-transform: none;
height: 22px;
margin: 0px;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 18px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
text-decoration: none;
}
</style>
src/lib/postHelpers.scss
+202
View File
@@ -0,0 +1,202 @@
.container {
width: 100%;
text-decoration: none;
}
// .container:hover {
// text-decoration: underline;
// }
.card-header-top-div {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 10px;
}
.card-header-container {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-grow: 1;
width: 100%;
min-width: 250px;
max-width: 750px;
background-color: var(--accent-3);
border: 3px, inset, var(--accent-2);
}
.card-header-container-left {
display: flex;
flex-direction: column;
row-gap: 3px;
span {
padding-left: 4px;
border-left-style: inset;
border-left-width: 3px;
border-left-color: whitesmoke;
}
}
.card-header-container-right {
display: flex;
flex-direction: column;
row-gap: 3px;
span {
padding-right: 4px;
border-right-style: inset;
border-right-width: 3px;
border-right-color: whitesmoke;
}
}
.card {
--text-color: white;
position: relative;
background: #4f0515;
display: flex;
align-items: start;
align-content: stretch;
justify-content: start;
padding-inline-start: 10px;
padding-inline-end: 10px;
padding-block-start: 10px;
padding-block-end: 10px;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
flex-shrink: 0;
border-style: outset;
border-color: var(--accent-2);
border-width: 4px;
span {
text-decoration: none !important;
}
}
.icons {
position: relative;
display: grid;
align-items: end;
justify-items: end;
column-gap: 5px;
flex-grow: 1;
grid-template-rows: 1fr;
grid-template-columns: 1fr 1fr 1fr;
}
.icon_container {
position: relative;
width: 100%;
background: #555555ff;
display: grid;
align-items: center;
align-content: stretch;
justify-content: center;
flex-direction: row;
flex-wrap: nowrap;
flex-grow: 1;
align-self: center;
justify-self: center;
grid-row: 1;
width: 35px;
height: 35px;
.img {
width: 35px;
height: 35px;
flex-shrink: 0;
}
border-width: 2px;
border-style: inset;
border-color: var(--accent-3);
}
.left {
position: relative;
width: 100%;
display: flex;
align-items: start;
align-content: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap;
flex: 1;
flex-grow: 1;
}
.right {
position: relative;
width: 100%;
display: flex;
align-items: end;
align-content: stretch;
justify-content: start;
row-gap: 2.5px;
flex-direction: column;
flex-wrap: nowrap;
flex: 1;
flex-grow: 1;
span {
color: var(--text-color);
margin: 0px;
text-box-trim: trim-both;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
}
}
.seperater {
width: 115px;
height: 2.5px;
margin-top: 2px;
margin-bottom: 2px;
background: #000000ff;
flex-shrink: 0;
}
.post-title {
color: var(--text-color);
text-transform: none;
height: 34px;
margin: 0px;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 28px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
}
.post-descr {
color: var(--text-color);
text-transform: none;
height: 22px;
margin: 0px;
line-break: auto;
overflow-wrap: initial;
white-space: pre;
font-size: 18px;
text-rendering: geometricPrecision;
caret-color: rgba(0, 0, 0, 1);
text-decoration: none;
letter-spacing: 0px;
font-family: "sourcesanspro";
font-style: normal;
font-weight: 400;
text-decoration: none;
}
src/lib/sidebar/sidebar.scss
+71
View File
@@ -0,0 +1,71 @@
.right-sidebar {
margin: 5px;
margin-right: 0px;
height: 800px;
width: 125px;
background-color: var(--secondary);
border: 2px, inset, var(--thirdly);
box-sizing: border-box;
}
.left-sidebar {
margin: 5px;
margin-left: 0px;
height: 800px;
width: 125px;
background-color: var(--secondary);
border: 2px, inset, var(--thirdly);
box-sizing: border-box;
}
.side-card {
background-color: var(--thirdly);
border: 2px, inset, var(--thirdly);
}
.side-card+.side-card {
margin-top: 5px;
}
.side-card-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: small;
}
.side-card-bottom {
align-self: flex-end;
}
.social-button-div {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: space-evenly;
}
.social-button {
display: block;
width: 30px;
height: 30px;
border: 2px outset #1da1f2;
background: #1da1f2;
margin: 2px;
img {
width: 30px;
height: auto;
}
}
.social-button:hover {
filter: brightness(110%);
}
.social-button:active {
border-style: inset;
img {}
}
src/lib/sidebar/sidebar_left.svelte
+1 -20
View File
@@ -1,5 +1,6 @@
<script lang="ts" module>
export { SidebarLeft };
import "./sidebar.scss";
</script>
{#snippet SidebarLeft()}
@@ -11,23 +12,3 @@
</div>
</div>
{/snippet}
<style>
.side-card {
background-color: var(--thirdly);
border: 2px, inset, var(--thirdly);
}
.side-card + .side-card {
margin-top: 5px;
}
.side-card-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: small;
}
.side-card-bottom {
align-self: flex-end;
}
</style>
src/lib/sidebar/sidebar_right.svelte
+20 -32
View File
@@ -1,5 +1,6 @@
<script lang="ts" module>
export { SidebarRight };
import "./sidebar.scss";
</script>
{#snippet SidebarRight()}
@@ -11,8 +12,10 @@
<a
href="https://doloro.co.uk/"
style="width: 95%; height: auto; align-items: center"
title="doloro icon"
><img
class="web-button"
alt="doloro web button"
src="https://doloro.co.uk/assets/webStamps/doloro.png"
style="width: 100%; height: auto; text-align: center"
/></a
@@ -24,63 +27,48 @@
<a
style="border-color: #1DA1F2; background: #1DA1F2"
class="social-button"
title="doloro private twitter"
href="https:&#x2F;&#x2F;x.com&#x2F;Doloror"
>
<img src="https://doloro.co.uk/assets/socials/twitter.svg" />
<img alt="" src="https://doloro.co.uk/assets/socials/twitter.svg" />
</a>
<a
style="border-color: #ff90e8; background: #ff90e8"
class="social-button"
title="gumroad store"
href="https:&#x2F;&#x2F;doloro.gumroad.com&#x2F;"
>
<img src="https://doloro.co.uk/assets/socials/gumroad.svg" />
<img
alt="gumroad alt"
src="https://doloro.co.uk/assets/socials/gumroad.svg"
/>
</a>
<a
style="border-color: #000000; background: #000000"
class="social-button"
title="steam profile"
href="https:&#x2F;&#x2F;steamcommunity.com&#x2F;id&#x2F;Doloro&#x2F;"
>
<img src="https://doloro.co.uk/assets/socials/steam.svg" />
<img
alt="steam img"
src="https://doloro.co.uk/assets/socials/steam.svg"
/>
</a>
<a
style="border-color: #101010; background: #101010"
class="social-button"
title="jinxxy"
href="https:&#x2F;&#x2F;jinxxy.com&#x2F;doloro"
>
<img src="https://doloro.co.uk/assets/socials/jinxxy.png" />
<img
alt="jinxxy img"
src="https://doloro.co.uk/assets/socials/jinxxy.png"
/>
</a>
</div>
<style>
.social-button-div {
display: flex;
flex-wrap: wrap;
align-content: stretch;
justify-content: space-evenly;
}
.social-button {
display: block;
width: 30px;
height: 30px;
border: 2px outset #1da1f2;
background: #1da1f2;
margin: 2px;
img {
width: 30px;
height: auto;
}
}
.social-button:hover {
filter: brightness(110%);
}
.social-button:active {
border-style: inset;
img {
}
}
</style>
</div>
<div class="side-card side-card-bottom">
<div class="side-card-inner">
src/lib/tag_store/TagImgHelper.svelte
-2
View File
@@ -11,7 +11,6 @@
},
},
);
console.log(imgs);
let trimmedImgs: Record<string, unknown> = {};
Object.entries(imgs).forEach(([key, value]) => {
let trimmedString = key.replace("./imgs/", "");
@@ -19,7 +18,6 @@
trimmedImgs[trimmedString2] = value;
});
function getTagImg(name: string): any {
console.log(trimmedImgs);
if (trimmedImgs[name]) {
return trimmedImgs[name];
} else {
src/lib/web_buttons/webButton.scss
+8
View File
@@ -0,0 +1,8 @@
.web_button_div {
display: flex;
flex-direction: row;
}
.web_button_container {}
.web_button_img {}
src/lib/web_buttons/webButtons.svelte
+1 -11
View File
@@ -1,5 +1,6 @@
<script lang="ts" module>
import json from "./dic.json";
import "./webButton.scss";
const imageModules = import.meta.glob(
"./imgs/*.{avif,AVIF,heif,HEIF,jpeg,JPEG,jpg,JPG,png,PNG,tiff,TIFF,webp,WEBP}",
{
@@ -37,14 +38,3 @@
</a>
{/each}
{/snippet}
<style>
.web_button_div {
display: flex;
flex-direction: row;
}
.web_button_container {
}
.web_button_img {
}
</style>
src/routes/+page.svelte
+1
View File
@@ -1,3 +1,4 @@
<title>Doloro's Site (Which resides on the internet)</title>
<div>
<h1>hi</h1>
</div>
src/routes/posts/+page.svelte
+2 -19
View File
@@ -1,9 +1,11 @@
<script lang="ts">
import { getPosts, PostCard } from "src/lib/PostHelpers.svelte";
import "./posts.scss";
const posts = getPosts();
</script>
<title>Doloro Website [Posts]</title>
<div class="posts_header">
<h2>Posts and what not</h2>
</div>
@@ -14,23 +16,4 @@
</div>
<style lang="scss">
.posts_container {
margin-left: 20px;
margin-right: 20px;
position: relative;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
row-gap: 20px;
padding-block-start: 20px;
z-index: 0;
flex-direction: column;
flex-wrap: nowrap;
flex-grow: 1;
}
.posts_header {
text-align: center;
}
</style>
src/routes/posts/posts.scss
+20
View File
@@ -0,0 +1,20 @@
.posts_container {
margin-left: 20px;
margin-right: 20px;
position: relative;
display: flex;
align-items: center;
align-content: stretch;
justify-content: start;
row-gap: 20px;
padding-block-start: 20px;
z-index: 0;
flex-direction: column;
flex-wrap: nowrap;
flex-grow: 1;
}
.posts_header {
text-align: center;
}
static/shared__.css
+9 -21
View File
@@ -8,15 +8,16 @@
--accent-2: #66232e;
--accent-3: #44131a;
}
body {
background-image: url("/bg.png");
margin: 40px auto;
max-width: 1280px;
}
.container {
}
header {
text-align: center;
h1 {
display: block;
font-size: 2em;
@@ -28,45 +29,32 @@
unicode-bidi: isolate;
}
}
footer {
text-align: center;
}
.body_of_funny_content {
display: flex;
flex-direction: row;
}
.left-sidebar {
margin: 5px;
margin-left: 0px;
height: 800px;
width: 125px;
background-color: var(--secondary);
border-style: inset;
border: 2px, inset, var(--thirdly);
box-sizing: border-box;
}
.right-sidebar {
margin: 5px;
margin-right: 0px;
height: 800px;
width: 125px;
background-color: var(--secondary);
border: 2px, inset, var(--thirdly);
box-sizing: border-box;
}
.actual-content {
flex: 1;
background-color: var(--primary);
/* border: */
margin: 5px;
}
.sticky_top {
position: sticky;
top: 5px;
}
.a_bit_of_padding {
padding: 12px;
}
.stamp_holder {
justify-content: center;
flex-grow: 0;
svelte.config.ts
+4 -1
View File
@@ -6,6 +6,7 @@ import { mdsvex } from "mdsvex";
/** @type {import('@sveltejs/kit').Config} */
const config = {
extensions: [".svelte", ".md"],
emitCss: true,
preprocess: [
mdsvex({
// The default mdsvex extension is .svx; this overrides that.
@@ -22,7 +23,9 @@ const config = {
],
}),
scss(),
cssModules(),
cssModules({
mode: "scoped"
}),
],
kit: {
alias: {