Finish basic styling of major components
This commit is contained in:
parent
b3c3389dbd
commit
c4b7fa4257
42
index.html
42
index.html
|
|
@ -15,9 +15,21 @@
|
|||
|
||||
<main>
|
||||
<aside id="sideColumn">
|
||||
<form id="wordForm">
|
||||
<form id="wordForm" onsubmit="function(e){e.preventDefault();return false;}">
|
||||
<label>Word<br>
|
||||
<input id="word">
|
||||
<input id="wordName">
|
||||
</label>
|
||||
<label>Pronunciation<a class="label-button">IPA Chart</a><br>
|
||||
<input id="wordPronunciation">
|
||||
</label>
|
||||
<label>Part of Speech<br>
|
||||
<select id="wordPartOfSpeech"></select>
|
||||
</label>
|
||||
<label>Definition<br>
|
||||
<input id="wordDefinition">
|
||||
</label>
|
||||
<label>Details<a class="label-button">Maximize</a><br>
|
||||
<textarea id="wordDetails"></textarea>
|
||||
</label>
|
||||
</form>
|
||||
</aside>
|
||||
|
|
@ -27,9 +39,7 @@
|
|||
<h2>Dictionary Name</h2>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>Description</li>
|
||||
<li>Details</li>
|
||||
<li>Stats</li>
|
||||
<li id="toggleDescription">Description</li><li id="toggleDetails">Details</li><li id="toggleStats" class="active">Stats</li><li id="showEdit" onclick="document.getElementById('editModal').style.display='block'">Edit</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<article id="detailsPanel">
|
||||
|
|
@ -55,8 +65,28 @@
|
|||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<footer id="bottom">
|
||||
Lexiconga Footer Links
|
||||
<a class="button">Support</a>
|
||||
<a class="button">Blog</a>
|
||||
<a class="button">Issues</a>
|
||||
<a class="button">Updates</a>
|
||||
|
|
||||
<a class="button">Help</a>
|
||||
<a class="button">Terms</a>
|
||||
<a class="button">Privacy</a>
|
||||
</footer>
|
||||
|
||||
<section id="editModal" class="modal" style="display:none;">
|
||||
<div class="modal-background" onclick="this.parentElement.style.display='none';"></div>
|
||||
<div class="modal-content">
|
||||
<a class="close-button" onclick="this.parentElement.parentElement.style.display='none';">×︎</a>
|
||||
<nav class="tabs">
|
||||
<ul>
|
||||
<li class="active">Description</li><li>Details</li><li>Settings</li><li>Actions</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
@import '../node_modules/normalize.css/normalize.css';
|
||||
|
||||
@import 'styles/containers';
|
||||
@import 'styles/structure';
|
||||
@import 'styles/elements';
|
||||
|
||||
html, body {
|
||||
font-family: $font;
|
||||
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
header {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
border-bottom: 1px solid #dedede;
|
||||
border-bottom: 1px solid $mid;
|
||||
margin: 0 0 5px;
|
||||
|
||||
&#top {
|
||||
|
|
@ -12,6 +12,7 @@ header {
|
|||
main {
|
||||
display: block;
|
||||
width: 90%;
|
||||
min-height: 400px;
|
||||
margin: 0 auto;
|
||||
|
||||
#sideColumn,
|
||||
|
|
@ -32,8 +33,8 @@ main {
|
|||
|
||||
article {
|
||||
width: 95%;
|
||||
margin: 5px auto;
|
||||
border: 1px solid #dedede;
|
||||
margin: 10px auto;
|
||||
border: $border;
|
||||
|
||||
dl {
|
||||
padding: 0 20px;
|
||||
|
|
@ -43,7 +44,7 @@ main {
|
|||
|
||||
footer {
|
||||
display: block;
|
||||
padding: 5px 20px;
|
||||
border-top: 1px solid #dedede;
|
||||
padding: 20px;
|
||||
border-top: 1px solid $mid;
|
||||
margin: 5px 0 0;
|
||||
}
|
||||
|
|
@ -1,15 +1,60 @@
|
|||
#top {
|
||||
#title {
|
||||
display: inline-block;
|
||||
margin: 3px 20px 3px 0;
|
||||
.button {
|
||||
cursor: pointer;
|
||||
padding: 3px 9px;
|
||||
border: $border;
|
||||
border-radius: 3px;
|
||||
background-color: $light;
|
||||
}
|
||||
|
||||
.modal {
|
||||
.modal-background {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #000000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
cursor: pointer;
|
||||
.modal-content {
|
||||
position: fixed;
|
||||
top: 10%;
|
||||
left: 20%;
|
||||
bottom: 10%;
|
||||
right: 20%;
|
||||
background-color: $white;
|
||||
border: $border;
|
||||
border-radius: 5px;
|
||||
|
||||
.close-button {
|
||||
font-size: 200%;
|
||||
float: right;
|
||||
margin: 10px 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#wordForm {
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
.tabs {
|
||||
ul {
|
||||
border-bottom: $border;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0 2px -1px;
|
||||
padding: 10px 20px;
|
||||
border-top: $border;
|
||||
border-left: $border;
|
||||
border-right: $border;
|
||||
border-radius: 5px 5px 0 0;
|
||||
background-color: $mid;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: $white;
|
||||
border-bottom: 1px solid $white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
#top {
|
||||
#title {
|
||||
display: inline-block;
|
||||
margin: 3px 20px 3px 0;
|
||||
}
|
||||
|
||||
#searchButton {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
#wordForm {
|
||||
position: fixed;
|
||||
top: $header-height;
|
||||
width: 24%;
|
||||
padding: 10px;
|
||||
background-color: $light;
|
||||
border: $border;
|
||||
border-radius: 5px;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
font-weight: normal;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label-button {
|
||||
font-size: 80%;
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#detailsSection {
|
||||
padding: 20px;
|
||||
background-color: $white;
|
||||
border: $border;
|
||||
border-radius: 5px;
|
||||
|
||||
nav li {
|
||||
display: inline-block;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
border: $border;
|
||||
background-color: $light;
|
||||
cursor: pointer;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 5px 0 0 5px;
|
||||
}
|
||||
&:last-child {
|
||||
border-radius: 0 5px 5px 0;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #bababa;
|
||||
}
|
||||
}
|
||||
|
||||
#detailsPanel {
|
||||
background-color: $white;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.entry {
|
||||
background-color: $light;
|
||||
|
||||
.word {
|
||||
display: inline-block;
|
||||
margin: 3px 0;
|
||||
}
|
||||
|
||||
.pronunciation {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.part-of-speech {
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,10 @@
|
|||
$font: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
|
||||
$header-height: 60px;
|
||||
$header-height: 60px;
|
||||
|
||||
$dark: #bababa;
|
||||
$mid: #dedede;
|
||||
$light: #efefef;
|
||||
$white: #ffffff;
|
||||
|
||||
$border: 1px solid $dark;
|
||||
Loading…
Reference in New Issue