Skip to content

Commit

Permalink
refactor(stylesheet): make everything more consistent (#23)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gitleptune
Gitleptune authored Aug 13, 2021
1 parent 56a4d45 commit 3032fca
Showing 1 changed file with 83 additions and 86 deletions.
169 changes: 83 additions & 86 deletions src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,13 @@ div {
}

/* Theme */

:root {
--bg-color: white;
--fg-color: black;
--begin-button-hover: #3cb0ff;
--code-area-bg-color: #AAA;
--select-bg-color: #EEE;
--transition-time: 0s; /* Modified via js */
--transition-time: 0s; /* Modified via JS */
--displaylatex: none;
--displayhtml: none;
}
Expand All @@ -33,23 +32,21 @@ div {
}

/* Global */

html {
transition: color var(--transition-time);
transition: background-color var(--transition-time);
color: var(--fg-color);
background-color: var(--bg-color);
font-family: Arial;
font-family: 'Arial';
scroll-behavior: smooth;
}

html, body {
margin:0;
padding:0;
margin: 0;
padding: 0;
}

/* Layout */

.displaylatex {
display: var(--displaylatex) !important;
overflow: auto;
Expand All @@ -64,12 +61,13 @@ html, body {
}

.gutter {
min-width:12px;
min-height:4px;
min-width: 12px;
min-height: 4px;
}

/* Containers */
.container {
/*overflow: hidden;*/
/* overflow: hidden; */
min-height: 0
}

Expand All @@ -85,12 +83,14 @@ html, body {
flex-direction: row;
}

/* Media queries */
@media all and (orientation:portrait) {
.container.device-orientation {
display: flex;
flex-direction: column;
}
}

@media all and (orientation:landscape) {
.container.device-orientation {
display: flex;
Expand All @@ -99,11 +99,11 @@ html, body {
}

.flex {
flex-grow:1;
flex-grow: 1;
flex-shrink: 1;
}

.nonflex{
.nonflex {
flex-grow: 0;
flex-shrink: 0;
}
Expand All @@ -113,36 +113,35 @@ html, body {
}

.fullscreen {
width:100%;
height:100vh;
margin:0;
padding:0;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
}

.fill_space {
width:100%;
height:100%;
width: 100%;
height: 100%;
overflow: auto;
min-height: 0
}

/* landing page */

/* Landing page */
#landing_page {
position:relative
position: relative
}

#landing_page_content {
position:absolute;
top:50%;
left:50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

#landing_page_content h1 {
font-size:20vmin;
margin:0;
padding:0;
font-size: 20vmin;
margin: 0;
padding: 0;
transition: text-shadow 1s ease-in-out 1s;
}

Expand All @@ -155,33 +154,32 @@ html, body {
}

#landing_page_content h2 {
font-weight:normal;
font-size:4vmin;
margin:0;
padding:0;
margin-top:-4vmin;
margin-left:1vmin;
font-weight: normal;
font-size: 4vmin;
margin: 0;
padding: 0;
margin-top: -4vmin;
margin-left: 1vmin;
}

#landing_page_content p {
font-size:5vmin;
font-size: 5vmin;
white-space: nowrap;
}

#landing_page_content a {
font-size:10vmin;
font-size: 10vmin;
}

#version {
font-size:4vmin;
margin:1vmin;
font-size: 4vmin;
margin: 1vmin;
}

/* begin button */

/* Begin button */
#begin_button {
border-radius: 2vmin;;
font-family: Arial;
font-family: 'Arial';
font-size: 10vmin;
padding: 1.5vmin;
text-decoration: none;
Expand All @@ -192,53 +190,51 @@ html, body {
}

/* Style button */

#style_button {
position: absolute;
right: 0;
top: 0;
font-size:4vmin;
font-weight:lighter;
margin:1vmin;
padding:1vmin;
font-size: 4vmin;
font-weight: lighter;
margin: 1vmin;
padding: 1vmin;
border-radius: 0.5vmin;
opacity:0.8;
opacity: 0.8;
}

#style_button:hover {
opacity: 1;
cursor:pointer;
cursor: pointer;
}

#style_button, #links a {
background-color:var(--fg-color);
color:var(--bg-color);
background-color: var(--fg-color);
color: var(--bg-color);
}

/* Links */

#links {
position: absolute;
left: 0;
top: 0;
}

#links a {
display:block;
margin:1vmin;
padding:1vmin;
font-size:3vmin;
text-decoration:none;

margin-left:0;
background-color:var(--fg-color);
color:var(--bg-color);
display: block;
margin: 1vmin;
padding: 1vmin;
font-size: 3vmin;
text-decoration: none;

margin-left: 0;
background-color: var(--fg-color);
color: var(--bg-color);
border-radius: 0 0.5vmin 0.5vmin 0;
opacity:0.8;
opacity: 0.8;
}

#links a:hover {
opacity:1.0;
opacity: 1.0;
}

/* Application area */
Expand All @@ -254,31 +250,30 @@ textarea {
overflow: auto;
}

/* menu bar */

/* Menu bar */
#menu_bar {
display: flex;
}

.menu_bar_submenu {
margin: 0px;
padding:12px;
display:inline-block;
padding: 12px;
display: inline-block;
border-right: 1px solid black;
vertical-align: center;
white-space: nowrap;
}

select {
font:inherit;
size:50px;
font: inherit;
size: 50px;
}

.option {
margin:auto;
padding:auto;
padding-right:3px;
padding-left:3px;
margin: auto;
padding: auto;
padding-right: 3px;
padding-left: 3px;
}

select {
Expand Down Expand Up @@ -308,8 +303,9 @@ option {
overflow: auto;
}

/* Begin Button */
#begin_button {
border:1vmin var(--fg-color) solid;
border: 1vmin var(--fg-color) solid;
color: var(--fg-color);
padding: 10px;
}
Expand All @@ -320,7 +316,7 @@ option {

#code_area {
background-color: var(--code-area-bg-color);
tab-size:2;
tab-size: 2;
}

#menu_bar {
Expand All @@ -329,34 +325,35 @@ option {

select, option {
color: var(--fg-color);
background-color:var(--select-bg-color);
background-color: var(--select-bg-color);
}

/* Copy */
.copy-wrapper {
position:relative;
position: relative;
}

.copy {
display:block;
position:absolute;
color:white;
background-color:black;
color:white;
display: block;
position: absolute;
color: white;
background-color: black;
color: white;
opacity: 0.7;
right:0;
top :0;
z-index:2;
right: 0;
top: 0;
z-index: 2;
margin: 1vh;
padding: 1vh;
transition: opacity 0.3s, background-color 0.3s;
box-shadow: x 0.5vmin 0.5vmin 0 inset rgba(0,0,0,0.4);
}

.copy:hover, .copy[data-active=true] {
opacity:1.0;
cursor:pointer;
opacity: 1.0;
cursor: pointer;
}

.copy[data-active=true] {
background-color:green;
background-color: green;
}

0 comments on commit 3032fca

Please sign in to comment.