shimane-u-fest-map

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

page.module.css (3194B)

      1 /* app/page.module.css */
      2 .customInfoWindow {
      3   /* InfoWindowの最大幅を設定し、コンテンツが広がるようにする */
      4   max-width: 450px !important;
      5 
      6   /* その他、必要に応じてスタイルを調整 */
      7   background-color: transparent !important;
      8   box-shadow: none !important;
      9   color: #333;
     10 }
     11 
     12 .customInfoWindow h3 {
     13   margin: 0 0 8px;
     14   font-size: 1.25rem;
     15   font-weight: bold;
     16 }
     17 
     18 .customInfoWindow p {
     19   margin: 0;
     20   font-size: 1rem;
     21 }
     22 .page {
     23   --gray-rgb: 0, 0, 0;
     24   --gray-alpha-200: rgba(var(--gray-rgb), 0.08);
     25   --gray-alpha-100: rgba(var(--gray-rgb), 0.05);
     26 
     27   --button-primary-hover: #383838;
     28   --button-secondary-hover: #f2f2f2;
     29 
     30   display: grid;
     31   grid-template-rows: 20px 1fr 20px;
     32   align-items: center;
     33   justify-items: center;
     34   min-height: 100svh;
     35   padding: 80px;
     36   gap: 64px;
     37   font-family: var(--font-geist-sans);
     38 }
     39 
     40 @media (prefers-color-scheme: dark) {
     41   .page {
     42     --gray-rgb: 255, 255, 255;
     43     --gray-alpha-200: rgba(var(--gray-rgb), 0.145);
     44     --gray-alpha-100: rgba(var(--gray-rgb), 0.06);
     45 
     46     --button-primary-hover: #ccc;
     47     --button-secondary-hover: #1a1a1a;
     48   }
     49 }
     50 
     51 .main {
     52   display: flex;
     53   flex-direction: column;
     54   gap: 32px;
     55   grid-row-start: 2;
     56 }
     57 
     58 .main ol {
     59   font-family: var(--font-geist-mono);
     60   padding-left: 0;
     61   margin: 0;
     62   font-size: 14px;
     63   line-height: 24px;
     64   letter-spacing: -0.01em;
     65   list-style-position: inside;
     66 }
     67 
     68 .main li:not(:last-of-type) {
     69   margin-bottom: 8px;
     70 }
     71 
     72 .main code {
     73   font-family: inherit;
     74   background: var(--gray-alpha-100);
     75   padding: 2px 4px;
     76   border-radius: 4px;
     77   font-weight: 600;
     78 }
     79 
     80 .ctas {
     81   display: flex;
     82   gap: 16px;
     83 }
     84 
     85 .ctas a {
     86   appearance: none;
     87   border-radius: 128px;
     88   height: 48px;
     89   padding: 0 20px;
     90   border: 1px solid transparent;
     91   transition:
     92     background 0.2s,
     93     color 0.2s,
     94     border-color 0.2s;
     95   cursor: pointer;
     96   display: flex;
     97   align-items: center;
     98   justify-content: center;
     99   font-size: 16px;
    100   line-height: 20px;
    101   font-weight: 500;
    102 }
    103 
    104 a.primary {
    105   background: var(--foreground);
    106   color: var(--background);
    107   gap: 8px;
    108 }
    109 
    110 a.secondary {
    111   border-color: var(--gray-alpha-200);
    112   min-width: 158px;
    113 }
    114 
    115 .footer {
    116   grid-row-start: 3;
    117   display: flex;
    118   gap: 24px;
    119 }
    120 
    121 .footer a {
    122   display: flex;
    123   align-items: center;
    124   gap: 8px;
    125 }
    126 
    127 .footer img {
    128   flex-shrink: 0;
    129 }
    130 
    131 /* Enable hover only on non-touch devices */
    132 @media (hover: hover) and (pointer: fine) {
    133   a.primary:hover {
    134     background: var(--button-primary-hover);
    135     border-color: transparent;
    136   }
    137 
    138   a.secondary:hover {
    139     background: var(--button-secondary-hover);
    140     border-color: transparent;
    141   }
    142 
    143   .footer a:hover {
    144     text-decoration: underline;
    145     text-underline-offset: 4px;
    146   }
    147 }
    148 
    149 @media (max-width: 600px) {
    150   .page {
    151     padding: 32px;
    152     padding-bottom: 80px;
    153   }
    154 
    155   .main {
    156     align-items: center;
    157   }
    158 
    159   .main ol {
    160     text-align: center;
    161   }
    162 
    163   .ctas {
    164     flex-direction: column;
    165   }
    166 
    167   .ctas a {
    168     font-size: 14px;
    169     height: 40px;
    170     padding: 0 16px;
    171   }
    172 
    173   a.secondary {
    174     min-width: auto;
    175   }
    176 
    177   .footer {
    178     flex-wrap: wrap;
    179     align-items: center;
    180     justify-content: center;
    181   }
    182 }
    183 
    184 @media (prefers-color-scheme: dark) {
    185   .logo {
    186     filter: invert();
    187   }
    188 }