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

TheInfoSection.vue (3697B)

      1 <script>
      2 import SquircleHero from '@/assets/img/squircle-demo.svg?inline';
      3 
      4 export default {
      5     name: 'TheInfoSection',
      6     components: {
      7         SquircleHero,
      8     },
      9 };
     10 </script>
     11 
     12 <template>
     13     <div class="info-section">
     14         <SquircleHero class="info-section__squircle-hero" />
     15         <div class="info-section__text">
     16             <div class="info-section__squiggle"></div>
     17             <p class="info-section__paragraph">
     18                 Looking to add some premium squircley goodness to add to your
     19                 designs? Squircley is all you need to start creating beautiful
     20                 organic shapes ready to use for logos, icons and background
     21                 images.
     22             </p>
     23             <p class="info-section__paragraph">
     24                 The generator exports SVG files which can be copied straight to
     25                 the clipboard for dropping into your HTML / CSS or downloaded to
     26                 your computer ready to use in your design software of choice
     27                 (Figma, Sketch, Framer, XD, etc)
     28             </p>
     29             <p class="info-section__paragraph">Have fun! 🎨</p>
     30         </div>
     31         <div class="app__footer">
     32             <p class="info-section__paragraph">
     33                 Follow me on Twitter
     34                 <a
     35                     href="https://twitter.com/georgedoescode"
     36                     target="_blank"
     37                     rel="noopener"
     38                     >@georgedoescode</a
     39                 >
     40             </p>
     41             <a
     42                 class="product-hunt-badge"
     43                 href="https://www.producthunt.com/posts/squircley?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-squircley"
     44                 target="_blank"
     45                 ><img
     46                     src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=215104&theme=light"
     47                     alt="Squircley - All you need to start creating beautiful squircles! | Product Hunt Embed"
     48                     style="width: 250px; height: 54px;"
     49                     width="250px"
     50                     height="54px"
     51             /></a>
     52         </div>
     53     </div>
     54 </template>
     55 
     56 <style scoped>
     57 .info-section {
     58     display: grid;
     59     grid-template-columns: repeat(12, 1fr);
     60     width: 100%;
     61     max-width: 1600px;
     62     margin: 0 auto;
     63     place-items: center;
     64 }
     65 
     66 .info-section__text {
     67     grid-column: 2 / 8;
     68 }
     69 
     70 .info-section__paragraph {
     71     font-size: var(--font-size-4);
     72     line-height: 1.75;
     73     margin-bottom: var(--spacing-5);
     74 }
     75 
     76 .info-section__squircle-hero {
     77     justify-self: end;
     78     grid-column: 9 / 13;
     79     grid-row: 1;
     80     margin-top: 0;
     81     width: 100%;
     82 }
     83 
     84 .info-section__squiggle {
     85     width: var(--spacing-9);
     86     height: 8px;
     87     background-image: url('../assets/img/wiggle.svg');
     88     background-size: 58px auto;
     89     background-position: center center;
     90     background-repeat: repeat-x;
     91     margin-bottom: var(--spacing-8);
     92 }
     93 
     94 .app__footer {
     95     width: 100%;
     96     grid-column: 2 / 6;
     97 }
     98 
     99 .app__footer a {
    100     color: #4d3df7;
    101 }
    102 
    103 .product-hunt-badge {
    104     display: block;
    105     margin-top: var(--spacing-7);
    106 }
    107 
    108 @media only screen and (max-width: 68rem) {
    109     .info-section {
    110         padding: 0 var(--spacing-4);
    111     }
    112     .info-section__text {
    113         grid-column: 1 / 8;
    114     }
    115 }
    116 
    117 @media only screen and (max-width: 62rem) {
    118     .info-section {
    119         display: block;
    120     }
    121 
    122     .info-section__squircle-hero {
    123         width: 120px;
    124         height: 120px;
    125         float: right;
    126         margin-left: var(--spacing-4);
    127         margin-top: var(--spacing-9);
    128     }
    129 
    130     .info-section__paragraph {
    131         font-size: var(--font-size-3);
    132     }
    133 
    134     .info-section__squiggle {
    135         margin-bottom: var(--spacing-6);
    136     }
    137 }
    138 </style>