Redo landing page main body
MOTD is WIP
This commit is contained in:
parent
05dee57ded
commit
89ce6773a8
@ -54,39 +54,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.gridsplit {
|
||||
padding-top: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
}
|
||||
|
||||
.gridsplit5050 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gridl {
|
||||
height: 100%;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.gridr {
|
||||
height: 100%;
|
||||
padding: 0 1em;
|
||||
margin-left: 1em;
|
||||
border-left: 1px dotted rgba(0,0,0,0.5);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.gridsplit h1:first-child,
|
||||
.gridsplit h2:first-child,
|
||||
.gridsplit h3:first-child,
|
||||
.gridsplit h4:first-child,
|
||||
.gridsplit h5:first-child,
|
||||
.gridsplit h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.allgrids {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
header {
|
||||
margin-top: 50px;
|
||||
margin: 0;
|
||||
padding: 3vh 15vw;
|
||||
width: 70vw;
|
||||
background-color: #002244;
|
||||
@ -50,6 +50,62 @@ main {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
img.float-right {
|
||||
float: right;
|
||||
max-width: 12em;
|
||||
max-height: 12em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.calendar-events {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.calendar-events ul .date {
|
||||
color: rgba(0,0,0,.5);
|
||||
font-size: 0.8em;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
.calendar-events > li > p {
|
||||
border-bottom: .1em dotted rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.calendar-events ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.calendar-events a, #ticker a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.calendar-events a:hover, #ticker a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.calendar-events ul .time {
|
||||
color: rgba(0,0,0,.5);
|
||||
float: right;
|
||||
}
|
||||
|
||||
.calendar-events ul .icon, .calendar-events ul .date {
|
||||
float: right;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
.contentsplit {
|
||||
display: grid;
|
||||
grid-template-columns: 2.5fr 1.5fr;
|
||||
}
|
||||
|
||||
.gridr {
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
@media(max-width: 600px){
|
||||
.essentials {
|
||||
flex-direction: column;
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
img.float-right {
|
||||
float: right;
|
||||
max-width: 12em;
|
||||
max-height: 12em;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
.calendar-events {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.calendar-events ul .date {
|
||||
color: rgba(0,0,0,.5);
|
||||
font-size: 0.8em;
|
||||
margin-top: .2em;
|
||||
}
|
||||
.calendar-events > li > p {
|
||||
border-bottom: .1em dotted rgba(0,0,0,.2);
|
||||
}
|
||||
|
||||
.calendar-events ul {
|
||||
list-style: none;
|
||||
padding: 0 .5em;
|
||||
}
|
||||
.calendar-events a, #ticker a {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: black;
|
||||
}
|
||||
.calendar-events a:hover, #ticker a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.calendar-events ul .time {
|
||||
color: rgba(0,0,0,.5);
|
||||
float: right;
|
||||
}
|
||||
.calendar-events ul .icon, .calendar-events ul .date {
|
||||
float: right;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
#ticker {
|
||||
position: absolute;
|
||||
max-width: 60rem;
|
||||
margin: 0 auto;
|
||||
top: 11rem;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
#ticker li {
|
||||
margin: 0 1rem;
|
||||
padding: .5em 1em;
|
||||
background: linear-gradient(to bottom, #fff 75%,#fafafa 100%);
|
||||
border-radius: .5rem;
|
||||
box-shadow: 0 .1rem .15rem rgba(0,0,0,.3);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 50rem) {
|
||||
#ticker {
|
||||
top: 7rem;
|
||||
}
|
||||
#ticker li {
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
main {
|
||||
margin: -11rem auto 0 auto;
|
||||
}
|
||||
}
|
||||
@ -19,6 +19,51 @@ main h2 {
|
||||
color: #002244;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-bottom: 7vh;
|
||||
}
|
||||
|
||||
.gridsplit {
|
||||
padding-top: 1.3em;
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
}
|
||||
|
||||
.gridsplit5050 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.gridsplitthirds {
|
||||
display: grid;
|
||||
grid-column-gap: 2em;
|
||||
column-rule-style: dotted;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
}
|
||||
|
||||
.gridl {
|
||||
height: 100%;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.gridr {
|
||||
height: 100%;
|
||||
padding: 0 1em;
|
||||
margin-left: 1em;
|
||||
border-left: 1px dotted rgba(0,0,0,0.5);
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
.gridsplit h1:first-child,
|
||||
.gridsplit h2:first-child,
|
||||
.gridsplit h3:first-child,
|
||||
.gridsplit h4:first-child,
|
||||
.gridsplit h5:first-child,
|
||||
.gridsplit h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: .5em;
|
||||
border-radius: 4px;
|
||||
@ -49,4 +94,4 @@ main h2 {
|
||||
.ruler {
|
||||
border: none;
|
||||
border-bottom: 1px dotted rgba(0,0,0,.5);
|
||||
}
|
||||
}
|
||||
|
||||
@ -59,53 +59,50 @@ $agenda = new \pvv\side\Agenda([
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>Kommende arrangement</h2>
|
||||
<ul class="calendar-events">
|
||||
<?php $counter1 = 0; ?>
|
||||
<?php $counter2 = 0; ?>
|
||||
<?php foreach($agenda->getNextDays() as $period => $events) if ($events && $counter1 < 2 && $counter2 < 10) { $counter1++ ?>
|
||||
<li>
|
||||
<p><?= $translation[$period] ?></p>
|
||||
<ul>
|
||||
<?php foreach($events as $event) { $counter2++ ?>
|
||||
<li>
|
||||
<a href="<?= htmlspecialchars($event->getURL()) ?>"><?= $event->getName(); ?></a>
|
||||
<?php /* <a class="icon subscribe">+</a> */ ?>
|
||||
<?php if ($period !== \pvv\side\Agenda::TODAY) {
|
||||
echo '<span class="time">' . $event->getStart()->format('H:i') . '</span>';
|
||||
if (\pvv\side\Agenda::isThisWeek($event->getStart()) || $event->getStart()->sub(new DateInterval('P3D'))->getTimestamp() < time()) {
|
||||
echo '<span class="date">' . strftime('%a', $event->getStart()->getTimestamp()) . '</span>';
|
||||
<main class="contentsplit">
|
||||
<div class="gridr">
|
||||
<h2>Kommende aktiviteter</h2>
|
||||
<div class="calendar-events">
|
||||
<?php $counter1 = 0; ?>
|
||||
<?php $counter2 = 0; ?>
|
||||
<?php foreach($agenda->getNextDays() as $period => $events) if ($events && $counter1 < 3 && $counter2 < 10) { $counter1++ ?>
|
||||
<p class="no-chin"><?= $translation[$period] ?></p>
|
||||
<hr>
|
||||
<ul>
|
||||
<?php foreach($events as $event) { $counter2++ ?>
|
||||
<li>
|
||||
<a href="<?= htmlspecialchars($event->getURL()) ?>"><?= $event->getName(); ?></a>
|
||||
<?php /* <a class="icon subscribe">+</a> */ ?>
|
||||
<?php if ($period !== \pvv\side\Agenda::TODAY) {
|
||||
echo '<span class="time">' . $event->getStart()->format('H:i') . '</span>';
|
||||
if (\pvv\side\Agenda::isThisWeek($event->getStart()) || $event->getStart()->sub(new DateInterval('P3D'))->getTimestamp() < time()) {
|
||||
echo '<span class="date">' . strftime('%a', $event->getStart()->getTimestamp()) . '</span>';
|
||||
} else {
|
||||
echo '<span class="date">' . strftime('%e. %b', $event->getStart()->getTimestamp()) . '</span>';
|
||||
}
|
||||
} else {
|
||||
echo '<span class="date">' . strftime('%e. %b', $event->getStart()->getTimestamp()) . '</span>';
|
||||
echo '<span class="time">' . $event->getStart()->format('H:i') . '</span>';
|
||||
}
|
||||
} else {
|
||||
echo '<span class="time">' . $event->getStart()->format('H:i') . '</span>';
|
||||
}
|
||||
?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<p><a class="btn" href="kalender/">Flere aktiviteter</a></p>
|
||||
?>
|
||||
</li>
|
||||
<?php } ?>
|
||||
</ul>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<br>
|
||||
<p><a class="btn" href="kalender/">Flere aktiviteter</a></p>
|
||||
</div>
|
||||
|
||||
<div class="gridl">
|
||||
<h2>Dagens melding</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Odio tempor orci dapibus ultrices in. Et odio pellentesque diam volutpat commodo. Porttitor leo a diam sollicitudin. Nisl nisi scelerisque eu ultrices. Ipsum dolor sit amet consectetur. Mattis pellentesque id nibh tortor id. Quam adipiscing vitae proin sagittis nisl rhoncus mattis. Integer malesuada nunc vel risus commodo. Curabitur gravida arcu ac tortor dignissim. Mi sit amet mauris commodo quis imperdiet. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere. Pretium quam vulputate dignissim suspendisse in est. Velit egestas dui id ornare. Urna condimentum mattis pellentesque id nibh tortor id aliquet.<br><br>
|
||||
|
||||
<h2>Opptak</h2>
|
||||
<p>
|
||||
Alle med tilknytning til NTNU kan bli medlem hos oss
|
||||
og benytte seg av våre ressurser.
|
||||
<!--
|
||||
For å bli med i våre prosjekter og komitéer må du søke.
|
||||
-->
|
||||
</p>
|
||||
<p>
|
||||
<a class="btn" href="paamelding/">Bli medlem</a>
|
||||
<!--
|
||||
<a class="btn" href="prosjekt/">Søk prosjekt</a>
|
||||
<a class="btn" href="prosjekt/">Søk komité</a>
|
||||
-->
|
||||
</p>
|
||||
Maecenas pharetra convallis posuere morbi leo urna molestie. Egestas sed sed risus pretium. At erat pellentesque adipiscing commodo elit. Ut tortor pretium viverra suspendisse potenti nullam ac. Sit amet volutpat consequat mauris nunc congue nisi vitae suscipit. Faucibus purus in massa tempor nec feugiat nisl. Viverra tellus in hac habitasse platea dictumst vestibulum. Tincidunt vitae semper quis lectus nulla at. Id consectetur purus ut faucibus. Ultricies integer quis auctor elit sed vulputate. Suscipit adipiscing bibendum est ultricies integer quis auctor elit.<br><br>
|
||||
|
||||
Nulla malesuada pellentesque elit eget. Odio tempor orci dapibus ultrices in iaculis nunc. Iaculis at erat pellentesque adipiscing. Volutpat ac tincidunt vitae semper. Posuere ac ut consequat semper viverra nam libero justo. Enim tortor at auctor urna nunc id cursus metus. Sit amet cursus sit amet. Eu non diam phasellus vestibulum lorem sed risus. Consequat interdum varius sit amet mattis vulputate enim nulla aliquet. Enim sed faucibus turpis in eu mi bibendum. Eu consequat ac felis donec et odio pellentesque. Cursus eget nunc scelerisque viverra mauris in aliquam sem. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor eu. Quis commodo odio aenean sed adipiscing. Et ultrices neque ornare aenean euismod elementum nisi. Turpis in eu mi bibendum neque egestas congue. Sed arcu non odio euismod. Risus quis varius quam quisque.<br><br>
|
||||
|
||||
Consequat interdum varius sit amet mattis vulputate enim nulla. Tristique et egestas quis ipsum suspendisse. Amet massa vitae tortor condimentum lacinia quis vel eros donec. Varius vel pharetra vel turpis nunc eget. Convallis posuere morbi leo urna molestie at elementum eu facilisis. Congue eu consequat ac felis donec et odio pellentesque. Nunc sed velit dignissim sodales ut eu sem integer. Mattis enim ut tellus elementum sagittis. Molestie ac feugiat sed lectus. Cursus vitae congue mauris rhoncus aenean vel elit. Mauris augue neque gravida in. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas purus. Et tortor at risus viverra adipiscing at in tellus integer.</p>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user