tietokonepaja/runosaari.net
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial layout, index-page and logo images.

Browse Source
This commit is contained in:
codevictory
2021-03-29 21:48:15 +03:00
parent cd46df9c57
commit bed6bd36cf
8 changed files with 147 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/css/app.scss
View File

@@ -1,5 +1,6 @@
/* This file is for your main application css. */ /* This file is for your main application css. */
@import "./phoenix.css"; @import './layout.scss';
@import './pages/index.scss';
/* Alerts and form errors */ /* Alerts and form errors */
.alert { .alert {

51
assets/css/layout.scss Normal file
View File

@@ -0,0 +1,51 @@
body {
background-color: white;
font-family: 'Crimson Text', sans-serif;
text-shadow: 3px 3px 3px #ababab;
color: #2f273e;
}
header {
.nav {
display: flex;
justify-content: center;
a {
padding: 15px;
color: #2f273e;
text-decoration: none;
}
a:hover {
background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0), #d5caf2);
text-decoration: underline;
}
}
}
main {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
footer {
display: flex;
justify-content: center;
.container {
display: flex;
justify-content: space-between;
width: 50%;
align-items: center;
.middle img {
max-width: 55px;
}
.right {
text-align: right;
}
}
}

30
assets/css/pages/index.scss Normal file
View File

@@ -0,0 +1,30 @@
section.logo {
width: 80%;
max-width: 1000px;
background-color: #d5caf2;
border-radius: 3px;
padding-top: 3px;
&::after {
content: '@Sanna Hukkanen';
font-size: 90%;
text-align: right;
position: relative;
left: 88%;
}
img {
width: 100%;
}
}
section.text {
width: 80%;
max-width: 1000px;
background-image: linear-gradient(to top, rgba(255, 0, 0, 0), #d5caf2);
text-align: center;
p {
padding: 0px 20px;
}
}

101
assets/css/phoenix.css
View File

File diff suppressed because one or more lines are too long

BIN
assets/static/images/runosaari-logo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
assets/static/images/small-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

38
lib/runosaari_web/templates/layout/app.html.eex
View File

@@ -6,28 +6,40 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Runosaari · Phoenix Framework</title> <title>Runosaari · Phoenix Framework</title>
<link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/> <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/css/app.css") %>"/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Crimson+Text"
/>
<script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script> <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head> </head>
<body> <body>
<header> <header>
<section class="container"> <nav class="nav" role="navigation">
<nav role="navigation"> <a href="/">Etusivu</a>
<ul> <a href="calendar.html">Kalenteri</a>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li> <a href="performers.html">Esiintyjät</a>
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %> <a href="contact.html">Yhteystiedot</a>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
<% end %>
</ul>
</nav> </nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header> </header>
<main role="main" class="container"> <main role="main">
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p> <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p> <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
<%= @inner_content %> <%= @inner_content %>
</main> </main>
<footer>
<div class="container">
<div class="left">
Livonsaari <br />
Naantali <br />
20. - 21.7.2021
</div>
<div class="middle"><img src="<%= Routes.static_path(@conn, "/images/small-logo.png") %>" alt="Pieni logo" /></div>
<div class="right">
Sdfas Asdinen <br />
Esiintyjä Aasfdas <br />
Asdf Esiintyjä
</div>
</div>
</footer>
</body> </body>
</html> </html>

74
lib/runosaari_web/templates/page/index.html.eex
View File

@@ -1,38 +1,42 @@
<section class="phx-hero">
<h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1> <section class="logo">
<p>Peace of mind from prototype to production</p> <img src="<%= Routes.static_path(@conn, "/images/runosaari-logo.jpg") %>" alt="Runosaari logo" />
</section> </section>
<section class="row"> <section class="text">
<article class="column"> <p>
<h2>Resources</h2> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
<ul> scelerisque malesuada felis, sed dictum eros sollicitudin a. In sem
<li> lectus, consectetur id nulla sit amet, ullamcorper laoreet urna.
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a> Mauris varius a nulla ut condimentum. Nam elementum, arcu eget semper
</li> facilisis, nulla dui euismod justo, ac auctor magna tortor id enim. Ut
<li> vestibulum volutpat nibh, quis cursus justo blandit eu. Donec tempus
<a href="https://github.com/phoenixframework/phoenix">Source</a> aliquet risus, quis gravida elit tempus vel. Praesent porttitor
</li> faucibus nisl ac euismod. Integer sed dui odio. Nullam varius ipsum
<li> rhoncus nunc vulputate tempus. Mauris tincidunt mi et mauris auctor,
<a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a> non dapibus magna efficitur. Praesent eu sem cursus magna venenatis
</li> tempus. Nullam pharetra odio quam, id viverra risus accumsan eget.
</ul> Curabitur aliquet, purus ut scelerisque volutpat, nibh risus
</article> scelerisque erat, sed laoreet risus ligula non enim.
<article class="column"> </p>
<h2>Help</h2> <p>
<ul> Vivamus viverra, purus nec tempus lacinia, urna erat volutpat felis,
<li> porttitor luctus nisl augue nec lectus. Sed in blandit nisi. Maecenas
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a> laoreet, lectus sit amet vulputate porttitor, felis libero mollis
</li> ante, nec pellentesque magna est id ante. Aliquam venenatis turpis
<li> cursus felis rutrum suscipit. Class aptent taciti sociosqu ad litora
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a> torquent per conubia nostra, per inceptos himenaeos. Duis et turpis
</li> nisi. Maecenas suscipit sit amet ante vitae vehicula. Ut auctor felis
<li> ut lectus vestibulum, et tempus ligula tempor. Integer at ultrices
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a> turpis. Cras id purus turpis.
</li> </p>
<li> <p>
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a> Pellentesque a odio nec velit auctor ullamcorper id et felis. Donec
</li> tristique vulputate congue. Aliquam euismod quam quis metus dictum,
</ul> nec pellentesque augue malesuada. Cras sit amet dui at neque ornare
</article> eleifend nec sit amet arcu. Curabitur mauris mi, consequat ut lectus
et, fringilla scelerisque nisl. Aliquam ultrices, mauris vitae
tincidunt commodo, dui diam fermentum massa, eget sodales massa ipsum
vitae felis. Nullam id massa id nibh consectetur fermentum.
</p>
</section> </section>