bubble form

itatikola · Dec 16, 2023 · 4efe72a · 4efe72a
1 parent 449e704
commit 4efe72a
Show file tree

Hide file tree

Showing 13 changed files with 97 additions and 82 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -3,8 +3,6 @@
 
   <div class="wrapper">
 
-    <h2 class="footer-heading">{{ site.title | escape }}</h2>
-
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">

diff --git a/_includes/header.html b/_includes/header.html
@@ -1,6 +1,6 @@
 <header class="site-header" role="banner">
 
-  <div class="wrapper">
+  <div class="bubble">
     {%- assign default_paths = site.pages | map: "path" -%}
     {%- assign page_paths = site.header_pages | default: default_paths -%}
     <a class="site-title" rel="author" href="{{ "/" | relative_url }}">{{ site.title | escape }}</a>

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -8,12 +8,13 @@
     {%- include header.html -%}
 
     <main class="page-content" aria-label="Content">
-      <div class="wrapper">
+      <div class="bubble">
         {{ content }}
       </div>
     </main>
 
-    {%- include footer.html -%}
+
+    <!--{%- include footer.html -%}-->
 
   </body>
 

diff --git a/_sass/minima.scss b/_sass/minima.scss
@@ -9,9 +9,9 @@ $small-font-size:  $base-font-size * 0.875 !default;
 $base-line-height: 1.5 !default;
 
 $spacing-unit:     30px !default;
-
+// white default color  #ede5e58b
 $text-color:       #000000 !default;
-$background-color: #ede5e58b !default;
+$background-color: #f8d2d2 !default;
 $brand-color:      #5491e1 !default;
 
 $grey-color:       #828282 !default;
@@ -21,7 +21,7 @@ $grey-color-dark:  darken($grey-color, 25%) !default;
 $table-text-align: left !default;
 
 // Width of the content area
-$content-width:    1000px !default;
+$content-width:    800px !default;
 
 $on-palm:          300px !default;
 $on-laptop:        1000px !default;

diff --git a/_sass/minima/_base.scss b/_sass/minima/_base.scss
@@ -46,7 +46,7 @@ ul, ol, dl, figure,
  * `main` element
  */
 main {
-  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+  display: flex; /* Default value of `display` of `main` element is 'inline' in IE 11. */
 }
 
 
@@ -57,7 +57,7 @@ main {
 img {
   width: 300px;
   float: left;
-  margin-right: 20px;
+  margin: 20px;
   border-radius: 30px;
 }
 
@@ -86,6 +86,7 @@ ul, ol {
 li {
   > ul,
   > ol {
+    margin-top: 10px;
     margin-bottom: 0;
   }
 }
@@ -97,6 +98,7 @@ li {
  */
 h1, h2, h3, h4, h5, h6 {
   font-weight: $base-font-weight;
+  margin-top: 10px;
 }
 
 
@@ -176,13 +178,15 @@ pre {
 /**
  * Wrapper
  */
-.wrapper {
+.bubble {
   max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
   max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
   margin-right: auto;
   margin-left: auto;
   padding-right: $spacing-unit;
   padding-left: $spacing-unit;
+  background-color: #f4f1f1; 
+  border-radius: 30px;
   @extend %clearfix;
 
   @include media-query($on-laptop) {

diff --git a/_sass/minima/_layout.scss b/_sass/minima/_layout.scss
@@ -108,7 +108,7 @@
 .site-footer {
   // border-top: 1px solid $grey-color-light;
   background-color: #f8d2d2;
-  // padding: $spacing-unit 0;
+  padding: $spacing-unit 0;
 }
 
 .footer-heading {
@@ -129,10 +129,9 @@
   @extend %clearfix;
 }
 
-.footer-col {
-  float: left;
-  margin-bottom: $spacing-unit / 2;
-  padding-left: $spacing-unit / 2;
+.text-col {
+  padding: 30px $spacing-unit / 2; 
+  font-size: $small-font-size;
 }
 
 .footer-col-1 {
@@ -177,7 +176,7 @@
  * Page content
  */
 .page-content {
-  padding: $spacing-unit 0;
+  padding: $spacing-unit;
   flex: 1;
 }
 

diff --git a/_site/2018/08/20/bananas.html b/_site/2018/08/20/bananas.html
@@ -23,7 +23,7 @@
 <link rel="stylesheet" href="/assets/css/styles.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Indira Tatikola" /></head>
 <body><header class="site-header" role="banner">
 
-  <div class="wrapper"><a class="site-title" rel="author" href="/">Indira Tatikola</a><nav class="site-nav">
+  <div class="bubble"><a class="site-title" rel="author" href="/">Indira Tatikola</a><nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
         <label for="nav-trigger">
           <span class="menu-icon">
@@ -37,7 +37,7 @@
       </nav></div>
 </header>
 <main class="page-content" aria-label="Content">
-      <div class="wrapper">
+      <div class="bubble">
         <h1>Bananas</h1>
 <p>20 Aug 2018 - jill</p>
 
@@ -51,13 +51,14 @@ <h1>Bananas</h1>
 red, purple, or brown when ripe.</p>
 
       </div>
-    </main><footer class="site-footer h-card">
+    </main>
+
+
+    <!--<footer class="site-footer h-card">
   <data class="u-url" href="/"></data>
 
   <div class="wrapper">
 
-    <h2 class="footer-heading">Indira Tatikola</h2>
-
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">
@@ -72,6 +73,8 @@ <h2 class="footer-heading">Indira Tatikola</h2>
   </div>
 
 </footer>
-</body>
+-->
+
+  </body>
 
 </html>
diff --git a/_site/404.html b/_site/404.html
@@ -21,7 +21,7 @@
 <link rel="stylesheet" href="/assets/css/styles.css"><link type="application/atom+xml" rel="alternate" href="http://localhost:4000/feed.xml" title="Indira Tatikola" /></head>
 <body><header class="site-header" role="banner">
 
-  <div class="wrapper"><a class="site-title" rel="author" href="/">Indira Tatikola</a><nav class="site-nav">
+  <div class="bubble"><a class="site-title" rel="author" href="/">Indira Tatikola</a><nav class="site-nav">
         <input type="checkbox" id="nav-trigger" class="nav-trigger" />
         <label for="nav-trigger">
           <span class="menu-icon">
@@ -35,7 +35,7 @@
       </nav></div>
 </header>
 <main class="page-content" aria-label="Content">
-      <div class="wrapper">
+      <div class="bubble">
         <style type="text/css" media="screen">
   .container {
     margin: 10px auto;
@@ -58,13 +58,14 @@ <h1>404</h1>
 </div>
 
       </div>
-    </main><footer class="site-footer h-card">
+    </main>
+
+
+    <!--<footer class="site-footer h-card">
   <data class="u-url" href="/"></data>
 
   <div class="wrapper">
 
-    <h2 class="footer-heading">Indira Tatikola</h2>
-
     <div class="footer-col-wrapper">
       <div class="footer-col footer-col-1">
         <ul class="contact-list">
@@ -79,6 +80,8 @@ <h2 class="footer-heading">Indira Tatikola</h2>
   </div>
 
 </footer>
-</body>
+-->
+
+  </body>
 
 </html>
diff --git a/_site/assets/css/styles.css b/_site/assets/css/styles.css
@@ -8,16 +8,16 @@ img { width: 300px; float: left; margin-right: 20px; border-radius: 30px; }
 body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
 
 /** Basic styling */
-body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #ede5e58b; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
+body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #f8d2d2; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
 
 /** Set `margin-bottom` to maintain vertical rhythm */
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
 
 /** `main` element */
-main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
+main { display: flex; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
 
 /** Images */
-img { width: 300px; float: left; margin-right: 20px; border-radius: 30px; }
+img { width: 300px; float: left; margin: 20px; border-radius: 30px; }
 
 /** Figures */
 figure > img { display: block; }
@@ -27,10 +27,10 @@ figcaption { font-size: 13.125px; }
 /** Lists */
 ul, ol { margin-left: 30px; }
 
-li > ul, li > ol { margin-bottom: 0; }
+li > ul, li > ol { margin-top: 10px; margin-bottom: 0; }
 
 /** Headings */
-h1, h2, h3, h4, h5, h6 { font-weight: 300; }
+h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-top: 10px; }
 
 /** Links */
 a { color: #5491e1; text-decoration: none; }
@@ -52,11 +52,11 @@ pre { padding: 8px 12px; overflow-x: auto; }
 pre > code { border: 0; padding-right: 0; padding-left: 0; }
 
 /** Wrapper */
-.wrapper { max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
-@media screen and (max-width: 1000px) { .wrapper { max-width: -webkit-calc(1000px - (30px)); max-width: calc(1000px - (30px)); padding-right: 15px; padding-left: 15px; } }
+.bubble { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; background-color: #f4f1f1; border-radius: 30px; }
+@media screen and (max-width: 1000px) { .bubble { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }
 
 /** Clearfix */
-.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
+.bubble:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
 
 /** Icons */
 .svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }
@@ -81,7 +81,7 @@ table td { border: 1px solid #e8e8e8; }
 .site-nav .menu-icon { display: none; }
 .site-nav .page-link { color: #000000; line-height: 1.5; }
 .site-nav .page-link:not(:last-child) { margin-right: 20px; }
-@media screen and (max-width: 300px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #ede5e58b; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
+@media screen and (max-width: 300px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #f8d2d2; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
   .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
   .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
   .site-nav .menu-icon > svg { fill: #424242; }
@@ -91,15 +91,15 @@ table td { border: 1px solid #e8e8e8; }
   .site-nav .page-link:not(:last-child) { margin-right: 0; } }
 
 /** Site footer */
-.site-footer { background-color: #f8d2d2; }
+.site-footer { background-color: #f8d2d2; padding: 30px 0; }
 
 .footer-heading { font-size: 16.875px; margin-bottom: 15px; }
 
 .contact-list, .social-media-list { list-style: none; margin-left: 0; }
 
 .footer-col-wrapper { font-size: 14.0625px; color: #828282; margin-left: -15px; }
 
-.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }
+.text-col { padding: 30px 15px; font-size: 13.125px; }
 
 .footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }
 
@@ -111,7 +111,7 @@ table td { border: 1px solid #e8e8e8; }
   .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 @media screen and (max-width: 300px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 /** Page content */
-.page-content { padding: 30px 0; flex: 1; }
+.page-content { padding: 30px; flex: 1; }
 
 .page-heading { font-size: 30px; }
 

diff --git a/_site/assets/main.css b/_site/assets/main.css
@@ -2,16 +2,16 @@
 body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure { margin: 0; padding: 0; }
 
 /** Basic styling */
-body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #ede5e58b; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
+body { font: 300 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; color: #000000; background-color: #f8d2d2; -webkit-text-size-adjust: 100%; -webkit-font-feature-settings: "kern" 1; -moz-font-feature-settings: "kern" 1; -o-font-feature-settings: "kern" 1; font-feature-settings: "kern" 1; font-kerning: normal; display: flex; min-height: 100vh; flex-direction: column; }
 
 /** Set `margin-bottom` to maintain vertical rhythm */
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight { margin-bottom: 15px; }
 
 /** `main` element */
-main { display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
+main { display: flex; /* Default value of `display` of `main` element is 'inline' in IE 11. */ }
 
 /** Images */
-img { width: 300px; float: left; margin-right: 20px; border-radius: 30px; }
+img { width: 300px; float: left; margin: 20px; border-radius: 30px; }
 
 /** Figures */
 figure > img { display: block; }
@@ -21,10 +21,10 @@ figcaption { font-size: 13.125px; }
 /** Lists */
 ul, ol { margin-left: 30px; }
 
-li > ul, li > ol { margin-bottom: 0; }
+li > ul, li > ol { margin-top: 10px; margin-bottom: 0; }
 
 /** Headings */
-h1, h2, h3, h4, h5, h6 { font-weight: 300; }
+h1, h2, h3, h4, h5, h6 { font-weight: 300; margin-top: 10px; }
 
 /** Links */
 a { color: #5491e1; text-decoration: none; }
@@ -46,11 +46,11 @@ pre { padding: 8px 12px; overflow-x: auto; }
 pre > code { border: 0; padding-right: 0; padding-left: 0; }
 
 /** Wrapper */
-.wrapper { max-width: -webkit-calc(1000px - (30px * 2)); max-width: calc(1000px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; }
-@media screen and (max-width: 1000px) { .wrapper { max-width: -webkit-calc(1000px - (30px)); max-width: calc(1000px - (30px)); padding-right: 15px; padding-left: 15px; } }
+.bubble { max-width: -webkit-calc(800px - (30px * 2)); max-width: calc(800px - (30px * 2)); margin-right: auto; margin-left: auto; padding-right: 30px; padding-left: 30px; background-color: #f4f1f1; border-radius: 30px; }
+@media screen and (max-width: 1000px) { .bubble { max-width: -webkit-calc(800px - (30px)); max-width: calc(800px - (30px)); padding-right: 15px; padding-left: 15px; } }
 
 /** Clearfix */
-.wrapper:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
+.bubble:after, .footer-col-wrapper:after { content: ""; display: table; clear: both; }
 
 /** Icons */
 .svg-icon { width: 16px; height: 16px; display: inline-block; fill: #828282; padding-right: 5px; vertical-align: text-top; }
@@ -75,7 +75,7 @@ table td { border: 1px solid #e8e8e8; }
 .site-nav .menu-icon { display: none; }
 .site-nav .page-link { color: #000000; line-height: 1.5; }
 .site-nav .page-link:not(:last-child) { margin-right: 20px; }
-@media screen and (max-width: 300px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #ede5e58b; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
+@media screen and (max-width: 300px) { .site-nav { position: absolute; top: 9px; right: 15px; background-color: #f8d2d2; border: 1px solid #e8e8e8; border-radius: 5px; text-align: right; }
   .site-nav label[for="nav-trigger"] { display: block; float: right; width: 36px; height: 36px; z-index: 2; cursor: pointer; }
   .site-nav .menu-icon { display: block; float: right; width: 36px; height: 26px; line-height: 0; padding-top: 10px; text-align: center; }
   .site-nav .menu-icon > svg { fill: #424242; }
@@ -85,15 +85,15 @@ table td { border: 1px solid #e8e8e8; }
   .site-nav .page-link:not(:last-child) { margin-right: 0; } }
 
 /** Site footer */
-.site-footer { background-color: #f8d2d2; }
+.site-footer { background-color: #f8d2d2; padding: 30px 0; }
 
 .footer-heading { font-size: 16.875px; margin-bottom: 15px; }
 
 .contact-list, .social-media-list { list-style: none; margin-left: 0; }
 
 .footer-col-wrapper { font-size: 14.0625px; color: #828282; margin-left: -15px; }
 
-.footer-col { float: left; margin-bottom: 15px; padding-left: 15px; }
+.text-col { padding: 30px 15px; font-size: 13.125px; }
 
 .footer-col-1 { width: -webkit-calc(35% - (30px / 2)); width: calc(35% - (30px / 2)); }
 
@@ -105,7 +105,7 @@ table td { border: 1px solid #e8e8e8; }
   .footer-col-3 { width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 @media screen and (max-width: 300px) { .footer-col { float: none; width: -webkit-calc(100% - (30px / 2)); width: calc(100% - (30px / 2)); } }
 /** Page content */
-.page-content { padding: 30px 0; flex: 1; }
+.page-content { padding: 30px; flex: 1; }
 
 .page-heading { font-size: 30px; }