Improved CSS

This commit is contained in:
Xodrium 2023-02-10 20:08:34 -05:00
parent c725313525
commit a2c9fdcd50
9 changed files with 59 additions and 68 deletions

View file

@ -1,6 +1,7 @@
<style> <style>
#content { #content {
background: var(--dark-1); background: var(--light-1);
box-shadow: 0px 3px 5px 3px var(--dark-2);
width: min(700px, 90vw); width: min(700px, 90vw);
padding: 20px; padding: 20px;
@ -23,6 +24,10 @@
padding: 0; padding: 0;
} }
#header {
border-bottom: var(--dark-2) solid 2px;
}
#main { #main {
min-height: 250px; min-height: 250px;
max-height: 500px; max-height: 500px;

View file

@ -6,13 +6,14 @@
font-family: 'Open Sans'; font-family: 'Open Sans';
border-radius: 0.5rem; border-radius: 2rem;
margin: 0.2rem; margin: 0.2rem;
} }
.button a { .button a {
color: var(--light-1); color: var(--light-1);
font-weight: bold;
} }
</style> </style>

View file

@ -1,7 +1,7 @@
<style> <style>
.votes { .votes {
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 0.9rem;
} }
.vote-area { .vote-area {
margin-right: 30px; margin-right: 30px;
@ -9,7 +9,7 @@
.button { .button {
width: auto; width: auto;
height: 35px; height: 20px;
} }
</style> </style>

View file

@ -1,14 +1,14 @@
<style> <style>
:global(:root) { :global(:root) {
--dark-1: #1a1b1d; --dark-1: #2b2f36;
--dark-2: #22242b; --dark-2: #d8d8d8;
--dark-3: #5d606b; --dark-3: rgb(73, 138, 236);
--light-1: #ffffff; --light-1: #ffffff;
--light-2: #f8f8f8;
--hyperlink: #97b9eb; --hyperlink: rgb(139, 171, 219);
color: var(--light-1);
font-family: 'Open Sans'; font-family: 'Open Sans';
} }
@ -20,14 +20,16 @@
:global(input, textarea) { :global(input, textarea) {
border: 0; border: 0;
border-radius: 0.2rem; border-radius: 0.2rem;
box-shadow: 0px 2px 2.5px 0px var(--dark-2);
} }
#content { #content {
background: var(--dark-2); background: var(--light-2);
height: 100vh; height: 100vh;
width: calc(100vw - 50px); width: calc(100vw - 50px);
padding: 25px; padding: 25px;
padding-top: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -37,11 +39,12 @@
} }
#logo { #logo {
width: calc(100vw - 20px);
background: var(--dark-1); background: var(--dark-1);
padding: 10px; padding: 5px;
border-radius: 50px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -54,11 +57,13 @@
#logo a { #logo a {
padding: 10px; padding: 10px;
color: var(--light-1);
font-weight: bold;
} }
#logo img { #logo img {
height: auto; height: 30px;
width: 125px; width: auto;
display: block; display: block;
} }
@ -72,7 +77,7 @@
<div id='content'> <div id='content'>
<div id='logo'> <div id='logo'>
<a href='/'> <a href='/'>
<img src='/logo_sanifae.svg' alt='Sanifae Logo'> <img src='/icon_sanifae.svg' alt='Sanifae Logo'>
</a> </a>
{#if data.username && data.username != 'false'} {#if data.username && data.username != 'false'}
<a href='/user/{data.username}'> <a href='/user/{data.username}'>

View file

@ -1,5 +1,6 @@
<script> <script>
import Post from '$lib/components/Post.svelte'; import Post from '$lib/components/Post.svelte';
import Button from '$lib/components/Button.svelte'
/** @type {import('./$types').PageData} */ /** @type {import('./$types').PageData} */
export let data; export let data;
@ -17,6 +18,6 @@
{/each} {/each}
<p> <p>
<a data-sveltekit-reload href='?page={data.id+1}'>Next page</a> <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)-1) }}>Previous page</Button>
</p> <Button clickFunc={() => { window.location.search = 'page=' + ((data.id)+1) }}>Next page</Button>
<p></p> </p>

View file

@ -41,11 +41,11 @@
id="layer1" id="layer1"
transform="translate(-48.929905,-129.52741)"> transform="translate(-48.929905,-129.52741)">
<path <path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 56.684592,149.59814 10.887303,12.1325 13.600048,-26.2501" d="m 56.684592,149.59814 10.887303,12.1325 13.600048,-26.2501"
id="path3462" /> id="path3462" />
<path <path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:11.90625;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="M 79.370381,172.06252 68.483078,159.93002 54.88303,186.18012" d="M 79.370381,172.06252 68.483078,159.93002 54.88303,186.18012"
id="path8000" /> id="path8000" />
</g> </g>

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 14 KiB

View file

@ -41,7 +41,7 @@
id="layer1" id="layer1"
transform="translate(-47.715969,-129.48962)"> transform="translate(-47.715969,-129.48962)">
<path <path
style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" style="fill:none;fill-opacity:1;stroke:#aaa;stroke-width:7.9375;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
d="m 51.684719,147.57597 10.887303,12.1325 13.600048,-26.2501" d="m 51.684719,147.57597 10.887303,12.1325 13.600048,-26.2501"
id="path3462" /> id="path3462" />
</g> </g>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View file

@ -41,11 +41,11 @@
id="layer1" id="layer1"
transform="translate(-53.804537,-76.370715)"> transform="translate(-53.804537,-76.370715)">
<path <path
style="color:#000000;fill:#ffffff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;-inkscape-stroke:none" style="color:#000000;fill:#aaa;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;-inkscape-stroke:none"
d="m 95.90625,76.370863 c -23.173772,0 -42.101563,18.92779 -42.101563,42.101567 0,23.17377 18.927791,42.10156 42.101563,42.10156 23.17377,0 42.10156,-18.92779 42.10156,-42.10156 0,-23.173777 -18.92779,-42.101567 -42.10156,-42.101567 z m 0,13.228515 c 16.02419,0 28.87305,12.848862 28.87305,28.873052 0,16.02419 -12.84886,28.87304 -28.87305,28.87304 -16.024189,0 -28.873047,-12.84885 -28.873047,-28.87304 0,-16.02419 12.848858,-28.873052 28.873047,-28.873052 z" d="m 95.90625,76.370863 c -23.173772,0 -42.101563,18.92779 -42.101563,42.101567 0,23.17377 18.927791,42.10156 42.101563,42.10156 23.17377,0 42.10156,-18.92779 42.10156,-42.10156 0,-23.173777 -18.92779,-42.101567 -42.10156,-42.101567 z m 0,13.228515 c 16.02419,0 28.87305,12.848862 28.87305,28.873052 0,16.02419 -12.84886,28.87304 -28.87305,28.87304 -16.024189,0 -28.873047,-12.84885 -28.873047,-28.87304 0,-16.02419 12.848858,-28.873052 28.873047,-28.873052 z"
id="path234" /> id="path234" />
<circle <circle
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1" style="fill:#aaa;fill-opacity:1;stroke:#aaa;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:3.96999;stroke-dasharray:none;stroke-opacity:1"
id="path3020" id="path3020"
cx="95.90625" cx="95.90625"
cy="118.47243" cy="118.47243"

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB