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>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title> Durf Doen! - <%= item[:titel] || item.identifier.without_ext.split('/').last %> </title>
|
||||
<!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>
|
||||
<%= render '/partials/navbar.*' %>
|
||||
<%= yield %>
|
||||
</body>
|
||||
<link rel="stylesheet" href="/stylesheets/main.css">
|
||||
<link rel="shortcut icon" href="/assets/favicon.png">
|
||||
|
||||
<%#= item[:head] %>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -7,4 +7,4 @@
|
|||
</div>
|
||||
<%= render '/partials/detail.*' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
</div>
|
||||
<%= render '/partials/detail.*' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,22 @@
|
|||
<% for i in navigables %>
|
||||
<%= link_to(i[:titel], i) %>
|
||||
<% end %>
|
||||
<nav>
|
||||
<img src="/assets/OmdatHetDurfDoenLogoSuckt.png" alt="">
|
||||
<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]
|
||||
}}.to_a
|
||||
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue