make pretty cover image

deadcoder0904 · Nov 1, 2022 · b84717e · b84717e
1 parent 86adc89
commit b84717e
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 40 deletions.
diff --git a/src/index.css b/src/index.css
@@ -44,7 +44,7 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: Inter var, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   /* 4 */
 }
 
@@ -515,36 +515,52 @@ video {
 /* common base styles */
 
 .frontcover{
-  position: relative;
+  margin-left: auto;
+  margin-right: auto;
   text-align: center;
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
+  /* colors don't work using @apply for some reason... even background below */
+  color: #fff;
 }
 
 .frontcover > h1{
   position: absolute;
   top: 50%;
   left: 50%;
+  width: 100%;
   --tw-translate-x: -50%;
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 1.5rem;
+  padding: 1rem;
   font-family: Nova Flat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 3rem;
+  font-size: 4.5rem;
   line-height: 1;
   font-weight: 700;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  background: #334155;
 }
 
 .frontcover > span{
   position: absolute;
-  bottom: 2.5rem;
+  bottom: 0px;
   left: 50%;
+  width: 100%;
   --tw-translate-x: -50%;
-  --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  font-family: Nova Flat, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  font-size: 1.875rem;
-  line-height: 2.25rem;
+  border-radius: 1.5rem;
+  padding: 1rem;
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 2.25rem;
+  line-height: 2.5rem;
   font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  background: #4338ca;
+}
+
+.frontcover > span:before {
+  content: 'by ';
 }
 
 /* use this to style the web */
@@ -553,25 +569,35 @@ video {
 
 @media screen {
   body {
-    background: #f1f5f9;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 48rem;
+    background: #0f172a;
   }
 
   .container{
-    overflow: hidden;
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    margin-left: auto;
+    margin-right: auto;
   }
 
-  .frontcover {
-    /* background: url('./cover.png'); */
+  .frontcover{
+    position: relative;
+    height: 100vh;
+    max-width: 36rem;
     background-image: url('./cover.png');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }
+
+  .frontcover > h1{
+    font-size: 3rem;
+    line-height: 1;
+  }
+
+  .frontcover > span{
+    position: absolute;
+    bottom: 5rem;
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
 }
 
 /* use this only for print */
@@ -580,18 +606,19 @@ video {
 
 @media print {
   @page {
-    size: 5.5in 8.5in;
+    size: 6.6in 8.5in;
 
     margin: 70pt 60pt 70pt;
   }
 
-  @page :first {
-    margin: 0;
+  @page cover {
+    background: url('./cover.png');
+
+    background-size: cover;
   }
 
   .frontcover {
     page: cover;
-    content: url('./cover.png');
     page-break-after: always;
   }
 }

diff --git a/src/index.html b/src/index.html
@@ -10,11 +10,10 @@
   </head>
   <body>
     <div class="container">
-      <div class="frontcover">
-        <img src="./cover.png" />
+      <section class="frontcover">
         <h1>princexml playground</h1>
-        <span>by akshay kadam (a2k)</span>
-      </div>
+        <span>akshay kadam (a2k)</span>
+      </section>
     </div>
   </body>
 </html>
diff --git a/src/index.pdf b/src/index.pdf
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -1,13 +1,21 @@
 @import url('https://fonts.googleapis.com/css?family=Nova+Flat');
 
 .frontcover {
-  @apply relative text-white text-center;
+  @apply mx-auto text-center;
+
+  /* colors don't work using @apply for some reason... even background below */
+  color: theme('colors.white');
 
   & > h1 {
-    @apply text-5xl font-bold font-nova absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply w-full text-7xl text-white p-4 font-bold font-nova rounded-3xl absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+    background: theme('colors.slate.700');
   }
 
   & > span {
-    @apply text-3xl font-semibold font-nova absolute bottom-10 left-1/2 -translate-x-1/2 -translate-y-1/2;
+    @apply w-full text-4xl text-white p-4 font-semibold font-sans rounded-3xl absolute bottom-0 left-1/2 -translate-x-1/2;
+    background: theme('colors.indigo.700');
+    &:before {
+      content: 'by ';
+    }
   }
 }
diff --git a/src/styles/print.css b/src/styles/print.css
@@ -2,17 +2,17 @@
 
 @media print {
   @page {
-    size: 5.5in 8.5in;
+    size: 6.6in 8.5in;
     margin: 70pt 60pt 70pt;
   }
 
-  @page :first {
-    margin: 0;
+  @page cover {
+    background: url('./cover.png');
+    background-size: cover;
   }
 
   .frontcover {
     page: cover;
-    content: url('./cover.png');
     page-break-after: always;
   }
 }
diff --git a/src/styles/screen.css b/src/styles/screen.css
@@ -2,16 +2,22 @@
 
 @media screen {
   body {
-    background: theme('colors.slate.100');
-    @apply max-w-3xl mx-auto;
+    background: theme('colors.slate.900');
   }
 
   .container {
-    @apply bg-white overflow-hidden;
+    @apply mx-auto;
   }
 
   .frontcover {
-    /* background: url('./cover.png'); */
-    @apply bg-[url('./cover.png')] bg-cover bg-no-repeat bg-center;
+    @apply max-w-xl relative bg-[url('./cover.png')] bg-cover bg-no-repeat bg-center h-screen;
+
+    & > h1 {
+      @apply text-5xl;
+    }
+
+    & > span {
+      @apply text-2xl bottom-20 absolute;
+    }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,7 +6,7 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
         nova: ['Nova Flat', ...defaultTheme.fontFamily.sans],
       },
     },