geedback

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

style.css (2285B)

      1 :root {
      2     font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
      3     line-height: 1.5;
      4     font-weight: 400;
      5 
      6     color-scheme: light dark;
      7     color: rgba(255, 255, 255, 0.87);
      8     background-color: #242424;
      9 
     10     font-synthesis: none;
     11     text-rendering: optimizeLegibility;
     12     -webkit-font-smoothing: antialiased;
     13     -moz-osx-font-smoothing: grayscale;
     14 }
     15 
     16 body {
     17     margin: 0;
     18     display: flex;
     19     place-items: center;
     20     min-width: 320px;
     21     min-height: 100vh;
     22     padding: 1rem;
     23 }
     24 
     25 #app {
     26     width: 100%;
     27     max-width: 600px;
     28     margin: 0 auto;
     29 }
     30 
     31 h1 {
     32     font-size: 1.5em;
     33     margin-bottom: 1em;
     34 }
     35 
     36 table {
     37     border-color: #666;
     38 }
     39 
     40 th,
     41 td {
     42     padding: 8px;
     43     text-align: left;
     44 }
     45 
     46 button {
     47     padding: 0.6em 1.2em;
     48     font-size: 1em;
     49     font-weight: 500;
     50     font-family: inherit;
     51     background-color: #1a1a1a;
     52     cursor: pointer;
     53     border: 1px solid transparent;
     54     border-radius: 8px;
     55 }
     56 
     57 button:hover {
     58     border-color: #646cff;
     59 }
     60 
     61 button.active {
     62     background-color: #ff4444;
     63     color: white;
     64     border-color: #ff4444;
     65 }
     66 
     67 button.active:hover {
     68     background-color: #cc0000;
     69 }
     70 
     71 #kaoss-pad {
     72     width: 100%;
     73     aspect-ratio: 1 / 1;
     74     background: #000;
     75     border: 2px solid #333;
     76     border-radius: 8px;
     77     margin-top: 20px;
     78     touch-action: none; /* Only disable scroll on the pad itself */
     79     cursor: crosshair;
     80 }
     81 
     82 /* About Page Styles */
     83 .about-container {
     84     text-align: left;
     85     padding-bottom: 2rem;
     86 }
     87 
     88 .about-section {
     89     margin-bottom: 2rem;
     90 }
     91 
     92 .about-section h2 {
     93     font-size: 1.2em;
     94     border-bottom: 1px solid #444;
     95     padding-bottom: 0.5rem;
     96     margin-top: 1.5rem;
     97 }
     98 
     99 .video-container {
    100     position: relative;
    101     padding-bottom: 56.25%; /* 16:9 */
    102     height: 0;
    103     overflow: hidden;
    104     max-width: 100%;
    105     border-radius: 8px;
    106     background: #000;
    107 }
    108 
    109 .video-container iframe {
    110     position: absolute;
    111     top: 0;
    112     left: 0;
    113     width: 100%;
    114     height: 100%;
    115 }
    116 
    117 nav {
    118     margin-bottom: 1rem;
    119 }
    120 
    121 nav a {
    122     color: #646cff;
    123     text-decoration: none;
    124     font-weight: 500;
    125 }
    126 
    127 nav a:hover {
    128     text-decoration: underline;
    129 }
    130 
    131 @media (prefers-color-scheme: light) {
    132     :root {
    133         color: #213547;
    134         background-color: #ffffff;
    135     }
    136     button {
    137         background-color: #f9f9f9;
    138     }
    139 }