team page done, moved css to folders

docker-compose.yml

@@ -20,7 +20,7 @@ services:
     image: wordpress:latest
     ports:
       - "8000:80"
-    restart: unless-stopped
+    # restart: unless-stopped
     volumes:
       - ./themes/:/var/www/html/wp-content/themes/
       - ./plugins/:/var/www/html/wp-content/plugins/

start.sh

@@ -1,2 +1,3 @@
 docker-compose up -d
 (cd ./themes/argo/ && npm run watch)
+2

themes/argo/functions.php

@@ -177,6 +177,13 @@ function argo_scripts() {
  */
 require get_template_directory() . '/inc/customizer.php';
 
+
+/**
+ * Remove emoji.
+ */
+require get_template_directory() . '/inc/remove-emoji.php';
+
+
 /**
  * Load Jetpack compatibility file.
  */

themes/argo/inc/remove-emoji.php

@@ -0,0 +1,49 @@
+<?php
+/**
+ *  Disabling emoji library from Wordpress.
+ */
+function disable_emojis() {
+
+    // Let's remove a bunch of actions & filters.
+    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
+    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
+    remove_action( 'wp_print_styles', 'print_emoji_styles' );
+    remove_action( 'admin_print_styles', 'print_emoji_styles' );
+    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
+    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
+    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
+
+    // We also take care of Tiny MCE.
+    add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
+    add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 );
+}
+
+// Let's do this at the init.
+add_action( 'init', 'disable_emojis' );
+
+/**
+* Filter funcion to remove the emoji plugin from TinyMCE.
+* @param array $plugins
+* @return array Difference betwen the two arrays.
+*/
+function disable_emojis_tinymce($plugins) {
+    if ( is_array( $plugins ) ) {
+        return array_diff( $plugins, array( 'wpemoji' ) );
+    } else return array();
+}
+
+/**
+* Removing emoji CDN hostname from DNS prefetching hints.
+* @param array $urls URLs to print for resource hints.
+* @param string $relation_type The relation type the URLs are printed for.
+* @return array Difference betwen the two arrays.
+*/
+function disable_emojis_remove_dns_prefetch( $urls, $relation_type ) {
+    if ( 'dns-prefetch' == $relation_type ) {
+        /** This filter is documented in wp-includes/formatting.php */
+        $emoji_svg_url = apply_filters( 'emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/' );
+        $urls = array_diff( $urls, array( $emoji_svg_url ) );
+    }
+    return $urls;
+}
+?>

themes/argo/page-das-team.php

@@ -1,11 +1,19 @@
 <?php
 get_header();
 ?>
-<main>
+<main class="page-team">
   <header>
-    <h1>hello</h1>
+    <!-- <h1>Das Team</h1> -->
   </header>
+
+  <?php the_content()?>
+
 </main>
 
+<?php
+include get_template_directory() . '/inc/contact-us.php';
+?>
+
+
 <?php get_footer(); ?>
 

themes/argo/scss/typography.scss → themes/argo/scss/general/typography.scss

@@ -25,7 +25,10 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-
+body {
+  font-family: "Space Mono", monospace;
+  font-weight: 400;
+}
 
 main {
   max-width: 880px;

themes/argo/scss/main-style.scss

@@ -1,26 +1,24 @@
-// @import "./trispace-font.scss";
 @import "./old-style.scss";
-@import "./typography.scss";
 
+// General CSS
 html, body.home, body.home #page {
   height: -webkit-fill-available;
 }
 
-body {
-  font-family: "Space Mono", monospace;
-  font-weight: 400;
-}
+@import "./general/typography.scss";
+@import "./general/scrollbar.scss";
+@import "./scroll-effects.scss";
 
+// Components
+@import "./components/main-header.scss";
+@import "./components/footer.scss";
+@import "./components/landing-header.scss";
+@import "./components/landing-body.scss";
+@import "./components/testimonials.scss";
+@import "./components/contact-us.scss";
 
-
-@import "./main-header.scss";
-@import "./footer.scss";
-@import "./contact-us.scss";
-@import "./blog.scss";
-@import "./landing-header.scss";
-@import "./landing-body.scss";
-@import "./testimonials.scss";
-@import "./temp.scss";
-@import "./portfolio.scss";
-@import "./contact-form.scss";
-@import "./scrollbar.scss"
+// Pages
+@import "./pages/portfolio.scss";
+@import "./pages/contact-form.scss";
+@import "./pages/blog.scss";
+@import "./pages/team.scss"

themes/argo/scss/blog.scss → themes/argo/scss/pages/blog.scss

@@ -3,10 +3,28 @@ body.single-post main {
   p {
     font-size: 18px;
   }
+
+  .tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin: 1.5rem 0;
+
+    a {
+      display: block;
+      padding: .2rem .6rem;
+      border-radius: 100rem;
+      border: 1px solid;
+      text-decoration: none;
+
+      &:hover {
+        color: #112952;
+      }
+    }
+  }
 }
 
 .blog-preview {
-
   img {
     display: block;
   }

themes/argo/scss/contact-form.scss → themes/argo/scss/pages/contact-form.scss

@@ -1,4 +1,6 @@
 .contact-form {
+  margin-bottom: 5rem;
+
   .label {
     display: block;
     margin: 2rem 0 .5rem;

themes/argo/scss/portfolio.scss → themes/argo/scss/pages/portfolio.scss

@@ -1,10 +1,30 @@
+// :root {
+//   overflow: hidden;
+// }
+
+// body {
+//   perspective: 1px;
+// 	overflow-x: hidden;
+//   overflow-y: auto;
+//   height: 100vh;
+// }
+
 .portfolio {
   article {
     border: 1px solid black;
     box-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000, 4px 4px #000, 5px 5px #000, 6px 6px #000;
     margin: 4rem 0;
     overflow: hidden;
 
+    // &:nth-child(odd) {
+    //   transform: translateZ(.11px) scale(.9);
+    // }
+
+
+    // &:nth-child(even) {
+    //   transform: translateZ(-.11px) scale(1.1);
+    // }
+
     img {
       display: block;
     }

themes/argo/scss/pages/team.scss

@@ -0,0 +1,91 @@
+.page-team {
+  h1, h2 {
+    text-align: center;
+  }
+
+  figure {
+    margin: 0;
+    position: relative;
+
+    &.fullwidth img {
+      width: 100%;
+    }
+
+    img {
+      display: block;
+      border: 1px solid black;
+
+    }
+
+    figcaption {
+      // position: absolute;
+      border: 1px solid black;
+      background-color: white;
+      padding: 1rem;
+      display: block;
+      margin: 0;
+      width: 80%;
+      transform: translate(10%, -2rem);
+    }
+
+    &.phillip {
+      margin-top: 4rem;
+      margin-bottom: 4rem;
+      figcaption {
+        transform: translate(0);
+        width: 70%;
+        position: absolute;
+        bottom: -1rem;
+        right: calc(45px);
+      }
+    }
+
+    &.luis {
+      margin-bottom: 5rem;
+
+      img {
+        width: 80%;
+        margin-left: 20%;
+      }
+      figcaption {
+        position: absolute;
+        bottom: -3rem;
+        left:45px;
+        width: 70%;
+
+
+        transform: translate(0);
+
+        max-width: 400px;
+      }
+    }
+
+    &.malte {
+      margin-bottom: 4rem;
+      figcaption {
+        transform: translate(0);
+        width: 70%;
+        position: absolute;
+        bottom: -1rem;
+        right: calc(45px);
+      }
+    }
+  }
+}
+
+@media (max-width: 600px) {
+  .page-team {
+    padding-left: 0;
+    padding-right: 0;
+
+    p, figure:not(.fullwidth) {
+      padding: 0 40px;
+    }
+
+    img {
+      max-height: 60vh;
+      width: auto;
+
+    }
+  }     
+}

themes/argo/template-parts/content.php

@@ -18,9 +18,13 @@
 			the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
 		endif;
 			?>
-	</header><!-- .entry-header -->
+
+		<?php argo_post_thumbnail(); ?>
+	</header>
 
-	<?php argo_post_thumbnail(); ?>
+	<div class="tags">
+		<?php the_tags("", "")?>
+	</div>
 
 	<div class="entry-content">
 		<?php