Apply styling from arnhoudt. Add random function for association
This commit is contained in:
mcbloch
parent
e16656cff8
commit
ae77543870
10 changed files with 242 additions and 78 deletions
BIN
content/assets/OmdatHetDurfDoenLogoSuckt.png
Normal file
BIN
content/assets/OmdatHetDurfDoenLogoSuckt.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
content/assets/durfdoenlogo.png
Normal file
BIN
content/assets/durfdoenlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
134
content/stylesheets/main.css
Normal file
134
content/stylesheets/main.css
Normal file
|
|
@ -0,0 +1,134 @@
|
||||||
|
:root{
|
||||||
|
--darkblue: #013E7A;
|
||||||
|
--lightblue: #1A77D3;
|
||||||
|
--cyan: #AAEEFF;
|
||||||
|
--yellow: #FED318;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body{
|
||||||
|
width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
header{
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
text-decoration: none;
|
||||||
|
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
color: var(--darkblue);
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: 1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
font-family: futura, Avenir Next, Verdana, Geneva, Tahoma, sans-serif;
|
||||||
|
font-size: 3.4rem;
|
||||||
|
width: 30rem;
|
||||||
|
color: var(--darkblue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.studentZijn {
|
||||||
|
padding-top: 4rem;
|
||||||
|
padding-left: 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
text-decoration: underline;
|
||||||
|
color: var(--darkblue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
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 {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.randomVerenigingen {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 5rem;
|
||||||
|
right: 0;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 4rem;
|
||||||
|
font-family: Arial, Helvetica, sans-serif;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0;
|
||||||
|
color: var(--lightblue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside_blueSquare {
|
||||||
|
|
||||||
|
right: 3rem;
|
||||||
|
height: 100%;
|
||||||
|
width: 20%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.backgroundSquare {
|
||||||
|
z-index: -1;
|
||||||
|
position: absolute;
|
||||||
|
background-color: var(--cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header_blueSquare {
|
||||||
|
left: -15rem;
|
||||||
|
height: 45%;
|
||||||
|
width: 80%;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.randomVerenigingen p:nth-child(odd) {
|
||||||
|
-webkit-text-stroke-width: 2px;
|
||||||
|
-webkit-text-stroke-color: var(--lightblue);
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.randomVerenigingen p{
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.underline, .active_link{
|
||||||
|
padding-bottom: -2rem;
|
||||||
|
margin-bottom: -2rem;
|
||||||
|
box-shadow: inset 0 -8px 0 var(--yellow);
|
||||||
|
}
|
||||||
|
|
@ -1,60 +0,0 @@
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-width: 1200px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
border-left: 2px solid;
|
|
||||||
border-bottom: 2px solid;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 2px 16px 2px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-wrapper {
|
|
||||||
margin: auto auto;
|
|
||||||
}
|
|
||||||
.details-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
justify-content: space-between;
|
|
||||||
.details-logo {
|
|
||||||
order: 0;
|
|
||||||
flex-basis: 10%;
|
|
||||||
}
|
|
||||||
.details-text {
|
|
||||||
order: 1;
|
|
||||||
flex-basis: 70%;
|
|
||||||
}
|
|
||||||
.details-photo {
|
|
||||||
order: 2;
|
|
||||||
flex-basis: 15%;
|
|
||||||
.showcase-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: center;
|
|
||||||
.showcase-image {
|
|
||||||
align-self: center;
|
|
||||||
margin: 0.5em;
|
|
||||||
max-width: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.details-contact {
|
|
||||||
order: 3;
|
|
||||||
flex-basis: 100%;
|
|
||||||
border-top: 2px solid black;
|
|
||||||
}
|
|
||||||
.details-verenigingen{
|
|
||||||
order: 4;
|
|
||||||
flex-basis: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,14 +1,39 @@
|
||||||
<html>
|
<!DOCTYPE html>
|
||||||
<head>
|
<html lang="en">
|
||||||
<meta charset="UTF-8">
|
<head>
|
||||||
<title> Durf Doen! - <%= item[:titel] || item.identifier.without_ext.split('/').last %> </title>
|
<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="stylesheet" href="/stylesheets/main.css">
|
||||||
<link rel="shortcut icon" href="/assets/favicon.png">
|
<link rel="shortcut icon" href="/assets/favicon.png">
|
||||||
<%= item[:head] %>
|
|
||||||
</head>
|
<%#= item[:head] %>
|
||||||
<body>
|
</head>
|
||||||
<%= render '/partials/navbar.*' %>
|
<body>
|
||||||
<%= yield %>
|
<header>
|
||||||
</body>
|
<div class="header_blueSquare backgroundSquare"></div>
|
||||||
|
<%= render '/partials/navbar.*' %>
|
||||||
|
<%#= yield :header %>
|
||||||
|
|
||||||
|
<%= 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>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1 +1,36 @@
|
||||||
<%= yield %>
|
<article>
|
||||||
|
<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>
|
||||||
|
<article>
|
||||||
|
<%= yield %>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<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>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2><span class="underline">Uitgelichte</span> Verenigingen</h2>
|
||||||
|
<section>
|
||||||
|
<h3>Zeus WPI</h3>
|
||||||
|
<p>Hier stond een tekst die niet online mocht komen omdat het over niet politiek correcte dingen ging</p>
|
||||||
|
<a href="#">belijk de vereniging</a>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</main>
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,22 @@
|
||||||
<% for i in navigables %>
|
<nav>
|
||||||
<%= link_to(i[:titel], i) %>
|
<img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="">
|
||||||
<% end %>
|
<ul>
|
||||||
|
<% for i in navigables %>
|
||||||
|
<li><%= link_to(i[:titel], i, class: "nav_link") %></li>
|
||||||
|
<% end %>
|
||||||
|
<script>
|
||||||
|
const nav_links = document.querySelectorAll(".nav_link");
|
||||||
|
nav_links.forEach(nav_link => {
|
||||||
|
if (nav_link.getAttribute("href") === window.location.pathname) {
|
||||||
|
nav_link.classList.add("active_link");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div>
|
||||||
|
<input type="text" placeholder="Zeus WPI">
|
||||||
|
<button>search</button>
|
||||||
|
<button>NL</button>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
|
||||||
|
|
@ -19,4 +19,15 @@ module VerenigingenHelper
|
||||||
"themas" => x[:themas]
|
"themas" => x[:themas]
|
||||||
}}.to_a
|
}}.to_a
|
||||||
end
|
end
|
||||||
|
def abbreviation(item)
|
||||||
|
item.identifier.without_ext.split('/').last
|
||||||
|
end
|
||||||
|
def verenigingen_random(amount)
|
||||||
|
@items.find_all("**/verenigingen/*").map{|x| {
|
||||||
|
"titel" => x[:titel],
|
||||||
|
"naam" => x[:naam],
|
||||||
|
"konvent" => x[:konvent],
|
||||||
|
"themas" => x[:themas]
|
||||||
|
}}.to_a.shuffle[0..amount]
|
||||||
|
end
|
||||||
end
|
end
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue