Upload files to 'assets/css/style.css'

assets/css/style.css/style.css

@@ -0,0 +1,293 @@
+
+:root {
+  --color-theme: #2978ad;
+  --bg-primary: #212121;
+  --bg-secondary: rgba(21,21,21,.5);
+  --bg-hover: rgba(41,120,173,.5);
+  --color-primary: #eee;
+  --color-secondary: #74a7ca;
+  --color-success: #66BB6A;
+  --color-warning: #F57C00;
+  --color-danger: #DC3545;
+  --padding: 1rem;
+  --rounded: 0.25rem;
+  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.12)
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+  transition: opacity .3s;
+  font-family: "Open Sans";
+}
+
+html {
+  color: var(--color-primary);
+  background: var(--bg-primary);
+}
+body {
+  margin: 0 auto;
+	padding: 0;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+::-webkit-scrollbar-track {
+  background: #4e4e4e;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--bg-secondary);
+}
+
+a, a:visited {
+  color: var(--color-secondary);
+	text-decoration: none;
+}
+
+a:hover, a:focus {
+	text-decoration: underline;
+  cursor: pointer;
+  webkit-text-decoration-color: var(--color-text-acc);
+  webkit-text-decoration-skip: true;
+}
+
+#container {
+  margin: 1em auto 0;
+  width: 70%;
+}
+
+h1, h2 {
+    font-weight: 300;
+    margin: 0;
+    padding: 0;
+}
+h3, h4 {
+    text-transform: uppercase;
+    text-align: left;
+    color: var(--color-secondary);
+}
+h1 {
+    font-size: 4em;
+    font-weight: 700;
+}
+h3 {
+    font-size: 20px;
+    font-weight: 900;
+    padding: var(--padding);
+}
+h4 {
+	font-size: 1.1em;
+	font-weight: 400;
+  padding-bottom: .5rem;
+}
+#togglebookmarks {
+  text-decoration: none!important;
+}
+
+button {
+  background-color: var(--bg-hover);
+  color: #fff;
+  border: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 5rem;
+  text-transform: uppercase;
+  box-shadow: var(--shadow);
+}
+button:hover {
+  background-color: var(--color-theme);
+}
+
+/* ANIMATION */
+
+@keyframes fadeseq{
+	100%	{
+		opacity: 1;
+	}
+}
+
+.fade {
+	opacity: 0;
+}
+
+.fade {
+	animation: fadeseq .3s forwards;
+}
+
+.fade:nth-child(2) {
+	animation-delay: .4s;
+}
+
+/* HEADERS */
+
+#header {
+  text-align: center;
+}
+#header-time, #header-date {
+  cursor: default;
+}
+#header-time {
+  font-size: 5em;
+}
+#header-date {
+  margin-top: -1rem;
+  margin-bottom: .5rem;
+}
+#header-quote {
+  margin-top: 1rem;
+}
+
+
+/* LINKS */
+
+#apps-container {
+  display: grid;
+  grid-column-gap: 0px;
+  grid-row-gap: 0px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+
+#apps-container a {
+  text-decoration: none;
+  color: var(--color-primary);
+}
+
+.apps-item {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  height: 64px;
+  margin: .5rem;
+  box-shadow: var(--shadow);
+  background: var(--bg-secondary);
+  border-radius: var(--rounded);
+  -o-transition: background-color .3s;
+  -ms-transition: background-color .3s;
+  -moz-transition: background-color .3s;
+  -webkit-transition: background-color .3s;
+  /* ...and now for the proper property */
+  transition: background-color .3s;
+}
+.apps-item:hover {
+  background-color: var(--bg-hover)!important;
+}
+
+.apps-icon {
+  height: 64px;
+  margin: 0 1em;
+  padding-top: 13px;
+}
+
+.icon {
+  font-size: 2.5em;
+}
+
+.apps-text {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.apps-text span {
+  font-size: 1em;
+  font-weight: 500;
+  text-transform: uppercase;
+  text-decoration: none!important;
+}
+.apps-text span:nth-child(2n) {
+  color: var(--color-secondary);
+  font-size: 0.8em;
+  text-transform: lowercase;
+}
+
+/* BOOKMARKS */
+
+#links-container {
+  display: grid;
+  flex-wrap: nowrap;
+  grid-column-gap: 20px;
+  grid-row-gap: 0px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: auto;
+}
+
+.links-item {
+  line-height: 1.5rem;
+  margin-left: 1rem;
+  margin-bottom: 2em;
+  webkit-font-smoothing: antialiased;
+}
+
+.links-item a {
+  color: var(--color-primary);
+  display: block;
+  line-height: 2;
+  text-decoration: none;
+  padding-left: .5em;
+  -o-transition: padding .3s;
+  -ms-transition: padding .3s;
+  -moz-transition: padding .3s;
+  -webkit-transition: padding .3s;
+  transition: padding .3s;
+}
+.links-item a:hover {
+  color: var(--color-secondary);
+  padding-left: 1em;
+}
+
+
+/* MOBILE */
+
+@media screen and (max-width: 1100px) {
+  #container {
+    width: 90%;
+  }
+}
+
+@media screen and (max-width: 858px) {
+  #apps-container {
+    grid-template-columns: 1fr 1fr 1fr;
+    width: 90vw;
+  }
+  #links-container	{
+		grid-template-columns: 1fr 1fr 1fr;
+	}
+}
+
+@media screen and (max-width: 666px) {
+  #apps-container {
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    grid-template-columns: 1fr 1fr;
+    width: 90vw;
+  }
+  #links-container{
+		display: grid;
+		flex-wrap: nowrap;
+		grid-column-gap: 20px;
+		grid-row-gap: 0px;
+		grid-template-columns: 1fr 1fr;
+		grid-template-rows: auto;
+	}
+}
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+  color: #fff;
+  opacity: 1; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: #fff;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+  color: #fff;
+}