squircle

Make all the squircles you need, in the browser. https://github.com/georgedoescode/squircle https://squircley.app/
git clone http://git.hanabi.in/repos/squircle.git
Log | Files | Refs | LICENSE

App.vue (1727B)

      1 <script>
      2 import TheHeader from './components/TheHeader.vue';
      3 import TheGenerator from './components/TheGenerator.vue';
      4 import TheWaveBackground from './components/TheWaveBackground.vue';
      5 import TheSquircleExplosion from './components/TheSquircleExplosion.vue';
      6 import TheInfoSection from './components/TheInfoSection.vue';
      7 
      8 export default {
      9     name: 'App',
     10     components: {
     11         TheHeader,
     12         TheGenerator,
     13         TheWaveBackground,
     14         TheSquircleExplosion,
     15         TheInfoSection,
     16     },
     17     mounted() {
     18         function handleFirstTab(e) {
     19             if (e.keyCode === 9) {
     20                 document.body.classList.add('user-is-tabbing');
     21                 window.removeEventListener('keydown', handleFirstTab);
     22             }
     23         }
     24         window.addEventListener('keydown', handleFirstTab);
     25     },
     26 };
     27 </script>
     28 
     29 <template>
     30     <div class="app">
     31         <TheHeader class="app__header" />
     32         <TheWaveBackground class="app__background" />
     33         <TheSquircleExplosion />
     34         <div class="app__content">
     35             <TheGenerator />
     36             <TheInfoSection />
     37         </div>
     38     </div>
     39 </template>
     40 
     41 <style scoped>
     42 .app {
     43     display: grid;
     44     grid-template-rows: max-content 1fr;
     45     min-height: 100vh;
     46 }
     47 
     48 .header {
     49     grid-row: 1;
     50 }
     51 
     52 .app__content,
     53 .app__background {
     54     grid-column: -1 / 1;
     55     grid-row: 2;
     56 }
     57 
     58 .app__content {
     59     padding-bottom: var(--spacing-6);
     60 }
     61 
     62 .generator {
     63     max-width: 62rem;
     64     margin: 0 auto;
     65     margin-bottom: var(--spacing-8);
     66 }
     67 
     68 .squircle-explosion {
     69     position: absolute;
     70     top: 0;
     71     left: 0;
     72     width: 100%;
     73     height: 540px;
     74 }
     75 
     76 @media only screen and (max-width: 62rem) {
     77     .generator {
     78         margin-bottom: var(--spacing-7);
     79     }
     80 }
     81 </style>