Kelder/durfdoen-2.0
33
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Work on styling and layout

Browse source
This commit is contained in:
Midgard 2020-08-28 22:14:28 +02:00
parent ae77543870
commit a263a4f3bc
Signed by: midgard
GPG key ID: 511C112F1331BBB4
6 changed files with 137 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Rules
View file

@ -4,6 +4,7 @@ compile '/verenigingen/*.md' do
filter :kramdown filter :kramdown
layout '/vereniging.*' layout '/vereniging.*'
layout '/default.*' layout '/default.*'
layout '/base.*'
write ext: 'html' write ext: 'html'
end end
@ -11,6 +12,7 @@ compile '/events/*.md' do
filter :kramdown filter :kramdown
layout '/event.*' layout '/event.*'
layout '/default.*' layout '/default.*'
layout '/base.*'
write ext: 'html' write ext: 'html'
end end
@ -18,13 +20,14 @@ compile '/konventen/*.md' do
filter :kramdown filter :kramdown
layout '/konvent.*' layout '/konvent.*'
layout '/default.*' layout '/default.*'
layout '/base.*'
write ext: 'html' write ext: 'html'
end end
compile '/homepage.md' do compile '/homepage.md' do
filter :kramdown filter :kramdown
layout '/homepage.*' layout '/homepage.*'
layout '/default.*' layout '/base.*'
write '/index.html' write '/index.html'
end end
@ -35,6 +38,7 @@ end
compile '/faq.erb' do compile '/faq.erb' do
filter :erb filter :erb
layout '/default.*' layout '/default.*'
layout '/base.*'
write '/faq/index.html' write '/faq/index.html'
end end
@ -42,12 +46,14 @@ compile '/verenigingen.md' do
filter :kramdown filter :kramdown
layout '/verenigingen.*' layout '/verenigingen.*'
layout '/default.*' layout '/default.*'
layout '/base.*'
write ext: 'html' write ext: 'html'
end end
compile '/*.md' do compile '/*.md' do
filter :kramdown filter :kramdown
layout '/default.*' layout '/default.*'
layout '/base.*'
write ext: 'html' write ext: 'html'
end end

1
content/homepage.md
View file

@ -3,4 +3,3 @@ titel: Home
navigable: true navigable: true
order: 1 order: 1
--- ---
Huis

87
content/stylesheets/main.css
View file

@ -1,24 +1,25 @@
:root{ :root {
--darkblue: #013E7A; --white: #ffffff;
--lightblue: #1A77D3; --darkblue: #013e7a;
--cyan: #AAEEFF; --lightblue: #1a77d3;
--yellow: #FED318; --cyan: #aaeeff;
--yellow: #fed318;
} }
html, body{ html, body {
width: 100%;
height: 100%; height: 100%;
} }
body{ body {
width: 1280px;
margin: 0 auto; margin: 0 auto;
padding: 0 1em;
max-width: 1280px;
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif; font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
} }
header{ .beforeTheFold, main {
position: relative; position: relative;
height: 100%; min-height: 100%;
} }
nav a { nav a {
@ -41,19 +42,21 @@ nav {
padding: 1rem 0; padding: 1rem 0;
} }
h2{ h2 {
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif; font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
font-size: 3.4rem; font-size: 3.4rem;
width: 30rem;
color: var(--darkblue); color: var(--darkblue);
} }
.beforeTheFold h2 {
max-width: 30rem;
}
.studentZijn { .studentZijn {
padding-top: 4rem; padding: 4rem 0 2rem 3rem;
padding-left: 3rem;
} }
.scroll { .scroll {
display: block;
position: absolute; position: absolute;
bottom: 2rem; bottom: 2rem;
left: 0; left: 0;
@ -69,37 +72,51 @@ h2{
display: none; display: none;
} }
.quote p{
font-size: 1.5rem;
width: 25rem;
font-family: Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
font-style: italic;
font-weight: lighter;
padding-left: 2rem;
}
.quote { .quote {
display: flex; display: flex;
} }
.quote img {
width: 103px;
height: 185px;
margin-right: 2rem;
}
.randomVerenigingen { .quote p {
position: absolute; max-width: 25rem;
bottom: 5rem; font-size: 1.5rem;
right: 0; font-family: Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
font-style: italic;
font-weight: 500;
margin: 0.5em 0;
}
.quizSpotlight {
text-align: right; text-align: right;
font-size: 4rem; font-size: 3rem;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
font-weight: bold; font-weight: bold;
line-height: 0;
color: var(--lightblue); color: var(--lightblue);
} }
@media (min-width: 1000px) and (max-width: 1000px) {
.quizSpotlight {
position: absolute;
bottom: 5rem;
right: 0;
}
}
.quizSpotlight a {
text-decoration: none;
color: var(--white);
background-color: var(--lightblue);
padding: 1rem;
}
.aside_blueSquare { .aside_blueSquare {
right: 3rem; right: 3rem;
height: 100%; height: 100%;
width: 20%; width: 20%;
} }
.backgroundSquare { .backgroundSquare {
@ -123,12 +140,12 @@ h2{
color: transparent; color: transparent;
} }
.randomVerenigingen p{ .randomVerenigingen p {
text-transform: uppercase; text-transform: uppercase;
} }
.underline, .active_link{ .underline, .active_link {
padding-bottom: -2rem; padding-bottom: -2rem;
margin-bottom: -2rem; margin-bottom: -2rem;
box-shadow: inset 0 -8px 0 var(--yellow); box-shadow: inset 0 -8px 0 var(--yellow);
} }

35
layouts/base.erb Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Durf Doen! - <%= item[:titel] || abbreviation(item) %> </title>
<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="shortcut icon" href="/assets/favicon.png">
<%#= item[:head] %>
</head>
<body>
<%= yield %>
<footer>
<div>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<p>©2020 Gentse studentenraad</p>
<div lang="en">
<p>Made with ♥ by</p>
<img src="" alt="">
</div>
</footer>
</body>
</html>

36
layouts/default.erb
View file

@ -1,39 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Durf Doen! - <%= item[:titel] || abbreviation(item) %> </title>
<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="shortcut icon" href="/assets/favicon.png">
<%#= item[:head] %>
</head>
<body>
<header> <header>
<div class="header_blueSquare backgroundSquare"></div>
<%= render '/partials/navbar.*' %> <%= render '/partials/navbar.*' %>
<%#= yield :header %> </header>
<%= yield %> <%= yield %>
<footer>
<div>
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<p>©2020 Gentse studentenraad</p>
<div>
<p>Made with ♥ by</p>
<img src="" alt="">
</div>
</footer>
</body>
</html>

63
layouts/homepage.erb
View file

@ -1,32 +1,53 @@
<article> <div class="header_blueSquare backgroundSquare"></div>
<h1 class="hidden">Durf Doen</h1>
<h2 class="studentZijn"><span class="underline">Student</span> zijn is <span class="underline">meer</span> dan
studeren</h2>
<div class="quote"><img src="/assets/durfdoenlogo.png" alt="">
<p>Lorem ipsum dolor zie van hier da ik latijn ga beginnen spreken Lorem ipsum dolor zie van hier da ik latijn ga
beginnen spreken</p></div>
</article>
<aside class="randomVerenigingen">
<div class="aside_blueSquare backgroundSquare"></div>
<% for vereniging in verenigingen_random(6) %>
<p><%= vereniging["naam"] %></p>
<% end %>
</aside>
<div>
<p class="scroll">Scroll naar beneden</p>
</div>
</header>
<main> <div class="beforeTheFold">
<header>
<%= render '/partials/navbar.*' %>
</header>
<article class="intro">
<h1 class="hidden">Durf Doen</h1>
<h2 class="studentZijn">
<span class="underline">Student</span> zijn is
<span class="underline">meer</span> dan studeren
</h2>
<div class="quote">
<div>
<img src="/assets/durfdoenlogo.png" alt="">
</div>
<div>
<p>Durf Doen wil jou de vereniging laten kennen die je op het lijf geschreven is.</p>
<p>Btw Facebook is onethisch. Geef ze geen geld.</p>
</div>
</div>
</article>
<div class="quizSpotlight">
<a href="test">Doe de test</a>
</div>
<div>
<a href="#main" class="scroll">Scroll naar beneden</a>
</div>
</div>
<main id="main">
<article> <article>
<%= yield %> <%= yield %>
</article> </article>
<article> <article>
<h2>Doe hier <span class="underline">de test</span></h2> <h2>Doe hier <span class="underline">de test</span></h2>
<p>Wil je weten welke studentenclub, werkgroep of kring het beste bij jou past? Doe onze test en vindt het uit</p> <p>Wil je weten welke studentenclub, werkgroep of kring het beste bij jou past? Ontdek het</p>
</article> </article>
<article> <article>
<h2><span class="underline">Uitgelichte</span> Verenigingen</h2> <h2><span class="underline">Random</span> Verenigingen</h2>
<section class="randomVerenigingen">
<% for vereniging in verenigingen_random(6) %>
<p><%= vereniging["naam"] %></p>
<% end %>
</section>
<section> <section>
<h3>Zeus WPI</h3> <h3>Zeus WPI</h3>
<p>Hier stond een tekst die niet online mocht komen omdat het over niet politiek correcte dingen ging</p> <p>Hier stond een tekst die niet online mocht komen omdat het over niet politiek correcte dingen ging</p>