style: improved mobile view

bonus: added link to online linux vm

Author: debel

src/layouts/BaseLayout.astro

@@ -46,7 +46,7 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
           <div class="header__logo">
             <a href={base}>
               <div class="logo">
-                COS 3100: Intro to GIT
+                <span class="big-only">COS 3100: </span>Intro to GIT
               </div>
             </a>
           </div>
@@ -56,6 +56,15 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
               <ul class="menu__dropdown">
                 <li><a href={`${base}lessons/`}>lessons</a></li>
                 <li><a href={`${base}tags/`}>tags</a></li>
+                <li>
+                  <a
+                    href="https://bellard.org/jslinux/vm.html?url=alpine-x86.cfg&mem=192"
+                    class="external"
+                    target="_blank"
+                  >online terminal</a>
+                </li>
+
+                {altViewUrl && <li><a class="bordered-top" href={altViewUrl}>view {altViewType}</a></li>}
               </ul>
             </li>
           </ul>
@@ -65,8 +74,15 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
           <ul class="navigation-menu__inner menu--desktop">
                 <li><a href={`${base}lessons/`} class="button inline">lessons</a></li>
                 <li><a href={`${base}tags/`} class="button inline">tags</a></li>
+            <li>
+              <a
+                href="https://bellard.org/jslinux/vm.html?url=alpine-x86.cfg&mem=192"
+                class="button inline external"
+                target="_blank"
+              >online terminal</a>
+            </li>
           </ul>
-          {altViewUrl && <a class="button inline paddingx" href={altViewUrl}>view {altViewType}</a>}
+          {altViewUrl && <a class="big-only button inline paddingx" href={altViewUrl}>view {altViewType}</a>}
         </nav>
       </header>
 
@@ -99,4 +115,8 @@ const base = import.meta.env.BASE_URL.endsWith('/') ? import.meta.env.BASE_URL :
     padding-left: 10px;
     padding-right: 10px;
   }
+
+  .bordered-top {
+    border-top: 1px solid var(--secondary);
+  }
 </style>

src/pages/tags/[tag].astro

@@ -37,7 +37,7 @@ const { lessons } = Astro.props;
 
 <style>
   .posts-title {
-    font-size: 2.2rem !important;
+    font-size: 2rem !important;
     color: var(--foreground);
     margin-top: 0 !important;
     margin-bottom: 30px !important;

src/styles/buttons.css

@@ -85,10 +85,27 @@
   content:']';
 }
 
+.button.inline.external:before{
+  content:'[[';
+}
+
+.button.inline.external:after{
+  content:']]';
+}
+
+
+.button.inline.external:hover:after{
+  content:'[[';
+}
+
+.button.inline.external:hover:before{
+  content:']]';
+}
+
 .button.inline:hover {
   text-decoration: none;
   background: transparent;
-  transform: scale(1.1);
+  transform: scale(1.05);
 }
 
 .button.inline:hover:before{

src/styles/main.css

@@ -82,7 +82,7 @@ figure figcaption p {
 
 .page h1, 
 article h1 {
-  font-size: 2.2rem;
+  font-size: 2rem;
   text-align: left;
   position: relative;
   color: var(--accent);

src/styles/menu.css

@@ -142,4 +142,8 @@
     left: auto;
     right: 0;
   }
-}
+
+  .big-only {
+    display: none !important;
+  }
+}

src/styles/terminal.css

@@ -41,9 +41,28 @@ body {
   -webkit-text-size-adjust: 100%;
   margin: 0;
   padding: 0;
-  transform: scale(2);
-  transform-origin: 0 0;
-  width: 50%;
+}
+
+@media (min-width: 1400px) {
+  body {
+    transform: scale(1.75);
+    transform-origin: 0 0;
+    width: 50%;
+  }
+}
+
+@media (max-width: 1399px) {
+  .post-title {
+    font-size: 1.5rem !important;
+  }
+}
+
+@media print {
+
+ pop-quiz button {
+    background-color: none;
+    border: none;
+  }
 }
 
 h1 {