archive/derv-net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

boilerplate

Browse source
This commit is contained in:
biglyderv 2025-02-25 13:00:10 -05:00
commit bf77320bc7
Signed by: biglyderv
GPG key ID: 0E2EB0B4CD7397B5
10 changed files with 3638 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

88
public/icon.svg Normal file
View file

@ -0,0 +1,88 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="58.538853"
height="62.269379"
viewBox="0 0 58.538853 62.269381"
version="1.1"
id="svg1"
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
sodipodi:docname="icon.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#000000"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
showguides="true"
inkscape:zoom="6.768"
inkscape:cx="28.959811"
inkscape:cy="26.521868"
inkscape:window-width="1918"
inkscape:window-height="1056"
inkscape:window-x="0"
inkscape:window-y="22"
inkscape:window-maximized="1"
inkscape:current-layer="g4"
showgrid="false" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-52.872929,-52.41062)">
<g
id="g4">
<path
id="path1"
style="fill:#350050;fill-opacity:1;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
d="m 84.835608,53.91062 a 25.074709,25.074709 0 0 0 -25.074219,25.074219 25.074709,25.074709 0 0 0 5.835938,16.035156 l -11.22461,18.160155 25.271485,-9.72851 a 25.074709,25.074709 0 0 0 5.191406,0.60937 A 25.074709,25.074709 0 0 0 109.91178,78.984839 25.074709,25.074709 0 0 0 84.835608,53.91062 Z" />
<circle
style="fill:#7500b1;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle8"
r="19.014986"
cy="78.985329"
cx="84.836098" />
<circle
style="fill:#cb65ff;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle3"
r="13.373178"
cy="78.985329"
cx="84.836098" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="path5"
cx="85.701805"
cy="70.552505"
r="2.7164268" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle5"
cx="84.836098"
cy="78.985329"
r="4.8582249" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle6"
cx="93.328705"
cy="80.164467"
r="1.6716473" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:stroke fill markers"
id="circle7"
cx="76.716713"
cy="86.537621"
r="1.2537355" />
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.6 KiB

132
public/index.css Normal file
View file

@ -0,0 +1,132 @@
:root {
font-family: sans-serif;
font-size: 1em;
--main-1: rgb(13, 12, 17);
--main-2: rgb(47, 40, 53);
--main-3: rgb(223, 176, 219);
--main-4: rgb(248, 224, 245);
--main-5: rgb(69, 56, 90);
color: var(--main-3);
}
body {
background-color: var(--main-1);
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
overflow-x: hidden;
}
.main {
background-color: var(--main-2);
margin: auto;
border-radius: 20px;
}
.header {
color: var(--main-4);
}
.scroller {
display: flex;
justify-content: start;
width: 100%;
overflow-x: scroll;
}
.item-desc {
position: relative;
top: -200px;
color: var(--main-4);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.75));
font-size: 0.8em;
}
.item-img,
.item-desc,
.item {
width: 200px;
height: 200px;
object-fit: cover;
overflow: hidden;
display: block;
object-position: center;
}
.item {
margin: 5px;
flex-shrink: 0;
}
.item-a,
.item-desc p {
margin-left: 5px;
}
.item-a {
font-weight: bold;
text-decoration: underline;
color: inherit;
margin-top: 5px;
display: block;
font-size: 1.5em;
}
.item-ico {
object-fit: contain;
}
.art {
height: 150px;
margin: 5px;
}
.nav {
z-index: 5;
position: sticky;
top: 0;
display: flex;
background: var(--main-5);
color: var(--white);
margin-bottom: 10px;
align-items: center;
flex-wrap: wrap;
}
.nav,
.main {
border: solid var(--main-1) 5px;
padding: 10px;
width: 800px;
max-width: calc(100vw - 40px);
}
.header-a {
text-decoration: none;
color: inherit;
font-weight: bold;
margin: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 0.8em;
}
.header-img {
border-left: none;
margin: 0;
padding-left: 0;
height: 4em;
object-fit: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
}