Skip to content

Linnea Samila / Moya

Go to a project
Commit d967f9d4 by Petri Jarvisalo
Options

html5/css3 leiska

1 parent dcaf6932
Expand all
Inline Side-by-side
Showing with 328 additions and 201 deletions
code/MoyaWeb/WebContent/resources/templates/template1/css/main.css 0 → 100644
/* ==========================================================================
HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
========================================================================== */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
img {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (min-width: 35em) {
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
}
/* ==========================================================================
Helper classes
========================================================================== */
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
\ No newline at end of file
code/MoyaWeb/WebContent/resources/templates/template1/css/normalize.min.css 0 → 100644
/*! normalize.css v1.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}
\ No newline at end of file
code/MoyaWeb/WebContent/resources/templates/template1/css/style.css
.ui-widget,.ui-widget .ui-widget,.ui-button-text, .ui-wizard-step-title {
.ui-widget,.ui-widget .ui-widget,.ui-button-text,.ui-wizard-step-title {
font-size: 90% !important;
}
/* Left column content*/
.left h1 {
font-family: Oxygen, Calibri;
font-size: 11pt;
display: block;
border-bottom: 1px solid #B1B7AF;
color: #101D27;
font-style: italic;
font-weight: lighter;
.ui-panelmenu-header {
font-size: 80% !important;
}
#menu {
margin: 1em;
width: 200px;
}
.center h1 {
#main h1 {
font-family: Oxygen, Calibri;
font-size: 14pt;
border-bottom: 1px solid #B1B7AF;
......@@ -22,7 +20,7 @@
padding-left: 0.5em;
}
.center h2 {
#main h2 {
font-family: Oxygen, Calibri;
font-size: 12pt;
border-bottom: 1px solid #B1B7AF;
......@@ -31,37 +29,33 @@
padding-left: 0.5em;
}
.center h3 {
#main h3 {
font-family: Oxygen, Calibri;
font-size: 11pt;
color: #101D27;
font-weight: lighter;
}
.center {
#main {
font-family: Oxygen, Calibri;
font-size: 10pt;
}
.center p {
#main p {
padding-left: 5em;
}
.right {
aside {
font-family: Oxygen !important;
font-weight: 100;
font-size: 10pt;
}
.center form {
padding: 2em;
}
.center form label {
#main form label {
}
.center form input {
#main form input {
}
......@@ -98,10 +92,6 @@ input:hover,textarea:hover,input:focus,textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
/* reset5 � 2011 opensource.736cs.com MIT */
/*
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote{display:block;}nav ul{list-style:none;}ol{list-style:decimal;}ul{list-style:disc;}ul ul{list-style:circle;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}ins{text-decoration:underline;}del{text-decoration:line-through;}mark{background:none;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input[type=submit],input[type=button],button{margin:0!important;padding:0!important;}input,select,a img{vertical-align:middle;}
*/
@font-face {
font-family: Oxygen;
src: url('Oxygen-Regular.ttf');
......@@ -118,163 +108,63 @@ h1 {
font-size: 18pt;
}
#nav_right {
float: right;
padding-top: 1em;
padding-right: 2em;
}
#nav_left {
float: left;
padding-left: 3em;
}
#nav_left img {
padding-top: 1em;
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.right {
width: 180px !important;
#header_left {
width: 300px;
}
.right input[type="text"],.right input[type="password"] {
width: 140px;
.flex1 {
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.right a {
font-family: sans-serif, Calibri;
font-size: 10pt;
}
.colleft {
padding-top: 1em;
}
.colleft ul {
margin: 0;
padding: 0;
list-style: none;
}
.colleft a {
color: black;
text-decoration: none;
}
.colleft a:hover {
color: black;
text-decoration: underline;
.flex2 {
-webkit-box-flex: 3; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 3; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 3; /* Chrome */
-ms-flex: 3; /* IE 10 */
flex: 3; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.clear {
clear: both;
}
#footer {
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
width: 80%;
padding: 0.25em 0;
}
#header {
clear: both;
float: left;
width: 100%;
border-bottom: 4px solid #333;
}
/* column container */
.colmask {
position: relative; /* This fixes the IE7 overflow hidden bug */
clear: both;
float: left;
width: 100%; /* width of whole page */
overflow: hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright, .colmid, .colleft {
float: left;
width: 100%; /* width of page */
position: relative;
}
.col1, .col2, .col3 {
float: left;
position: relative;
padding: 0 0 0 0;
/* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow: hidden;
}
/* 3 Column settings */
.threecol { /* right */
}
.threecol .colmid {
right: 25%; /* width of the right column */
background-color: white;
border-right: 1px solid black;
min-height: 500px;
}
.threecol .colleft {
right: 60%; /* width of the middle column */
background-color: white;
min-height: 500px;
border-right: 1px dashed #ddd;
}
.threecol .col1 {
width: 56%;
/* width of center column content (column width minus padding on either side) */
left: 102%; /* 100% plus left padding of center column */
}
.threecol .col2 {
width: 12%;
/* Width of left column content (column width minus padding on either side) */
left: 31%;
/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
#header_right {
width: 200px;
}
.threecol .col3 {
width: 21%;
/* Width of right column content (column width minus padding on either side) */
left: 95%; /* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
nav {
min-width: 225px;
background: white;
min-height: 400px;
border-bottom: 1px solid #aaa;
}
/* Footer styles */
#footer {
clear: both;
float: left;
width: 75%;
border-top: 1px solid #000;
color: white;
font-size: 9pt;
text-align: center;
}
#main {
min-width: 810px;
min-height: 400px; background : white;
margin-right: 1em;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
#menu h3 {
font-size: 10pt !important;
margin: 0;
margin-top: 0.5em;
background: white;
}
#menu div {
padding: 0.5em;
font-size: 10pt;
aside {
min-width: 250px;
}
#tournamentMenu ul {
margin-left: 2em;
list-style-type: square !important;
#side {
width: 175px;
}
#main h1 {
......
code/MoyaWeb/WebContent/resources/templates/template1/template.xhtml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">
<!DOCTYPE html>
<html class="no-js" xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:tools="http://java.sun.com/jsf/composite/cditools" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html" locale="#{sessionHandler.locale}">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title><h:outputText value="#{layoutView.getHeader()}" /></title>
<meta name="description" content="Lippukauppa" />
<meta name="author" content="CodeCrew ry" />
<meta http-equiv="Content-Language" content="fi" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Language" content="#{sessionHandler.locale}" />
<link rel="icon" href="#{request.contextPath}/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="#{request.contextPath}/resources/templates/template1/css/normalize.min.css" />
<link rel="stylesheet" href="#{request.contextPath}/resources/templates/template1/css//main.css" />
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/resources/templates/template1/css/style.css" />
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/resources/templates/template1/css/general.css" />
<script src="#{request.contextPath}/resources/templates/template1/js/modernizr-2.6.2.min.js"></script>
<ui:insert name="headerdata" />
</h:head>
<h:body>
<div id="header" class="bgColor1">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header class="bgColor1 box">
<div id="header_left">
<h:link outcome="/index">
<c:choose>
......@@ -39,15 +49,36 @@
</c:choose>
</h:link>
</div>
<div id="header_center" class="flex1"></div>
<div id="header_right">
<img src="#{request.contextPath}/resources/templates/template1/img/moya_logo.png" />
</div>
</div>
</header>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div id="main" class="col1 center">
<section class="box">
<nav>
<div id="menu">
<p:panelMenu model="#{primeMenuView.menuModel}" />
<!-- <ui:fragment rendered="#{menuView.getMenu(2).size() > 1}">
<div id="right">
<ul>
<ui:repeat var="menuitem" value="#{menuView.getMenu(2)}">
<h:outputText rendered="#{!empty menuitem.header}" value="&lt;/ul>&lt;h1>#{i18n[menuitem.header]}&lt;/h1>&lt;ul>" escape="false" />
<li><h:link outcome="#{menuitem.outcome}" value="#{i18n[menuitem.navigation.key]}" styleClass="#{menuitem.selected?'active':''}" /></li>
</ui:repeat>
</ul>
</div>
</ui:fragment>
-->
</div>
</nav>
<section id="main" class="flex2">
<div class="container top">
<h:link rendered="#{layoutView.manageContent}" styleClass="editorlink" value="#{i18n['layout.editTop']}" outcome="/pages/manage">
<f:param name="pagename" value="#{layoutView.pagepath}:top" />
......@@ -66,28 +97,10 @@
<h:link rendered="#{layoutView.manageContent}" styleClass="editorlink" value="#{i18n['layout.editBottom']}" outcome="/pages/manage">
<f:param name="pagename" value="#{layoutView.pagepath}:bottom" />
</h:link>
</div>
<div id="menu" class="col2 left">
<p:panelMenu model="#{primeMenuView.menuModel}" />
<!-- <ui:fragment rendered="#{menuView.getMenu(2).size() > 1}">
<div id="right">
<ul>
<ui:repeat var="menuitem" value="#{menuView.getMenu(2)}">
<h:outputText rendered="#{!empty menuitem.header}" value="&lt;/ul>&lt;h1>#{i18n[menuitem.header]}&lt;/h1>&lt;ul>" escape="false" />
<li><h:link outcome="#{menuitem.outcome}" value="#{i18n[menuitem.navigation.key]}" styleClass="#{menuitem.selected?'active':''}" /></li>
</ui:repeat>
</ul>
</div>
</ui:fragment>
-->
</div>
<div class="col3">
<div class="right">
</section>
<aside class="flex1">
<div id="menu">
<div class="ui-widget-header">Login</div>
<div class="ui-widget-content" style="text-align: center">
......@@ -109,13 +122,11 @@
</h:form>
</div>
</div>
</div>
</div>
</div>
</aside>
</section>
</div>
<div id="footer" class="bgColor1"></div>
<footer class="bgColor1"> </footer>
</h:body>
</f:view>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!