scss integrato

This commit is contained in:
boyska 2020-08-05 03:17:39 +02:00
parent b28570ee83
commit de012f518c
11 changed files with 98 additions and 102 deletions

View file

@ -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"

View file

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

View file

@ -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)

View file

@ -1,19 +1,23 @@
arrow==0.4.2
Babel==2.4.0
beautifulsoup4==4.6.0
blinker==1.4
docutils==0.14
feedgenerator==1.9
ics==0.4
Jinja2==2.10
Markdown==2.6.1
MarkupSafe==1.1.1
pelican==4.0.0
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
pathlib==1.0.1
pelican==4.0.0
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

View file

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

View file

@ -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;
}

View file

@ -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

View file

@ -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">