CodePen Embed - ಠ_ಠ Valid Table-Flip

Live

This Pen is owned by Miriam Suzanne on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"XWGvLzZ\",\"auto_save\":true},\"hashid\":\"XWGvLzZ\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":73525470,\"user_id\":15542,\"html\":\"\\n<div class=\\\"flip-it\\\">\\n  <input type=\\\"checkbox\\\" id=\\\"flip-it\\\" />\\n  <label for=\\\"flip-it\\\">\\n    FLIP IT\\n    (╯°□°）╯︵ ┻━┻ \\n  </label>\\n</div>\\n\\n\\n<table class=\\\"ಠ_ಠ\\\">\\n  <caption>\\n    Data about the planets of our solar system (Source:\\n    <a href=\\\"https://nssdc.gsfc.nasa.gov/planetary/factsheet/\\\"\\n      >Nasa's Planetary Fact Sheet - Metric</a\\n    >).\\n  </caption>\\n  <thead>\\n    <tr>\\n      <td colspan=\\\"2\\\"></td>\\n      <th scope=\\\"col\\\">Name</th>\\n      <th scope=\\\"col\\\">Mass (10<sup>24</sup>kg)</th>\\n      <th scope=\\\"col\\\">Diameter (km)</th>\\n      <th scope=\\\"col\\\">Density (kg/m<sup>3</sup>)</th>\\n      <th scope=\\\"col\\\">Gravity (m/s<sup>2</sup>)</th>\\n      <th scope=\\\"col\\\">Length of day (hours)</th>\\n      <th scope=\\\"col\\\">Distance from Sun (10<sup>6</sup>km)</th>\\n      <th scope=\\\"col\\\">Mean temperature (°C)</th>\\n      <th scope=\\\"col\\\">Number of moons</th>\\n      <th scope=\\\"col\\\">Notes</th>\\n    </tr>\\n  </thead>\\n  <tbody>\\n    <tr>\\n      <th colspan=\\\"2\\\" rowspan=\\\"4\\\" scope=\\\"rowgroup\\\">Terrestrial planets</th>\\n      <th scope=\\\"row\\\">Mercury</th>\\n      <td>0.330</td>\\n      <td>4,879</td>\\n      <td>5427</td>\\n      <td>3.7</td>\\n      <td>4222.6</td>\\n      <td>57.9</td>\\n      <td>167</td>\\n      <td>0</td>\\n      <td>Closest to the Sun</td>\\n    </tr>\\n    <tr>\\n      <th scope=\\\"row\\\">Venus</th>\\n      <td>4.87</td>\\n      <td>12,104</td>\\n      <td>5243</td>\\n      <td>8.9</td>\\n      <td>2802.0</td>\\n      <td>108.2</td>\\n      <td>464</td>\\n      <td>0</td>\\n      <td></td>\\n    </tr>\\n    <tr>\\n      <th scope=\\\"row\\\">Earth</th>\\n      <td>5.97</td>\\n      <td>12,756</td>\\n      <td>5514</td>\\n      <td>9.8</td>\\n      <td>24.0</td>\\n      <td>149.6</td>\\n      <td>15</td>\\n      <td>1</td>\\n      <td>Our world</td>\\n    </tr>\\n    <tr>\\n      <th scope=\\\"row\\\">Mars</th>\\n      <td>0.642</td>\\n      <td>6,792</td>\\n      <td>3933</td>\\n      <td>3.7</td>\\n      <td>24.7</td>\\n      <td>227.9</td>\\n      <td>-65</td>\\n      <td>2</td>\\n      <td>The red planet</td>\\n    </tr>\\n    <tr>\\n      <th rowspan=\\\"4\\\" scope=\\\"rowgroup\\\">Jovian planets</th>\\n      <th rowspan=\\\"2\\\" scope=\\\"rowgroup\\\">Gas giants</th>\\n      <th scope=\\\"row\\\">Jupiter</th>\\n      <td>1898</td>\\n      <td>142,984</td>\\n      <td>1326</td>\\n      <td>23.1</td>\\n      <td>9.9</td>\\n      <td>778.6</td>\\n      <td>-110</td>\\n      <td>67</td>\\n      <td>The largest planet</td>\\n    </tr>\\n    <tr>\\n      <th scope=\\\"row\\\">Saturn</th>\\n      <td>568</td>\\n      <td>120,536</td>\\n      <td>687</td>\\n      <td>9.0</td>\\n      <td>10.7</td>\\n      <td>1433.5</td>\\n      <td>-140</td>\\n      <td>62</td>\\n      <td></td>\\n    </tr>\\n    <tr>\\n      <th rowspan=\\\"2\\\" scope=\\\"rowgroup\\\">Ice giants</th>\\n      <th scope=\\\"row\\\">Uranus</th>\\n      <td>86.8</td>\\n      <td>51,118</td>\\n      <td>1271</td>\\n      <td>8.7</td>\\n      <td>17.2</td>\\n      <td>2872.5</td>\\n      <td>-195</td>\\n      <td>27</td>\\n      <td></td>\\n    </tr>\\n    <tr>\\n      <th scope=\\\"row\\\">Neptune</th>\\n      <td>102</td>\\n      <td>49,528</td>\\n      <td>1638</td>\\n      <td>11.0</td>\\n      <td>16.1</td>\\n      <td>4495.1</td>\\n      <td>-200</td>\\n      <td>14</td>\\n      <td></td>\\n    </tr>\\n    <tr>\\n      <th colspan=\\\"2\\\" scope=\\\"rowgroup\\\">Dwarf planets</th>\\n      <th scope=\\\"row\\\">Pluto</th>\\n      <td>0.0146</td>\\n      <td>2,370</td>\\n      <td>2095</td>\\n      <td>0.7</td>\\n      <td>153.3</td>\\n      <td>5906.4</td>\\n      <td>-225</td>\\n      <td>5</td>\\n      <td>\\n        Declassified as a planet in 2006, but this\\n        <a\\n          href=\\\"https://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/\\\"\\n          >remains controversial</a\\n        >.\\n      </td>\\n    </tr>\\n  </tbody>\\n</table>\\n\\n\\n<figure>  \\n  <blockquote>\\n    <p>\\n      <code>.ಠ_ಠ { --（╯°□°）╯: ︵┻━┻; }</code> \\n      is valid CSS.\\n    </p>\\n  </blockquote>\\n  <figcaption>—@tabatkins (bsky)</figcaption>\\n</figure>\",\"css\":\".ಠ_ಠ {\\n  --（╯°□°）╯: ︵┻━┻;\\n  container-name: ಠ_ಠ; \\n\\n  :root:not(:has(input:checked)) & {\\n    --（╯°□°）╯: initial;\\n  }\\n\\n  @media (prefers-reduced-motion: no-preference) {\\n    * { transition: rotate 150ms; }\\n  }\\n}\\n\\n@container ಠ_ಠ style(--（╯°□°）╯: ︵┻━┻) {\\n  *:nth-child(1n - 3) { rotate: 0.1turn; }\\n  *:nth-child(3n + 1) { rotate: -0.7turn; }\\n  *:nth-child(5n + 7) { rotate: 0.5turn; }\\n}\\n\\n.flip-it {\\n  align-items: center;\\n  background: var(--highlight);\\n  color: white;\\n  display: flex;\\n  gap: var(--gap);\\n  padding: var(--gap);\\n  position: relative;\\n  z-index: 1;\\n}\\n\\n#flip-it {\\n  aspect-ratio: 1;\\n  inline-size: 1lh;\\n}\\n\\n\\n@layer reset, base;\\n\\n@layer base {\\n  body {    \\n    --text-small: clamp(0.938rem, 0.824rem + 0.568cqi, 1.25rem);\\n    --text-normal: clamp(1.25rem, 1.023rem + 1.136cqi, 1.875rem);\\n    --text-large: clamp(1.35rem, 0.818rem + 2.659cqi, 2.813rem);\\n    --text-xlarge: clamp(1.7rem, 0.784rem + 4.58cqi, 4.219rem);\\n    --gap: clamp(12px, 0rem + 3.75cqi, 24px);\\n    --highlight: color-mix(in srgb, teal, transparent 5%);\\n    --accent: mediumVioletRed;\\n    accent-color: var(--accent);\\n    font-size: var(--text-normal);\\n  }\\n  \\n  table {\\n    font-size: var(--text-small);\\n    margin: var(--gap);\\n    overflow-x: clip;\\n  }\\n  \\n  figure {\\n    background: var(--highlight);\\n    color: white;\\n    font-weight: bold;\\n    padding: var(--gap);\\n  }\\n  \\n  blockquote {        \\n    p::before { content: open-quote; }\\n  }\\n  \\n  p { font-style: italic; }\\n}\\n\\n@layer reset {\\n  * { box-sizing: border-box; }\\n  html { block-size: 100%; }\\n  \\n  body {\\n    margin: unset;\\n    min-block-size: 100%;\\n  }  \\n  \\n  p,\\n  figure,\\n  blockquote {\\n    margin: unset;\\n    padding: unset;\\n  }\\n  \\n  img,\\n  svg {\\n    display: block;\\n    max-inline-size: 100%;\\n  }\\n  \\n  picture { display: contents; }\\n  \\n  input,\\n  button,\\n  textarea,\\n  select {\\n    font: inherit;\\n  }\\n}\\n\",\"js\":\"\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-02-27T04:52:28.942Z\",\"updated_at\":\"2024-03-13T17:00:26.769Z\",\"title\":\"ಠ_ಠ Valid Table-Flip\",\"description\":\"\",\"slug_hash\":\"XWGvLzZ\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":3,\"pick\":false,\"popularity\":72,\"views_count\":568,\"pick_visible_at\":null,\"cpid\":\"018de8e8-368e-7a5c-babe-3dedbcc2a884\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}