font e media query

themes/maya0x17/static/fonts/fonts.css

@@ -1,6 +1,8 @@
 /* recursive-regular - latin */
+$font-display: swap;
 @font-face {
   font-family: 'Recursive';
+  font-display: $font-display;
   font-style: normal;
   font-weight: 400;
   src: url('/theme/fonts/recursive-v20-latin-regular.eot'); /* IE9 Compat Modes */
@@ -14,6 +16,7 @@
 
 /* recursive-500 - latin */
 @font-face {
+  font-display: $font-display;
   font-family: 'Recursive';
   font-style: normal;
   font-weight: 500;
@@ -28,6 +31,7 @@
 
 /* recursive-800 - latin */
 @font-face {
+  font-display: $font-display;
   font-family: 'Recursive';
   font-style: normal;
   font-weight: 800;
@@ -41,6 +45,7 @@
 }
 /* caesar-dressing-regular - latin */
 @font-face {
+  $font-display: fallback;
   font-family: 'Caesar Dressing';
   font-style: normal;
   font-weight: 400;

themes/maya0x17/static/main.scss

@@ -1,4 +1,2 @@
-@import 'skeleton/css/normalize';
-@import 'skeleton/css/skeleton';
 @import 'theme';
 @import 'effects';

themes/maya0x17/static/media-queries.scss

@@ -0,0 +1,92 @@
+// media aliases and breakpoints
+$screen-sm-min: 600px;
+$screen-md-min: 960px;
+$screen-lg-min: 1280px;
+$screen-xl-min: 1920px;
+
+$screen-xs-max: 599px;
+$screen-sm-max: 959px;
+$screen-md-max: 1279px;
+$screen-lg-max: 1919px;
+$screen-xl-max: 5000px;
+
+// media devices
+@mixin xs {
+  @media screen and (max-width: #{$screen-xs-max}) {
+    @content;
+  }
+}
+
+@mixin sm {
+  @media screen and (min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max}) {
+    @content;
+  }
+}
+
+@mixin md {
+  @media screen and (min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max}) {
+    @content;
+  }
+}
+
+@mixin lg {
+  @media screen and (min-width: #{$screen-lg-min}) and (max-width: #{$screen-lg-max}) {
+    @content;
+  }
+}
+
+@mixin xl {
+  @media screen and (min-width: #{$screen-xl-min}) and (max-width: #{$screen-xl-max}) {
+    @content;
+  }
+}
+
+// media lt queries
+@mixin lt-sm {
+  @media screen and (max-width: #{$screen-xs-max}) {
+    @content;
+  }
+}
+
+@mixin lt-md {
+  @media screen and (max-width: #{$screen-sm-max}) {
+    @content;
+  }
+}
+
+@mixin lt-lg {
+  @media screen and (max-width: #{$screen-md-max}) {
+    @content;
+  }
+}
+
+@mixin lt-xl {
+  @media screen and (max-width: #{$screen-lg-max}) {
+    @content;
+  }
+}
+
+// media gt queries
+@mixin gt-xs {
+  @media screen and (min-width: #{$screen-sm-min}) {
+    @content;
+  }
+}
+
+@mixin gt-sm {
+  @media screen and (min-width: #{$screen-md-min}) {
+    @content;
+  }
+}
+
+@mixin gt-md {
+  @media screen and (min-width: #{$screen-lg-min}) {
+    @content;
+  }
+}
+
+@mixin gt-lg {
+  @media screen and (min-width: #{$screen-xl-min}) {
+    @content;
+  }
+}

themes/maya0x17/static/theme.scss

@@ -5,6 +5,8 @@
  * Papaya (#E24E42),  Mustard(#E9B000), Blush (#EB6E80) e Aqua (#008F95).
  * */
 
+@import 'media-queries.scss';
+
 // variant 1
 //$c-crimson-sky: #CF6766;
 $c-crimson-sky: #d9756d;
@@ -123,7 +125,15 @@ h1 > (a, a:focus, a:active) { color: $c-titles; }
     h1 { margin: 0; }
     a {
         text-decoration: none;
-        font-size: 4rem; // TODO: questo va messo in una media query
+        @include gt-sm {
+            font-size: 6rem;
+        }
+        @include sm {
+            font-size: 4.5rem;
+        }
+        @include lt-sm {
+            font-size: 3rem;
+        }
         font-weight: normal;
         &:hover {
             text-decoration: underline;

themes/maya0x17/templates/base.html

@@ -4,6 +4,8 @@
         <title>{% block title %}{{ SITENAME }}{%endblock%} || HackIT 2020</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/normalize.css" />
+        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/skeleton.css" />
         {% assets filters="pyscss", output="theme.css", "main.scss" %}
         <link rel="stylesheet" href="{{SITEURL}}/{{ASSET_URL}}">
         {% endassets %}