<commit_before>
// Colors.
@background-color: #DDDDDD;
@primary-color: #C2DC5D;
@secondary-color: #59BBE0;
@error-color: #FF7777;
@navbar-color: @primary-color;

// Sizes.
@grid-width: 20px;

@app-width: 75%;
@app-width-mobile: 95%;
@app-max-width: 800px;
@app-header-max-width: 1000px;
@header-height: 250;
@navbar-height: @grid-width * 2;
@floating-logo-size: 150px;

// Media queries.
@mobile: ~"screen and (max-width: 630px)";
@desktop: ~"screen and (min-width: 630px)";

// Mixins.
.mobile-hide {
  @media @mobile {
    display: none !important;
  }
}

.desktop-hide {
  @media @desktop {
    display: none !important;
  }
}

.--responsive-image-container() {
  overflow: hidden;
  text-align: center;
}

.--responsive-image() {
  position: relative;
  height: 100%;
  min-width: 100%;
  left: 100%;
  margin-left: -200%;
}

// App Styling.
body {
  margin: 0px;
  background-color: @background-color;
}

.app-header {
  max-width: @app-header-max-width;
  margin: auto;
  position: relative;
}

.app-header-image-container {
  height: @header-height - @navbar-height;
  background-color: @primary-color;
}

.login-widget {
  position: absolute;
  right: 0;
  z-index: 1000;
}

.login-window {
  max-width: 500px !important;

  @media @mobile {
    width: @app-width-mobile !important;
  }
}

.login-window-body {
  height: 200px !important;
}

.login-spinner {
  position: relative;
  margin: auto;
  width: 100px;
  height: 100px;
  top: 50px;
}

.login-error-message {
  text-align: center;
  margin-top: @grid-width;
  color: @error-color;
}

.app-navbar, .app-navdrawer {
  background-color: @navbar-color !important;
  height: @navbar-height !important;
  position: relative;

  a {
    text-decoration: none !important;
  }
}

.app-body {
  width: @app-width;
  max-width: @app-max-width;
  margin: auto;

  @media @mobile {
    width: @app-width-mobile;
  }
}

.contact-page {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.contact-page-divider {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.contact-page-form {
  padding-left: 25%;
  padding-right: 25%;

  @media @mobile {
    padding-left: 5%;
    padding-right: 5%;
  }
}

// Post styling.
.app-post {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.post-header-image-container {
  .--responsive-image-container;
  height: 300px;
}

.post-header-image {
  .--responsive-image;
}

// BioCard styling.
@bio-height: 150px;

.app-bio {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.app-bio-image-container {
  .--responsive-image-container;
  width: @bio-height;
  height: @bio-height;
  background-color: @primary-color;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

.app-bio-image {
  .--responsive-image;
}

.app-bio-content {
  width: calc(~"100% -" @bio-height);
  display: inline-block;
  vertical-align: top;
}

// Element edit Button
.edit-container {
  position: relative;
}

.edit-button {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1000;

  button {
    // Override some material-ui styles.
    min-width: 0px !important;
    height: auto !important;
    line-height: inherit !important;

    svg {
      color: @primary-color !important;
    }
  }
}

.floating-buttons {
  position: fixed;
  right: @grid-width;
  bottom: @grid-width;
  z-index: 2000;
}

.floating-button {
  margin-left: @grid-width;
  opacity: 0.5;
  &:hover {
    opacity: 1.0;
  }

  button {
    background-color: @secondary-color !important;
  }
}

// Card Editor.
.card-editor-dialog {
  width: @app-width !important;

  @media @mobile {
    width: @app-width-mobile !important;
  }
}

// Image Selector.
.image-selector-body {
  height: 300px !important;
}

.image-selector-list {
  float: left;
  height: 300px;
  width: 25%;
  overflow-x: hidden;
  overflow-y: scroll;

  @media @mobile {
    width: 100%;
  }
}

.image-selector-preview {
  .--responsive-image-container;
  float: right;
  width: 75%;
  @media @mobile {
    display: none;
  }
}

.image-selector-preview>img{
  .--responsive-image;
}

// Image Gallery
.image-gallery {
  position: relative;
  height: 100%;
  width: 100%;
}

.image-gallery-image {
  .--responsive-image-container;

  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.0;
  transition: opacity 1s ease-in-out;

  img {
    .--responsive-image;
  }
}

.image-gallery-image.active {
  opacity: 1.0;
}

// Floating Logo.
.floating-logo {
  // Position.
  margin-left: @grid-width;
  margin-top: (@header-height - @navbar-height - @floating-logo-size) / 2;
  position: absolute;
  z-index: 10;

  // Size.
  height: @floating-logo-size;
  width: @floating-logo-size;

  // Appearance.
  border-radius: 100% !important;
  overflow: hidden;

  // Flex center content.
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-logo-img {
  width: 90%;
}<commit_msg>Fix navbar and logo styling on mobile<commit_after>
// Colors.
@background-color: #DDDDDD;
@primary-color: #C2DC5D;
@secondary-color: #59BBE0;
@error-color: #FF7777;
@navbar-color: @primary-color;

// Sizes.
@grid-width: 20px;

@app-width: 75%;
@app-width-mobile: 95%;
@app-max-width: 800px;
@app-header-max-width: 1000px;
@header-height: 250;
@navbar-height: @grid-width * 2;
@floating-logo-size: 150px;

// Media queries.
@mobile: ~"screen and (max-width: 630px)";
@desktop: ~"screen and (min-width: 630px)";

// Mixins.
.mobile-hide {
  @media @mobile {
    display: none !important;
  }
}

.desktop-hide {
  @media @desktop {
    display: none !important;
  }
}

.--responsive-image-container() {
  overflow: hidden;
  text-align: center;
}

.--responsive-image() {
  position: relative;
  height: 100%;
  min-width: 100%;
  left: 100%;
  margin-left: -200%;
}

// App Styling.
body {
  margin: 0px;
  background-color: @background-color;
}

.app-header {
  max-width: @app-header-max-width;
  margin: auto;
  position: relative;
}

.app-header-image-container {
  height: @header-height - @navbar-height;
  background-color: @primary-color;
}

.login-widget {
  position: absolute;
  right: 0;
  z-index: 1000;
}

.login-window {
  max-width: 500px !important;

  @media @mobile {
    width: @app-width-mobile !important;
  }
}

.login-window-body {
  height: 200px !important;
}

.login-spinner {
  position: relative;
  margin: auto;
  width: 100px;
  height: 100px;
  top: 50px;
}

.login-error-message {
  text-align: center;
  margin-top: @grid-width;
  color: @error-color;
}

.app-navbar {
  height: @navbar-height !important;
}

.app-navbar, .app-navdrawer {
  background-color: @navbar-color !important;
  position: relative;

  a {
    text-decoration: none !important;
  }
}

.app-body {
  width: @app-width;
  max-width: @app-max-width;
  margin: auto;

  @media @mobile {
    width: @app-width-mobile;
  }
}

.contact-page {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.contact-page-divider {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.contact-page-form {
  padding-left: 25%;
  padding-right: 25%;

  @media @mobile {
    padding-left: 5%;
    padding-right: 5%;
  }
}

// Post styling.
.app-post {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.post-header-image-container {
  .--responsive-image-container;
  height: 300px;
}

.post-header-image {
  .--responsive-image;
}

// BioCard styling.
@bio-height: 150px;

.app-bio {
  margin-top: @grid-width;
  margin-bottom: @grid-width;
}

.app-bio-image-container {
  .--responsive-image-container;
  width: @bio-height;
  height: @bio-height;
  background-color: @primary-color;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

.app-bio-image {
  .--responsive-image;
}

.app-bio-content {
  width: calc(~"100% -" @bio-height);
  display: inline-block;
  vertical-align: top;
}

// Element edit Button
.edit-container {
  position: relative;
}

.edit-button {
  position: absolute;
  right: 5px;
  top: 5px;
  z-index: 1000;

  button {
    // Override some material-ui styles.
    min-width: 0px !important;
    height: auto !important;
    line-height: inherit !important;

    svg {
      color: @primary-color !important;
    }
  }
}

.floating-buttons {
  position: fixed;
  right: @grid-width;
  bottom: @grid-width;
  z-index: 2000;
}

.floating-button {
  margin-left: @grid-width;
  opacity: 0.5;
  &:hover {
    opacity: 1.0;
  }

  button {
    background-color: @secondary-color !important;
  }
}

// Card Editor.
.card-editor-dialog {
  width: @app-width !important;

  @media @mobile {
    width: @app-width-mobile !important;
  }
}

// Image Selector.
.image-selector-body {
  height: 300px !important;
}

.image-selector-list {
  float: left;
  height: 300px;
  width: 25%;
  overflow-x: hidden;
  overflow-y: scroll;

  @media @mobile {
    width: 100%;
  }
}

.image-selector-preview {
  .--responsive-image-container;
  float: right;
  width: 75%;
  @media @mobile {
    display: none;
  }
}

.image-selector-preview>img{
  .--responsive-image;
}

// Image Gallery
.image-gallery {
  .mobile-hide;

  position: relative;
  height: 100%;
  width: 100%;
}

.image-gallery-image {
  .--responsive-image-container;

  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.0;
  transition: opacity 1s ease-in-out;

  img {
    .--responsive-image;
  }
}

.image-gallery-image.active {
  opacity: 1.0;
}

// Floating Logo.
.floating-logo {
  // Position.
  margin-left: @grid-width;
  margin-top: (@header-height - @navbar-height - @floating-logo-size) / 2;
  position: absolute;
  z-index: 10;

  // Size.
  height: @floating-logo-size;
  width: @floating-logo-size;

  // Appearance.
  border-radius: 100% !important;
  overflow: hidden;

  // Flex center content.
  display: flex;
  align-items: center;
  justify-content: center;

  @media @mobile {
    left: 0;
    right: 0;
    margin: auto;
    height: @header-height - @navbar-height;
    width: @header-height - @navbar-height;
  }
}

.floating-logo-img {
  max-height: 100%;
  width: 90%;
}
{'fraction_non_alphanumeric': 0.16826826826826827, 'fraction_numerical': 0.027527527527527528, 'mean_word_length': 2.9599682917162107, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1253104', 'n_tokens_mistral': 4163, 'n_tokens_neox': 3784, 'n_words': 794}