~jae/Beepyvid

eeeedc92925e57d01dfcf24ef33fea570aad4651 — Jae Lo Presti (DN0) 11 months ago 5d4ef0b
PUBLIC: add base CSS + BIN files
4 files changed, 157 insertions(+), 0 deletions(-)

A public/1080.svg
A public/VT323-Regular.ttf
A public/logo.svg
A public/main.css
A public/1080.svg => public/1080.svg +1 -0
@@ 0,0 1,1 @@
<svg width="1920" height="1080" xmlns="http://www.w3.org/2000/svg"><rect x="2" y="2" width="1916" height="1076" style="fill:#DEDEDE;stroke:#555555;stroke-width:2"/><text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">1920×1080</text></svg>
\ No newline at end of file

A public/VT323-Regular.ttf => public/VT323-Regular.ttf +0 -0
A public/logo.svg => public/logo.svg +32 -0
@@ 0,0 1,32 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300mm" height="300mm" version="1.1" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <linearGradient id="linearGradient4040-3" x1="133.17" x2="182.07" y1="52.416" y2="74.581" gradientTransform="matrix(2.1363 0 0 1.4242 -185.27 17.6)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#ffc700" offset="0"/>
   <stop stop-color="#b310d6" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient889" x1="148.05" x2="192.6" y1="51.291" y2="61.441" gradientTransform="matrix(.8271 -1.9696 1.3131 .5514 -24.245 477.2)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#3484e2" offset="0"/>
   <stop stop-color="#b310d6" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient1524" x1="107.02" x2="133.76" y1="157.43" y2="187.91" gradientTransform="matrix(1.4242 0 0 1.4242 -33.048 -40.152)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#1763d2" offset="0"/>
   <stop stop-color="#3484e2" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient1595" x1="140.54" x2="241.43" y1="74.65" y2="29.541" gradientTransform="matrix(1.8778 0 0 1.4242 -144.06 74.829)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#1763d2" offset="0"/>
   <stop stop-color="#00d655" offset="1"/>
  </linearGradient>
  <linearGradient id="linearGradient1613" x1="124.53" x2="215.94" y1="76.436" y2="51.275" gradientTransform="matrix(.88869 0 0 1.4242 -6.0518 -38.983)" gradientUnits="userSpaceOnUse">
   <stop stop-color="#ffc700" offset="0"/>
   <stop stop-color="#f41" offset="1"/>
  </linearGradient>
 </defs>
 <g transform="translate(0,3)">
  <path d="m132.29 179.56 51.95 50.248-32.652 17.364-62.174-64.058z" fill="url(#linearGradient1524)"/>
  <path d="m151.59 247.18 62.369-148.52 27.02 27.614-62.033 147.72z" fill="url(#linearGradient889)"/>
  <path d="m95.515 90.662-14.755 35.603h160.22l15.091-35.64z" fill="url(#linearGradient4040-3)"/>
  <path d="m55.98 147.7 163.28 0.19285 11.37 35.604-141.2-0.3652z" fill="url(#linearGradient1595)"/>
  <path d="m119.06 34.042h66.793l-15.091 35.64-66.519 0.07869z" fill="url(#linearGradient1613)"/>
 </g>
</svg>

A public/main.css => public/main.css +124 -0
@@ 0,0 1,124 @@
@font-face {
    font-family: 'pixel';
    src: url('VT323-Regular.ttf') format('truetype');
}


:root {
    --fontsize: 1.4em;
    --pagetitle: 1.75em;

    --imgsize: 10em;
    --svgsize: 3em;

    --titlesize: 2.5em;
    --subsize: 1.5em;

    --padsize: 0.625rem;

    --blue: #5C527F;
    --yellow: #FFD369;
    --constcolor: #022C43;
    --constbd: #001F3F;

    /* DEFAULT LIGHT SCHEME COLOURS */
    --background-color: #F7ECDE;
    --main-text-color: #1B2430;
    --outlink-color: #4169e1;
    --inlink-color: #006400;
    --purple: #800080;
    --grey: #878787;
    --table-color: #000000;
    --shadow-color: #999999;
    --title-color: white;

    /* FLAGS */
    --trans-blue: #5BCEFA;
    --trans-pink: #F5A9B8;
    --flag-cred: #CD0000;
}

@media screen and (prefers-color-scheme: dark) {
    :root {
        --background-color: #1B2430;
        --outlink-color: #ff8080;
        --inlink-color: #7aff7a;
        --main-text-color: #FFFFFF;
        --purple: #ffd1ff ;
        --grey: #E7F6F2;
        --table-color: #F7EDDB;
        --shadow-color: #999999;
        --title-color: #FFFFFF;
    }
}

body {
    font-family: pixel;
    margin: 0;
    padding: 0;
    color: var(--main-text-color);
    background-color: var(--background-color);
}

.page {
    margin: auto;
    border: 3px solid var(--blue);
    overflow: scroll;
    max-height: 95vh;
    max-width: 90vw;
    margin-top: var(--padsize);
    margin-bottom: var(--padsize);
    width: 100%;
}

.page .header {
    padding-top: 0;
    margin-top: 0;
    border-bottom: 3px solid var(--blue);
    background: rgb(255,255,255);
    background: linear-gradient(90deg, var(--blue) 0%, var(--blue) 49%, var(--background-color) 100%);
    display: flex;

    max-width: 100%;
    max-height: 150vh;

    padding-left: 1vw;
}

.page .header .logo {
    margin-left: auto;
    padding-right: var(--padsize);
    max-width: var(--imgsize);
    max-height: var(--imgsize);
    width: 100%;
    height: 100%;
    position: relative;
}

.page .header h1 {
    font-size: 4rem;
    color: var(--purple);
}

/* NEW VIDEOS GRID */
.page .content .videogrid {
    display: grid;
    grid-template-columns: auto auto auto auto;
}

.page .content .videogrid .videoshow {
    text-align: center;
    padding: 15px;
}

.page .content .videogrid .videoshow p {
    font-size: 1.5rem;
    margin: 0 auto;
}

.page .content .videogrid .videoshow .thumbnail img {
    object-fit: cover;
    width: 512px;
    height: auto;
    border: 2px black;
}