Initial layout, index-page and logo images.
This commit is contained in:
codevictory
@@ -1,5 +1,6 @@
|
||||
/* This file is for your main application css. */
|
||||
@import "./phoenix.css";
|
||||
@import './layout.scss';
|
||||
@import './pages/index.scss';
|
||||
|
||||
/* Alerts and form errors */
|
||||
.alert {
|
||||
|
||||
51
assets/css/layout.scss
Normal file
51
assets/css/layout.scss
Normal 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
30
assets/css/pages/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
BIN
assets/static/images/runosaari-logo.jpg
Normal file
BIN
assets/static/images/runosaari-logo.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
assets/static/images/small-logo.png
Normal file
BIN
assets/static/images/small-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -6,28 +6,40 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Runosaari · Phoenix Framework</title>
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<section class="container">
|
||||
<nav role="navigation">
|
||||
<ul>
|
||||
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
|
||||
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
|
||||
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
|
||||
<% end %>
|
||||
</ul>
|
||||
<nav class="nav" role="navigation">
|
||||
<a href="/">Etusivu</a>
|
||||
<a href="calendar.html">Kalenteri</a>
|
||||
<a href="performers.html">Esiintyjät</a>
|
||||
<a href="contact.html">Yhteystiedot</a>
|
||||
</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>
|
||||
<main role="main" class="container">
|
||||
<main role="main">
|
||||
<p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
|
||||
<p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
|
||||
<%= @inner_content %>
|
||||
</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>
|
||||
</html>
|
||||
|
||||
@@ -1,38 +1,42 @@
|
||||
<section class="phx-hero">
|
||||
<h1><%= gettext "Welcome to %{name}!", name: "Phoenix" %></h1>
|
||||
<p>Peace of mind from prototype to production</p>
|
||||
|
||||
<section class="logo">
|
||||
<img src="<%= Routes.static_path(@conn, "/images/runosaari-logo.jpg") %>" alt="Runosaari logo" />
|
||||
</section>
|
||||
|
||||
<section class="row">
|
||||
<article class="column">
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://hexdocs.pm/phoenix/overview.html">Guides & Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/phoenixframework/phoenix">Source</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="column">
|
||||
<h2>Help</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<section class="text">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
|
||||
scelerisque malesuada felis, sed dictum eros sollicitudin a. In sem
|
||||
lectus, consectetur id nulla sit amet, ullamcorper laoreet urna.
|
||||
Mauris varius a nulla ut condimentum. Nam elementum, arcu eget semper
|
||||
facilisis, nulla dui euismod justo, ac auctor magna tortor id enim. Ut
|
||||
vestibulum volutpat nibh, quis cursus justo blandit eu. Donec tempus
|
||||
aliquet risus, quis gravida elit tempus vel. Praesent porttitor
|
||||
faucibus nisl ac euismod. Integer sed dui odio. Nullam varius ipsum
|
||||
rhoncus nunc vulputate tempus. Mauris tincidunt mi et mauris auctor,
|
||||
non dapibus magna efficitur. Praesent eu sem cursus magna venenatis
|
||||
tempus. Nullam pharetra odio quam, id viverra risus accumsan eget.
|
||||
Curabitur aliquet, purus ut scelerisque volutpat, nibh risus
|
||||
scelerisque erat, sed laoreet risus ligula non enim.
|
||||
</p>
|
||||
<p>
|
||||
Vivamus viverra, purus nec tempus lacinia, urna erat volutpat felis,
|
||||
porttitor luctus nisl augue nec lectus. Sed in blandit nisi. Maecenas
|
||||
laoreet, lectus sit amet vulputate porttitor, felis libero mollis
|
||||
ante, nec pellentesque magna est id ante. Aliquam venenatis turpis
|
||||
cursus felis rutrum suscipit. Class aptent taciti sociosqu ad litora
|
||||
torquent per conubia nostra, per inceptos himenaeos. Duis et turpis
|
||||
nisi. Maecenas suscipit sit amet ante vitae vehicula. Ut auctor felis
|
||||
ut lectus vestibulum, et tempus ligula tempor. Integer at ultrices
|
||||
turpis. Cras id purus turpis.
|
||||
</p>
|
||||
<p>
|
||||
Pellentesque a odio nec velit auctor ullamcorper id et felis. Donec
|
||||
tristique vulputate congue. Aliquam euismod quam quis metus dictum,
|
||||
nec pellentesque augue malesuada. Cras sit amet dui at neque ornare
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user