Update css for mobile

memeLab · Jul 6, 2024 · 4612551 · 4612551
1 parent 48ce640
commit 4612551
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/blog/jinja2/blog/clipping.jinja2 b/src/blog/jinja2/blog/clipping.jinja2
@@ -5,7 +5,7 @@
 {% endblock %}
 
 {% block content %}
-    <div id="blog-area">
+    <div id="clipping-area">
         {% block button %}
         {% endblock %}
         {% block page_title %}

diff --git a/src/blog/static/css/blog.css b/src/blog/static/css/blog.css
@@ -1,15 +1,16 @@
 /* General Blog Pages */
 #blog-area,
+#clipping-area,
 #posts-area{
     max-width: 600px;
     margin: 0 auto;
 }
 .post{
-    margin-bottom: 30px;
+    margin: 0px 1.5em 3em 1.5em;
 }
 .post a,
 #category-header a{
-
+    
     transition: all 0.2s ease-in;
     background-image: linear-gradient( to top, #05f7ae, #05f7ae 50%, transparent 50%, transparent );
     background-position: 100% 0%;
@@ -22,7 +23,8 @@
 }
 
 #blog-area p {
-    text-align: left;
+    text-align: justify;
+    margin-left: 1.5em;
 }
 
 
@@ -37,6 +39,7 @@
 }
 #post p{
     text-align: justify;
+    margin: 1.5em 1.5em 0 1.5em;
 }
 #back-button{
     float: left;
@@ -57,7 +60,7 @@
 /* Clipping page */
 .clipping{
     text-align: left;
-    margin-top: 1.5em;
+    margin: 1.5em 1.5em 0 1.5em;
 }
 .clipping p{
     margin: 0;
@@ -66,6 +69,13 @@
     margin: 0;
 }
 .clipping a{
-    display: block;
+    display: inline-block;
     margin-bottom: 8px;
+}
+
+
+@media all and (min-width: 800px) {
+    #blog-area p {
+        text-align: left;
+    }
 }
diff --git a/src/core/static/css/reset.css b/src/core/static/css/reset.css
@@ -465,6 +465,7 @@ div.contCam:before {
 .useful-links .container {
   height: 50px;
   margin: auto;
+  column-gap: 1.5em;
 }
 
 .useful-links a,
@@ -745,7 +746,9 @@ a.sq-github {
     background-position: 100% 15%;
     background-size: 100% 200%;
   }
-
+  .useful-links .container {
+    column-gap: 0;
+  }
   .contCam {
     min-width: 250px;
   }
@@ -815,6 +818,7 @@ a.sq-github {
     height: 30px;
     max-width: 40px;
   }
+
 }
 
 /* Hover Elements */