First draft for a new frontpage design
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
parent
8d61dd2dbf
commit
0587282379
@ -1,10 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<feed>
|
||||
<version>1</version>
|
||||
|
||||
<quote
|
||||
id="kroah-hartman"
|
||||
image="/picturebase/people/2018-greg-kroah-hartman-300px.jpg">
|
||||
image="/picturebase/people/2018-greg-kroah-hartman-300px.jpg"
|
||||
frontpage="yes">
|
||||
<name>
|
||||
Greg Kroah-Hartman (Linux Kernel Developer)
|
||||
</name>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<feed>
|
||||
<version>1</version>
|
||||
|
||||
<quote
|
||||
id="kroah-hartman"
|
||||
image="/picturebase/people/2018-greg-kroah-hartman-300px.jpg">
|
||||
image="/picturebase/people/2018-greg-kroah-hartman-300px.jpg"
|
||||
frontpage="yes">
|
||||
<name>
|
||||
Greg Kroah-Hartman (Programues Kernel-i Linux)
|
||||
</name>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<feed>
|
||||
<version>1</version>
|
||||
|
||||
<quote
|
||||
id="cryptie"
|
||||
image="/picturebase/people/2018-cryptie-300px.jpg">
|
||||
image="/picturebase/people/2018-cryptie-300px.jpg"
|
||||
frontpage="yes">
|
||||
<name>
|
||||
Amandine “Cryptie” (Privacy Specialist)
|
||||
</name>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<feed>
|
||||
<version>1</version>
|
||||
|
||||
<quote
|
||||
id="lequertier"
|
||||
image="/picturebase/people/2018-vincent-lequertier-300px.jpg">
|
||||
image="/picturebase/people/2018-vincent-lequertier-300px.jpg"
|
||||
frontpage="yes">
|
||||
<name>
|
||||
Vincent Lequertier (PhD candidate Artificial Intelligence)
|
||||
</name>
|
||||
|
||||
150
index.en.xhtml
150
index.en.xhtml
@ -1,90 +1,102 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<html>
|
||||
<version>1</version>
|
||||
<version>2</version>
|
||||
|
||||
<head>
|
||||
<title>FSFE - Free Software Foundation Europe</title>
|
||||
<script src="/scripts/jquery.cycle2.min.js" type="text/javascript"></script>
|
||||
<meta name="description" content="Non profit organisation working to create general understanding and support for software freedom. Includes news, events, and campaigns." />
|
||||
<meta name="keywords" content="fsfe free software open source foss floss oss fsf government public sector gpl" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Non profit organisation working to create general understanding
|
||||
and support for software freedom. Includes news, events, and campaigns.
|
||||
"/>
|
||||
<meta
|
||||
name="keywords"
|
||||
content="fsfe free software open source foss floss oss fsf government
|
||||
public sector gpl"/>
|
||||
</head>
|
||||
|
||||
<body class="frontpage" id="index-html">
|
||||
<campaigns />
|
||||
<body class="frontpage">
|
||||
<h1 class="hidden">Free Software Foundation Europe</h1>
|
||||
|
||||
<h1 class="hide">Free Software Foundation Europe</h1>
|
||||
<div class="introduction">
|
||||
<p class="lead">
|
||||
Free Software Foundation Europe is a charity that empowers users to
|
||||
control technology.
|
||||
</p>
|
||||
|
||||
<div id="feeds">
|
||||
<div id="news" class="section">
|
||||
<h2>
|
||||
<a href="/news/news.html"><news-label /></a>
|
||||
<a class="rss-feed" href="/news/news.rss" title="news RSS feed"><i class="fa fa-rss"></i></a>
|
||||
<a class="ical" href="https://mastodon.social/@fsfe" title="follow FSFE on Mastodon" rel="me"><i class="fa fa-comments-o"></i></a>
|
||||
</h2>
|
||||
<p>
|
||||
Software is deeply involved in all aspects of our lives. Free Software
|
||||
gives everybody the rights to use, understand, adapt and share software.
|
||||
These rights help support other fundamental rights like freedom of
|
||||
speech, freedom of press and privacy.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<all-news />
|
||||
<h2 class="hidden">News</h2>
|
||||
|
||||
<div class="more-news">
|
||||
<a href="/news/news.html" class="learn-more">See all news</a>
|
||||
<a href="https://planet.fsfe.org/en" class="learn-more community-blog-link">Read the Community blogs</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three-columns news">
|
||||
<dynamic-content-news/>
|
||||
</div>
|
||||
|
||||
<div id="newsletter" class="section">
|
||||
<static-element id="video" />
|
||||
<h3 class="hidden">Further news sources</h3>
|
||||
|
||||
<h2 class="home-newsletter-label">
|
||||
<newsletter-label />
|
||||
</h2>
|
||||
|
||||
<subscribe-nl />
|
||||
|
||||
Read <a href="/news/newsletter.html">the archive</a>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<div id="events" class="section">
|
||||
<h2>
|
||||
<a href="/events/events.html"><events-label /></a>
|
||||
<a class="rss-feed" href="/events/events.rss" title="events RSS feed"><i class="fa fa-rss"></i></a>
|
||||
<a class="ical" href="webcal://fsfe.org/events/events.ics" title="FSFE events as iCal feed"><i class="fa fa-calendar-o"></i></a>
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
If you know about a FSFE related event that is not yet listed here or
|
||||
that you run on your own, you can easily add it by using our
|
||||
<a href="/community/tools/eventregistration.html">event announcement tool</a>.
|
||||
</p>
|
||||
|
||||
<all-events />
|
||||
</div>
|
||||
|
||||
<div id="shop-promo" class="section">
|
||||
<div class="home-shop-block">
|
||||
<a href="/contribute/spreadtheword.html" class="home-order-image-container">
|
||||
<img src="/graphics/infomaterial-450px.png" alt="" class="home-order-image" />
|
||||
<div class="news-info">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/news/index.html">
|
||||
<span class="fa fa-newspaper-o fa-lg"/>
|
||||
Read all news
|
||||
</a>
|
||||
<a class="big-donate" href="/contribute/spreadtheword.html">Infomaterial</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<div class="home-shop-block">
|
||||
<a href="/order/order.html?ref-frontpage" class="home-order-image-container">
|
||||
<img src="/graphics/t-shirt-promo-v2.png" alt="" class="home-order-image" />
|
||||
<li>
|
||||
<a href="/news/podcast.html">
|
||||
<span class="fa fa-podcast fa-lg"/>
|
||||
Hear our podcasts
|
||||
</a>
|
||||
<a class="big-donate" href="/order/order.html?ref-frontpage">Shop</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://planet.fsfe.org/en">
|
||||
<span class="fa fa-users fa-lg"/>
|
||||
Visit the community blogs
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="subscribe-nl">
|
||||
<subscribe-nl/>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<!--Do not translate this ↓-->
|
||||
<followup>join</followup>
|
||||
<timestamp>$Date$ $Author$</timestamp>
|
||||
<h2 class="hidden">Testimonials</h2>
|
||||
|
||||
<div class="three-columns testimonials">
|
||||
<dynamic-content-testimonials/>
|
||||
</div>
|
||||
|
||||
<h2 class="hidden">Donate</h2>
|
||||
|
||||
<p class="donate-info">
|
||||
With a financial support you will contribute to a solid foundation on
|
||||
which we are building our charitable work for freedom in the information
|
||||
society.
|
||||
<a class="big-donate" href="https://my.fsfe.org/donate">Become a supporter now!</a>
|
||||
</p>
|
||||
|
||||
<h2 class="hidden">Further items</h2>
|
||||
|
||||
<div class="three-columns further">
|
||||
<a class="column promo" href="/contribute/spreadtheword.html">
|
||||
<p>Information material</p>
|
||||
</a>
|
||||
<a class="column order" href="/order/index.html">
|
||||
<p>Merchandise</p>
|
||||
</a>
|
||||
<a class="column events" href="/events/index.html">
|
||||
<dynamic-content-events/>
|
||||
</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<!--
|
||||
Local Variables: ***
|
||||
mode: xml ***
|
||||
End: ***
|
||||
-->
|
||||
|
||||
@ -8,7 +8,6 @@ news/nl/.nl-$thisyear*:[front-page]
|
||||
news/nl/.nl-$lastyear*:[front-page]
|
||||
news/podcast/episode-*:[front-page]
|
||||
news/podcast/.episode-*:[front-page]
|
||||
events/$nextyear/event-*:[front-page]
|
||||
about/people/feeds/testimonials/*:[]
|
||||
events/$thisyear/event-*:[front-page]
|
||||
tools/frontpage/*:[]
|
||||
tools/static-elements/element-*:[]
|
||||
events/$nextyear/event-*:[front-page]
|
||||
|
||||
297
index.xsl
297
index.xsl
@ -1,243 +1,110 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
|
||||
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
|
||||
<xsl:import href="fsfe.xsl"/>
|
||||
<xsl:variable name="today" select="/buildinfo/@date"/>
|
||||
|
||||
<xsl:import href="tools/xsltsl/static-elements.xsl" />
|
||||
|
||||
<xsl:import href="fsfe.xsl" />
|
||||
<xsl:output method="html" encoding="utf-8" indent="yes" doctype-system="about:legacy-compat" />
|
||||
<!-- ==================================================================== -->
|
||||
<!-- Dynamic list of news items -->
|
||||
<!-- ==================================================================== -->
|
||||
|
||||
<xsl:template match="body">
|
||||
<div id="frontpage">
|
||||
<xsl:apply-templates />
|
||||
</div>
|
||||
</xsl:template>
|
||||
|
||||
<!--xsl:template match="quote-box">
|
||||
<xsl:call-template name="quote-box">
|
||||
<xsl:with-param name="tag" select="@tag" />
|
||||
</xsl:call-template>
|
||||
</xsl:template-->
|
||||
|
||||
<xsl:template match="label-ourwork2011">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'support'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--display dynamic list of news items-->
|
||||
<xsl:template match="all-news">
|
||||
<xsl:template match="dynamic-content-news">
|
||||
<xsl:call-template name="fetch-news">
|
||||
<xsl:with-param name="tag">front-page</xsl:with-param>
|
||||
<xsl:with-param name="nb-items" select="4" />
|
||||
<xsl:with-param name="show-date" select="'yes'" />
|
||||
<!--TODO enable a "Read More" link with class "learn-more" at the end of newsteaser-->
|
||||
<xsl:with-param name="nb-items">3</xsl:with-param>
|
||||
<xsl:with-param name="show-date">yes</xsl:with-param>
|
||||
</xsl:call-template>
|
||||
|
||||
</xsl:template>
|
||||
|
||||
<!--display dynamic list of event items-->
|
||||
<xsl:template match="all-events">
|
||||
<!-- Current events -->
|
||||
<xsl:call-template name="fetch-events">
|
||||
<xsl:with-param name="wanted-time" select="'present'" />
|
||||
<xsl:with-param name="tag">front-page</xsl:with-param>
|
||||
<xsl:with-param name="display-details" select="'yes'" />
|
||||
</xsl:call-template>
|
||||
|
||||
<!-- Future events -->
|
||||
<xsl:call-template name="fetch-events">
|
||||
<xsl:with-param name="wanted-time" select="'future'" />
|
||||
<xsl:with-param name="tag">front-page</xsl:with-param>
|
||||
<xsl:with-param name="display-details" select="'yes'" />
|
||||
<xsl:with-param name="nb-items" select="3" />
|
||||
<!--FIXME ↑ why is it showing one more?-->
|
||||
</xsl:call-template>
|
||||
<!-- ==================================================================== -->
|
||||
<!-- Dynamic list of testimonial quotes -->
|
||||
<!-- ==================================================================== -->
|
||||
|
||||
<xsl:element name="p">
|
||||
<xsl:template match="dynamic-content-testimonials">
|
||||
<xsl:for-each select="/buildinfo/document/set/quote[@frontpage]">
|
||||
<xsl:element name="a">
|
||||
<xsl:attribute name="href">/events/events.html</xsl:attribute>
|
||||
<xsl:attribute name="class">learn-more</xsl:attribute>
|
||||
<xsl:call-template name="more-events" /><xsl:text></xsl:text>
|
||||
</xsl:element>
|
||||
</xsl:element>
|
||||
<xsl:attribute name="class">column</xsl:attribute>
|
||||
<xsl:attribute name="href">/about/people/testimonials.html</xsl:attribute>
|
||||
|
||||
<xsl:element name="div">
|
||||
<xsl:attribute name="class">row</xsl:attribute>
|
||||
|
||||
<xsl:element name="div">
|
||||
<xsl:attribute name="class">testimonial-image</xsl:attribute>
|
||||
<xsl:element name="img">
|
||||
<xsl:attribute name="class">img-circle</xsl:attribute>
|
||||
<xsl:attribute name="src">
|
||||
<xsl:value-of select="@image"/>
|
||||
</xsl:attribute>
|
||||
<xsl:attribute name="alt">
|
||||
<xsl:value-of select="/buildinfo/document/text[@id='photograph']"/>
|
||||
</xsl:attribute>
|
||||
</xsl:element><!-- img -->
|
||||
</xsl:element><!-- div -->
|
||||
|
||||
<xsl:element name="div">
|
||||
<xsl:attribute name="class">testimonial-text</xsl:attribute>
|
||||
<xsl:element name="p">
|
||||
<xsl:apply-templates select="text/node()"/>
|
||||
</xsl:element>
|
||||
<xsl:element name="p">
|
||||
<xsl:attribute name="class">source</xsl:attribute>
|
||||
<xsl:apply-templates select="name/node()"/>
|
||||
</xsl:element>
|
||||
</xsl:element><!-- div -->
|
||||
</xsl:element><!-- div -->
|
||||
</xsl:element><!-- a -->
|
||||
</xsl:for-each>
|
||||
</xsl:template>
|
||||
|
||||
<!-- display campaign box 3 -->
|
||||
|
||||
<xsl:template match="campaign-box-3">
|
||||
<xsl:element name="a">
|
||||
<xsl:attribute name="href">/campaigns/ilovefs/ilovefs<xsl:value-of select="/buildinfo/@language" />.html</xsl:attribute>
|
||||
<!-- ==================================================================== -->
|
||||
<!-- Dynamic list of events -->
|
||||
<!-- ==================================================================== -->
|
||||
|
||||
<xsl:variable name="lang" select="/buildinfo/@language" />
|
||||
|
||||
<xsl:variable name="img-path"
|
||||
select="concat( '/campaigns/valentine/valentine-358x60-', substring($lang, 2, 2) , '.png' )" />
|
||||
|
||||
<xsl:element name="img">
|
||||
<xsl:attribute name="src">
|
||||
<xsl:value-of select="$img-path" />
|
||||
</xsl:attribute>
|
||||
<!-- And on error (if previous file does not exist), we load our default image -->
|
||||
<!-- xsl:attribute name="onerror">
|
||||
<xsl:text>this.src='/campaigns/valentine/valentine-358x60-en.png';</xsl:text>
|
||||
</xsl:attribute -->
|
||||
<xsl:attribute name="alt"
|
||||
value="No picture" />
|
||||
</xsl:element>
|
||||
<xsl:template match="dynamic-content-events">
|
||||
<xsl:element name="h3">
|
||||
<!--translated word "events"-->
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'events'"/>
|
||||
</xsl:call-template>
|
||||
</xsl:element>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="campaigns">
|
||||
<div
|
||||
id="campaigns-boxes"
|
||||
class="cycle-slideshow"
|
||||
data-cycle-log="false"
|
||||
data-cycle-pause-on-hover="true"
|
||||
data-cycle-speed="500"
|
||||
data-cycle-timeout="6000"
|
||||
data-cycle-slides="a"
|
||||
data-cycle-fx="scrollHorz"
|
||||
data-cycle-swipe="true">
|
||||
<div class="cycle-pager"/>
|
||||
|
||||
<xsl:for-each select="/buildinfo/document/set/campaign[@running = 'yes']">
|
||||
<xsl:apply-templates select="." mode="slideshow" />
|
||||
<xsl:element name="ul">
|
||||
<xsl:attribute name="class">list-unstyled</xsl:attribute>
|
||||
<xsl:for-each select="/buildinfo/document/set/event
|
||||
[translate (@end, '-', '') >= translate ($today, '-', '')
|
||||
and (tags/tag = 'front-page')
|
||||
]">
|
||||
<xsl:sort select="@start"/>
|
||||
<xsl:if test="position() <= 3">
|
||||
<xsl:element name="li">
|
||||
<xsl:value-of select="@start"/>
|
||||
<xsl:if test="@start != @end">
|
||||
<xsl:text> – </xsl:text>
|
||||
<xsl:value-of select="@end"/>
|
||||
</xsl:if>
|
||||
<xsl:text>: </xsl:text>
|
||||
<xsl:value-of select="title"/>
|
||||
</xsl:element>
|
||||
</xsl:if>
|
||||
</xsl:for-each>
|
||||
|
||||
</div>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="campaign" mode="slideshow">
|
||||
<a href="{link}" class="campaign-box">
|
||||
<xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
|
||||
|
||||
<!-- If you use the content tag, you can define boxes arbitrarily,
|
||||
but you shouldn't use photo/author/copyright then -->
|
||||
<xsl:if test=" content != '' ">
|
||||
<xsl:apply-templates select="content/@* | content/node()"/>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:if test=" photo != '' "><img src="{photo}" alt="" /></xsl:if>
|
||||
|
||||
<xsl:if test=" text != '' ">
|
||||
<p class="text"><xsl:value-of select="text" /></p>
|
||||
</xsl:if>
|
||||
|
||||
<xsl:if test=" text2 != '' ">
|
||||
<p class="text2"><xsl:value-of select="text2" /></p>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Author (if existing) -->
|
||||
<xsl:if test="author != ''">
|
||||
<span class="author"><xsl:value-of select="author" /></span>
|
||||
</xsl:if>
|
||||
|
||||
<!-- Copyright notice (if existing) -->
|
||||
<xsl:if test="copyright != ''">
|
||||
<span class="copyright"><xsl:value-of select="copyright" /></span>
|
||||
</xsl:if>
|
||||
</a>
|
||||
</xsl:template>
|
||||
|
||||
<!-- display campaign box 4 -->
|
||||
<xsl:template match="campaign-box4">
|
||||
</xsl:template>
|
||||
|
||||
<!--display labels-->
|
||||
|
||||
<!--translated word "newsletter"-->
|
||||
<xsl:template match="newsletter-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'newsletter'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated sentence "receive-newsletter"-->
|
||||
<xsl:template match="receive-newsletter">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'receive-newsletter'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "news"-->
|
||||
<xsl:template match="news-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'news'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "events"-->
|
||||
<xsl:template match="events-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'events'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "more"-->
|
||||
<xsl:template match="more-label">
|
||||
<xsl:call-template name="more-label" /><xsl:text></xsl:text>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template name="more-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'more'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "more news"-->
|
||||
<xsl:template match="more-news">
|
||||
<xsl:call-template name="more-news" /><xsl:text></xsl:text>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template name="more-news">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'morenews'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "more events"-->
|
||||
<xsl:template match="more-events">
|
||||
<xsl:call-template name="more-events" /><xsl:text></xsl:text>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template name="more-events">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'moreevents'" />
|
||||
</xsl:call-template>
|
||||
</xsl:element>
|
||||
</xsl:template>
|
||||
|
||||
|
||||
<!--translated word "donate"-->
|
||||
<xsl:template match="donate-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'donate'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "join"-->
|
||||
<xsl:template match="join-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'join'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!--translated word "support"-->
|
||||
<xsl:template match="support-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'support'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<xsl:template match="about-work-label">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'about-work'" />
|
||||
</xsl:call-template>
|
||||
</xsl:template>
|
||||
|
||||
<!-- ==================================================================== -->
|
||||
<!-- Newsletter subscription block -->
|
||||
<!-- ==================================================================== -->
|
||||
|
||||
<xsl:template match="subscribe-nl">
|
||||
<xsl:call-template name="subscribe-nl" />
|
||||
<xsl:element name="p">
|
||||
<xsl:call-template name="gettext">
|
||||
<xsl:with-param name="id" select="'subscribe-newsletter'" />
|
||||
</xsl:call-template>
|
||||
</xsl:element>
|
||||
<xsl:call-template name="subscribe-nl"/>
|
||||
</xsl:template>
|
||||
|
||||
</xsl:stylesheet>
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
@brand-medium: rgb(74, 210, 240);
|
||||
|
||||
/* FSFE Green Mix */
|
||||
@brand-mix: rbg(107, 179, 64);
|
||||
@brand-mix: rgb(107, 179, 64);
|
||||
|
||||
/* fsfe Green */
|
||||
@brand-green: rgb(208, 244, 0);
|
||||
|
||||
238
look/fsfe.less
238
look/fsfe.less
@ -2,6 +2,7 @@
|
||||
@import "elements/figure";
|
||||
@import "elements/podcast";
|
||||
@import "elements/sharebuttons";
|
||||
@import "pages/frontpage";
|
||||
@import "pages/interview";
|
||||
@import "pages/spreadtheword";
|
||||
|
||||
@ -38,243 +39,6 @@ img.signatory-logo {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
/* fsfe.org front page */
|
||||
|
||||
.frontpage {
|
||||
|
||||
/* motto not displayed */
|
||||
|
||||
#campaigns-boxes {
|
||||
|
||||
background: url('/graphics/ribbon.png') top right no-repeat transparent;
|
||||
height: 400px;
|
||||
|
||||
@media (min-width: @screen-xs-min) {
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.campaign-box {
|
||||
height: 400px;
|
||||
|
||||
@media (min-width: @screen-xs-min) {
|
||||
height: 300px;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
img {
|
||||
max-width: 33%;
|
||||
}
|
||||
}
|
||||
|
||||
.campaign-box-center {
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
#freesociety {
|
||||
.campaign-box-center;
|
||||
font-family: 'GNUTypewriter', @font-family-monospace;
|
||||
background: url('/graphics/motto.jpg') top center no-repeat #666;
|
||||
background-size: cover;
|
||||
font-size: 2em;
|
||||
@media (min-width: @screen-xs-min) {
|
||||
font-size: 2.7em;
|
||||
padding-top: 1.8em;
|
||||
}
|
||||
|
||||
p.text {
|
||||
/*background: url('/graphics/fsfs.png') top center no-repeat transparent;
|
||||
background-size: contain; */
|
||||
-moz-hyphens: manual;
|
||||
-webkit-hyphens: manual;
|
||||
hyphens: manual;
|
||||
}
|
||||
}
|
||||
|
||||
#slidbria {
|
||||
background: url('/graphics/slider-banner-FrancescaBria.png') left 33% no-repeat #666;
|
||||
background-size: cover;
|
||||
text-shadow: 0px 1px 8px rgb(0, 0, 0);
|
||||
|
||||
.author:before {
|
||||
content: "– ";
|
||||
}
|
||||
|
||||
.author, .text {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.author {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.text {
|
||||
.quote;
|
||||
padding: 40% 0 4%;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.text {
|
||||
margin-left: 48%;
|
||||
padding: 0 0 4%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:525px) {
|
||||
.text {
|
||||
padding: 0 0 8%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width:550px) {
|
||||
.author {
|
||||
margin-left: 40%;
|
||||
}
|
||||
.author, .text {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.text {
|
||||
margin-left: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.author {
|
||||
font-size: 1em;
|
||||
padding-top: 0;
|
||||
}
|
||||
.author, .text {
|
||||
margin-left: 48%;
|
||||
}
|
||||
.text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.6em;
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
#amaelle {
|
||||
background: url('/graphics/amaelle.jpg') center 33% no-repeat #666;
|
||||
background-size: cover;
|
||||
text-shadow: 0px 1px 8px rgb(0, 0, 0);
|
||||
|
||||
.author:before {
|
||||
content: "– ";
|
||||
}
|
||||
|
||||
.text {
|
||||
.quote;
|
||||
}
|
||||
|
||||
.author, .text {
|
||||
display: block;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.author, .text {
|
||||
margin-left: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.6em;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
.text {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#zacchiroli {
|
||||
background: url('/graphics/group-blur-800.jpg') center 33% no-repeat #666;
|
||||
text-shadow: 0px 1px 2px rgb(0, 0, 0);
|
||||
|
||||
img {
|
||||
float: right;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.author:before {
|
||||
content: "– ";
|
||||
}
|
||||
|
||||
.text {
|
||||
.quote;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
img {
|
||||
margin-left: 3em;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.text, .author {
|
||||
max-width: 80ex;
|
||||
margin: 1em auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#boxpmpc {
|
||||
background: url('/graphics/pmpc_slider.jpg') left 33% no-repeat #666;
|
||||
background-size: cover;
|
||||
text-shadow: 0px 1px 8px rgb(0, 0, 0);
|
||||
|
||||
.text, .text2 {
|
||||
.quote;
|
||||
}
|
||||
|
||||
.text, .text2 {
|
||||
display: block;
|
||||
padding: 1.25em;
|
||||
min-width: 120px;
|
||||
font-size: 1.25em;
|
||||
hyphens: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-sm-min) {
|
||||
.text {
|
||||
float: left;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.text2 {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#ilovefs {
|
||||
.campaign-box-center;
|
||||
background: url('/graphics/ilovefs-hashtag-campaignbox.png') center 33% no-repeat transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#news {
|
||||
padding-bottom: 1.5em;
|
||||
|
||||
|
||||
174
look/pages/frontpage.less
Normal file
174
look/pages/frontpage.less
Normal file
@ -0,0 +1,174 @@
|
||||
// ============================================================================
|
||||
// Styles specific to the front page
|
||||
// ============================================================================
|
||||
|
||||
.frontpage {
|
||||
#main {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.introduction {
|
||||
height: 300px;
|
||||
background-image: url("/graphics/motto.png");
|
||||
padding: 3em;
|
||||
text-shadow: 0 0 4px black;
|
||||
color: white;
|
||||
|
||||
p {
|
||||
max-width: 680px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.three-columns {
|
||||
// This makes all 3 columns the same height.
|
||||
@media (min-width: @screen-md-min) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column, .entry {
|
||||
.make-xs-column(12);
|
||||
.make-md-column(4);
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
color: black;
|
||||
|
||||
h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
a.column:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.column:nth-child(1), .entry:nth-child(1) {
|
||||
background-color: @brand-primary;
|
||||
}
|
||||
|
||||
.column:nth-child(2), .entry:nth-child(2) {
|
||||
background-color: @brand-medium;
|
||||
}
|
||||
|
||||
.column:nth-child(3), .entry:nth-child(3) {
|
||||
background-color: @brand-green;
|
||||
}
|
||||
}
|
||||
|
||||
.news {
|
||||
.date {
|
||||
.small;
|
||||
}
|
||||
}
|
||||
|
||||
.news-info {
|
||||
ul {
|
||||
.list-unstyled;
|
||||
|
||||
li {
|
||||
.make-xs-column(12);
|
||||
.make-md-column(4);
|
||||
.text-center;
|
||||
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
a {
|
||||
.btn;
|
||||
.btn-lg;
|
||||
.btn-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.subscribe-nl {
|
||||
.make-row;
|
||||
|
||||
margin-bottom: 30px;
|
||||
|
||||
p {
|
||||
.make-md-column(6);
|
||||
.h3;
|
||||
.text-right;
|
||||
|
||||
@media (min-width: @screen-md-min) {
|
||||
margin: 0;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
form {
|
||||
.make-md-column(6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.testimonials {
|
||||
.column {
|
||||
.testimonial-image {
|
||||
.make-xs-column(12);
|
||||
.make-sm-column(3);
|
||||
.make-md-column(12);
|
||||
|
||||
img {
|
||||
.center-block;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.testimonial-text {
|
||||
.make-xs-column(12);
|
||||
.make-sm-column(9);
|
||||
.make-md-column(12);
|
||||
|
||||
margin-top: 15px;
|
||||
|
||||
p.source {
|
||||
.text-right;
|
||||
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
&:before {
|
||||
content: '\2014 \00A0'; // EM DASH, NBSP
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.donate-info {
|
||||
.center-block;
|
||||
.text-center;
|
||||
.lead;
|
||||
|
||||
padding-top: 30px;
|
||||
padding-bottom: 30px;
|
||||
width: 75%
|
||||
}
|
||||
|
||||
.promo {
|
||||
.h3;
|
||||
.text-center;
|
||||
|
||||
height: 300px;
|
||||
background-image: url("/graphics/infomaterial-450px.png");
|
||||
background-size: 280px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.order {
|
||||
.h3;
|
||||
.text-center;
|
||||
|
||||
height: 300px;
|
||||
background-image: url("/graphics/t-shirt-promo-v2.png");
|
||||
background-size: 280px;
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
@ -14,6 +14,10 @@ hr {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.list-no-style {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
@ -48,12 +52,12 @@ q, .en q {
|
||||
|
||||
/* Typography */
|
||||
|
||||
h1 {
|
||||
h1, .h1 {
|
||||
.page-header;
|
||||
color: @brand-strong;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@ -369,7 +373,7 @@ div#subpages, .grid-row {
|
||||
#main {
|
||||
padding-top: 1em;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
|
||||
-moz-hypens: manual;
|
||||
-webkit-hyphens: manual;
|
||||
hyphens: manual;
|
||||
@ -721,7 +725,7 @@ div#subpages, .grid-row {
|
||||
}
|
||||
}
|
||||
|
||||
.frontpage, .subsite, .full-width {
|
||||
.front-page, .frontpage, .subsite, .full-width {
|
||||
#content {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user