Browse Source

scss integrato

boyska 3 years ago
parent
commit
de012f518c

+ 1 - 1
pelicanconf.py

@@ -72,7 +72,7 @@ BOOTSTRAP_THEME = "darkly"
 HIDE_SITENAME = True
 HIDE_SIDEBAR = True
 PLUGIN_PATHS = ["plugins"]
-PLUGINS = ["langmenu", "talks", "tipue_search"]
+PLUGINS = ["langmenu", "talks", "tipue_search", "pelican_webassets"]
 
 # plugin/talks.py
 SCHEDULEURL = "https://hackmeeting.org" + SITEURL + "/schedule.html"

+ 1 - 0
plugins/pelican_webassets/__init__.py

@@ -0,0 +1 @@
+from .assets import register

+ 64 - 0
plugins/pelican_webassets/assets.py

@@ -0,0 +1,64 @@
+
+from pelican import signals
+import os
+
+from webassets import Environment
+from webassets.ext.jinja2 import AssetsExtension
+
+import logging
+logger = logging.getLogger(__name__)
+
+
+def add_extension(pelican):
+    """add webassets' jinja2 extension to pelican"""
+    jinja_env = pelican.settings['JINJA_ENVIRONMENT']
+    if type(jinja_env) == dict:  # pelican 3.7+
+        jinja_env = jinja_env['extensions']
+    jinja_env.append(AssetsExtension)
+    logger.debug("'pelican-webassets' added to jinja2 environment")
+
+
+def create_environment(generator):
+    """define the webassets environment for the generator"""
+
+    theme_static_dir = generator.settings['THEME_STATIC_DIR']
+    assets_destination = os.path.join(generator.output_path, theme_static_dir)
+    generator.env.assets_environment = Environment(
+        assets_destination, theme_static_dir)
+
+    # are we in debug mode?
+    in_debug = generator.settings.get(
+        'WEBASSETS_DEBUG', logger.getEffectiveLevel() <= logging.DEBUG
+    )
+    if in_debug:
+        logger.info("'webassets' running in DEBUG mode")
+    generator.env.assets_environment.debug = in_debug
+
+    # pass along the additional congiuration options
+    for item in generator.settings.get('WEBASSETS_CONFIG', []):
+        generator.env.assets_environment.config[item[0]] = item[1]
+        logger.debug(
+            "'webassets' adding config: '%s' -> %s",
+            item[0], item[1]
+        )
+
+    # pass along the named bundles
+    for name, args, kwargs in generator.settings.get('WEBASSETS_BUNDLES', []):
+        generator.env.assets_environment.register(name, *args, **kwargs)
+        logger.debug("'webassets' registered bundle: '%s'", name)
+
+    # pass along the additional directories for webassets
+    paths = (
+        generator.settings['THEME_STATIC_PATHS'] +
+        generator.settings.get('WEBASSETS_SOURCE_PATHS', [])
+    )
+    logger.debug("'webassets' looding for files in: %s", paths)
+    for path in (paths):
+        generator.env.assets_environment.append_path(
+            os.path.join(generator.theme, path)
+        )
+
+
+def register():
+    signals.initialized.connect(add_extension)
+    signals.generator_init.connect(create_environment)

+ 11 - 7
requirements.txt

@@ -1,19 +1,23 @@
-arrow==0.4.2
 Babel==2.4.0
+Jinja2==2.10
+Markdown==2.6.1
+MarkupSafe==1.1.1
+PyYAML==3.12
+Pygments==2.3.1
+Unidecode==1.0.23
+arrow==0.4.2
 beautifulsoup4==4.6.0
 blinker==1.4
 docutils==0.14
+enum34==1.1.10
 feedgenerator==1.9
 ics==0.4
-Jinja2==2.10
-Markdown==2.6.1
-MarkupSafe==1.1.1
+pathlib==1.0.1
 pelican==4.0.0
-Pygments==2.3.1
+pyScss==1.3.7
 python-dateutil==2.8.0
 pytz==2018.9
-PyYAML==3.12
 six==1.12.0
 smartypants==1.8.6
 typogrify==2.0.7
-Unidecode==1.0.23
+webassets==2.0

+ 0 - 0
themes/maya0x17/static/effects.css → themes/maya0x17/static/effects.scss


+ 4 - 0
themes/maya0x17/static/main.scss

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

+ 0 - 0
themes/maya0x17/static/skeleton/css/normalize.css → themes/maya0x17/static/skeleton/css/normalize.scss


+ 0 - 0
themes/maya0x17/static/skeleton/css/skeleton.css → themes/maya0x17/static/skeleton/css/skeleton.scss


+ 0 - 82
themes/maya0x17/static/theme.css

@@ -1,82 +0,0 @@
-#all-wrapper h1, #all-wrapper h2, #all-wrapper h3, #all-wrapper strong,
-#all-wrapper b {
-  color: #ee964b;
-}
-#all-wrapper h4, #all-wrapper h5, #all-wrapper h6 {
-  color: #c67026;
-}
-#all-wrapper h1, #all-wrapper h2, #all-wrapper h3 {
-  font-family: 'Caesar Dressing', cursive;
-}
-#all-wrapper strong {
-  font-weight: 800;
-}
-body {
-  background-color: #006165;
-  font-size: 18px;
-  color: #faf0ca;
-  font-family: 'Recursive', sans-serif;
-  line-height: 1.5em;
-}
-a, a:focus, a:hover, a:visited {
-  color: #ee964b;
-}
-h1 > (a, a:focus, a:active) {
-  color: #ee964b;
-}
-#all-wrapper {
-  padding-right: 8vw;
-  padding-left: 2vw;
-  max-width: 50em;
-  margin: auto;
-}
-#menu-row {
-  display: none;
-  position: fixed;
-  top: 0px;
-  left: 8vw;
-  background: black;
-  width: 89vw;
-  margin-top: 8vw;
-  border-radius: 1em;
-  padding: 1em 0px;
-}
-#menu-row ul {
-  list-style: none;
-}
-#menu-row > .columns {
-  font-size: 120%;
-}
-#logo-div {
-  position: fixed;
-  top: 5vw;
-  right: -6.5vw;
-  border-radius: 50%;
-  box-shadow: 0px 0 3vw black;
-  line-height: 0;
-  background-color: transparent;
-}
-#logo-img {
-  width: 16vw;
-  min-height: 15vw;
-  filter: invert(79%) sepia(8%) saturate(6176%) hue-rotate(325deg) brightness(97%) contrast(91%);
-}
-#header-row {
-  text-align: center;
-}
-#header-row h1 {
-  margin: 0;
-}
-#header-row a {
-  text-decoration: none;
-  font-size: 7rem;
-}
-#header-row a:hover {
-  text-decoration: underline;
-}
-.page-slug--index #content .entry-title {
-  display: none;
-}
-.translations-available {
-  text-align: right;
-}

+ 5 - 5
themes/maya0x17/static/theme.scss

@@ -64,11 +64,12 @@ $c-links: $c-titles;
         color: $c-smalltitles;
     }
     h1,h2,h3 {
-            font-family: 'Caesar Dressing', cursive;
+            font-family: 'Caesar Dressing', Helvetica, cursive;
     }
     strong { font-weight: 800; }
 }
 body {
+    margin-top: 3rem;
     background-color: $c-bg;
     font-size: 18px;
     color: $c-text;
@@ -115,14 +116,15 @@ h1 > (a, a:focus, a:active) { color: $c-titles; }
     /* questo filtro assurdo viene da https://codepen.io/sosuke/pen/Pjoqqp
      si tratta di un modo per "convertire" il nero in un altro colore qualsiasi
      */
-    filter: invert(79%) sepia(8%) saturate(6176%) hue-rotate(325deg) brightness(97%) contrast(91%)
+    //filter: invert(79%) sepia(8%) saturate(6176%) hue-rotate(325deg) brightness(97%) contrast(91%)
 }
 #header-row {
     text-align: center;
     h1 { margin: 0; }
     a {
         text-decoration: none;
-        font-size: 7rem; // TODO: questo va messo in una media query
+        font-size: 4rem; // TODO: questo va messo in una media query
+        font-weight: normal;
         &:hover {
             text-decoration: underline;
         }
@@ -134,5 +136,3 @@ h1 > (a, a:focus, a:active) { color: $c-titles; }
 }
 
 // TODO: media query
-// TODO: de-google
-// TODO: fai scss automagicamente

+ 10 - 5
themes/maya0x17/templates/base.html

@@ -4,11 +4,11 @@
         <title>{% block title %}{{ SITENAME }}{%endblock%} || HackIT 2020</title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        {% assets filters="pyscss", output="theme.css", "main.scss" %}
+        <link rel="stylesheet" href="{{SITEURL}}/{{ASSET_URL}}">
+        {% endassets %}
         <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/fonts/fonts.css" />
-        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/normalize.css" />
-        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/skeleton.css" />
-        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/theme.css" />
-        <link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/effects.css" />
+        <!--link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/effects.css" /-->
 
         {% if FAVICON %}
             <link href="{{ SITEURL }}/{{ FAVICON }}" rel="icon">
@@ -23,7 +23,12 @@
     </head>
     <body class="{% block body_classes %} {%endblock%}">
         <div id="logo-div">
-            <img id="logo-img" class="pulse" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" style="width: 15vw" />
+            <!-- img id="logo-img" class="pulse" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png"
+                style="width: 15vw" / -->
+                <img id="logo-img"
+                     class="pulse"
+                     src="https://boyska.degenerazione.xyz/stuff/avana/hackit20/theme/images/logo-sandy.png"
+                     style="width: 15vw" />
         </div>
         <div id="all-wrapper">
             <div class="row" id="header-row">